:root{
  --base:#292D34;--base-light:#2F3339;--base-dark:#22252B;
  --accent:#FE7648;--green:#7BC678;
  --mint:#DDEEDD;--mint-dim:rgba(221,238,221,0.45);--mint-faint:rgba(221,238,221,0.15);--mint-ghost:rgba(221,238,221,0.07);
  --shadow-dark:#1C1F24;--shadow-light:#363B43;
  --neu-raised:5px 5px 10px var(--shadow-dark),-5px -5px 10px var(--shadow-light);
  --neu-raised-sm:3px 3px 6px var(--shadow-dark),-3px -3px 6px var(--shadow-light);
  --neu-inset:inset 3px 3px 6px var(--shadow-dark),inset -3px -3px 6px var(--shadow-light);
  --neu-inset-sm:inset 2px 2px 4px var(--shadow-dark),inset -2px -2px 4px var(--shadow-light);
  --radius:14px;--radius-sm:10px;--radius-xs:6px;
  --font:'Nunito',sans-serif;--mono:'IBM Plex Mono',monospace;
  --transition:150ms ease;--knob-size:54px;--glow-accent:rgba(254,118,72,0.35);
}
*{margin:0;padding:0;box-sizing:border-box;}

html{width:100%;height:100%;overflow:hidden;}
body{position:fixed;inset:0;overflow:hidden;background:var(--base);color:var(--mint);font-family:var(--font);font-size:12px;line-height:1.5;-webkit-font-smoothing:antialiased;-webkit-user-select:none;user-select:none;}
input,textarea,select,.inline-ed{-webkit-user-select:text;user-select:text;}
:root.theme-smooth,:root.theme-smooth *{transition:background-color .3s ease,color .3s ease,border-color .3s ease,box-shadow .3s ease,fill .3s ease,stroke .3s ease;}
::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--shadow-light);border-radius:3px;}
::selection{background:var(--accent);color:var(--base);}
button,select,input{font-family:inherit;outline:none;}
button,.nbtn,.btn-gear,.panel-collapse,.tab,.instr-btn,.l-btn,.fx-sw{touch-action:manipulation;}

svg.kti{display:inline-block;width:1em;height:1em;vertical-align:-0.13em;flex-shrink:0;pointer-events:none;overflow:visible;}
.hc-fav-btn svg.kti{width:1.15em;height:1.15em;vertical-align:-0.18em;}
.exp-play-btn svg.kti,.exp-dl-btn svg.kti{width:.9em;height:.9em;vertical-align:-0.1em;margin-right:1px;}
.settings-close svg.kti{width:.85em;height:.85em;vertical-align:-0.08em;}
#tooltip svg.kti{width:.9em;height:.9em;vertical-align:-0.12em;margin-right:2px;}
.hk-conflict-toast svg.kti{width:.9em;height:.9em;vertical-align:-0.12em;margin-right:2px;}
#audio-unlock-banner svg.kti{width:1em;height:1em;vertical-align:-0.12em;margin-right:4px;}
.rrp-play-btn svg.kti,.rec-btn-inner svg.kti{width:.9em;height:.9em;vertical-align:-0.1em;margin-right:1px;}
.export-dialog-head svg.kti{width:1em;height:1em;vertical-align:-0.13em;margin-right:5px;}
.rotate-icon svg.kti{width:2.5em;height:2.5em;vertical-align:middle;}
input[type="range"],.nslider{touch-action:pan-x;}
#topbar,#piano-wrap,.hist-strip{-webkit-overflow-scrolling:touch;}
canvas{display:block;}

body.mode-720{display:flex;align-items:center;justify-content:center;background:#111;}
body.mode-720 #app{position:relative;inset:auto;width:1280px;height:720px;overflow:hidden;flex-shrink:0;padding:8px;border-radius:var(--radius);box-shadow:0 8px 40px rgba(0,0,0,0.6);grid-template-rows:52px 1fr 195px;}
body.mode-720 #topbar{border-radius:var(--radius);}
body.mode-720 #bottombar{border-radius:var(--radius);}
body.mode-720 #sidebar-l{padding:0;}
body.mode-720 #sidebar-r{padding:0;}

#app{display:grid;grid-template-rows:52px 1fr 195px;grid-template-columns:256px 1fr 240px;position:fixed;inset:0;padding:0;gap:8px;background:var(--base);overflow:hidden;}

#topbar{grid-column:1/-1;background:var(--base);box-shadow:var(--neu-raised);border-radius:0 0 var(--radius) var(--radius);display:flex;align-items:center;padding:0 14px;gap:6px;}
.logo{font-family:var(--mono);font-weight:700;font-size:14px;color:var(--accent);letter-spacing:1.5px;display:flex;align-items:center;gap:7px;white-space:nowrap;user-select:none;}
.logo-hex{width:26px;height:26px;background:var(--base);box-shadow:var(--neu-raised-sm);border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--accent);font-size:14px;font-weight:800;}
.divider{width:1px;height:26px;background:var(--mint-ghost);margin:0 4px;flex-shrink:0;}

.nbtn{display:inline-flex;align-items:center;gap:4px;padding:6px 12px;background:var(--base);box-shadow:var(--neu-raised-sm);border:none;border-radius:var(--radius-xs);color:var(--mint-dim);font-size:11px;font-weight:600;cursor:pointer;transition:all var(--transition);white-space:nowrap;letter-spacing:0.3px;}
.nbtn:hover{color:var(--mint);}
.nbtn:active,.nbtn.pressed{box-shadow:var(--neu-inset-sm);color:var(--accent);}
.nbtn.primary{color:var(--accent);}
.nbtn.green{color:var(--green);}
.nbtn.sm{padding:3px 8px;font-size:10px;}
.nbtn kbd{font-family:var(--mono);font-size:8px;padding:1px 3px;background:var(--mint-ghost);border-radius:3px;color:var(--mint-dim);}
.spacer{flex:1;}
.seed-group{display:flex;align-items:center;gap:3px;padding:3px 5px 3px 10px;background:var(--base);box-shadow:var(--neu-inset-sm);border-radius:var(--radius-xs);}

.seed-group label{color:var(--mint-dim);font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:0.8px;}
.seed-group input{background:transparent;border:none;color:var(--accent);font-family:var(--mono);font-size:11px;font-weight:600;width:84px;text-align:center;}
#seed-mod-dot{width:5px;height:5px;border-radius:50%;background:var(--accent);flex-shrink:0;align-self:center;display:none;box-shadow:0 0 5px var(--glow-accent);animation:sdpulse 2s ease-in-out infinite;}
@keyframes sdpulse{0%,100%{opacity:.5}50%{opacity:1}}
.vol-wrap{display:flex;align-items:center;gap:5px;}
.vol-wrap label{color:var(--mint-dim);font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;}
.rec-wrap{display:flex;align-items:center;gap:4px;flex-shrink:0;}
.rec-dur{width:48px;padding:3px 18px 3px 6px;font-size:10px;font-family:var(--mono);}
.rec-btn{min-width:62px;justify-content:center;}
.rec-btn.rec-on{color:#ff9a9a;box-shadow:var(--neu-inset-sm),0 0 0 1px rgba(255,122,122,0.35);animation:recPulse 1s ease-in-out infinite;}
@keyframes recPulse{0%,100%{opacity:1;}50%{opacity:.62;}}
#rec-flash{position:fixed;inset:0;background:#00ff88;opacity:0;pointer-events:none;z-index:9999;}
@keyframes recFlash{0%{opacity:0;}20%{opacity:.15;}100%{opacity:0;}}
#rec-timer{position:fixed;left:50%;top:56px;transform:translateX(-50%);background:var(--base-dark);box-shadow:var(--neu-raised-sm);color:#ff9a9a;padding:4px 12px;border-radius:var(--radius-xs);font-size:12px;font-weight:700;z-index:1000;pointer-events:none;letter-spacing:0.5px;display:none;}
#rec-review-backdrop{position:fixed;inset:0;background:color-mix(in srgb,var(--base-dark) 82%,transparent);backdrop-filter:blur(12px);z-index:900;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity 0.22s ease;pointer-events:none;}
#rec-review-backdrop.open{opacity:1;pointer-events:auto;}
#rec-review-dialog{background:var(--base);box-shadow:var(--neu-raised),0 20px 60px rgba(0,0,0,0.5);border-radius:var(--radius);width:340px;display:flex;flex-direction:column;overflow:hidden;transform:scale(0.94) translateY(12px);transition:transform 0.22s ease;}
#rec-review-backdrop.open #rec-review-dialog{transform:scale(1) translateY(0);}
.rrp-play-btn.playing{color:var(--accent) !important;box-shadow:var(--neu-inset-sm) !important;}

.nslider{-webkit-appearance:none;height:6px;background:var(--base);box-shadow:var(--neu-inset-sm);border-radius:3px;outline:none;width:68px;}
.nslider::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;border-radius:50%;background:var(--base);box-shadow:var(--neu-raised-sm);cursor:pointer;border:2px solid var(--accent);transition:transform var(--transition);}
.nslider::-webkit-slider-thumb:hover{transform:scale(1.1);}
.preset-group{display:flex;gap:3px;align-items:center;}

.preset-slot{width:22px;height:22px;background:var(--base);box-shadow:var(--neu-raised-sm);border:none;border-radius:4px;color:var(--mint-dim);font-size:9px;font-weight:700;cursor:pointer;transition:all var(--transition);display:flex;align-items:center;justify-content:center;font-family:var(--mono);}
.preset-slot:hover{color:var(--mint);}
.preset-slot.has-data{color:var(--accent);}
.preset-slot:active{box-shadow:var(--neu-inset-sm);}

.preset-slot:not(.has-data){background:transparent;box-shadow:inset 0 0 0 1px var(--mint-ghost);color:var(--mint-faint);}
.preset-slot:not(.has-data):hover{box-shadow:inset 0 0 0 1px var(--mint-dim);color:var(--mint-dim);}

.btn-gear{width:30px;height:30px;background:var(--base);box-shadow:var(--neu-raised-sm);border:none;border-radius:var(--radius-xs);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition);}
.btn-gear:hover{box-shadow:var(--neu-raised);}
.btn-gear:active{box-shadow:var(--neu-inset-sm);}
.btn-gear svg{width:15px;height:15px;fill:var(--mint-dim);transition:fill var(--transition);}
.btn-gear:hover svg{fill:var(--accent);}

.panel{background:var(--base);box-shadow:var(--neu-raised);border-radius:var(--radius);margin-bottom:6px;overflow:hidden;}
.panel-h{display:flex;align-items:center;justify-content:space-between;padding:7px 11px;}
.panel-h h3{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--mint-dim);}
.panel-h-right{display:flex;align-items:center;gap:5px;}
.panel-h .count{font-family:var(--mono);font-size:9px;font-weight:600;padding:1px 6px;background:var(--base);box-shadow:var(--neu-inset-sm);border-radius:8px;color:var(--accent);}
.panel-collapse{width:18px;height:18px;background:transparent;border:none;cursor:pointer;color:var(--mint-dim);font-size:10px;display:flex;align-items:center;justify-content:center;transition:all var(--transition);border-radius:3px;}
.panel-collapse:hover{color:var(--accent);}
.panel-b{padding:3px 10px 8px;overflow:hidden;transition:max-height 0.3s ease,padding 0.3s ease;max-height:800px;}

.panel-b-tight-b{padding-bottom:4px;}
.panel-b-tight-t{padding-top:4px;}

.panel.collapsed .panel-b,
.panel.collapsed .panel-b-tight-b,
.panel.collapsed .panel-b-tight-t{max-height:0;padding-top:0;padding-bottom:0;}
.panel-collapse-icon{display:inline-block;transition:transform 0.25s ease;}
.panel.collapsed .panel-collapse-icon{transform:rotate(-90deg);}

#sidebar-l{overflow-y:auto;display:flex;flex-direction:column;background:var(--base);padding:0 0 0 8px;}
#sidebar-r{overflow-y:auto;display:flex;flex-direction:column;background:var(--base);padding:0 8px 0 0;}
/* Panels keep their full height; on a short window the column scrolls instead
   of squeezing every panel and clipping its content (e.g. at 1280x720). */
#sidebar-l>*,#sidebar-r>*{flex-shrink:0;}
#main{background:var(--base);box-shadow:var(--neu-raised);border-radius:var(--radius);display:flex;flex-direction:column;overflow:hidden;}

.tabs{display:flex;gap:0;padding:5px 8px 0;}
.tab{padding:7px 13px;cursor:pointer;color:var(--mint-dim);font-size:11px;font-weight:600;border-radius:var(--radius-xs) var(--radius-xs) 0 0;transition:all var(--transition);letter-spacing:0.3px;background:transparent;border:none;}
.tab:hover{color:var(--mint);}
.tab.active{color:var(--accent);background:var(--base-dark);box-shadow:var(--neu-inset-sm);border-radius:var(--radius-xs);}
.tab-body{display:none;padding:12px 14px;overflow-y:auto;flex:1;background:var(--base-dark);border-radius:0 0 var(--radius-sm) var(--radius-sm);margin:0 4px 4px;box-shadow:var(--neu-inset-sm);}
.tab-body.active{display:block;}

.tab-body.tab-2col{display:none;padding:0;overflow:hidden;flex:1;background:var(--base-dark);border-radius:0 0 var(--radius-sm) var(--radius-sm);margin:0 4px 4px;box-shadow:var(--neu-inset-sm);}
.tab-body.tab-2col.active{display:flex;flex-direction:row;align-items:stretch;}

.tab-2col-left{flex:1 1 0;min-width:0;padding:12px 10px 12px 14px;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:0;border-right:1px solid var(--mint-ghost);}

.tab-2col-right{flex:0 0 48%;max-width:240px;padding:12px 14px 12px 12px;display:flex;flex-direction:column;justify-content:center;gap:0;overflow-y:auto;overflow-x:hidden;}

#tab-chord{padding:0!important;overflow:hidden!important;}
#tab-chord.active{
  display:grid;
  grid-template-columns:230px 1fr 190px;
  grid-template-rows:1fr;
  height:100%;overflow:hidden;
}

.cb-col{display:flex;flex-direction:column;gap:6px;overflow:hidden;padding:8px;}
.cb-col-left  {border-right:1px solid rgba(255,255,255,0.05);}
.cb-col-center{padding:8px 10px;}
.cb-col-right {border-left:1px solid rgba(255,255,255,0.05);}

.cb-section{
  background:var(--base);box-shadow:var(--neu-raised-sm);
  border-radius:var(--radius-sm);padding:9px 11px;
  display:flex;flex-direction:column;gap:7px;flex-shrink:0;
}
.cb-section.grow{flex:1;min-height:0;}

.cb-sec-label{
  font-size:9px;font-weight:800;text-transform:uppercase;
  letter-spacing:0.9px;display:flex;align-items:center;
  gap:5px;color:var(--mint-dim);flex-shrink:0;
}
.cb-sec-label::before{
  content:'';width:3px;height:9px;border-radius:1.5px;
  flex-shrink:0;background:var(--cb-col,var(--accent));
}
.cb-sec-accent {--cb-col:var(--accent);}
.cb-sec-green  {--cb-col:var(--green);}
.cb-sec-blue   {--cb-col:rgba(86,207,225,0.9);}
.cb-sec-purple {--cb-col:var(--purple);}

.cb-rt-wrap{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:start;}
.cb-rt-col{display:flex;flex-direction:column;gap:5px;}
.cb-rt-label{
  font-size:8px;font-weight:800;text-transform:uppercase;
  letter-spacing:0.6px;padding-left:1px;
}

.cb-root-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;}
.cb-root-btn{
  padding:6px 1px;background:var(--base-dark);box-shadow:var(--neu-raised-sm);
  border:none;border-radius:var(--radius-xs);
  color:var(--mint-dim);font-family:var(--mono);font-size:9px;font-weight:700;
  cursor:pointer;transition:all 90ms;text-align:center;
}
.cb-root-btn:hover{color:var(--mint);}
.cb-root-btn.active{
  box-shadow:var(--neu-inset-sm);color:var(--accent);
  text-shadow:0 0 8px var(--glow-accent);
}

.cb-type-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;}
.cb-type-btn{
  padding:6px 2px;background:var(--base-dark);box-shadow:var(--neu-raised-sm);
  border:none;border-radius:var(--radius-xs);
  color:var(--mint-dim);font-family:var(--mono);font-size:9px;font-weight:700;
  cursor:pointer;transition:all 90ms;text-align:center;
}
.cb-type-btn:hover{color:var(--mint);}
.cb-type-btn.active{box-shadow:var(--neu-inset-sm);color:var(--green);}

.cb-oct-row{display:flex;align-items:center;gap:4px;margin-top:1px;}
.cb-oct-row .nbtn{padding:4px 8px;font-size:10px;min-width:24px;justify-content:center;}
.cb-oct-row .cb-dim{min-width:0;font-size:8px;}
#cb-oct-display{
  font-family:var(--mono);font-size:11px;font-weight:800;
  color:var(--accent);min-width:18px;text-align:center;
}

.cb-opt-strip{display:flex;gap:4px;}
.cb-opt-btn{
  flex:1;padding:6px 3px;background:var(--base-dark);box-shadow:var(--neu-raised-sm);
  border:none;border-radius:var(--radius-xs);
  color:var(--mint-dim);font-family:var(--mono);font-size:9px;font-weight:700;
  cursor:pointer;transition:all 90ms;text-align:center;white-space:nowrap;
}
.cb-opt-btn:hover{color:var(--mint);}
.cb-opt-btn.active{box-shadow:var(--neu-inset-sm);color:rgba(86,207,225,0.9);}
.cb-opt-btn:disabled{opacity:.35;cursor:not-allowed;box-shadow:var(--neu-raised-sm);color:var(--mint-dim);}
.cb-opt-btn:disabled:hover{color:var(--mint-dim);}

#cb-voice-list{display:flex;flex-direction:column;gap:5px;}
.cb-voice-row{
  display:grid;grid-template-columns:18px 54px 1fr 1fr 24px;
  align-items:center;gap:7px;
  background:var(--base-dark);border-radius:var(--radius-sm);
  padding:7px 10px;position:relative;overflow:hidden;flex-shrink:0;
}
.cb-voice-row::before{
  content:'';position:absolute;left:0;top:0;bottom:0;
  width:3px;background:var(--vc,var(--accent));
  border-radius:3px 0 0 3px;
}
.cb-voice-row.muted{opacity:.35;}
.cb-vnum{font-family:var(--mono);font-size:10px;font-weight:700;color:var(--mint-dim);text-align:center;}
.cb-vnote{font-family:var(--mono);font-size:11px;font-weight:800;color:var(--mint);line-height:1.2;}
.cb-vint{font-family:var(--mono);font-size:8.5px;color:var(--mint-dim);}
.cb-vsl{display:flex;flex-direction:column;gap:3px;}
.cb-vsl-row{display:flex;align-items:center;gap:4px;}
.cb-vsl-lbl{font-family:var(--mono);font-size:7.5px;color:var(--mint-dim);width:20px;flex-shrink:0;letter-spacing:0.2px;}
.cb-vmute{
  width:24px;height:24px;background:var(--base);box-shadow:var(--neu-raised-sm);
  border:none;border-radius:5px;color:var(--mint-dim);font-size:8.5px;font-weight:800;
  cursor:pointer;transition:all 80ms;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);flex-shrink:0;
}
.cb-vmute.on{box-shadow:var(--neu-inset-sm);color:var(--accent);}

.cb-sep{height:1px;background:rgba(255,255,255,0.05);flex-shrink:0;}
.cb-global-rows{display:flex;flex-direction:column;gap:6px;}
.cb-sl-row{display:flex;align-items:center;gap:7px;}
.cb-dim{color:var(--mint-dim);font-size:8.5px;font-weight:700;font-family:var(--mono);letter-spacing:0.2px;white-space:nowrap;min-width:42px;}
.cb-val{color:var(--mint-dim);font-size:8.5px;font-weight:700;font-family:var(--mono);min-width:30px;text-align:right;white-space:nowrap;}

.cb-chord-badge{
  font-family:var(--mono);font-size:16px;font-weight:800;
  color:var(--accent);text-align:center;letter-spacing:0.5px;
  padding:2px 0 4px;flex-shrink:0;
}
#cb-diagram{display:block;margin:0 auto;flex-shrink:0;}
.cb-play-row{display:flex;gap:5px;flex-shrink:0;}
.cb-play-row .nbtn{flex:1;justify-content:center;padding:8px 6px;font-size:11px;font-weight:700;}
.cb-stagger-row{display:flex;align-items:center;gap:6px;flex-shrink:0;}
.cb-info{font-family:var(--mono);font-size:10px;color:var(--mint-dim);text-align:center;flex-shrink:0;}

.cb-mixer-reset-row{display:flex;justify-content:flex-end;margin-top:7px;flex-shrink:0;}
.cb-mixer-reset{
  font-family:var(--mono);font-size:8.5px;font-weight:700;letter-spacing:0.4px;
  text-transform:uppercase;color:var(--mint-dim);
  background:var(--base);box-shadow:var(--neu-raised-sm);
  border:none;border-radius:var(--radius-xs);padding:5px 12px;
  cursor:pointer;transition:all 90ms;
}
.cb-mixer-reset:hover{color:var(--mint);box-shadow:var(--neu-raised);}
.cb-mixer-reset:active{box-shadow:var(--neu-inset-sm);color:var(--accent);}

.viz-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:5px;flex-shrink:0;}
.viz-box{background:var(--base-dark);border-radius:var(--radius-sm);box-shadow:var(--neu-inset-sm);position:relative;overflow:hidden;height:78px;}
.viz-box canvas{width:100%;height:100%;}
.viz-tag{position:absolute;top:4px;left:7px;font-family:var(--mono);font-size:8px;font-weight:600;color:var(--mint-dim);letter-spacing:0.8px;text-transform:uppercase;pointer-events:none;z-index:2;}

.knob-group{display:inline-flex;flex-direction:column;align-items:center;margin:3px 4px;}
.knob-lbl{font-size:9px;font-weight:600;color:var(--mint-dim);margin-bottom:2px;text-align:center;max-width:56px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-transform:uppercase;letter-spacing:0.3px;}
.knob-body{width:var(--knob-size);height:var(--knob-size);position:relative;cursor:ns-resize;background:var(--base);border-radius:50%;box-shadow:var(--neu-raised-sm);display:flex;align-items:center;justify-content:center;}
.knob-body svg{width:42px;height:42px;}
.knob-val{font-family:var(--mono);font-size:9px;font-weight:500;color:var(--mint-dim);text-align:center;margin-top:2px;min-height:12px;}
.knob-arc-bg{fill:none;stroke:var(--base-dark);stroke-width:5;stroke-linecap:round;}
.knob-arc{fill:none;stroke:var(--accent);stroke-width:5;stroke-linecap:round;}
.knob-dot{fill:var(--accent);}
.knob-center{fill:var(--base);}

.nsel{background:var(--base);box-shadow:var(--neu-inset-sm);color:var(--mint);border:none;padding:5px 10px;border-radius:var(--radius-xs);font-family:var(--font);font-size:11px;font-weight:600;cursor:pointer;outline:none;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23DDEEDD' opacity='0.4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;padding-right:24px;}
.nsel option{background:var(--base);color:var(--mint);}

.layer-row{display:flex;align-items:center;gap:5px;padding:6px 9px;margin-bottom:4px;background:var(--base);box-shadow:var(--neu-raised-sm);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition);}
.layer-row:hover{box-shadow:var(--neu-raised);}
.layer-row.active{box-shadow:var(--neu-inset-sm);}
.layer-row.active .l-num{color:var(--accent);}
.l-num{font-family:var(--mono);font-weight:700;font-size:12px;color:var(--mint-dim);width:13px;}
.l-name{font-size:11px;font-weight:600;flex:1;color:var(--mint-dim);text-transform:capitalize;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.l-btn{width:20px;height:20px;background:var(--base);box-shadow:2px 2px 4px var(--shadow-dark),-2px -2px 4px var(--shadow-light);border:none;border-radius:4px;color:var(--mint-dim);font-size:8px;font-weight:800;cursor:pointer;transition:all var(--transition);display:flex;align-items:center;justify-content:center;}
.l-btn:active{box-shadow:var(--neu-inset-sm);}
.l-btn.muted{color:var(--accent);box-shadow:var(--neu-inset-sm);}
.l-btn.soloed{color:var(--green);box-shadow:var(--neu-inset-sm);}
/* Layer not in the mix right now (empty, muted, or outside the solo set) */
.layer-row.silent .l-num,.layer-row.silent .l-name{opacity:.4;}

.fx-row{display:flex;align-items:center;gap:7px;padding:6px 9px;margin-bottom:3px;background:var(--base);box-shadow:var(--neu-raised-sm);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition);}
.fx-row:hover{box-shadow:var(--neu-raised);}
.fx-row.on{box-shadow:var(--neu-inset-sm);}
.fx-row.on .fx-name{color:var(--green);}
.fx-sw{width:28px;height:15px;background:var(--base);box-shadow:var(--neu-inset-sm);border:none;border-radius:8px;position:relative;cursor:pointer;flex-shrink:0;}
.fx-sw::after{content:'';position:absolute;width:11px;height:11px;border-radius:50%;background:var(--mint-dim);top:2px;left:2px;transition:all var(--transition);box-shadow:1px 1px 2px var(--shadow-dark);}
.fx-sw.on::after{left:15px;background:var(--green);}
.fx-name{font-size:11px;font-weight:600;flex:1;color:var(--mint-dim);}

.fx-edit-cue{width:13px;height:13px;color:var(--mint-faint);opacity:0;transition:opacity var(--transition),color var(--transition);flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.fx-edit-cue svg{width:100%;height:100%;}
.fx-row:hover .fx-edit-cue{opacity:.85;color:var(--accent);}
.fx-row.editing .fx-edit-cue{opacity:1;color:var(--accent);}

.instr-tabs{display:flex;gap:3px;margin-bottom:7px;}
.instr-tab{flex:1;padding:5px 4px;background:var(--base);box-shadow:var(--neu-raised-sm);border:none;border-radius:var(--radius-xs);color:var(--mint-dim);font-size:9px;font-weight:700;cursor:pointer;text-transform:uppercase;letter-spacing:0.5px;transition:all var(--transition);font-family:var(--font);}
.instr-tab:hover{color:var(--mint);}
.instr-tab.active{box-shadow:var(--neu-inset-sm);color:var(--accent);}
.instr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;}

.eng-tab-split{display:flex;flex-direction:row;align-items:stretch;gap:0;width:100%;min-height:100%;}
.eng-left{flex:1 1 0;min-width:0;overflow-y:auto;overflow-x:hidden;padding:0;}

.eng-right{flex:0 0 46%;max-width:280px;border-left:1px solid var(--mint-ghost);display:flex;flex-direction:column;justify-content:center;padding:8px 8px 8px 10px;overflow:hidden;min-height:inherit;}
.eng-right:empty{display:none;}

#tab-engine.active{display:flex;flex-direction:column;padding:0;overflow:hidden;}

.eng-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:1px 0 4px;}
.eng-tile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:5px 2px 4px;background:var(--base);box-shadow:var(--neu-raised-sm);border:none;border-radius:var(--radius-sm);color:var(--mint-dim);font-family:var(--font);font-size:8px;font-weight:700;letter-spacing:0.3px;cursor:pointer;transition:all 120ms ease;user-select:none;}
.eng-tile:hover{color:var(--mint);box-shadow:var(--neu-raised);}
.eng-tile.active-eng{box-shadow:var(--neu-inset-sm),0 0 10px var(--glow-accent);color:var(--accent);}
.eng-tile svg{width:15px;height:15px;flex-shrink:0;opacity:.75;transition:opacity 120ms ease;}
.eng-tile.active-eng svg{opacity:1;}
.eng-tile-lbl{font-size:7.5px;letter-spacing:0.3px;text-transform:uppercase;}

.instr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;}
.instr-tile{display:flex;align-items:center;justify-content:center;padding:5px 3px;background:var(--base);box-shadow:var(--neu-raised-sm);border:none;border-radius:var(--radius-sm);color:var(--mint-dim);font-family:var(--font);font-size:8px;font-weight:700;letter-spacing:0.2px;cursor:pointer;transition:all 120ms ease;text-align:center;user-select:none;min-height:26px;}
.instr-tile:hover{color:var(--mint);box-shadow:var(--neu-raised);}
.instr-tile.active-instr{box-shadow:var(--neu-inset-sm),0 0 8px var(--glow-accent);color:var(--accent);}
.instr-tile-lbl{font-size:7.5px;text-transform:uppercase;letter-spacing:0.3px;}

.instr-btn{padding:5px 3px;background:var(--base);box-shadow:var(--neu-raised-sm);border:none;border-radius:var(--radius-xs);color:var(--mint-dim);font-size:9px;font-weight:600;cursor:pointer;transition:all var(--transition);text-align:center;letter-spacing:0.2px;}
.instr-btn:hover{color:var(--mint);}
.instr-btn.active-instr{box-shadow:var(--neu-inset-sm),0 0 8px var(--glow-accent),0 0 14px var(--glow-accent);color:var(--accent);}
.instr-tabs{display:flex;gap:3px;margin-bottom:7px;}
.instr-tab{flex:1;padding:5px 4px;background:var(--base);box-shadow:var(--neu-raised-sm);border:none;border-radius:var(--radius-xs);color:var(--mint-dim);font-size:9px;font-weight:700;cursor:pointer;text-transform:uppercase;letter-spacing:0.5px;transition:all var(--transition);font-family:var(--font);}
.instr-tab:hover{color:var(--mint);}
.instr-tab.active{box-shadow:var(--neu-inset-sm);color:var(--accent);}
.instr-btn{padding:5px 3px;background:var(--base);box-shadow:var(--neu-raised-sm);border:none;border-radius:var(--radius-xs);color:var(--mint-dim);font-size:9px;font-weight:600;cursor:pointer;transition:all var(--transition);text-align:center;letter-spacing:0.2px;}
.instr-btn:hover{color:var(--mint);}
.instr-btn:active{box-shadow:var(--neu-inset-sm);color:var(--accent);}
.instr-btn.active-instr{box-shadow:var(--neu-inset-sm),0 0 8px var(--glow-accent),0 0 14px var(--glow-accent);color:var(--accent);}

.sec-title{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.8px;color:var(--mint-dim);padding:7px 0 5px;display:flex;align-items:center;gap:7px;}
.sec-title::before{content:'';width:3px;height:11px;background:var(--accent);border-radius:2px;flex-shrink:0;}
.sec-title.green::before{background:var(--green);}

.adsr-cv{width:100%;height:108px;background:var(--base);box-shadow:var(--neu-inset-sm);border-radius:var(--radius-sm);cursor:crosshair;}
.p-row{display:flex;flex-wrap:wrap;align-items:flex-start;gap:2px;}
.flex-r{display:flex;align-items:center;gap:7px;}
.mt-6{margin-top:6px;}.mt-10{margin-top:10px;}.mb-6{margin-bottom:6px;}.mb-10{margin-bottom:10px;}.w-full{width:100%;}

#bottombar{grid-column:1/-1;background:var(--base);box-shadow:var(--neu-raised);border-radius:var(--radius) var(--radius) 0 0;display:flex;flex-direction:column;overflow:hidden;}
#hist-section{display:flex;flex-direction:column;overflow:hidden;flex:1;min-height:0;}
.hist-head{display:flex;align-items:center;gap:8px;padding:3px 12px;flex-shrink:0;}
.hist-head h3{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--mint-dim);}
.hist-strip{display:flex;gap:5px;padding:3px 8px 7px;overflow-x:auto;flex:1;}
.hist-card{min-width:138px;max-width:138px;background:var(--base);box-shadow:var(--neu-raised-sm);border-radius:var(--radius-sm);cursor:pointer;display:flex;flex-direction:column;padding:4px 7px;transition:all var(--transition);flex-shrink:0;}
.hist-card:hover{box-shadow:var(--neu-raised);}
.hist-card.active{box-shadow:var(--neu-inset-sm);}
.hist-card.active .hc-name{color:var(--accent);}
.hc-wave{width:100%;height:38px;background:var(--base-dark);border-radius:6px;box-shadow:var(--neu-inset-sm);margin-bottom:4px;overflow:hidden;}
.hc-wave canvas{width:100%;height:100%;}
.hc-name{font-size:11px;font-weight:700;color:var(--mint-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.4;}
.hc-seed{font-family:var(--mono);font-size:10px;color:var(--mint-dim);line-height:1.3;letter-spacing:0.3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hc-meta{display:flex;align-items:center;justify-content:space-between;margin-top:2px;}
.hc-tag{font-size:9px;font-weight:600;color:var(--green);text-transform:uppercase;letter-spacing:0.3px;}
.hc-fav-btn{background:none;border:none;cursor:pointer;color:var(--mint-faint);font-size:11px;padding:0;line-height:1;transition:color var(--transition);}
.hc-fav-btn:hover{color:var(--accent);}
.hist-card.fav .hc-fav-btn{color:var(--accent);}

#piano-section{display:flex;align-items:center;justify-content:center;gap:8px;padding:4px 10px;background:var(--base-dark);flex-shrink:0;height:76px;border-top:1px solid var(--mint-ghost);overflow:hidden;}
.piano-oct-ctrl{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;flex-shrink:0;align-self:stretch;box-sizing:border-box;padding:3px 0;overflow:hidden;}
.piano-oct-lbl{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--mint-dim);text-align:center;letter-spacing:0.5px;flex-shrink:0;}
.piano-oct-ctrl .nbtn.sm{position:relative;flex-shrink:0;min-height:0;}
.piano-oct-ctrl .nbtn.sm .oct-hotkey-hint{position:absolute;left:calc(100% + 6px);top:50%;transform:translateY(-50%);background:var(--base-dark);color:var(--mint-faint);font-family:var(--mono);font-size:8px;font-weight:700;letter-spacing:.3px;padding:2px 5px;border-radius:3px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s;box-shadow:var(--neu-raised-sm);}
.piano-oct-ctrl:hover .nbtn.sm .oct-hotkey-hint{opacity:1;}
#piano-wrap{overflow-x:auto;flex:1;display:flex;align-items:flex-end;justify-content:center;height:68px;scrollbar-width:thin;scrollbar-color:var(--shadow-light) transparent;}
#piano-right-ctrl{display:flex;flex-direction:column;justify-content:center;gap:8px;flex-shrink:0;padding-left:4px;}
.pkr-row{display:flex;align-items:center;gap:8px;}

.pkr-lbl{font-family:var(--mono);font-size:9px;font-weight:700;text-transform:uppercase;color:var(--mint-dim);letter-spacing:.5px;white-space:nowrap;width:38px;}

.pkr-keys-toggle{display:flex;background:var(--base-dark);box-shadow:var(--neu-inset-sm);border-radius:var(--radius-sm);padding:2px;gap:2px;}
.pkr-keys-opt{padding:4px 10px;background:transparent;border:none;border-radius:var(--radius-xs);color:var(--mint-dim);font-size:9px;font-weight:700;cursor:pointer;text-align:center;transition:all var(--transition);font-family:var(--mono);text-transform:uppercase;letter-spacing:.5px;white-space:nowrap;}
.pkr-keys-opt.active{background:var(--base);box-shadow:var(--neu-raised-sm);color:var(--accent);}
.pkr-keys-opt:hover:not(.active){color:var(--mint);}

.pkr-dd-wrap{position:relative;}
.pkr-dd-btn{display:flex;align-items:center;gap:6px;padding:4px 10px;background:var(--base);box-shadow:var(--neu-raised-sm);border:none;border-radius:var(--radius-xs);color:var(--mint-dim);font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.4px;cursor:pointer;white-space:nowrap;transition:all var(--transition);outline:none;}
.pkr-dd-btn:hover{color:var(--mint);}
.pkr-dd-btn.open{box-shadow:var(--neu-inset-sm);color:var(--accent);}
.pkr-dd-btn svg{flex-shrink:0;opacity:.45;transition:transform var(--transition);}
.pkr-dd-btn.open svg{transform:rotate(180deg);opacity:.7;}
.pkr-dd-panel{position:fixed;background:var(--base);box-shadow:var(--neu-raised),0 8px 24px rgba(0,0,0,0.35);border-radius:var(--radius-sm);padding:3px;display:flex;flex-direction:column;gap:2px;min-width:130px;z-index:9999;opacity:0;pointer-events:none;transform:translateY(6px) scale(0.97);transform-origin:bottom right;transition:opacity .15s ease,transform .15s ease;}
.pkr-dd-panel.open{opacity:1;pointer-events:auto;transform:translateY(0) scale(1);}
.pkr-dd-opt{padding:6px 10px;background:transparent;border:none;border-radius:var(--radius-xs);color:var(--mint-dim);font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.35px;cursor:pointer;text-align:left;width:100%;transition:all var(--transition);white-space:nowrap;}
.pkr-dd-opt:hover{background:var(--base-light);color:var(--mint);}
.pkr-dd-opt.active{color:var(--accent);background:var(--base-dark);box-shadow:var(--neu-inset-sm);}

.csel-wrap{position:relative;display:inline-flex;vertical-align:middle;}
.csel-wrap select{position:absolute;opacity:0;pointer-events:none;width:0;height:0;overflow:hidden;}
.csel-btn{display:inline-flex;align-items:center;gap:5px;padding:5px 8px 5px 10px;background:var(--base);box-shadow:var(--neu-inset-sm);border:none;border-radius:var(--radius-xs);color:var(--mint);font-family:var(--font);font-size:11px;font-weight:600;cursor:pointer;white-space:nowrap;transition:all var(--transition);outline:none;}
.csel-btn:hover{box-shadow:var(--neu-raised-sm);color:var(--mint);}
.csel-btn.open{color:var(--accent);}
.csel-btn .csel-arrow{flex-shrink:0;opacity:.4;transition:transform var(--transition);}
.csel-btn.open .csel-arrow{transform:rotate(180deg);opacity:.7;}
.csel-panel{position:fixed;background:var(--base);box-shadow:var(--neu-raised),0 8px 28px rgba(0,0,0,0.4);border-radius:var(--radius-sm);padding:3px;display:flex;flex-direction:column;gap:1px;min-width:110px;z-index:9998;opacity:0;pointer-events:none;transform:translateY(-4px) scale(0.97);transform-origin:top left;transition:opacity .14s ease,transform .14s ease;}
.csel-panel.open{opacity:1;pointer-events:auto;transform:translateY(0) scale(1);}
.csel-opt{padding:6px 12px;background:transparent;border:none;border-radius:var(--radius-xs);color:var(--mint-dim);font-family:var(--font);font-size:11px;font-weight:600;cursor:pointer;text-align:left;width:100%;transition:all var(--transition);white-space:nowrap;}
.csel-opt:hover{background:var(--base-light);color:var(--mint);}
.csel-opt.active{color:var(--accent);background:var(--base-dark);box-shadow:var(--neu-inset-sm);}
.csel-btn.csel-sm{font-size:10px;padding:4px 6px 4px 8px;}

.piano-88{position:relative;height:76px;flex-shrink:0;}
.pk-w88{position:absolute;background:linear-gradient(180deg,color-mix(in srgb,var(--mint) 28%,#efefef) 0%,color-mix(in srgb,var(--mint) 16%,#f5f5f5) 60%,color-mix(in srgb,var(--mint) 8%,#f9f9f9) 100%);border-radius:0 0 4px 4px;cursor:pointer;z-index:1;transition:background 60ms;box-shadow:1px 0 0 rgba(0,0,0,0.15),inset 0 -3px 6px rgba(0,0,0,0.08);}
.pk-w88:hover{background:linear-gradient(180deg,color-mix(in srgb,var(--mint) 42%,#d8d8d8) 0%,color-mix(in srgb,var(--mint) 32%,#e6e6e6) 100%);}
.pk-w88.pressed{background:linear-gradient(180deg,var(--accent) 0%,color-mix(in srgb,var(--accent) 65%,transparent) 100%) !important;}
.pk-b88{position:absolute;background:linear-gradient(180deg,var(--base-dark) 0%,color-mix(in srgb,var(--shadow-light) 50%,var(--base-dark)) 70%,color-mix(in srgb,var(--shadow-light) 72%,var(--base-dark)) 100%);border-radius:0 0 3px 3px;cursor:pointer;z-index:2;transition:background 60ms;box-shadow:0 4px 8px rgba(0,0,0,0.6),inset 0 -2px 4px rgba(255,255,255,0.04);}
.pk-b88:hover{background:linear-gradient(180deg,color-mix(in srgb,var(--shadow-light) 18%,var(--base-dark)) 0%,color-mix(in srgb,var(--shadow-light) 44%,var(--base-dark)) 100%);}
.pk-b88.pressed{background:linear-gradient(180deg,var(--accent) 0%,color-mix(in srgb,var(--accent) 80%,transparent) 100%) !important;}

@keyframes pk-hl-w{
  0%  {background:linear-gradient(180deg,var(--green) 0%,color-mix(in srgb,var(--green) 65%,transparent) 100%);}
  75% {background:linear-gradient(180deg,var(--green) 0%,color-mix(in srgb,var(--green) 65%,transparent) 100%);}
  100%{background:linear-gradient(180deg,color-mix(in srgb,var(--mint) 28%,#efefef) 0%,color-mix(in srgb,var(--mint) 16%,#f5f5f5) 60%,color-mix(in srgb,var(--mint) 8%,#f9f9f9) 100%);}
}
@keyframes pk-hl-b{
  0%  {background:linear-gradient(180deg,var(--green) 0%,color-mix(in srgb,var(--green) 80%,transparent) 100%);}
  75% {background:linear-gradient(180deg,var(--green) 0%,color-mix(in srgb,var(--green) 80%,transparent) 100%);}
  100%{background:linear-gradient(180deg,var(--base-dark) 0%,color-mix(in srgb,var(--shadow-light) 50%,var(--base-dark)) 70%,color-mix(in srgb,var(--shadow-light) 72%,var(--base-dark)) 100%);}
}
@keyframes pk-chip-life{
  0%  {opacity:0;transform:translateX(-50%) translateY(4px);}
  8%  {opacity:1;transform:translateX(-50%) translateY(0);}
  72% {opacity:1;transform:translateX(-50%) translateY(0);}
  100%{opacity:0;transform:translateX(-50%) translateY(-3px);}
}
.pk-w88.pk-synth-hl{
  animation:pk-hl-w var(--hl-dur,0.9s) ease-in-out forwards;
}
.pk-b88.pk-synth-hl{
  animation:pk-hl-b var(--hl-dur,0.9s) ease-in-out forwards;
  z-index:3;
}

.pk-note-chip{
  position:absolute;
  bottom:5px;left:50%;transform:translateX(-50%);
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:7px;font-weight:800;letter-spacing:.3px;
  color:rgba(0,0,0,0.6);
  background:rgba(255,255,255,0.76);
  border-radius:2px;padding:1px 3px;
  min-width:10px;
  pointer-events:none;line-height:1;
  white-space:nowrap;
  z-index:4;
  user-select:none;
  animation:pk-chip-life var(--hl-dur,0.9s) ease-in-out forwards;
}
.pk-b88 .pk-note-chip{
  bottom:4px;font-size:6px;padding:1px 2px;letter-spacing:0;
  color:#fff;
  background:rgba(30,30,36,0.82);
  border:1px solid rgba(255,255,255,0.22);
  border-radius:2px;
}
.pk-w88.pressed .pk-note-chip,
.pk-b88.pressed .pk-note-chip{display:none;}

.pk-w88,.pk-b88{touch-action:none;}

.pk-oct-lbl{
  position:absolute;
  top:3px;left:2px;
  font-size:7px;font-family:var(--mono);font-weight:700;
  color:rgba(0,0,0,0.35);
  pointer-events:none;
  user-select:none;
  white-space:nowrap;
  z-index:3;
  line-height:1;
  transition:opacity .15s;
}

#piano-wrap.oct-lbl-bottom .pk-oct-lbl{
  top:auto;
  bottom:5px;
  left:50%;
  transform:translateX(-50%);
}

.pk-oct-lbl.conflict-hidden{
  opacity:0;
  pointer-events:none;
}

.pk-kbd-hint{
  position:absolute;
  bottom:5px;left:50%;transform:translateX(-50%);
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:7px;font-weight:800;letter-spacing:.3px;
  color:rgba(0,0,0,0.6);
  background:rgba(255,255,255,0.76);
  border-radius:2px;padding:1px 3px;
  min-width:10px;
  pointer-events:none;line-height:1;
  white-space:nowrap;
  z-index:4;
  transition:opacity .15s;
  user-select:none;
}

.pk-b88 .pk-kbd-hint{
  bottom:4px;
  font-size:6px;
  color:#fff;
  background:rgba(30,30,36,0.82);
  border:1px solid rgba(255,255,255,0.22);
  border-radius:2px;
  padding:1px 2px;
  letter-spacing:0;
}
.pk-w88.pressed .pk-kbd-hint,
.pk-b88.pressed .pk-kbd-hint,
.pk-w88.pressed .pk-oct-lbl{opacity:0;}

.export-backdrop{position:fixed;inset:0;background:color-mix(in srgb,var(--base-dark) 82%,transparent);backdrop-filter:blur(12px);z-index:900;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity 0.22s ease;pointer-events:none;}
.export-backdrop.open{opacity:1;pointer-events:auto;}
.export-dialog{background:var(--base);box-shadow:var(--neu-raised),0 20px 60px rgba(0,0,0,0.5);border-radius:var(--radius);width:500px;display:flex;flex-direction:column;overflow:hidden;transform:scale(0.94) translateY(12px);transition:transform 0.22s ease;}
.export-backdrop.open .export-dialog{transform:scale(1) translateY(0);}
.export-dialog-head{display:flex;align-items:center;padding:14px 18px;border-bottom:1px solid var(--mint-ghost);}
.export-dialog-head h3{font-size:13px;font-weight:700;color:var(--mint);flex:1;}
.export-dialog-body{padding:16px 18px;display:flex;flex-direction:column;gap:14px;}
.export-opts{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.export-opt{background:var(--base-dark);box-shadow:var(--neu-inset-sm);border-radius:var(--radius-sm);padding:14px;display:flex;flex-direction:column;gap:10px;}
.export-opt-title{font-size:11px;font-weight:700;color:var(--mint-dim);text-transform:uppercase;letter-spacing:0.8px;}
.export-opt-desc{font-size:10px;color:var(--mint-dim);line-height:1.5;}
.export-opt-btns{display:flex;gap:6px;}
.exp-play-btn{flex:1;padding:7px 10px;background:var(--base);box-shadow:var(--neu-raised-sm);border:none;border-radius:var(--radius-xs);color:var(--green);font-size:10px;font-weight:700;cursor:pointer;transition:all var(--transition);font-family:var(--font);}
.exp-play-btn:hover{box-shadow:var(--neu-raised);}
.exp-play-btn:active{box-shadow:var(--neu-inset-sm);}
.exp-dl-btn{flex:1;padding:7px 10px;background:var(--base);box-shadow:var(--neu-raised-sm);border:none;border-radius:var(--radius-xs);color:var(--accent);font-size:10px;font-weight:700;cursor:pointer;transition:all var(--transition);font-family:var(--font);}
.exp-dl-btn:hover{box-shadow:var(--neu-raised);}
.exp-dl-btn:active{box-shadow:var(--neu-inset-sm);}
.exp-dl-btn.loading,.nbtn.loading{opacity:.6;pointer-events:none;box-shadow:var(--neu-inset-sm)!important;cursor:wait;}
@keyframes expSpin{to{transform:rotate(360deg)}}
.exp-dl-btn.loading::before,.nbtn.loading::before{content:'';display:inline-block;width:8px;height:8px;border:1.5px solid currentColor;border-top-color:transparent;border-radius:50%;animation:expSpin .7s linear infinite;margin-right:5px;vertical-align:middle;}
.export-dialog-foot{padding:0 18px 16px;display:flex;justify-content:center;}

/* ── Filename row — sits between option cards and the Cancel button ─────── */
/* Visually a single neumorphic "tray" that contains the input, the .wav    */
/* suffix label, and a square dice button to re-roll the random name.       */
.export-filename-row{display:flex;flex-direction:column;gap:6px;}
.export-filename-label{font-size:9px;font-weight:700;color:var(--mint-dim);text-transform:uppercase;letter-spacing:0.8px;padding-left:2px;}
.export-filename-input-wrap{display:flex;align-items:stretch;background:var(--base-dark);box-shadow:var(--neu-inset-sm);border-radius:var(--radius-sm);padding:3px;gap:3px;}
.export-filename-input{flex:1;min-width:0;background:transparent;border:none;outline:none;color:var(--accent);font-family:var(--mono);font-size:11px;font-weight:600;padding:6px 8px;letter-spacing:0.2px;}
.export-filename-input::placeholder{color:var(--mint-faint);font-weight:500;}
.export-filename-input::selection{background:color-mix(in srgb,var(--accent) 30%,transparent);}
.export-filename-ext{display:flex;align-items:center;padding:0 6px;color:var(--mint-dim);font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:0.4px;user-select:none;opacity:0.7;}
.export-filename-dice{width:30px;display:flex;align-items:center;justify-content:center;background:var(--base);box-shadow:var(--neu-raised-sm);border:none;border-radius:var(--radius-xs);color:var(--green);cursor:pointer;transition:all var(--transition);padding:0;}
.export-filename-dice:hover{box-shadow:var(--neu-raised);color:var(--accent);}
.export-filename-dice:active{box-shadow:var(--neu-inset-sm);transform:scale(0.96);}
.export-filename-dice svg{width:13px;height:13px;}

.toggle3{display:flex;background:var(--base-dark);box-shadow:var(--neu-inset-sm);border-radius:var(--radius-sm);padding:2px;gap:2px;}
.toggle3-opt{flex:1;padding:5px 6px;background:transparent;border:none;border-radius:var(--radius-xs);color:var(--mint-dim);font-size:9px;font-weight:700;cursor:pointer;text-align:center;transition:all var(--transition);font-family:var(--font);text-transform:uppercase;letter-spacing:0.4px;white-space:nowrap;}
.toggle3-opt.active{background:var(--base);box-shadow:var(--neu-raised-sm);color:var(--accent);}
.toggle3-opt:hover:not(.active){color:var(--mint);}

.inline-ed{background:var(--base-dark);box-shadow:var(--neu-inset-sm);border:none;color:var(--accent);font-family:var(--mono);font-size:10px;font-weight:600;width:44px;text-align:center;border-radius:4px;padding:2px;}
.filter-cv{width:100%;height:62px;background:var(--base);box-shadow:var(--neu-inset-sm);border-radius:var(--radius-sm);margin-bottom:7px;}

.batch-grid{display:flex;flex-wrap:wrap;gap:5px;}
.batch-item{width:88px;height:54px;background:var(--base);box-shadow:var(--neu-raised-sm);border-radius:var(--radius-sm);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:all var(--transition);}
.batch-item:hover{box-shadow:var(--neu-raised);}
.batch-item.sel{box-shadow:var(--neu-inset-sm);}
.batch-item.sel .bi-name{color:var(--green);}
.bi-name{font-size:9px;font-weight:600;color:var(--mint-dim);}
.bi-seed{font-family:var(--mono);font-size:10px;color:var(--mint-dim);}

.settings-backdrop{position:fixed;inset:0;background:color-mix(in srgb,var(--base-dark) 72%,transparent);backdrop-filter:blur(10px);z-index:800;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity 0.2s ease;pointer-events:none;}
.settings-backdrop.open{opacity:1;pointer-events:auto;}
.settings-modal{background:var(--base);box-shadow:var(--neu-raised),0 20px 60px rgba(0,0,0,0.5);border-radius:var(--radius);width:620px;max-height:80vh;display:flex;flex-direction:column;overflow:hidden;transform:scale(0.94) translateY(10px);transition:transform 0.22s ease;}
.settings-backdrop.open .settings-modal{transform:scale(1) translateY(0);}
.settings-modal-head{display:flex;align-items:center;padding:14px 18px;border-bottom:1px solid var(--mint-ghost);}
.settings-modal-head h2{font-size:13px;font-weight:700;color:var(--mint);flex:1;letter-spacing:0.5px;}
.settings-close{width:26px;height:26px;background:var(--base);box-shadow:var(--neu-raised-sm);border:none;border-radius:6px;cursor:pointer;color:var(--mint-dim);font-size:14px;display:flex;align-items:center;justify-content:center;transition:all var(--transition);}
.settings-close:hover{color:var(--accent);}
.settings-tabs{display:flex;padding:10px 16px 0;gap:0;}
.settings-tab{padding:7px 14px;cursor:pointer;color:var(--mint-dim);font-size:11px;font-weight:600;border-radius:var(--radius-xs) var(--radius-xs) 0 0;transition:all var(--transition);background:transparent;border:none;}
.settings-tab.active{color:var(--accent);background:var(--base-dark);box-shadow:var(--neu-inset-sm);}
.settings-tab:hover{color:var(--mint);}
.settings-pane{display:none;padding:14px 16px;overflow-y:auto;flex:1;background:var(--base-dark);box-shadow:var(--neu-inset-sm);margin:0 6px 8px;border-radius:var(--radius-sm);max-height:400px;}
.settings-pane.active{display:block;}
.set-row{display:flex;align-items:center;gap:10px;padding:7px 0;}
.set-row+.set-row{border-top:1px solid var(--mint-ghost);}
.set-lbl{font-size:11px;font-weight:600;color:var(--mint-dim);flex:1;}
.set-desc{font-size:9px;color:var(--mint-faint);margin-top:2px;}
.set-val{font-family:var(--mono);font-size:11px;color:var(--mint-faint);}

.hk-group-title{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--mint-faint);padding:10px 0 4px;display:flex;align-items:center;gap:6px;}
.hk-group-title::before{content:'';width:2px;height:9px;background:var(--accent);border-radius:2px;flex-shrink:0;}
.hk-row{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid var(--mint-ghost);}
.hk-row:last-child{border-bottom:none;}
.hk-label{font-size:11px;font-weight:600;color:var(--mint-dim);flex:1;min-width:0;}
.hk-badge{font-family:var(--mono);font-size:10px;font-weight:700;padding:3px 9px;background:var(--base);box-shadow:var(--neu-raised-sm);border-radius:var(--radius-xs);color:var(--mint);white-space:nowrap;min-width:68px;text-align:center;letter-spacing:.3px;}
.hk-badge.empty{color:var(--mint-faint);font-style:italic;}
.hk-cap-btn{padding:4px 10px;background:var(--base);box-shadow:var(--neu-raised-sm);border:none;border-radius:var(--radius-xs);color:var(--mint-dim);font-family:var(--mono);font-size:9px;font-weight:700;cursor:pointer;letter-spacing:.4px;transition:all var(--transition);white-space:nowrap;}
.hk-cap-btn:hover{color:var(--mint);box-shadow:var(--neu-raised);}
.hk-cap-btn.capturing{box-shadow:var(--neu-inset-sm);color:var(--accent);animation:hkPulse 1s ease-in-out infinite;}
.hk-clear-btn{width:22px;height:22px;background:transparent;border:none;cursor:pointer;color:var(--mint-faint);font-size:12px;border-radius:3px;display:flex;align-items:center;justify-content:center;transition:color var(--transition);}
.hk-clear-btn:hover{color:var(--accent);}
@keyframes hkPulse{0%,100%{opacity:1;}50%{opacity:.5;}}
.hk-conflict-toast{display:none;margin:6px 0 2px;padding:7px 10px;background:color-mix(in srgb,var(--accent) 12%,transparent);border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);border-radius:var(--radius-xs);color:var(--accent);font-size:10px;font-weight:600;line-height:1.4;}
.hk-conflict-toast.visible{display:block;}

.pkr-dd-opt.layout-blocked{opacity:0.4;cursor:not-allowed;position:relative;}
.pkr-dd-opt.layout-blocked:hover{color:var(--mint-dim);background:transparent;}
.pkr-dd-opt.layout-blocked::after{content:'⊘';position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:10px;color:var(--accent);opacity:0.9;}
.pkr-dd-opt.layout-blocked.active{box-shadow:none;color:var(--mint-faint);}
.hk-piano-warn{display:inline-flex;align-items:center;gap:3px;font-family:var(--mono);font-size:8px;font-weight:700;color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);border-radius:3px;padding:1px 5px;white-space:nowrap;margin-left:2px;}
.hk-piano-warn svg{flex-shrink:0;}
.hk-guard-row{padding:10px 0 6px;border-bottom:1px solid var(--mint-ghost);}
.hk-guard-row .set-lbl{font-size:11px;font-weight:600;color:var(--mint-dim);flex:1;}
.hk-guard-row .set-desc{font-size:9px;color:var(--mint-faint);margin-top:2px;line-height:1.45;}
.layout-blocked-popover{position:fixed;z-index:10000;background:var(--base);box-shadow:var(--neu-raised),0 8px 28px rgba(0,0,0,0.45);border-radius:var(--radius-sm);padding:10px 13px;min-width:200px;max-width:280px;pointer-events:none;opacity:0;transition:opacity .15s ease;transform:translateY(4px);border-left:3px solid var(--accent);}
.layout-blocked-popover.show{opacity:1;pointer-events:auto;transform:translateY(0);}
.layout-blocked-popover-title{font-size:10px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.6px;margin-bottom:6px;display:flex;align-items:center;gap:5px;}
.layout-blocked-popover-item{font-size:10px;font-weight:600;color:var(--mint-dim);padding:2px 0;display:flex;align-items:center;gap:6px;}
.layout-blocked-popover-key{font-family:var(--mono);font-size:9px;font-weight:700;background:var(--base-dark);box-shadow:var(--neu-inset-sm);border-radius:3px;padding:1px 6px;color:var(--mint);flex-shrink:0;}
.layout-blocked-popover-footer{font-size:9px;color:var(--mint-faint);margin-top:8px;padding-top:7px;border-top:1px solid var(--mint-ghost);line-height:1.45;}
.theme-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:6px 0;}
.theme-card{padding:10px 8px;background:var(--base);box-shadow:var(--neu-raised-sm);border-radius:var(--radius-sm);cursor:pointer;text-align:center;transition:all var(--transition);}
.theme-card:hover{box-shadow:var(--neu-raised);}
.theme-card.active{box-shadow:var(--neu-inset-sm);}
.theme-card.active .tc-name{color:var(--accent);}
.tc-swatches{display:flex;gap:3px;justify-content:center;margin-bottom:6px;}
.tc-swatch{width:14px;height:14px;border-radius:50%;}
.tc-name{font-size:9px;font-weight:700;color:var(--mint-dim);text-transform:uppercase;letter-spacing:0.5px;}
.lang-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:6px 0;}
.lang-card{padding:9px 10px;background:var(--base);box-shadow:var(--neu-raised-sm);border-radius:var(--radius-sm);cursor:pointer;display:flex;align-items:center;gap:8px;transition:all var(--transition);}
.lang-card:hover{box-shadow:var(--neu-raised);}
.lang-card.active{box-shadow:var(--neu-inset-sm);}
.lang-card.active .lc-name{color:var(--accent);}

.lc-flag{font-size:16px;}
.lc-name{font-size:11px;font-weight:600;color:var(--mint-dim);}
.module-row{display:flex;align-items:center;gap:10px;padding:8px 0;}
.module-row+.module-row{border-top:1px solid var(--mint-ghost);}
.module-lbl-wrap{flex:1;}
.module-lbl{font-size:11px;font-weight:600;color:var(--mint-dim);}
.module-desc{font-size:9px;color:var(--mint-faint);margin-top:2px;}
input[type="checkbox"].ncheck{-webkit-appearance:none;width:30px;height:16px;background:var(--base);box-shadow:var(--neu-inset-sm);border-radius:8px;position:relative;cursor:pointer;border:none;}
input[type="checkbox"].ncheck::after{content:'';position:absolute;width:12px;height:12px;border-radius:50%;background:var(--mint-dim);top:2px;left:2px;transition:all var(--transition);}
input[type="checkbox"].ncheck:checked::after{left:16px;background:var(--green);}

.persist-sw{-webkit-appearance:none;width:42px;height:22px;background:var(--base);box-shadow:var(--neu-inset-sm);border-radius:11px;position:relative;cursor:pointer;border:none;transition:background .25s;}
.persist-sw::after{content:'';position:absolute;width:16px;height:16px;border-radius:50%;background:var(--mint-dim);top:3px;left:3px;transition:all .25s cubic-bezier(.4,0,.2,1);box-shadow:0 1px 4px rgba(0,0,0,.35);}
.persist-sw:checked{background:color-mix(in srgb,var(--green) 15%,transparent);}
.persist-sw:checked::after{left:23px;background:var(--green);box-shadow:0 1px 6px color-mix(in srgb,var(--green) 50%,transparent);}
.persist-row{border:1px solid var(--mint-ghost);border-radius:var(--radius-sm);padding:10px 12px;margin-bottom:4px;background:rgba(0,0,0,.12);}

input[type="number"].nsel{
  -webkit-appearance:none;appearance:none;-moz-appearance:textfield;
  width:58px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='16'%3E%3Cpath d='M4 2L8 7L0 7Z' fill='%23DDEEDD' opacity='0.4'/%3E%3Cpath d='M0 9L8 9L4 14Z' fill='%23DDEEDD' opacity='0.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 7px center;
  background-size:8px 15px;
  padding-right:19px;
  transition:background-image var(--transition),box-shadow var(--transition),color var(--transition);
}
input[type="number"].nsel:hover,
input[type="number"].nsel:focus{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='16'%3E%3Cpath d='M4 2L8 7L0 7Z' fill='%23FE7648'/%3E%3Cpath d='M0 9L8 9L4 14Z' fill='%23FE7648'/%3E%3C/svg%3E");
}
input[type="number"].nsel::-webkit-inner-spin-button,
input[type="number"].nsel::-webkit-outer-spin-button{
  -webkit-appearance:none;appearance:none;display:none;margin:0;
}
#welcome{position:fixed;inset:0;background:var(--base);z-index:1000;display:flex;align-items:center;justify-content:center;opacity:1;transition:opacity .6s ease;}

#welcome.hidden{display:none;}

#welcome.fading{opacity:0;pointer-events:none;}
#rotate-overlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:1100;background:radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--accent) 18%,transparent),color-mix(in srgb,var(--base-dark) 96%,transparent));padding:20px;}
#rotate-overlay .rotate-card{max-width:320px;background:var(--base);box-shadow:var(--neu-raised),0 18px 40px rgba(0,0,0,0.45);border-radius:var(--radius);padding:20px 18px;text-align:center;}
#rotate-overlay .rotate-icon{width:58px;height:58px;margin:0 auto 10px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:var(--base-dark);box-shadow:var(--neu-inset-sm);font-size:28px;color:var(--accent);}
#rotate-overlay h2{font-size:15px;font-weight:800;letter-spacing:.4px;color:var(--mint);margin-bottom:6px;}
#rotate-overlay p{font-size:11px;line-height:1.55;color:var(--mint-dim);}
#kt-dot{position:absolute;width:10px;height:10px;border-radius:50%;background:var(--accent);transform:scale(0);opacity:0;animation:ktDot 1s cubic-bezier(.34,1.56,.64,1) .2s forwards;}
@keyframes ktDot{0%{opacity:0;transform:scale(0);box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 0%,transparent);}35%{opacity:1;transform:scale(1);box-shadow:0 0 16px 6px color-mix(in srgb,var(--accent) 45%,transparent);}70%{opacity:1;transform:scale(2);box-shadow:0 0 26px 12px color-mix(in srgb,var(--accent) 18%,transparent);}100%{opacity:0;transform:scale(5);box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 0%,transparent);}}
.kt-ring{position:absolute;border-radius:50%;transform:scale(0);opacity:0;}
.kt-r1{width:42px;height:42px;box-shadow:0 0 0 1.5px color-mix(in srgb,var(--accent) 60%,transparent);animation:ktRing .7s ease-out .65s forwards;}
.kt-r2{width:78px;height:78px;box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 32%,transparent);animation:ktRing .7s ease-out .8s forwards;}
.kt-r3{width:118px;height:118px;box-shadow:0 0 0 .8px color-mix(in srgb,var(--accent) 15%,transparent);animation:ktRing .7s ease-out .95s forwards;}

@keyframes ktRing{0%{transform:scale(0);opacity:1;}100%{transform:scale(2.8);opacity:0;}}
#kt-title{position:absolute;font-family:'Montserrat',sans-serif;font-weight:900;font-size:clamp(44px,10vw,78px);letter-spacing:-1px;color:var(--accent);text-shadow:4px 5px 10px var(--shadow-dark),6px 7px 16px var(--base-dark),-2px -2px 6px var(--shadow-light),-3px -3px 10px var(--shadow-light);opacity:0;animation:ktTitleIn .7s cubic-bezier(.22,1,.36,1) 1.3s forwards;user-select:none;}
@keyframes ktTitleIn{0%{opacity:0;transform:scale(.88) translateY(8px);}100%{opacity:1;transform:scale(1) translateY(0);}}
.ctx-menu{position:fixed;background:var(--base);box-shadow:var(--neu-raised),0 8px 24px rgba(0,0,0,0.4);border-radius:var(--radius-sm);padding:4px;z-index:500;min-width:148px;}
.ctx-item{padding:6px 11px;cursor:pointer;font-size:11px;font-weight:500;color:var(--mint-dim);border-radius:var(--radius-xs);transition:all var(--transition);}
.ctx-item:hover{background:var(--mint-ghost);color:var(--accent);}
.tooltip{position:fixed;background:var(--base-dark);box-shadow:var(--neu-raised-sm);color:var(--mint);padding:4px 9px;border-radius:var(--radius-xs);font-size:10px;font-weight:500;z-index:999;pointer-events:none;max-width:200px;}
@media (max-width:900px) and (pointer:coarse){
  #app{padding:4px;gap:6px;}
  .nbtn{padding:5px 9px;font-size:10px;}
  .nbtn.sm{padding:3px 7px;font-size:9px;}
  .nbtn kbd{display:none;}
  .seed-group input{width:68px;font-size:10px;}
  .vol-wrap label,.seed-group label{font-size:8px;}
  .tab{padding:6px 8px;font-size:10px;}
  .tab-body{padding:8px 10px;margin:0 3px 3px;}
  .panel-h{padding:7px 9px;}
  .panel-h h3{font-size:9px;letter-spacing:.8px;}
  .panel-b{padding:4px 7px 8px;}
  .hist-card{min-width:112px;max-width:112px;padding:5px 6px;}
  .hc-wave{height:42px;}
  .viz-box{height:64px;}
  #topbar .logo span{display:none;}
  #topbar .logo-hex{width:23px;height:23px;font-size:12px;}
  .settings-modal{width:min(94vw,620px);}
}
@media (max-width:900px) and (pointer:coarse) and (orientation:portrait){
  #app{position:fixed;inset:0;grid-template-columns:1fr;grid-template-rows:auto 1fr auto;height:100dvh;overflow:hidden;}
  #sidebar-l,#sidebar-r{display:none;}
  #topbar{flex-wrap:wrap;height:auto;padding:8px;justify-content:center;overflow-x:auto;}
  #bottombar{height:auto;}
  #piano-section{height:70px;padding:2px 5px;}
  body.mobile-landscape-required #rotate-overlay{display:flex;}
  body.mobile-landscape-required #app{pointer-events:none;filter:blur(2px);}
}
@media (max-width:900px) and (pointer:coarse) and (orientation:landscape){
  #app{
    position:fixed;
    inset:0;
    height:100dvh;
    padding:4px;
    gap:6px;
    grid-template-columns:minmax(176px,29vw) 1fr minmax(170px,29vw);
    grid-template-rows:46px 1fr 136px;
  }
  #sidebar-l,#sidebar-r{display:flex !important;padding:0;min-width:0;}
  #topbar{padding:0 8px;gap:4px;overflow-x:auto;overflow-y:hidden;flex-wrap:nowrap;justify-content:flex-start;}
  #topbar .divider{height:18px;margin:0 2px;}
  #main{min-width:0;}
  #bottombar{min-height:0;}
  #hist-section{min-height:0;}
  #piano-section{height:64px;padding:2px 6px;gap:6px;}
  #piano-wrap{height:58px;}
  #piano-right-ctrl{gap:5px;}
  .piano-oct-lbl{font-size:11px;}
  :root{--knob-size:44px;}
  .knob-body svg{width:36px;height:36px;}
  .viz-grid{gap:3px;padding:4px;}
}

#kt-coachmark{position:fixed;z-index:950;pointer-events:none;opacity:0;transform:translateY(-6px);transition:opacity .3s ease,transform .3s ease;display:none;}
#kt-coachmark.show{opacity:1;transform:translateY(0);}
.kt-cm-card{position:fixed;display:flex;align-items:flex-start;gap:10px;width:340px;box-sizing:border-box;background:var(--base);box-shadow:var(--neu-raised),0 10px 28px rgba(0,0,0,.4);border-radius:var(--radius);padding:12px 14px;pointer-events:auto;}
.kt-cm-card::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:3px;background:var(--accent);}
.kt-cm-badge{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:var(--base);box-shadow:var(--neu-raised-sm);display:flex;align-items:center;justify-content:center;color:var(--accent);margin-top:1px;}
.kt-cm-badge svg{width:14px;height:14px;}
.kt-cm-main{flex:1;min-width:0;}
.kt-cm-title{font-size:10px;font-weight:800;color:var(--accent);text-transform:uppercase;letter-spacing:.7px;margin-bottom:3px;}
.kt-cm-body{font-size:11px;line-height:1.5;color:var(--mint);font-weight:500;}
.kt-cm-body kbd{font-family:var(--mono);font-size:9px;padding:1px 5px;background:var(--mint-ghost);border-radius:3px;color:var(--mint);font-weight:600;white-space:nowrap;}
.kt-cm-dismiss{margin-top:8px;font-size:9px;color:var(--mint-faint);font-weight:600;letter-spacing:.3px;}

#kt-knob-hint{position:fixed;bottom:18px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--base);box-shadow:var(--neu-raised),0 8px 24px rgba(0,0,0,.4);border-radius:var(--radius-sm);border-left:3px solid var(--accent);padding:9px 14px 9px 13px;font-family:var(--mono);font-size:10px;font-weight:600;color:var(--mint);letter-spacing:.3px;z-index:9998;pointer-events:none;opacity:0;transition:opacity .3s ease,transform .3s ease;white-space:nowrap;}
#kt-knob-hint.show{opacity:1;transform:translateX(-50%) translateY(0);}
#kt-knob-hint kbd{font-family:var(--mono);font-size:9px;padding:1px 5px;margin:0 2px;background:var(--mint-ghost);border-radius:3px;color:var(--accent);font-weight:700;}
#kt-knob-hint .kkh-sep{color:var(--mint-faint);margin:0 5px;}

.midi-tab-layout{display:flex;flex-direction:row;gap:0;height:100%;min-height:0;}
.midi-col{display:flex;flex-direction:column;gap:8px;padding:12px 14px;overflow-y:auto;}
.midi-col-left{flex:1 1 0;min-width:0;border-right:1px solid var(--mint-ghost);}
.midi-col-right{flex:0 0 46%;max-width:280px;}

.midi-status-row{display:flex;align-items:center;gap:7px;padding:6px 9px;background:var(--base);border-radius:var(--radius-xs);box-shadow:var(--neu-inset-sm);}
.midi-dot{width:8px;height:8px;border-radius:50%;background:var(--mint-faint);flex-shrink:0;transition:background .3s;}
.midi-dot.active{background:var(--green);box-shadow:0 0 6px var(--green);}
.midi-dot.error{background:#e05;box-shadow:0 0 6px #e05;}
.midi-status-txt{font-size:10px;font-weight:600;color:var(--mint-dim);flex:1;}

.midi-devices-wrap{display:flex;flex-direction:column;gap:5px;margin-top:4px;}
.midi-devices-lbl{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--mint-faint);}
.midi-device-list{display:flex;flex-direction:column;gap:4px;min-height:40px;}
.midi-no-devices{color:var(--mint-faint);font-size:10px;padding:8px 4px;line-height:1.6;}
.midi-device-row{display:flex;align-items:center;gap:8px;padding:6px 9px;background:var(--base);border-radius:var(--radius-xs);box-shadow:var(--neu-raised-sm);}
.midi-device-dot{width:6px;height:6px;border-radius:50%;background:var(--green);flex-shrink:0;}
.midi-device-name{flex:1;font-size:10px;font-weight:600;color:var(--mint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.midi-device-ch{font-size:9px;font-family:var(--mono);color:var(--mint-faint);}
.midi-device-en{cursor:pointer;accent-color:var(--green);}

.midi-last-row{display:flex;align-items:center;gap:8px;padding:5px 9px;background:var(--base-dark);border-radius:var(--radius-xs);margin-top:4px;}
.midi-last-lbl{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--mint-faint);}
.midi-last-note{font-size:12px;font-weight:800;font-family:var(--mono);color:var(--green);}
.midi-last-vel,.midi-last-ch{font-size:9px;font-family:var(--mono);color:var(--mint-dim);}

.midi-btn{gap:7px;letter-spacing:0.4px;margin-right:12px;padding-left:13px;padding-right:13px;}
.midi-btn .kti{width:1.1em;height:1.1em;vertical-align:-0.14em;opacity:.85;transition:opacity var(--transition);}
.midi-btn:hover .kti{opacity:1;}
.midi-btn-dot{
  width:6px;height:6px;border-radius:50%;flex-shrink:0;margin-left:1px;
  background:var(--mint-faint);
  transition:background var(--transition),box-shadow var(--transition);
}
.midi-btn:hover{color:var(--mint);}

#btn-midi.midi-active{
  color:var(--green);
  box-shadow:var(--neu-raised-sm),0 0 9px color-mix(in srgb,var(--green) 20%,transparent);
}
#btn-midi.midi-active .kti{opacity:1;}
#btn-midi.midi-active .midi-btn-dot{
  background:var(--green);
  box-shadow:0 0 5px var(--green);
}

#btn-midi:active,
#btn-midi.midi-active:active,
#btn-midi.midi-listening:active{
  box-shadow:var(--neu-inset-sm);
}

@keyframes midi-btn-listen{
  0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 55%,transparent);}
  50%    {box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 0%,transparent);}
}
#btn-midi.midi-listening{
  color:var(--accent);
  box-shadow:var(--neu-raised-sm),0 0 9px color-mix(in srgb,var(--accent) 18%,transparent);
}
#btn-midi.midi-listening .kti{opacity:1;}
#btn-midi.midi-listening .midi-btn-dot{
  background:var(--accent);
  animation:midi-btn-listen .85s ease-out infinite;
}

@keyframes knob-midi-pulse {
  0%,100% { box-shadow:0 0 0 2px var(--green),0 0 8px 2px color-mix(in srgb,var(--green) 30%,transparent); }
  50%      { box-shadow:0 0 0 3px var(--green),0 0 16px 5px color-mix(in srgb,var(--green) 55%,transparent); }
}
.knob-body.midi-learning {
  animation: knob-midi-pulse .75s ease-in-out infinite;
  border-radius: 50%;
  position: relative;
}

@keyframes knob-midi-flash {
  0%   { box-shadow:0 0 0 4px var(--green),0 0 22px 7px color-mix(in srgb,var(--green) 80%,transparent); }
  100% { box-shadow:none; }
}
.knob-body.midi-assigned {
  animation: knob-midi-flash .65s ease-out forwards;
  border-radius: 50%;
}

.knob-body.midi-mapped { position: relative; }
.knob-midi-badge {
  position: absolute;
  bottom: -2px;
  right: -4px;
  font-size: 6.5px;
  font-family: var(--mono, monospace);
  font-weight: 700;
  color: var(--green);
  background: var(--bg, #1a1e24);
  border: 1px solid var(--green);
  border-radius: 3px;
  padding: 0 2px;
  line-height: 11px;
  white-space: nowrap;
  pointer-events: none;
  opacity: .88;
  z-index: 3;
  letter-spacing: 0;
}

#midi-learn-banner {
  display: none;
  position: fixed;
  top: 52px;
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  z-index: 9999;
  padding: 7px 16px;
  background: color-mix(in srgb,var(--base-dark) 97%,transparent);
  border: 1px solid var(--green);
  border-radius: 8px;
  color: var(--mint, #ddeedd);
  font-size: 11px;
  font-family: var(--ui-font, inherit);
  line-height: 1.5;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 4px 18px rgba(0,0,0,.55);
  opacity: 0;
  transition: opacity .15s, transform .15s;
}
#midi-learn-banner.active {
  display: flex;
  align-items: center;
  gap: 7px;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
@keyframes mlb-dot-pulse {
  0%,100% { opacity:1; }
  50%      { opacity:.3; }
}
.mlb-icon {
  color: var(--green);
  font-size: 10px;
  animation: mlb-dot-pulse .7s ease-in-out infinite;
  flex-shrink: 0;
}
.mlb-esc {
  font-family: var(--mono, monospace);
  font-size: 9.5px;
  background: var(--mint-ghost);
  border: 1px solid color-mix(in srgb,var(--mint) 22%,transparent);
  border-radius: 3px;
  padding: 1px 5px;
  color: var(--mint-dim, #aab4aa);
  letter-spacing: .5px;
}

#mob-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 590;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  cursor: pointer;
}
body.mob-l-open #mob-overlay,
body.mob-r-open #mob-overlay { display: block; }

.mob-sidebar-btn {
  display: none;
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 400;
  width: 18px;
  height: 52px;
  align-items: center;
  justify-content: center;
  background: var(--base);
  box-shadow: var(--neu-raised-sm);
  border: none;
  cursor: pointer;
  color: var(--mint-dim);
  font-size: 9px;
  font-weight: 900;
  font-family: var(--mono);
  transition: color var(--transition), box-shadow var(--transition);
  touch-action: manipulation;
}
#mob-sbl {
  left: 0;
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
  writing-mode: vertical-lr;
  text-orientation: mixed;
  letter-spacing: 1.5px;
  padding: 8px 3px;
}
#mob-sbr {
  right: 0;
  border-radius: var(--radius-xs) 0 0 var(--radius-xs);
  writing-mode: vertical-lr;
  text-orientation: mixed;
  transform: translateY(-50%) rotate(180deg);
  letter-spacing: 1.5px;
  padding: 8px 3px;
}
.mob-sidebar-btn:hover { color: var(--accent); }
body.mob-l-open #mob-sbl { color: var(--accent); box-shadow: var(--neu-inset-sm); }
body.mob-r-open #mob-sbr { color: var(--accent); box-shadow: var(--neu-inset-sm); }

@media (min-width: 1440px) {
  #app { grid-template-columns: 272px 1fr 256px; }
  :root { --knob-size: 56px; }
  .knob-body svg { width: 44px; height: 44px; }
  .viz-box { height: 82px; }
}

@media (max-width: 1279px) and (min-width: 1100px) and (pointer: fine) {
  #app {
    grid-template-columns: 226px 1fr 212px;
    grid-template-rows: 50px 1fr 183px;
    gap: 7px;
  }
  :root { --knob-size: 50px; }
  .knob-body svg { width: 38px; height: 38px; }
  .knob-lbl { font-size: 8.5px; }

  #topbar { gap: 5px; padding: 0 11px; }
  .divider { margin: 0 3px; }
  .nbtn { padding: 5px 10px; font-size: 10.5px; }
  .nbtn.sm { padding: 3px 7px; font-size: 9.5px; }

  .nbtn kbd { display: none; }

  .logo span { display: none; }
  .seed-group input { width: 76px; font-size: 10.5px; }

  .tab { padding: 6px 10px; font-size: 10.5px; }

  .panel-h { padding: 6px 10px; }
  .panel-b { padding: 3px 9px 7px; }

  .viz-box { height: 72px; }

  #tab-chord.active { grid-template-columns: 208px 1fr 176px; }

  #piano-section { height: 72px; }
  #piano-wrap { height: 64px; }

  .settings-modal { width: min(96vw, 600px); }
  .export-dialog { width: min(96vw, 480px); }
}

@media (max-width: 1099px) and (min-width: 900px) and (pointer: fine) {
  #app {
    grid-template-columns: 187px 1fr 173px;
    grid-template-rows: 46px 1fr 163px;
    gap: 6px;
  }
  :root { --knob-size: 46px; }
  .knob-body svg { width: 34px; height: 34px; }
  .knob-lbl { font-size: 8px; max-width: 48px; }
  .knob-val { font-size: 8px; }


  #topbar { padding: 0 8px; gap: 4px; overflow-x: auto; }
  .nbtn { padding: 5px 9px; font-size: 10px; }
  .nbtn kbd { display: none; }
  .logo span { display: none; }
  .divider { margin: 0 2px; height: 20px; }

  .vol-wrap label { display: none; }
  .seed-group label { display: none; }
  #btn-copy-url { display: none; }
  .preset-group > span { display: none; }

  .seed-group input { width: 62px; }
  #master-vol.nslider { width: 55px; }
  .rec-dur { width: 40px; padding-left: 4px; }

  .tab { padding: 5px 9px; font-size: 10px; }
  .tab-body { padding: 8px 10px; margin: 0 3px 3px; }

  .panel-h { padding: 5px 8px; }
  .panel-h h3 { font-size: 9px; letter-spacing: 0.5px; }
  .panel-b { padding: 2px 7px 6px; }

  .viz-box { height: 62px; }
  .viz-grid { padding: 4px; gap: 3px; }

  #tab-chord.active { grid-template-columns: 174px 1fr 154px; }

  .hist-card { min-width: 120px; max-width: 120px; }
  .hc-wave { height: 34px; }

  #piano-section { height: 66px; padding: 2px 7px; }
  #piano-wrap { height: 58px; }

  .tab-2col-right { max-width: 200px; }

  .settings-modal { width: min(96vw, 580px); }
  .export-dialog { width: min(96vw, 460px); }
}

@media (max-width: 899px) and (orientation: landscape) and (pointer: fine) {
  #app {
    position: fixed; inset: 0; height: 100dvh;
    padding: 4px; gap: 5px;
    grid-template-columns: minmax(162px, 26vw) 1fr minmax(154px, 26vw);
    grid-template-rows: 44px 1fr 130px;
  }
  :root { --knob-size: 42px; }
  .knob-body svg { width: 32px; height: 32px; }
  .knob-lbl { font-size: 7.5px; }

  #sidebar-l, #sidebar-r { display: flex !important; padding: 0; min-width: 0; }
  #topbar { padding: 0 7px; gap: 3px; overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap; }
  #topbar .divider { height: 18px; margin: 0 2px; }
  .nbtn { padding: 4px 8px; font-size: 9.5px; }
  .nbtn kbd { display: none; }
  .logo span { display: none; }

  .viz-box { height: 50px; }
  .viz-grid { padding: 3px; gap: 2px; }

  #piano-section { height: 60px; padding: 2px 5px; }
  #piano-wrap { height: 54px; }
  #hist-section { min-height: 0; }

  #tab-chord.active { grid-template-columns: 148px 1fr 128px; }
  .tab { padding: 5px 7px; font-size: 9.5px; }
  .panel-b { padding: 2px 6px 5px; }
  .panel-h { padding: 5px 7px; }

  .settings-modal { width: min(96vw, 560px); max-height: 90dvh; }
  .export-dialog { width: min(96vw, 420px); }
}

@media (max-width: 900px) and (pointer: coarse) and (orientation: landscape) {
  #tab-chord.active { grid-template-columns: minmax(140px, 26vw) 1fr minmax(122px, 24vw); }
  .tab-2col-right { max-width: 175px; }
  .hist-card { min-width: 102px; max-width: 102px; }
  .hc-wave { height: 36px; }
  .settings-modal { width: min(96vw, 560px); max-height: 90dvh; }
  .export-dialog { width: min(96vw, 400px); }
}

@media (max-width: 1024px) and (orientation: portrait) {

  #app {
    position: fixed; inset: 0; height: 100dvh;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    padding: 0; gap: 0; overflow: hidden;
  }


  #topbar {
    border-radius: 0;
    flex-wrap: nowrap;
    overflow-x: auto; overflow-y: hidden;
    padding: 0 10px; height: 48px; min-height: 48px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  #topbar::-webkit-scrollbar { display: none; }
  .nbtn kbd { display: none; }


  #main { border-radius: 0; min-height: 0; }


  #bottombar { border-radius: 0; flex-shrink: 0; }


  #sidebar-l, #sidebar-r {
    display: flex !important;
    position: fixed;
    top: 0; bottom: 0;
    width: min(284px, 86vw);
    z-index: 600;
    overflow-y: auto;
    background: var(--base);
    flex-direction: column;
    padding: 56px 8px 24px;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-overflow-scrolling: touch;
  }
  #sidebar-l {
    left: 0;
    transform: translateX(-100%);
    box-shadow: 6px 0 24px rgba(0,0,0,0.45);
  }
  #sidebar-r {
    right: 0;
    transform: translateX(100%);
    box-shadow: -6px 0 24px rgba(0,0,0,0.45);
  }


  body.mob-l-open #sidebar-l { transform: translateX(0); }
  body.mob-r-open #sidebar-r { transform: translateX(0); }


  .mob-sidebar-btn { display: flex; }


  #piano-section { height: 84px; }
  #piano-wrap { height: 76px; }


  #tab-chord.active {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    height: auto; overflow-y: auto;
  }
  .cb-col-left  { border-right: 1px solid rgba(255,255,255,0.05); }
  .cb-col-center {
    grid-column: 1 / -1;
    border-top: 1px solid rgba(255,255,255,0.05);
  }
  .cb-col-right {
    border-left: 1px solid rgba(255,255,255,0.05);
    border-top: 1px solid rgba(255,255,255,0.05);
  }


  .settings-modal { width: min(94vw, 500px); max-height: 88dvh; }
  .export-dialog { width: min(94vw, 440px); }


  .viz-box { height: 74px; }
}

@media (max-width: 1023px) and (min-width: 601px) and (orientation: portrait) {
  :root { --knob-size: 48px; }
  .knob-body svg { width: 36px; height: 36px; }
  .logo span { display: none; }
  .hist-card { min-width: 126px; max-width: 126px; }
  .hc-wave { height: 46px; }
}

@media (max-width: 600px) and (orientation: portrait) {
  :root { --knob-size: 44px; }
  .knob-body svg { width: 32px; height: 32px; }
  .knob-lbl { font-size: 8px; max-width: 46px; }
  .knob-val { font-size: 8px; }


  #topbar {
    height: 48px; min-height: 48px; max-height: 48px;
    padding: 0 8px; gap: 4px;
    flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
  }
  .logo span { display: none; }
  .logo-hex { width: 22px; height: 22px; font-size: 11px; }
  .divider { height: 18px; margin: 0 1px; }

  .vol-wrap label { display: none; }
  .nslider { width: 52px; }


  #sidebar-l, #sidebar-r {
    width: min(272px, 88vw);
    padding: 52px 8px 20px;
  }


  .tabs {
    overflow-x: auto; flex-wrap: nowrap;
    padding: 4px 6px 0;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { padding: 5px 9px; font-size: 10px; flex-shrink: 0; }
  .tab-body { padding: 8px 10px; margin: 0 3px 3px; }


  .viz-box { height: 56px; }
  .viz-grid { padding: 4px; gap: 3px; }


  #piano-section { height: 74px; padding: 2px 5px; gap: 5px; }
  #piano-wrap { height: 66px; }


  .hist-card { min-width: 110px; max-width: 110px; padding: 5px 6px; }
  .hc-wave { height: 38px; }
  .hc-name { font-size: 10.5px; }
  .hist-head { padding: 4px 8px; }
  .hist-strip { padding: 3px 6px 6px; gap: 4px; }


  .settings-modal {
    width: 98vw; max-height: 92dvh;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    position: fixed; bottom: 0; align-self: flex-end;
    transform: none !important;
  }
  .settings-backdrop.open .settings-modal { transform: none !important; }
  .export-dialog { width: 98vw; }
  .export-opts { grid-template-columns: 1fr; gap: 8px; }


  #tab-chord.active {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    overflow-y: auto; height: auto;
  }
  .cb-col-left  { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.05); }
  .cb-col-center { grid-column: 1; border-top: 1px solid rgba(255,255,255,0.05); }
  .cb-col-right { border-left: none; border-top: 1px solid rgba(255,255,255,0.05); }


  .tab-body.tab-2col.active { flex-direction: column; }
  .tab-2col-left {
    border-right: none;
    border-bottom: 1px solid var(--mint-ghost);
    flex: 0 0 auto; max-height: 280px;
  }
  .tab-2col-right { max-width: 100%; flex: 0 0 auto; }


  .rec-dur { width: 44px; }
  .rec-btn { min-width: 54px; }
}

@media (max-width: 400px) and (orientation: portrait) {
  :root { --knob-size: 40px; }
  .knob-body svg { width: 30px; height: 30px; }
  .knob-lbl { font-size: 7.5px; max-width: 42px; }

  .nbtn { padding: 4px 7px; font-size: 9.5px; }
  .nbtn.sm { padding: 3px 6px; font-size: 8.5px; }

  .viz-box { height: 48px; }

  #piano-section { height: 68px; }
  #piano-wrap { height: 60px; }

  .hist-card { min-width: 98px; max-width: 98px; }
  .hc-wave { height: 34px; }

  .tab { padding: 4px 7px; font-size: 9.5px; }


  .settings-modal {
    width: 100vw; max-height: 98dvh;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  }
  .settings-pane { max-height: 55vh; }


  .preset-slot { width: 24px; height: 24px; }
}

@supports (padding: env(safe-area-inset-top)) {
  @media (orientation: landscape) {
    #topbar {
      padding-left: max(14px, calc(env(safe-area-inset-left) + 6px));
      padding-right: max(14px, calc(env(safe-area-inset-right) + 6px));
    }
    #piano-section {
      padding-left: max(10px, calc(env(safe-area-inset-left) + 4px));
      padding-right: max(10px, calc(env(safe-area-inset-right) + 4px));
    }
    #bottombar {
      padding-bottom: max(2px, env(safe-area-inset-bottom));
    }
    #hist-strip {
      padding-left: max(8px, calc(env(safe-area-inset-left) + 4px));
      padding-right: max(8px, calc(env(safe-area-inset-right) + 4px));
    }
  }

  @media (orientation: portrait) {
    #topbar {
      padding-top: max(4px, calc(env(safe-area-inset-top) - 4px));
      height: max(48px, calc(env(safe-area-inset-top) + 44px));
    }
    #bottombar { padding-bottom: max(4px, env(safe-area-inset-bottom)); }
    #sidebar-l {
      padding-top: max(56px, calc(env(safe-area-inset-top) + 48px));
      padding-left: max(8px, calc(env(safe-area-inset-left) + 4px));
      padding-bottom: max(24px, calc(env(safe-area-inset-bottom) + 12px));
    }
    #sidebar-r {
      padding-top: max(56px, calc(env(safe-area-inset-top) + 48px));
      padding-right: max(8px, calc(env(safe-area-inset-right) + 4px));
      padding-bottom: max(24px, calc(env(safe-area-inset-bottom) + 12px));
    }
    #mob-sbl { bottom: max(calc(50% - 26px), env(safe-area-inset-bottom)); }
    #mob-sbr { bottom: max(calc(50% - 26px), env(safe-area-inset-bottom)); }
  }
}

@media (pointer: coarse) {

  .nbtn:not(.piano-oct-ctrl .nbtn) { min-height: 34px; }
  .tab { min-height: 36px; }
  .preset-slot { width: 28px; height: 28px; }
  .l-btn { width: 28px; height: 28px; font-size: 9px; }
  .fx-sw { width: 34px; height: 18px; }
  .fx-sw::after { width: 14px; height: 14px; top: 2px; left: 2px; }
  .fx-sw.on::after { left: 18px; }
  .panel-collapse { width: 24px; height: 24px; }
  .settings-close { width: 32px; height: 32px; }
  .hk-cap-btn { min-height: 34px; }
  .hk-clear-btn { width: 28px; height: 28px; }
  .mob-sidebar-btn { width: 22px; height: 60px; }
  .pkr-keys-opt { min-height: 32px; }
  .cb-root-btn, .cb-type-btn, .cb-opt-btn { min-height: 32px; }
  input[type="range"].nslider { height: 20px; }
}

@media (hover: none) {

  .nbtn:hover { color: var(--mint-dim); box-shadow: var(--neu-raised-sm); }
  .nbtn.primary:hover { color: var(--accent); box-shadow: var(--neu-raised-sm); }
  .nbtn.green:hover { color: var(--green); box-shadow: var(--neu-raised-sm); }
  .fx-row:hover { box-shadow: var(--neu-raised-sm); }
  .layer-row:hover { box-shadow: var(--neu-raised-sm); }
  .hist-card:hover { box-shadow: var(--neu-raised-sm); }
  .batch-item:hover { box-shadow: var(--neu-raised-sm); }
  .panel:hover { box-shadow: var(--neu-raised); }
  .theme-card:hover { box-shadow: var(--neu-raised-sm); }
  .lang-card:hover { box-shadow: var(--neu-raised-sm); }

  .fx-edit-cue { display: none; }
  .piano-oct-ctrl .oct-hotkey-hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  #welcome { transition: none; }
  .panel-b, .panel-collapse-icon { transition: none; }

  #kt-title { opacity: 1 !important; transform: none !important; animation: none !important; }
  .kt-ring, #kt-dot { animation: none !important; opacity: 0 !important; }
  #kt-coachmark { transition: none; }
  #sidebar-l, #sidebar-r { transition: none; }
  #mob-overlay { transition: none; }
}

@media (min-width: 1440px) {
  /* gap / padding trimmed 2 px so a growing seed field still fits the bar */
  #topbar { gap: 5px; padding: 0 16px; }
  .nbtn { padding: 6px 11px; font-size: 11px; }
  .nbtn kbd { font-size: 8px; }
  /* Grows with the text ("laser:1040011268") where the top bar has room;
     narrower layouts keep a fixed, scrollable field. */
  .seed-group input { width: auto; field-sizing: content; min-width: 90px; max-width: 150px; }
  .divider { margin: 0 5px; }
}

@media (max-width: 1399px) and (min-width: 1280px) and (pointer: fine) {
  .nbtn kbd { display: none; }
  .logo span { display: none; }
  #topbar { gap: 5px; padding: 0 12px; }
  .divider { margin: 0 3px; }
  .nbtn { padding: 5px 10px; }
  .nbtn.sm { padding: 3px 7px; }
  .seed-group input { width: auto; field-sizing: content; min-width: 80px; max-width: 150px; }
}

.seed-group,
.preset-group,
.vol-wrap,
.rec-wrap { flex-shrink: 0; white-space: nowrap; }

@media (max-width: 1099px) {
  #seed-mod-dot { display: none; }
}

@media (max-width: 899px) and (orientation: landscape) and (pointer: fine) {
  .vol-wrap label { display: none; }
  .seed-group label { display: none; }
  #btn-copy-url { display: none; }
  .preset-group > span { display: none; }
  .seed-group input { width: 58px; }
  #master-vol.nslider { width: 50px; }
  .rec-dur { width: 38px; padding-left: 3px; }
}

@media (max-width: 900px) and (pointer: coarse) and (orientation: landscape) {


  .vol-wrap label { display: none; }
  .seed-group label { display: none; }
  #btn-copy-url { display: none; }
  .preset-group > span { display: none; }
  .seed-group input { width: 54px; }
  #master-vol.nslider { width: 48px; }
  .rec-dur { width: 36px; padding-left: 3px; }

  #topbar { height: 42px; }
}

@media (max-width: 1024px) and (orientation: portrait) {

  .vol-wrap label { display: none; }
  .seed-group label { display: none; }
  #btn-copy-url { display: none; }
  .preset-group > span { display: none; }
  .seed-group input { width: 62px; }
  #master-vol.nslider { width: 52px; }
}

@media (max-width: 600px) and (orientation: portrait) {

  .divider { display: none; }

  .vol-wrap { display: none; }

  .rec-dur { display: none; }

  .preset-group { display: none; }

  .seed-group { padding: 2px 4px 2px 6px; }
  .seed-group input { width: 50px; font-size: 10px; }

  .nbtn { padding: 4px 7px; font-size: 10px; }
  .nbtn.sm { padding: 3px 5px; font-size: 9px; }

  .btn-gear { width: 28px; height: 28px; }
  .btn-gear svg { width: 13px; height: 13px; }

  #topbar { gap: 3px; padding: 0 6px; scroll-behavior: smooth; }

  #topbar::-webkit-scrollbar { display: none; }
  #topbar { scrollbar-width: none; }
}

@media (max-width: 400px) and (orientation: portrait) {

  #topbar button:has(#lbl-redo) { display: none; }

  #topbar button:has(#lbl-mutate) { display: none; }

  .logo-hex { width: 20px; height: 20px; font-size: 10px; }
}

#topbar::-webkit-scrollbar { display: none; }
#topbar { scrollbar-width: none; -ms-overflow-style: none; }

.piano-oct-ctrl .nbtn.sm,
.piano-oct-ctrl .nbtn.sm:not(:disabled) {
  min-height: 0 !important;
  padding: 4px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 1279px) and (min-width: 1100px) and (pointer: fine) {
  .piano-oct-ctrl .nbtn.sm { padding: 4px 9px; }
  .piano-oct-lbl { font-size: 12px; }
}

@media (max-width: 1099px) and (min-width: 900px) and (pointer: fine) {
  .piano-oct-ctrl .nbtn.sm { padding: 3px 8px; }
  .piano-oct-lbl { font-size: 11px; }
  .piano-oct-ctrl { gap: 2px; }
}

@media (max-width: 600px) and (orientation: portrait) {
  .piano-oct-ctrl .nbtn.sm { padding: 2px 8px; }
  .piano-oct-lbl { font-size: 11px; }
  .piano-oct-ctrl { gap: 2px; }
}

@media (max-width: 400px) and (orientation: portrait) {
  .piano-oct-ctrl .nbtn.sm { padding: 2px 7px; font-size: 9px; }
  .piano-oct-lbl { font-size: 10px; }
  .piano-oct-ctrl { gap: 1px; }
}

@media (max-width: 900px) and (pointer: coarse) and (orientation: landscape) {
  .piano-oct-ctrl .nbtn.sm { padding: 1px 8px; font-size: 10px; }
  .piano-oct-lbl { font-size: 11px; }
  .piano-oct-ctrl { gap: 1px; padding: 2px 0; }
}

@media (max-width: 899px) and (orientation: landscape) and (pointer: fine) {
  .piano-oct-ctrl .nbtn.sm { padding: 1px 8px; font-size: 9px; }
  .piano-oct-lbl { font-size: 10px; }
  .piano-oct-ctrl { gap: 1px; padding: 2px 0; }
}

@media (max-width: 900px) and (pointer: coarse) and (orientation: landscape) {
  .piano-oct-ctrl .nbtn.sm { padding: 1px 8px; }
  .piano-oct-lbl { font-size: 10px; letter-spacing: 0; }
  .piano-oct-ctrl { gap: 1px; padding: 2px 0; }
}

@media (max-width: 1023px) and (min-width: 601px) and (orientation: portrait) {
  .piano-oct-ctrl .nbtn.sm { padding: 4px 9px; }
  .piano-oct-lbl { font-size: 12px; }
}

@media (max-height: 72px) {
  .piano-oct-ctrl { gap: 1px; padding: 1px 0; }
  .piano-oct-ctrl .nbtn.sm { padding: 1px 7px; font-size: 9px; }
  .piano-oct-lbl { font-size: 10px; }
}

#logo-btn{cursor:pointer;-webkit-tap-highlight-color:transparent;}
#logo-btn:hover .logo-hex{box-shadow:var(--neu-raised-sm),0 0 10px var(--glow-accent);}
#logo-btn:hover span{color:var(--mint);}
#logo-btn:active .logo-hex{box-shadow:var(--neu-inset-sm);}

/* About backdrop */
#about-backdrop{
  position:fixed;
  inset:0;
  z-index:940;
  background:rgba(10,13,18,0.55);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  opacity:0;
  pointer-events:none;
  transition:opacity 0.25s cubic-bezier(0.4,0,0.2,1);
}
#about-backdrop.open{
  opacity:1;
  pointer-events:auto;
}

#about-popup{
  position:fixed;
  z-index:950;
  width:340px;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%) scale(0.94);
  background:var(--base);
  box-shadow:var(--neu-raised),0 24px 64px rgba(0,0,0,0.7),0 0 0 1px rgba(var(--accent-rgb,100,220,160),0.12);
  border-radius:var(--radius);
  overflow:hidden;
  opacity:0;
  transition:opacity 0.25s cubic-bezier(0.4,0,0.2,1),transform 0.25s cubic-bezier(0.4,0,0.2,1);
  pointer-events:none;
  border-top:2px solid var(--accent);
}
#about-popup.open{
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
  pointer-events:auto;
}

.ab-header{
  display:flex;
  align-items:center;
  gap:14px;
  padding:18px 16px 15px;
  background:var(--base);
  border-bottom:1px solid var(--mint-ghost);
}
.ab-logo-hex{
  width:42px;height:42px;
  background:var(--base);
  box-shadow:var(--neu-raised-sm);
  border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  color:var(--accent);font-family:var(--mono);font-size:20px;font-weight:800;
  flex-shrink:0;
  text-shadow:0 0 14px var(--glow-accent);
}
.ab-title-wrap{flex:1;min-width:0;}
.ab-title{
  font-family:var(--mono);font-size:15px;font-weight:700;
  color:var(--accent);letter-spacing:1px;
  text-shadow:0 0 12px var(--glow-accent);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ab-tagline{
  font-size:10px;font-weight:600;
  color:var(--mint-dim);letter-spacing:0.5px;
  text-transform:uppercase;margin-top:3px;
}
.ab-close{
  width:26px;height:26px;flex-shrink:0;
  background:var(--base);box-shadow:var(--neu-raised-sm);
  border:none;border-radius:var(--radius-xs);
  color:var(--mint-dim);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all var(--transition);
}
.ab-close:hover{color:var(--accent);}
.ab-close:active{box-shadow:var(--neu-inset-sm);}
.ab-close svg{width:11px;height:11px;}

.ab-body{
  padding:8px 14px;
  background:var(--base-dark);
  box-shadow:var(--neu-inset-sm);
  margin:0 10px 0;
  border-radius:0 0 var(--radius-xs) var(--radius-xs);
}
.ab-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:7px 2px;
  border-bottom:1px solid var(--mint-ghost);
}
.ab-row:last-child{border-bottom:none;}
.ab-key{
  font-family:var(--mono);font-size:10px;font-weight:700;
  color:var(--mint-faint);text-transform:uppercase;letter-spacing:0.8px;
}
.ab-val{
  font-family:var(--mono);font-size:11px;font-weight:600;
  color:var(--mint-dim);letter-spacing:0.2px;
  white-space:nowrap;
}
.ab-val-accent{color:var(--accent);}
.ab-val-green{color:var(--green);}

.ab-footer{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px 14px;
  border-top:1px solid var(--mint-ghost);
}
.ab-made{
  font-size:10px;font-weight:600;
  color:var(--mint-faint);font-style:italic;letter-spacing:0.3px;
}
.ab-heart{
  color:var(--accent);font-size:13px;
  opacity:0.7;
  animation:ab-pulse 2.4s ease-in-out infinite;
}
@keyframes ab-pulse{
  0%,100%{opacity:0.5;transform:scale(1);}
  50%{opacity:1;transform:scale(1.18);}
}
.ab-val-stack{display:flex;flex-direction:column;align-items:center;gap:1px;}
.ab-val-sub{font-family:var(--mono);font-size:9px;font-weight:600;color:rgba(221,238,221,0.28);letter-spacing:0.2px;white-space:nowrap;}