[hidden]{display:none!important}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#2b1a5e;color:#fff;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;overflow:hidden}
body{background:radial-gradient(circle at 50% 0,#5b2fa8 0,#2b1a5e 60%) fixed}
#app{height:100vh;height:100dvh;display:flex;flex-direction:column;padding:6px 10px 4px;max-width:1500px;margin:0 auto}
.top{display:flex;align-items:center;justify-content:space-between;gap:8px;flex:none}
h1{margin:0;font-size:1.25rem;display:flex;align-items:center;gap:8px}
h2{margin:0 0 6px;font-size:1rem}
h2 small{font-weight:400;opacity:.7;font-size:.78rem}
.badge{font-size:.74rem;background:rgba(255,255,255,.15);padding:3px 9px;border-radius:99px}
.badge.ok{background:#1f8a4c}.badge.warn{background:#a8651b}
.topright{display:flex;align-items:center;gap:8px}
.layoutpick{display:inline-flex;gap:3px;background:rgba(0,0,0,.25);padding:2px;border-radius:10px}
.layoutpick button{border:0;background:transparent;color:#fff;padding:4px 9px;border-radius:8px;font-size:.78rem;cursor:pointer}
.layoutpick button.on{background:#ffd23f;color:#2b1a5e;font-weight:700}
.sets{flex:none}
.setbuttons{display:flex;flex-wrap:nowrap;gap:6px;justify-content:center;margin:4px 0 6px;overflow-x:auto;padding:2px 2px 4px}
.setbtn{flex:none;touch-action:manipulation;border:3px solid transparent;border-radius:14px;background:rgba(255,255,255,.14);color:#fff;
  min-width:62px;padding:3px 6px;font-size:.7rem;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:1px}
.setbtn.on{border-color:#ffd23f;background:rgba(255,210,63,.28)}
.setbtn svg{filter:drop-shadow(0 2px 2px rgba(0,0,0,.35))}
#main{flex:1;min-height:0;display:flex;gap:10px}
#left{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;gap:6px}
.kbwrap{flex:1;min-height:120px;background:#1b0f3d;border-radius:16px;padding:8px;box-shadow:0 6px 18px rgba(0,0,0,.4)}
.keyboard{position:relative;display:flex;height:100%;touch-action:none;user-select:none;-webkit-user-select:none}
.key{touch-action:none;user-select:none}
.key.white{flex:1;margin:0 2px;border-radius:0 0 14px 14px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:8px;
  font-weight:700;font-size:clamp(.75rem,1.8vw,1.3rem);color:rgba(0,0,0,.65);border-bottom:6px solid rgba(0,0,0,.25);transition:transform .05s,filter .05s}
.key.black{position:absolute;top:0;height:60%;width:6%;background:#15121f;border-radius:0 0 10px 10px;z-index:2;border:2px solid #000;transition:transform .05s,background .05s}
.key.on{filter:brightness(1.35) saturate(1.2);transform:translateY(3px)}
.key.black.on{background:#6a4bd6}
.side{width:330px;flex:none;min-height:0;overflow:auto;display:none;flex-direction:column;gap:8px}
body.lay-a .side{display:flex}
.panel{background:rgba(255,255,255,.1);border-radius:14px;padding:10px}
.transport{flex:none;display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:rgba(255,255,255,.1);border-radius:14px;padding:6px 8px}
.grow{flex:1}
button{font:inherit}
button.big{touch-action:manipulation;border:0;border-radius:12px;padding:8px 14px;font-size:.95rem;font-weight:700;color:#fff;background:#3a7bd5;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
button.big.rec{background:#d9342b}button.big.rec.live{animation:pulse 1s infinite}
button.big.play{background:#1f9d55}button.big.stop{background:#666}button.big.dl{background:#8e44ad}button.big:disabled{opacity:.6}button.big.ghost{background:rgba(255,255,255,.2)}
button.big b{background:#ffd23f;color:#2b1a5e;border-radius:99px;padding:0 7px;font-size:.8rem}
button.big:active{filter:brightness(.85)}
.ic{display:block;flex:none}
@keyframes pulse{50%{box-shadow:0 0 0 7px rgba(217,52,43,.35)}}
.loop{font-size:.82rem;display:flex;align-items:center;gap:5px}
.loop input{width:20px;height:20px}
.tracks{display:flex;flex-direction:column;gap:5px}
.empty{opacity:.7;font-size:.85rem;padding:4px 0}
.track{display:flex;flex-wrap:wrap;align-items:center;gap:6px;background:rgba(0,0,0,.25);border-radius:10px;padding:5px 8px}
.track .nm{flex:1;min-width:90px;font-size:.85rem}
.track.muted{opacity:.5}
select,input[type=text]{font:inherit;padding:6px 8px;border-radius:9px;border:0;background:#fff;color:#222}
.sm{touch-action:manipulation;border:0;border-radius:9px;padding:6px 10px;background:rgba(255,255,255,.2);color:#fff;cursor:pointer;font-size:.82rem}
.sm.danger{background:#a83232}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:6px}
#songs{display:flex;flex-wrap:wrap;gap:6px}
.savebar{margin-top:0}.savebar input{flex:1;min-width:120px}
.saved{display:flex;flex-direction:column;gap:6px}
.tune{background:rgba(0,0,0,.25);border-radius:10px;padding:6px 8px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.tune.cur{outline:2px solid #ffd23f}
.tune .nm{flex:1;min-width:130px}.tune .nm small{display:block;opacity:.65}
.tune .btns{display:flex;flex-wrap:wrap;gap:5px}
footer{flex:none;text-align:center;opacity:.5;font-size:.7rem;padding-top:2px}
footer a{color:#cfc2ff}
.strip{display:none;flex:none}
body.lay-b .strip{display:block}
body.lay-b .strip .panel{padding:5px 8px;background:rgba(255,255,255,.08);display:flex;align-items:center;gap:8px}
body.lay-b .strip h2{margin:0;font-size:.82rem;white-space:nowrap}
body.lay-b .strip h2 small{display:none}
body.lay-b .strip .tracks{flex-direction:row;overflow-x:auto;flex:1;padding:2px 0}
body.lay-b .strip .track{flex:none;flex-wrap:nowrap;padding:3px 6px}
body.lay-b .strip .track .nm{flex:none;min-width:0;font-size:.78rem}
body.lay-b .strip .track .sm{padding:5px 8px}
body.lay-b .strip .track select{padding:4px 6px;font-size:.8rem}
body.lay-b .strip .row{margin:0;flex:none}
.start{position:fixed;inset:0;background:rgba(27,15,61,.94);display:flex;align-items:center;justify-content:center;z-index:30}
.start.hide{display:none}
.start>button{font-size:2rem;padding:28px 40px;border:0;border-radius:28px;background:#ffd23f;color:#2b1a5e;font-weight:800;cursor:pointer}
#drawer{background:rgba(10,5,30,.6);align-items:flex-end;z-index:25}
.sheet{background:#34206f;width:100%;max-width:900px;max-height:80vh;border-radius:20px 20px 0 0;display:flex;flex-direction:column;box-shadow:0 -6px 24px rgba(0,0,0,.5)}
.sheethead{display:flex;justify-content:space-between;align-items:center;padding:10px 12px 6px;gap:8px}
.tabs{display:flex;gap:6px;flex-wrap:wrap}
.tabs button{border:0;border-radius:10px;padding:8px 14px;background:rgba(255,255,255,.14);color:#fff;font-weight:700;cursor:pointer}
.tabs button.on{background:#ffd23f;color:#2b1a5e}
.sheetbody{overflow:auto;padding:4px 12px 14px;display:flex;flex-direction:column;gap:8px}
.pinbox{background:#3a2380;border-radius:20px;padding:22px;max-width:360px;width:90vw;text-align:center}
.pinbox input{width:100%;font-size:1.8rem;text-align:center;letter-spacing:.3em;margin:10px 0}
.pinbox .row{justify-content:center}.pinbox p{font-size:.9rem;opacity:.85}
.toast{position:fixed;left:50%;bottom:18px;transform:translateX(-50%) translateY(80px);background:#111;color:#fff;padding:10px 16px;border-radius:12px;opacity:0;transition:.25s;z-index:40;max-width:90vw;text-align:center}
.toast.show{transform:translateX(-50%);opacity:1}
@media (max-width:760px){
  html,body{overflow:auto}
  #app{height:auto;min-height:100dvh}
  #main{flex-direction:column}
  .kbwrap{height:46vh;flex:none}
  body.lay-a .side{width:auto;overflow:visible}
  .setbtn{min-width:58px}
  .loop{font-size:.78rem}
}

body.lay-b .strip .tracks{scrollbar-width:none}
body.lay-b .strip .tracks::-webkit-scrollbar{display:none}
body.lay-a .track .meta{font-size:.72rem;opacity:.75}
.transport{gap:6px}

/* v3: layout B only, five labelled layer slots */
body.lay-b .strip .panel{display:block;padding:6px 8px}
body.lay-b .strip h2{display:none}
body.lay-b .strip .tracks{display:flex;flex-direction:row;flex-wrap:wrap;gap:6px;overflow:visible;position:relative;padding:0}
body.lay-b .strip .track{flex:1 1 150px;min-width:0;flex-direction:column;align-items:stretch;gap:4px;padding:5px 6px;flex-wrap:nowrap}
body.lay-b .strip .track.empty{flex-direction:row;align-items:center;opacity:.45;justify-content:flex-start;gap:8px;min-height:62px}
.ltr{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:#ffd23f;color:#2b1a5e;font-weight:800;font-size:.9rem;flex:none}
.free{font-size:.8rem}
.trtop{display:flex;align-items:center;gap:6px}
.trtop select{flex:1;min-width:0;padding:4px 4px;font-size:.8rem}
.trbtn{display:flex;gap:4px}
.trbtn .sm{flex:1;padding:6px 2px;font-size:.78rem}
.sm.on{background:#1f9d55;font-weight:700}
.sm.off{background:#555;font-weight:700}
.track.muted .trtop{opacity:.55}
.track.muted{opacity:1}
.clearall{flex:none;align-self:center;padding:6px 8px}

.short{display:none}
/* short landscape (phones): keyboard left, layers in a compact column on the right, everything on one screen */
@media (max-height:520px) and (orientation:landscape){
  #app{padding:3px 6px 2px}
  h1{font-size:1rem}h1 svg{width:22px;height:22px}
  .badge{font-size:.65rem;padding:2px 7px}
  footer{display:none}
  .setbuttons{margin:2px 0 3px;padding:0 2px 2px;gap:4px}
  .setbtn{min-width:46px;padding:2px 4px;font-size:0;gap:0;border-width:2px;border-radius:10px}
  .setbtn svg{width:30px;height:30px}
  #main{gap:6px}
  #left{display:grid;grid-template-columns:minmax(0,1fr) clamp(238px,40vw,330px);grid-template-rows:minmax(0,1fr) auto;gap:4px 6px}
  .kbwrap{grid-column:1;grid-row:1;min-height:0;height:auto;flex:none;padding:5px;border-radius:12px}
  .transport{grid-column:1;grid-row:2;padding:4px 6px;gap:5px}
  button.big{padding:4px 7px;font-size:.74rem;gap:4px}
  button.big svg{width:14px;height:14px}
  .transport .loop{font-size:.68rem;gap:3px}
  .transport{row-gap:3px}
  .loop{font-size:.72rem}.loop input{width:16px;height:16px}
  .strip{grid-column:2;grid-row:1 / span 2;display:block;min-height:0;overflow:auto}
  body.lay-b .strip .panel{padding:4px;height:100%}
  body.lay-b .strip .tracks{flex-direction:column;flex-wrap:nowrap;gap:3px}
  body.lay-b .strip .track{flex:none;flex-direction:row;align-items:center;gap:4px;padding:3px 4px}
  body.lay-b .strip .track.empty{min-height:0;padding:3px 4px}
  .trtop{flex:1;min-width:0}
  .ltr{width:22px;height:22px;font-size:.8rem}
  .trtop select{padding:2px 2px;font-size:.72rem}
  .trbtn{flex:none;gap:3px}
  .trbtn .sm{flex:none;padding:5px 7px;font-size:.72rem;min-width:30px}
  .trbtn .full{display:none}.trbtn .short{display:inline;font-size:1rem;line-height:1}
  .clearall{padding:3px 8px;font-size:.72rem;align-self:flex-end}
  .key.white{font-size:.7rem;padding-bottom:4px;border-bottom-width:4px}
  .sheet{max-height:92vh}
  .sheethead{padding:6px 10px 4px}.tabs button{padding:5px 10px}
}

svg.crayon{height:40px;width:auto;display:block;overflow:visible}
@media (max-height:520px) and (orientation:landscape){svg.crayon{height:28px}}

.badge{white-space:nowrap}.badge .bs{display:none}
/* portrait phones: everything on one screen, no page scroll, five compact layer rows */
@media (max-width:600px) and (orientation:portrait){
  html,body{overflow:hidden}
  #app{height:100dvh;min-height:0;padding:4px 6px 3px;overflow:hidden}
  svg.crayon{height:32px}
  h1{gap:4px}h1>svg:first-child{width:26px;height:26px}
  .badge .bf{display:none}.badge .bs{display:inline}
  .badge{font-size:.62rem;padding:2px 8px}
  footer{display:none}
  .setbuttons{margin:3px 0;padding:0 2px 2px;gap:4px}
  .setbtn{min-width:48px;padding:2px 4px;font-size:.6rem;gap:1px}
  .setbtn svg{width:30px;height:30px}
  #main{flex:1;min-height:0;gap:4px}
  #left{flex:1;min-height:0;display:flex;flex-direction:column;gap:4px}
  .kbwrap{height:auto;flex:1 1 0;min-height:90px;padding:5px}
  .transport{padding:4px 6px;gap:5px;row-gap:3px}
  button.big{padding:5px 8px;font-size:.78rem;gap:4px}
  button.big svg{width:14px;height:14px}
  .transport .loop{font-size:.7rem;gap:3px}.loop input{width:16px;height:16px}
  .strip{flex:none}
  body.lay-b .strip .panel{padding:4px}
  body.lay-b .strip .tracks{flex-direction:column;flex-wrap:nowrap;gap:3px}
  body.lay-b .strip .track{flex:none;flex-direction:row;align-items:center;gap:4px;padding:3px 4px}
  body.lay-b .strip .track.empty{min-height:0;padding:3px 4px}
  .trtop{flex:1;min-width:0}
  .ltr{width:22px;height:22px;font-size:.8rem}
  .trtop select{padding:2px 2px;font-size:.74rem}
  .trbtn{flex:none;gap:3px}
  .trbtn .sm{flex:none;padding:5px 7px;font-size:.72rem;min-width:30px}
  .trbtn .full{display:none}.trbtn .short{display:inline;font-size:1rem;line-height:1}
  .clearall{padding:3px 8px;font-size:.72rem;align-self:flex-end}
}

@media (max-width:600px) and (orientation:portrait),(max-height:520px) and (orientation:landscape){
}
.cattabs{display:flex;gap:8px;justify-content:center;margin:2px 0 5px}
.cattab{touch-action:manipulation;border:3px solid #2b1a5e;border-radius:16px;padding:3px 12px 4px;cursor:pointer;line-height:1.1;transform:rotate(-1.5deg);box-shadow:0 3px 0 rgba(0,0,0,.35);opacity:.78}
.cattab:nth-child(2){transform:rotate(1.2deg)}
.cattab[data-cat=a]{background:#ff8a6b}.cattab[data-cat=i]{background:#6ad6ff}.cattab[data-cat=d]{background:#8de27a}
.cattab .ct{font-family:'Chalkboard SE','Marker Felt','Comic Sans MS','Segoe Print','Bradley Hand','Comic Neue',cursive,sans-serif;font-size:1.15rem;font-weight:900;color:#2b1a5e;letter-spacing:.02em}
.cattab.on{opacity:1;border-color:#ffd23f;box-shadow:0 0 0 2px #2b1a5e,0 4px 0 rgba(0,0,0,.4);transform:translateY(-1px) scale(1.07)}
.setbtn[hidden]{display:none}
@media (max-height:480px){.cattabs{margin:0 0 2px;gap:6px}.cattab{padding:0 9px 1px;border-width:2px;border-radius:12px}.cattab .ct{font-size:.85rem}}
@media (max-width:380px){.cattabs{gap:5px}.cattab{padding:2px 8px 3px}.cattab .ct{font-size:1rem}}