:root{--bg:#191622;--surface:#241F30;--cell:#2A2438;--line:#3A3350;--ink:#F2EDE4;--dim:#9A92AC;--drums:#F2A65A;--bass:#EF6F6C;--pads:#5FB7A5;--keys:#9B8CE8;--lead:#6FA8DC;--voice:#7CC66F;--perc:#D9906F;--arps:#C77FD6;--texture:#8FA3B8;--solo:#D9C47E;--played:#E39BC0;--labw:248px;--cellw:40px}*{box-sizing:border-box;margin:0;padding:0}html,body{background:var(--bg);color:var(--ink);font-family:Heebo,sans-serif}body{min-height:100vh;padding-bottom:130px}button{font-family:Heebo,sans-serif}header{padding:26px 20px 6px;text-align:center}h1{font-family:Suez One,serif;font-size:clamp(2rem,5vw,3rem)}h1 .dot{color:var(--drums)}.sub{color:var(--dim);font-weight:300;margin-top:4px;font-size:.98rem}.atmos{display:flex;gap:8px;justify-content:flex-start;padding:4px 16px 0;overflow-x:auto;scrollbar-width:thin}@media (min-width:900px){.atmos{justify-content:center}}.atmos .lbl{color:var(--dim);font-size:.9rem;align-self:center;flex:none}.atmo{flex:none;font-size:.9rem;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:7px 16px;cursor:pointer}.atmo.on{background:var(--drums);border-color:var(--drums);color:#161320;font-weight:600}.atmo:focus-visible{outline:2px solid var(--ink);outline-offset:2px}.toolbar{display:flex;align-items:center;gap:12px;padding:12px 16px 4px;justify-content:center;flex-wrap:wrap}.recbtn{font-size:.95rem;color:var(--ink);background:var(--surface);border:1px dashed var(--voice);border-radius:10px;padding:9px 18px;cursor:pointer}.recbtn:focus-visible{outline:2px solid var(--voice);outline-offset:2px}.btn{font-size:1.02rem;font-weight:600;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:11px 24px;cursor:pointer}.btn:hover{border-color:var(--dim)}.btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}.btn.play.on,.btn.accent{background:var(--drums);border-color:var(--drums);color:#161320}.btn.accent:hover{filter:brightness(1.06)}.btn.small{padding:6px 14px;font-size:.9rem;border-radius:9px}.btn[disabled]{opacity:.45;cursor:default}.wrap{max-width:1280px;margin:16px auto 0;padding:0 14px;overflow-x:auto}.grid{display:grid;gap:3px;-webkit-user-select:none;user-select:none;width:max-content;min-width:100%;padding-bottom:18px}.gcorner{position:sticky;inset-inline-start:0;z-index:3;background:var(--bg)}.gnum{font-size:.72rem;color:var(--dim);text-align:center;padding:4px 0;-webkit-user-select:none;user-select:none;background:none;border:0;border-radius:6px;cursor:pointer;font-family:Heebo,sans-serif}.gnum:hover{color:var(--ink);background:var(--surface)}.gnum:focus-visible{outline:2px solid var(--ink);outline-offset:1px}.gnum.start{color:#161320;background:var(--drums);font-weight:700}.gnum.now{color:var(--drums);font-weight:600}.gnum.start.now{color:#161320}.gctrl{display:flex;gap:4px;align-items:center;padding:0 2px;position:sticky;inset-inline-end:0;z-index:2;background:var(--bg)}.gctrl button{font-size:.72rem;color:var(--dim);background:var(--surface);border:1px solid var(--line);border-radius:7px;padding:3px 8px;cursor:pointer;white-space:nowrap}.gctrl button:hover{color:var(--ink);border-color:var(--dim)}.gctrl button[disabled]{opacity:.4;cursor:default}.gcat{grid-column:1 / -1;font-size:.85rem;font-weight:600;color:var(--hue);padding:10px 4px 2px;letter-spacing:.05em}.gcat span{position:sticky;inset-inline-start:6px;display:inline-block}.rowlab{position:sticky;inset-inline-start:0;z-index:2;display:flex;align-items:center;gap:6px;padding:0 6px;background:var(--surface);border-radius:8px;min-height:34px}.rowlab .nm{font-size:.9rem;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}.rowlab .nm:hover{color:var(--hue)}.rowlab input[type=range]{width:44px;accent-color:var(--hue)}.rowlab .ms{flex:none;width:20px;height:20px;display:grid;place-items:center;font-size:.68rem;font-weight:600;color:var(--dim);background:var(--cell);border:1px solid transparent;border-radius:5px;cursor:pointer;line-height:1;padding:0}.rowlab .ms:hover{color:var(--ink);border-color:var(--line)}.rowlab .ms.on{background:var(--bass);color:#161320}.rowlab .ms.solo.on{background:var(--drums)}.rowlab .ms.del{font-size:.72rem}.rowlab .ms.del:hover{color:#fff;background:var(--bass);border-color:var(--bass)}.rowlab .ms.fx{font-style:italic;font-family:Georgia,serif;font-size:.8rem}.rowlab .ms.fx.on{background:var(--hue);color:#161320}.rowlab .ms:focus-visible{outline:2px solid var(--hue);outline-offset:1px}.rowlab .more{flex:none;width:22px;height:22px;display:grid;place-items:center;border:none;background:none;color:var(--dim);font-size:1rem;border-radius:6px;cursor:pointer;line-height:1}.rowlab .more:hover{color:var(--ink);background:var(--cell)}.rowlab .more:focus-visible{outline:2px solid var(--hue);outline-offset:1px}.cell{width:var(--cellw);height:34px;border-radius:7px;background:var(--cell);border:1px solid transparent;cursor:pointer;padding:0;touch-action:manipulation;transition:background .1s,box-shadow .15s,transform .08s}.cell:hover{border-color:var(--hue)}.cell:focus-visible{outline:2px solid var(--hue);outline-offset:1px}.cell.on{background:var(--hue);box-shadow:0 0 10px color-mix(in srgb,var(--hue) 35%,transparent)}.cell.now{border-color:var(--ink)}.cell.on.now{transform:scale(1.06)}@media (prefers-reduced-motion: reduce){.cell.on.now{transform:none}}.gempty{min-height:1px}.dock{position:fixed;bottom:0;right:0;left:0;z-index:10;background:color-mix(in srgb,var(--bg) 90%,black);border-top:1px solid var(--line);padding:12px 16px;display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap}.mvol{display:flex;align-items:center;gap:8px;color:var(--dim);font-size:.85rem}.mvol input{width:110px;accent-color:var(--drums)}#lenlab{color:var(--dim);font-size:.85rem}#status{color:var(--dim);font-size:.88rem;min-width:170px;text-align:center}#status a{color:var(--drums);font-weight:600;text-decoration:underline}.modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;background:#0a0810bd;display:flex;align-items:center;justify-content:center}.modal[hidden]{display:none}.mbox{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:26px 28px;width:min(440px,92vw);text-align:center}.mbox.wide{width:min(560px,94vw);text-align:start;max-height:84vh;display:flex;flex-direction:column}.mbox h3{font-family:Suez One,serif;font-size:1.4rem;margin-bottom:6px}.mhint{color:var(--dim);font-size:.9rem;margin-bottom:12px}.mcount{font-family:Suez One,serif;font-size:2.4rem;min-height:3rem;color:var(--voice)}.dlg-input{width:100%;margin:4px 0 16px;padding:10px 12px;font-family:Heebo,sans-serif;font-size:1rem;color:var(--ink);background:var(--cell);border:1px solid var(--line);border-radius:10px}.dlg-input:focus-visible{outline:2px solid var(--drums);outline-offset:1px}.mbar{height:8px;background:var(--cell);border-radius:5px;overflow:hidden;margin:10px 0 16px}.mbar div{height:100%;width:0%;background:var(--voice);transition:width .1s linear}.mrow{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:12px}.mbox.wide .mrow{justify-content:flex-end;margin-bottom:0;margin-top:14px}.mdouble{color:var(--dim);font-size:.9rem;display:inline-flex;gap:8px;align-items:center;cursor:pointer;margin-inline-end:14px}.mlab{color:var(--dim);font-size:.9rem;align-self:center}.mbox select{background:var(--cell);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:8px 10px;font-family:Heebo,sans-serif;font-size:.9rem;max-width:min(320px,70vw)}.mbox select:disabled{opacity:.5}#mUse:not([disabled]){background:var(--voice);border-color:var(--voice);color:#161320}.msettings{text-align:start;margin:2px 0 6px}.msettings summary{cursor:pointer;color:var(--dim);font-size:.9rem;padding:7px 4px;border-radius:10px;-webkit-user-select:none;user-select:none}.msettings summary:hover{color:var(--ink);background:var(--cell)}.msettings[open]{background:var(--cell);border-radius:12px;padding:8px 14px 12px}.msettings[open] summary{padding-inline:0}.msettings[open] summary:hover{background:transparent}.msettings .mrow{justify-content:flex-start;margin:10px 0}.msettings .mdouble{display:flex;margin:8px 0 0}.mfoot{margin:14px 0 0;padding-top:14px;border-top:1px solid var(--line)}.padoct kbd{font-family:Heebo,sans-serif;font-size:.72rem;font-weight:700;color:var(--dim);background:var(--surface);border:1px solid var(--line);border-radius:5px;padding:1px 5px}.padband{margin-inline-start:auto}.chip{font-size:.88rem;color:var(--ink);background:var(--cell);border:1px solid transparent;border-radius:999px;padding:6px 14px;cursor:pointer}.chip.on{background:var(--voice);color:#161320;font-weight:600}.chip:focus-visible{outline:2px solid var(--voice);outline-offset:2px}.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}.tab{font-size:.9rem;color:var(--ink);background:var(--cell);border:1px solid transparent;border-radius:999px;padding:6px 14px;cursor:pointer}.tab.on{background:var(--hue);color:#161320;font-weight:600}.tab:focus-visible{outline:2px solid var(--ink);outline-offset:2px}.preset-list{overflow-y:auto;display:flex;flex-direction:column;gap:6px;padding-inline-end:4px;min-height:200px}.preset-row{display:flex;align-items:center;gap:10px;background:var(--cell);border-radius:10px;padding:8px 12px}.preset-row .pname{flex:1;font-size:.95rem}.preset-row .pname:before{content:"";display:inline-block;width:9px;height:9px;border-radius:3px;background:var(--hue);margin-inline-end:9px;vertical-align:0}.preset-row button{font-size:.85rem;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:6px 12px;cursor:pointer}.preset-row button:hover{border-color:var(--dim)}.preset-row button.prev.on{background:var(--hue);border-color:var(--hue);color:#161320}.pdefault{display:inline-flex;align-items:center;gap:5px;color:var(--dim);font-size:.82rem;white-space:nowrap;cursor:pointer}.pdefault input{accent-color:var(--hue);cursor:pointer}.plist-empty{color:var(--dim);font-size:.9rem;padding:18px 6px}.menu{position:fixed;z-index:60;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:6px;display:flex;flex-direction:column;min-width:130px;box-shadow:0 8px 24px #00000073}.menu[hidden]{display:none}.menu button{text-align:start;font-size:.92rem;color:var(--ink);background:none;border:none;border-radius:7px;padding:8px 10px;cursor:pointer}.menu button:hover{background:var(--cell)}.menu button[disabled]{opacity:.4;cursor:default}.menu button[disabled]:hover{background:none}.menu button.danger{color:var(--bass)}.patmenu{padding:12px 14px;min-width:210px;max-width:260px}.pathint{color:var(--dim);font-size:.8rem;margin-bottom:10px;line-height:1.35}.patrow{display:flex;flex-wrap:wrap;gap:6px}.patrow button{font-size:.88rem;color:var(--ink);background:var(--cell);border:1px solid var(--line);border-radius:8px;padding:7px 12px;cursor:pointer}.patrow button:hover{border-color:var(--dim)}.patrow button.on{background:var(--drums);border-color:var(--drums);color:#161320;font-weight:600}.melmenu{padding:12px 14px;width:min(92vw,348px)}.melgrid{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;margin:2px 0 12px}.melcell{font-size:.8rem;color:var(--dim);background:var(--cell);border:1px solid var(--line);border-radius:7px;padding:8px 0;cursor:pointer;text-align:center}.melcell:hover{border-color:var(--dim);color:var(--ink)}.melcell.bar{border-left:2px solid var(--dim)}.melcell.on{background:var(--played);border-color:var(--played);color:#161320;font-weight:600}.melsounds{margin-bottom:2px}.padcount{font-family:Suez One,serif;font-size:2rem;text-align:center;color:var(--played);margin:2px 0;line-height:1}.fxmenu{padding:12px 14px;gap:10px;min-width:180px}.fxmenu label{display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--dim);font-size:.88rem}.fxmenu input[type=range]{width:110px;accent-color:var(--drums)}.journeys{padding-top:6px}.atmo.journey.on{background:var(--pads);border-color:var(--pads)}.recbtn.tune{border-style:solid;border-color:var(--line)}.recbtn.tune.on{border-color:var(--keys);color:var(--keys)}#tuneVal{font-weight:600}.tunemenu{padding:12px 14px;max-width:240px}.mrow.chips{max-width:380px;margin-inline:auto}.cell.clipcell{position:relative}.cell.clipcell.on{background:linear-gradient(180deg,color-mix(in srgb,var(--hue) 88%,white) 0%,var(--hue) 45%,var(--hue) 100%)}.cell.clipcell.on.joinr{border-top-right-radius:0;border-bottom-right-radius:0}.cell.clipcell.on.joinl{border-top-left-radius:0;border-bottom-left-radius:0}.cell.clipcell.on.joinr:after{content:"";position:absolute;top:0;bottom:0;right:-4px;width:5px;background:var(--hue);pointer-events:none}@media (prefers-reduced-motion: no-preference){.cell.clipcell.on.now{transform:none}}.cell.runcell{position:relative}.cell.runcell.on.joinr{border-top-right-radius:0;border-bottom-right-radius:0}.cell.runcell.on.joinl{border-top-left-radius:0;border-bottom-left-radius:0;box-shadow:inset 2px 0 #16132047}.cell.runcell.on.joinr:after{content:"";position:absolute;top:0;bottom:0;right:-4px;width:5px;background:var(--hue);pointer-events:none}.cell.runcell.on.now{transform:none}.cell.lifted{opacity:.35}.cell.ghost{outline:2px dashed var(--hue);outline-offset:-2px;background:color-mix(in srgb,var(--hue) 30%,var(--cell))}.cell.ghost.on{background:color-mix(in srgb,var(--hue) 65%,var(--cell))}.gframe{position:relative;max-width:1280px;margin:16px auto 0}.gframe .wrap{margin:0 auto}.grail{position:absolute;top:0;bottom:0;width:36px;pointer-events:none}.grail.left{left:-44px}.grail.right{right:-44px}.gscroll{position:sticky;top:42vh;pointer-events:auto;width:36px;height:52px;display:grid;place-items:center;font-size:1.5rem;line-height:1;color:var(--ink);cursor:pointer;background:color-mix(in srgb,var(--surface) 82%,transparent);border:1px solid color-mix(in srgb,var(--line) 70%,transparent);border-radius:10px;opacity:.7;transition:opacity .15s;-webkit-user-select:none;user-select:none;touch-action:none}.gscroll:hover{opacity:1}.gscroll:focus-visible{outline:2px solid var(--ink);outline-offset:2px;opacity:1}@media (max-width:1380px){.grail.left{left:4px}.grail.right{right:4px}}.recbtn.pad{border-style:solid;border-color:var(--played)}.paddrawer{position:fixed;left:50%;transform:translate(-50%);z-index:12;width:min(680px,calc(100vw - 20px));background:color-mix(in srgb,var(--surface) 94%,black);border:1px solid var(--line);border-radius:16px;padding:14px 16px 12px;box-shadow:0 12px 34px #00000080}.paddrawer[hidden]{display:none}.padtop{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px}.padtop .mrow{margin-bottom:0;justify-content:flex-start}.padtop #padSounds{max-width:none;flex:1 1 380px;gap:8px}.padtop #padSounds .chip{padding:5px 12px;font-size:.85rem}.padoct{display:flex;align-items:center;gap:8px;color:var(--dim);font-size:.9rem}.padoct .chip{padding:4px 12px}#padOctVal{min-width:2.2em;text-align:center;font-weight:600;color:var(--ink)}.padkeys{position:relative;display:flex;gap:3px;height:118px;-webkit-user-select:none;user-select:none;touch-action:none}.pkey{border:1px solid var(--line);cursor:pointer;padding:0;position:relative;display:flex;flex-direction:column;justify-content:flex-end;align-items:center}.pkey.white{flex:1;background:#ede8f2;border-radius:0 0 8px 8px;color:#3a3350}.pkey.black{position:absolute;top:0;width:6.8%;height:58%;background:#241f30;border-radius:0 0 6px 6px;color:var(--dim);z-index:2}.pkey span{font-size:.72rem;font-weight:600;margin-bottom:6px;pointer-events:none}.pkey i{width:7px;height:7px;border-radius:50%;margin-bottom:4px;pointer-events:none;background:transparent}.pkey.inkey i,.pkey.white.down{background:var(--played)}.pkey.black.down{background:var(--played);color:#161320}.pkey:focus-visible{outline:2px solid var(--played);outline-offset:1px}.padhint{color:var(--dim);font-size:.84rem;margin:10px 2px 8px;line-height:1.35;min-height:2.2em}.padrow{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}.padrow .btn{padding:8px 16px;font-size:.95rem}#padRec.on{background:var(--bass);border-color:var(--bass);color:#fff}@media (max-width:560px){.padkeys{height:96px}.pkey span{font-size:.62rem}}.paddrawer .padlen{justify-content:flex-start;max-width:none;margin:8px 0 0}.paddrawer .padlen #padLen{display:flex;gap:6px;flex-wrap:wrap}.padprog{position:relative;height:16px;border:1px solid var(--line);border-radius:9px;background:var(--cell);overflow:hidden;margin:8px 0 0}.padprog-fill{height:100%;width:0%;background:var(--played);border-radius:8px;transition:width .12s linear}.padprog[data-win="4"]:after{content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;background:var(--line)}.padmidi{display:flex;align-items:center;gap:8px;margin:6px 0 8px;flex-wrap:wrap}.padmidi select{background:var(--cell);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:5px 8px;font:inherit;font-size:.85rem;max-width:240px}.preset-row.buildrow{border:1px dashed var(--drums);background:transparent}.buildrow .pname{flex:none}.buildhint{flex:1;color:var(--dim);font-size:.85rem}.buildgo{background:var(--drums)!important;border-color:var(--drums)!important;color:#161320!important;font-weight:600}.buildgo kbd{font-family:Heebo,sans-serif;font-size:.72rem;font-weight:700;color:#161320;background:#ffffff57;border-radius:5px;padding:1px 5px;margin-inline-start:5px}.mbox.beatbox{width:min(760px,96vw)}.beatgrid{display:grid;grid-template-columns:104px repeat(16,minmax(24px,1fr));gap:3px;margin:2px 0 8px;overflow-x:auto;padding-bottom:4px}.beatcorner{min-height:18px}.beatnum{color:var(--dim);font-size:.7rem;text-align:center;line-height:18px;-webkit-user-select:none;user-select:none}.beatnum.beat{color:var(--ink);font-weight:600}.beatlab{text-align:start;font-size:.84rem;color:var(--dim);background:var(--cell);border:1px solid var(--line);border-radius:7px;padding:6px 9px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.beatlab:hover{border-color:var(--dim);color:var(--ink)}.beatlab.used{color:var(--ink);border-color:var(--drums)}.beatlab.alt{font-style:italic}.beatcell{height:30px;background:var(--cell);border:1px solid var(--line);border-radius:6px;cursor:pointer;padding:0}.beatcell:hover{border-color:var(--dim)}.beatcell.beat{border-left:2px solid var(--dim)}.beatcell.on{background:var(--drums);border-color:var(--drums)}.beatcell.on.beat{border-left-color:var(--drums)}.beatcell:focus-visible{outline:2px solid var(--ink);outline-offset:1px}.beatfoot{justify-content:flex-end}#beatPlay.on{background:var(--drums);border-color:var(--drums);color:#161320}#beatUse[disabled],#beatClear[disabled]{opacity:.45;cursor:default}.melfollow{display:flex;align-items:center;gap:8px;cursor:pointer;color:var(--ink);font-size:.88rem;margin:12px 0 6px}.melfollow input{accent-color:var(--played)}.melfollowhint{margin-bottom:2px}