:root{--bg:#121316;--panel:#1b1d22;--edge:#2a2d34;--txt:#e9e6e1;--dim:#8b8f98;--acc:#39ff14;--k:clamp(58px,19vw,104px)}
body[data-bank="1"]{--acc:#ffb020}body[data-bank="2"]{--acc:#2fd1c5}body[data-bank="3"]{--acc:#a77bff}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;overflow:hidden;background:var(--bg);color:var(--txt);font-family:"Bahnschrift","Arial Narrow",system-ui,sans-serif;user-select:none;-webkit-user-select:none;overscroll-behavior:none}
.app{height:100vh;height:100dvh;max-width:600px;margin:0 auto;display:flex;flex-direction:column;gap:clamp(6px,1.5dvh,14px);padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}
.knobs{grid-area:k;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;background:var(--panel);border:1px solid var(--edge);border-radius:16px;padding:clamp(6px,1.5dvh,12px) 6px}
.k{display:flex;flex-direction:column;align-items:center;gap:2px}
.k b{font-size:12px;letter-spacing:.12em;color:var(--dim);font-weight:600}.val{font-size:clamp(15px,4.4vw,20px);font-weight:700;font-variant-numeric:tabular-nums}
.knob{width:var(--k);height:var(--k);touch-action:none;cursor:ns-resize;border-radius:50%;outline:none}
.knob:focus-visible .ring{box-shadow:0 0 0 3px #fff6}
.ring{width:100%;height:100%;border-radius:50%;padding:9%;background:conic-gradient(from -135deg,var(--acc) calc(var(--p,0)*270deg),var(--edge) 0 270deg,transparent 0)}
.cap{width:100%;height:100%;border-radius:50%;background:radial-gradient(circle at 35% 28%,#454952,#1e2025 70%);box-shadow:inset 0 2px 3px #fff2,0 4px 10px #000a;position:relative;transform:rotate(var(--a,-135deg))}
.knob{--a:-135deg}.cap{transform:rotate(var(--a))}
.cap::after{content:"";position:absolute;left:50%;top:8%;width:4px;height:24%;margin-left:-2px;border-radius:2px;background:var(--acc);box-shadow:0 0 8px var(--acc)}
.knob.drag .cap{filter:brightness(1.2)}
.screen{grid-area:s;position:relative;flex:1 1 0;min-height:70px;background:#0b0c0e;border:1px solid var(--edge);border-radius:16px;overflow:hidden;box-shadow:inset 0 0 30px #000}
#spec{position:absolute;inset:0;width:100%;height:100%}
#hint{position:absolute;left:12px;top:8px;font-size:12px;color:var(--dim);letter-spacing:.08em;pointer-events:none;transition:opacity .4s}
.banks{grid-area:b;display:grid;grid-template-columns:repeat(12,1fr);gap:8px}.banks button{grid-column:span 3}
.banks button{height:clamp(40px,6dvh,52px);font:inherit;font-weight:700;letter-spacing:.06em;color:var(--dim);background:var(--panel);border:1px solid var(--edge);border-radius:12px;cursor:pointer;touch-action:manipulation}
.banks button.on{color:#111;background:var(--acc);border-color:var(--acc);box-shadow:0 0 18px color-mix(in srgb,var(--acc) 55%,transparent)}
#vel,#rep,#edit,#midi{grid-column:span 2;height:clamp(34px,5dvh,44px)!important}
#vel.on,#rep.on{animation:pulse 1s ease-in-out infinite alternate}
#vel:disabled{opacity:.45}
@keyframes pulse{to{filter:brightness(1.25)}}
.pads{grid-area:p;width:min(100%,50vh);width:min(100%,50dvh);aspect-ratio:1;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);gap:clamp(5px,1.4vw,10px);touch-action:none}
.pad{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:0;padding:2px;font:inherit;color:var(--txt);cursor:pointer;touch-action:none;background:linear-gradient(#2a2d34,#1d1f24);border:1px solid #3a3e47;border-radius:12px;box-shadow:0 4px 0 #0c0d0f,inset 0 1px 0 #fff1;transition:background .12s,box-shadow .12s,transform .05s}
.pad i{font-style:normal;font-size:clamp(20px,6vw,34px);font-weight:700;line-height:1}
.pad span{font-size:clamp(8px,2.3vw,12px);color:var(--dim);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pad.sel{border-color:var(--acc)}
.pad.down{transform:translateY(3px);box-shadow:0 1px 0 #0c0d0f}
.pad.on{background:linear-gradient(color-mix(in srgb,var(--acc) 85%,#fff),var(--acc));color:#111;border-color:var(--acc);box-shadow:0 0 22px var(--acc),0 1px 0 #0c0d0f;transition:none}
.pad.on span{color:#111b}
.app>*{min-width:0}
/* Layout horizontal: se decide por PROPORCIÓN del viewport (ancho/alto ≥ 1.2), no por una altura fija.
   Así una ventana de PC maximizada (con barras/escala de Windows que reducen la altura) y un teléfono/tablet
   en horizontal usan el mismo layout; un teléfono en vertical sigue en una columna. */
@media (min-aspect-ratio:6/5){
 .app{max-width:980px;display:grid;grid-template-rows:auto auto 1fr auto;grid-template-areas:"h p" "k p" "s p" "b p";column-gap:12px;
  grid-template-columns:minmax(0,1fr) min(calc(100vh - 24px),55%);grid-template-columns:minmax(0,1fr) min(calc(100dvh - 24px),55%)}
 .pads{width:100%;height:auto;aspect-ratio:1;align-self:center}
 .knobs{--k:clamp(48px,14dvh,72px)}
 .banks button{height:clamp(32px,6dvh,52px)}#vel,#rep,#edit,#midi{height:clamp(30px,5dvh,44px)!important}
}
/* Pantallas grandes en proporción vertical/cuadrada (p. ej. tablet vertical): una columna centrada */
@media (max-aspect-ratio:6/5) and (min-width:900px) and (min-height:700px){.app{max-width:640px}.pads{width:min(100%,56dvh)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

#ed,#md{position:fixed;inset:0;z-index:10;background:#000b;display:flex;align-items:flex-end;justify-content:center}#ed[hidden],#md[hidden],.usr[hidden]{display:none}
.sheet{position:relative;width:min(100%,600px);height:min(92dvh,720px);display:flex;flex-direction:column;gap:10px;padding:14px max(14px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom));background:var(--panel);border:1px solid var(--edge);border-radius:18px 18px 0 0}
.sheet h2{margin:0;font-size:16px;letter-spacing:.1em}
.sheet button{font:inherit;font-weight:700;font-size:13px;letter-spacing:.05em;color:var(--txt);background:#262930;border:1px solid var(--edge);border-radius:10px;padding:10px 12px;cursor:pointer;touch-action:manipulation}
.sheet button:disabled{opacity:.4}.sheet .go,.ask .go{background:var(--acc);color:#111;border-color:var(--acc)}
.tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.tabs .on{color:#111;background:var(--acc);border-color:var(--acc)}
.list{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:6px;overscroll-behavior:contain}
.row{display:flex;align-items:center;gap:10px;padding:6px 8px;background:#15171b;border:1px solid var(--edge);border-radius:10px}
.row span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.row.sel{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 18%,#15171b)}
.row .del{color:#ff7d72}.empty{color:var(--dim);text-align:center;margin:18px 0}
.usr{display:flex;gap:8px}.usr .add{flex:1;color:#111;background:var(--acc);border-color:var(--acc)}
.foot{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--edge);padding-top:10px}.lt{font-size:13px;color:var(--dim)}.lt b{color:var(--txt)}
.btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}.reset{font-size:11px!important;color:var(--dim)!important}
.toast{position:absolute;left:14px;right:14px;bottom:110px;padding:10px 12px;border-radius:10px;background:#000e;border:1px solid var(--edge);font-size:13px;opacity:0;pointer-events:none;transition:opacity .2s}.toast.show{opacity:1}
.ask{position:fixed;inset:0;z-index:20;display:grid;place-items:center;background:#000c;padding:20px}
.ask>div{max-width:360px;background:var(--panel);border:1px solid var(--edge);border-radius:14px;padding:16px;display:grid;grid-template-columns:1fr 1fr;gap:10px}.ask p{grid-column:1/-1;margin:0}
.ask button{font:inherit;font-weight:700;color:var(--txt);background:#262930;border:1px solid var(--edge);border-radius:10px;padding:10px}
.hd{grid-area:h;flex:none;margin:0;text-align:center;font-weight:800;letter-spacing:.2em;text-transform:uppercase;font-size:clamp(14px,4vw,20px);color:var(--acc);text-shadow:0 0 12px color-mix(in srgb,var(--acc) 60%,transparent)}
.pad.empty{opacity:.4}#hint{right:12px}
#vel,#rep,#edit,#midi{grid-column:span 3}#midi.on{color:var(--acc);border-color:var(--acc)}
.mdp{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.mdp button{padding:6px!important}.mdp .on{background:var(--acc)!important;color:#111!important}.mdp small{font-weight:400;font-size:10px}

#md button,#ed button,.ask button{transition:transform .08s,filter .08s}
#md button:active,#ed button:active,.ask button:active{transform:scale(.94);filter:brightness(1.35)}
#midi.on{color:#111;background:var(--acc);border-color:var(--acc)}
#midi.lost{color:var(--acc);border:1px dashed var(--acc);animation:pulse 1s ease-in-out infinite alternate}
#midi.off{opacity:.45}#md .btns{grid-template-columns:repeat(3,1fr)}#md .btns button{font-size:11px}
.md-conn{display:flex;gap:8px}.md-conn .go{flex:1}.md-conn button{font-size:12px}.md-conn [data-a="disc"]{flex:none}