html.studio,html.studio body{height:100%;overflow:hidden}.studio body{user-select:none;-webkit-user-select:none}.studio{--deck: clamp(380px, 47vh, 470px);--glass: rgba(11, 11, 13, .86);--cell: rgba(255, 255, 255, .035);--cellb: rgba(255, 255, 255, .09)}.studio input,.studio select,.studio button{font-family:var(--mono)}#sbar{position:fixed;top:0;left:0;right:0;z-index:20;height:60px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;padding:0 22px;font-family:var(--mono);font-size:11.5px;color:var(--fg);white-space:nowrap;background:linear-gradient(180deg,#060607d1,#06060700)}.sb-left,.sb-right{display:flex;align-items:center;gap:18px}.sb-right{justify-content:flex-end;gap:12px}#sbar .brand{font-family:var(--sans);font-weight:600;font-size:16px}#sbar .brand span{font-family:var(--mono);font-weight:400;font-size:11px;color:var(--mute);margin-left:4px}.pages{display:flex;gap:4px;padding:3px;border:1px solid var(--line);border-radius:99px}.pages a{padding:5px 11px;border-radius:99px;color:var(--mute);transition:color .25s,background .25s}.pages a:hover{color:var(--fg)}.pages a.on{background:#ffffff1a;color:var(--fg)}.sb-transport{display:flex;align-items:center;gap:10px;padding:6px 8px 6px 6px;border:1px solid var(--line);border-radius:99px;background:#0c0c0ed1}.tbtn{width:34px;height:34px;border-radius:50%;display:grid;place-content:center;background:#ffffff14;transition:background .2s,box-shadow .3s}.tbtn:hover{background:#ffffff29}.tbtn.play i{width:0;height:0;border-left:10px solid var(--fg);border-top:6px solid transparent;border-bottom:6px solid transparent;margin-left:3px}.tbtn.play.on{background:var(--accent);box-shadow:0 0 22px color-mix(in srgb,var(--accent) 60%,transparent)}.tbtn.play.on i{width:10px;height:10px;border:0;background:#000;margin:0;border-radius:1px}.tbtn.rec i{width:11px;height:11px;border-radius:50%;background:#ff3b30;opacity:.75}.tbtn.rec.on{background:#ff3b3033;box-shadow:0 0 0 1px #ff3b30 inset}.tbtn.rec.on i{opacity:1;animation:recblink .9s steps(2) infinite}@keyframes recblink{50%{opacity:.35}}.pos{display:flex;align-items:baseline;gap:8px;padding:0 8px;min-width:128px}.pos b{font-family:var(--sans);font-size:20px;font-weight:400;color:var(--accent);width:14px}.pos span{color:var(--mute)}.field{display:inline-flex;align-items:center;gap:7px;color:var(--mute)}.field input[type=number]{width:50px;padding:5px 6px;border-radius:8px;border:1px solid var(--line);background:#ffffff0a;color:var(--fg);font-size:12px}.field input[type=range]{-webkit-appearance:none;appearance:none;width:70px;height:2px;background:var(--line);outline:none}.field input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:11px;height:11px;border-radius:50%;background:var(--fg);cursor:pointer}.field input[type=range]::-moz-range-thumb{width:11px;height:11px;border:0;border-radius:50%;background:var(--fg);cursor:pointer}.field output{color:var(--fg);min-width:16px}.field select{background:#ffffff0d;color:var(--fg);border:1px solid var(--line);border-radius:8px;padding:4px 6px;font-size:11px}.field select option{background:#111}.swing{padding-right:4px}.songsel,.filesel{position:relative}.songbtn{display:inline-flex;align-items:center;gap:10px;padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:#0c0c0e80;min-width:220px}.songbtn span{font-family:var(--sans);font-size:14px;color:var(--fg)}.songbtn em{font-style:normal;color:var(--mute);flex:1;text-align:left}.songbtn b,.ghost b{font-weight:400;color:var(--mute);font-size:9px}.songbtn .edited{width:6px;height:6px;border-radius:50%;background:var(--accent);display:none}.songbtn .edited.on{display:block}.ghost{padding:8px 11px;border:1px solid var(--line);border-radius:10px;color:var(--fg);transition:border-color .2s}.ghost:hover,.songbtn:hover{border-color:#ffffff4d}.menu{position:absolute;top:calc(100% + 8px);right:0;min-width:300px;padding:6px;border-radius:14px;border:1px solid var(--line);background:#0e0e10eb;display:none;flex-direction:column;z-index:30;box-shadow:0 20px 60px #00000080}.menu.open{display:flex}.menu.small{min-width:190px}.menu button{display:flex;align-items:baseline;gap:10px;text-align:left;padding:9px 10px;border-radius:9px;color:var(--fg);font-size:11.5px}.menu button:hover,.menu button.on{background:#ffffff12}.menu button b{font-family:var(--sans);font-weight:400;font-size:14px;min-width:140px}.menu button em{font-style:normal;color:var(--mute);flex:1}.menu button i{font-style:normal;color:var(--dim)}.menu button.on b{color:var(--accent)}.menu .dotted:after{content:"\25cf";color:var(--accent);font-size:8px;margin-left:6px}#deck{position:fixed;left:14px;right:14px;bottom:14px;height:var(--deck);z-index:10;display:grid;grid-template-columns:1fr 318px;gap:12px;font-family:var(--mono);font-size:11px;color:var(--fg)}.seqarea,.sound{border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,rgba(16,16,19,.9),var(--glass));box-shadow:0 -20px 60px #00000059}.seqarea{display:flex;flex-direction:column;padding:12px 14px 8px;min-width:0}.seqbar{display:flex;align-items:center;gap:14px;margin-bottom:10px;min-height:30px}.pats{display:flex;gap:4px}.pats button{width:30px;height:28px;border-radius:8px;border:1px solid var(--line);font-family:var(--sans);font-size:14px;color:var(--mute);position:relative;transition:all .2s}.pats button:hover{color:var(--fg)}.pats button.on{background:var(--fg);color:#000;border-color:var(--fg)}.pats button.playing:after{content:"";position:absolute;left:50%;bottom:-5px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent)}.patops{display:flex;gap:2px}.patops button{padding:5px 8px;border-radius:7px;color:var(--mute)}.patops button:hover{color:var(--fg);background:#ffffff0f}.seg{display:flex;padding:2px;border:1px solid var(--line);border-radius:9px}.seg button{padding:4px 10px;border-radius:7px;color:var(--mute)}.seg button.on{background:#ffffff1a;color:var(--fg)}.follow{display:inline-flex;gap:6px;align-items:center;color:var(--mute);cursor:pointer}.follow input{accent-color:var(--accent)}.chain{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.chl{color:var(--dim)}.chips{display:flex;gap:3px;overflow:hidden;flex-wrap:nowrap;min-width:0}.chips button{flex:0 0 auto;width:22px;height:24px;border-radius:6px;border:1px solid var(--line);color:var(--mute);font-family:var(--sans);font-size:12px;transition:all .15s}.chips button:hover{color:var(--fg);border-color:#ffffff59}.chips button.now{background:var(--accent);color:#000;border-color:var(--accent)}.chips button.edit{color:var(--fg)}.chipadd{width:22px;height:24px;border-radius:6px;color:var(--mute);border:1px dashed var(--line)}.chipadd:hover{color:var(--fg)}.pgrid{flex:1;display:flex;flex-direction:column;gap:4px;min-height:0}.prow{flex:1;display:grid;grid-template-columns:190px repeat(16,minmax(0,1fr));gap:3px;align-items:stretch;min-height:26px;max-height:44px}.prow .cell:nth-child(4n+2){margin-left:5px}.thead{display:grid;grid-template-columns:8px 1fr auto;align-items:center;gap:8px;padding:0 8px 0 6px;border-radius:9px;cursor:pointer;position:relative;transition:background .2s}.thead:hover{background:#ffffff0a}.prow.sel .thead{background:#ffffff14}.thead .tdot{width:6px;height:6px;border-radius:50%;background:var(--dim);transition:background .2s,box-shadow .2s}.prow.sel .tdot{background:var(--accent);box-shadow:0 0 8px var(--accent)}.prow.hit .tdot{background:#fff;box-shadow:0 0 10px #fff}.tname{display:flex;flex-direction:column;min-width:0;line-height:1.2}.tname b{font-family:var(--sans);font-weight:400;font-size:13px}.tname em{font-style:normal;color:var(--mute);font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tctl{display:flex;align-items:center;gap:3px}.tctl button{width:18px;height:18px;border-radius:5px;font-size:9.5px;color:var(--mute);border:1px solid var(--line)}.tctl button.on[data-t=m]{background:#d9a13a;color:#000;border-color:#d9a13a}.tctl button.on[data-t=s]{background:#4fb3ff;color:#000;border-color:#4fb3ff}.tvol{position:absolute;left:20px;right:56px;bottom:3px;height:2px;background:#ffffff14;border-radius:2px;cursor:ew-resize}.tvol i{position:absolute;left:0;top:0;bottom:0;background:#fff6;border-radius:2px}.prow.muted .cell{opacity:.35}.cell{position:relative;border-radius:7px;background:var(--cell);border:1px solid var(--cellb);display:grid;place-content:center;font-size:9.5px;color:#000;overflow:hidden;cursor:pointer;transition:background .12s,border-color .12s,box-shadow .2s}.cell:hover{border-color:#ffffff47}.cell.bar{background:#ffffff0e}.cell.on{background:var(--fg);border-color:var(--fg)}.cell.ghost{background:#eceae573;border-color:transparent}.cell.open{background:transparent;border:2px solid var(--fg)}.cell.note{background:var(--fg);border-color:var(--fg);justify-content:start;padding-left:5px;font-weight:500}.cell.tie{background:#eceae56b;border-color:transparent;border-radius:3px 7px 7px 3px}.cell.note.long{border-radius:7px 3px 3px 7px}.cell.soft{opacity:.72}.cell.ph{box-shadow:0 0 0 1px var(--accent) inset}.cell.on.ph,.cell.note.ph,.cell.ghost.ph{background:var(--accent);border-color:var(--accent);box-shadow:0 0 16px color-mix(in srgb,var(--accent) 70%,transparent)}.cell.sev:after{content:"7";position:absolute;right:3px;top:1px;font-size:8px}.prow.chord .cell.note{font-family:var(--sans);font-size:11px}.keyhelp{display:flex;gap:16px;padding:8px 2px 0;color:var(--dim);font-size:10px;white-space:nowrap;overflow:hidden}.keyhelp kbd{font-family:var(--mono);font-size:9.5px;padding:1px 5px;border-radius:4px;border:1px solid rgba(255,255,255,.14);color:var(--mute)}.keyhelp .tipx{margin-left:auto;overflow:hidden;text-overflow:ellipsis}.sound{padding:13px 15px 12px;display:flex;flex-direction:column;gap:10px;overflow:hidden}#synthPanel,#drumPanel{display:flex;flex-direction:column;gap:9px}#synthPanel[hidden],#drumPanel[hidden]{display:none}.shead{display:flex;align-items:baseline;gap:10px}.shead .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent);align-self:center}.shead b{font-family:var(--sans);font-weight:400;font-size:17px}.shead em{font-style:normal;color:var(--mute)}.engines,.kits{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}.engines button,.kits button{padding:5px 0;border-radius:8px;border:1px solid var(--line);color:var(--mute);font-size:10.5px;transition:all .15s}.engines button:hover,.kits button:hover{color:var(--fg);border-color:#ffffff4d}.engines button.on,.kits button.on{background:var(--fg);color:#000;border-color:var(--fg)}.presets{display:flex;gap:4px}.presets button{flex:1;padding:5px 0;border-radius:99px;color:var(--mute);border:1px dashed rgba(255,255,255,.14);font-size:10.5px}.presets button:hover{color:var(--fg);border-style:solid}.presets button.on{color:var(--accent);border-color:var(--accent);border-style:solid}.knobs{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}.knob{display:flex;flex-direction:column;align-items:center;gap:1px;cursor:ns-resize;touch-action:none}.knob svg{width:46px;height:46px}.knob .trk{fill:none;stroke:#ffffff1a;stroke-width:3;stroke-linecap:round}.knob .arc{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;filter:drop-shadow(0 0 4px color-mix(in srgb,var(--accent) 70%,transparent))}.knob .cap{fill:#ffffff0f;stroke:#ffffff1f}.knob .ind{stroke:var(--fg);stroke-width:2.5;stroke-linecap:round}.knob b{font-weight:400;font-size:11px;color:var(--fg);margin-top:-2px}.knob span{color:var(--mute);font-size:10px}.knob:hover .cap{fill:#ffffff1a}.minis{display:grid;grid-template-columns:1fr 1fr;gap:5px 14px}.mini{display:grid;grid-template-columns:50px 1fr 26px;align-items:center;gap:6px;color:var(--mute);font-size:10px}.mini input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:2px;background:var(--line);outline:none}.mini input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:10px;border-radius:50%;background:var(--fg);cursor:pointer}.mini input[type=range]::-moz-range-thumb{width:10px;height:10px;border:0;border-radius:50%;background:var(--fg)}.mini output{color:var(--fg);text-align:right}.playmode{margin-top:auto;padding-top:10px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:7px}.pmh{color:var(--dim);display:flex;gap:6px;align-items:baseline}.pmh b{font-weight:400;color:var(--fg)}.pmh i{font-style:normal}.pmh em{font-style:normal;color:var(--fg)}.pmrow{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.tog{white-space:nowrap;padding:5px 10px;border-radius:99px;border:1px solid var(--line);color:var(--mute);font-size:10.5px}.tog.on{color:#000;background:var(--fg);border-color:var(--fg)}.pmrow select{background:#ffffff0d;color:var(--fg);border:1px solid var(--line);border-radius:99px;padding:4px 8px;font-size:10.5px}.pmrow select option{background:#111}#arp{width:90px}#arpRate{width:54px}.pmrow{flex-wrap:nowrap;gap:5px}.pmrow .tog{padding:5px 8px}#toast{position:fixed;left:50%;top:74px;z-index:40;transform:translate(-50%,-10px);opacity:0;padding:9px 16px;border-radius:99px;background:#141416e6;border:1px solid var(--line);font-family:var(--mono);font-size:11.5px;color:var(--fg);pointer-events:none;transition:opacity .3s,transform .4s var(--ease)}#toast.in{opacity:1;transform:translate(-50%)}@media(max-width:1180px){#deck{grid-template-columns:1fr 272px}.prow{grid-template-columns:150px repeat(16,minmax(0,1fr))}.keyhelp .tipx,.patops,.follow,.sb-right .vol{display:none}.songbtn{min-width:170px}}@media(max-width:900px){#sbar{grid-template-columns:auto 1fr;height:auto;padding:10px 14px;row-gap:8px}.sb-transport{grid-column:1 / -1;order:3;justify-self:start}#deck{grid-template-columns:1fr;height:58vh;overflow:auto}.sound{display:none}}