.seq-ui .seq-row span.hidden{display:none}.seq-ui .seq-row span.visible{display:block}.seq-ui .channel{display:flex}.seq-ui .seq-row span.seq-note-empty{opacity:0;pointer-events:none}.han-drum{--han-drum-name-w: 168px;--han-drum-gap: 6px;--han-drum-pad-h: 42px;--han-drum-pad-min: 30px;--han-drum-beat-gap: 8px;--han-drum-pad: #b3eef8;--han-drum-line: rgba(255, 255, 255, .1);--han-drum-panel: #0b131b;--han-drum-name-bg: #16202b;display:grid;gap:16px;color:#dcebf6d1;font-size:14px}.han-drum .seq-ui{display:grid;gap:16px}.han-drum>*,.han-drum .seq-ui>*,.han-drum .transport,.han-drum .sequencer{min-width:0}.han-drum button{font-family:inherit}.han-drum .transport .module-wrapper,.han-drum .transport .module-inner{min-width:0}.han-drum .transport .module-inner{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:flex-end;padding:16px 18px;border:1px solid rgba(255,255,255,.12);border-radius:20px;background:#03080e57}.han-drum-cell{display:grid;gap:7px;min-width:0}.han-drum-cell__label{color:#b3eef8b8;font-size:10px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}.han-drum-cell__body{display:flex;gap:8px;align-items:center;min-height:40px}.han-drum-cell[data-slot=clear] .han-drum-cell__label{min-height:12px}.han-drum .transport button,.han-drum-btn{height:40px;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0 15px;border:1px solid rgba(179,238,248,.24);border-radius:13px;color:#eef7ffe6;background:#0d1824f0;box-shadow:inset 0 1px #ffffff14;font-size:13px;font-weight:850;line-height:1;white-space:nowrap;cursor:pointer;transition:transform .16s ease,border-color .16s ease,background .16s ease,color .16s ease}.han-drum .transport button:hover,.han-drum-btn:hover{transform:translateY(-1px);border-color:#b3eef870;color:#fff;background:#162a3afa}.han-drum .transport button:focus-visible,.han-drum-btn:focus-visible{outline:2px solid rgba(179,238,248,.55);outline-offset:2px}.han-drum-stepper{padding:3px;border:1px solid rgba(179,238,248,.22);border-radius:14px;background:#0d1824f0;gap:2px}.han-drum .transport button.han-drum-step-btn{width:32px;height:32px;padding:0;border:0;border-radius:10px;background:#ffffff0f;box-shadow:none;font-size:17px}.han-drum .transport button.han-drum-step-btn:hover{transform:none;background:#b3eef833}.han-drum input[type=text].transport-tempo{width:62px;height:32px;margin:0;padding:0;border:0;color:#fff;background:transparent;font-family:inherit;font-size:19px;font-weight:950;line-height:32px;text-align:center}.han-drum input[type=text].transport-tempo:focus{outline:none;color:#b3eef8}.han-drum .transport button.han-drum-hidden-native{display:none}.han-drum-segment{display:inline-flex;gap:3px;padding:3px;border:1px solid rgba(179,238,248,.22);border-radius:14px;background:#0d1824f0}.han-drum .transport button.han-drum-seg-btn{height:32px;padding:0 13px;border:0;border-radius:11px;background:transparent;box-shadow:none;color:#dcebf69e;font-size:12px}.han-drum .transport button.han-drum-seg-btn:hover{transform:none;background:#ffffff0f}.han-drum .transport button.han-drum-seg-btn.is-on{color:#07111b;background:linear-gradient(135deg,#b3eef8,#ffafc5)}.han-drum-cell[data-slot=transport] .han-drum-cell__body{gap:6px}.han-drum .transport button.han-drum-transport-btn,.han-drum .transport button.btn-play,.han-drum .transport button.btn-pause{width:52px;height:40px;padding:0}.han-drum .transport button.btn-play,.han-drum .transport button.btn-pause{position:relative;border-color:#4ade8080;background:#225438d9}.han-drum .transport button.btn-play:before{content:"";width:0;height:0;margin-left:3px;border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:13px solid #4ade80}.han-drum .transport button.btn-pause:before{content:"";width:13px;height:15px;border-left:4px solid #4ade80;border-right:4px solid #4ade80}.han-drum-icon-stop{width:13px;height:13px;border-radius:3px;background:#eef7ffe6}.han-drum .transport button.han-drum-transport-btn--stop.is-idle{opacity:.42;cursor:default}.han-drum .transport button.han-drum-transport-btn--stop.is-idle:hover{transform:none;border-color:#b3eef83d;background:#0d1824f0}.han-drum .navigation-wrapper,.han-drum .navigation-wrapper-tact{position:relative;display:inline-flex}.han-drum .transport .dropButton:after{content:"";width:0;height:0;margin-left:2px;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;opacity:.6}.han-drum .dropdown-content{position:absolute;top:calc(100% + 6px);left:0;z-index:30;display:none;max-height:320px;min-width:100%;margin:0;padding:5px;overflow-y:auto;list-style:none;border:1px solid rgba(179,238,248,.24);border-radius:15px;background:#09111afc;box-shadow:0 18px 38px #00000075}.han-drum .dropdown-content.active{display:block}.han-drum .dropdown-content li{list-style:none}.han-drum .dropdown-content a{display:block;padding:8px 12px;border-radius:10px;color:#eef7ffdb;font-size:13px;font-weight:750;text-decoration:none;white-space:nowrap}.han-drum .dropdown-content a:hover{color:#fff;background:#162a3afa}.han-drum .dropdown-content a.active,.han-drum .dropdown-content a.preset_active{color:#07111b;background:linear-gradient(135deg,#b3eef8,#ffafc5)}.han-drum .clearBtn-disabled{opacity:.42}.han-drum .sequencer{position:relative;padding:14px 16px 16px;overflow-x:auto;overflow-y:hidden;border:1px solid rgba(255,255,255,.12);border-radius:20px;background:var(--han-drum-panel);-webkit-overflow-scrolling:touch}.han-drum .sequencer-channels{display:grid;gap:var(--han-drum-gap);min-width:max-content}.han-drum .channel{display:flex;align-items:center;gap:12px;padding:0;white-space:nowrap}.han-drum .seq-row-name{position:sticky;left:0;z-index:3;box-sizing:border-box;flex:0 0 var(--han-drum-name-w);width:var(--han-drum-name-w);height:var(--han-drum-pad-h);display:grid;grid-template-columns:minmax(0,1fr) auto;align-content:center;align-items:center;gap:1px 8px;margin:0;padding:0 8px 0 14px;border-radius:12px;border-left:3px solid var(--han-drum-pad);background:var(--han-drum-name-bg);box-shadow:-18px 0 0 var(--han-drum-panel),14px 0 16px -12px #000000d9;color:#fff;font-size:13px;font-weight:900;letter-spacing:.02em;text-transform:uppercase;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .16s ease,opacity .16s ease}.han-drum .seq-row-name:hover{background:#1f2f3d}.han-drum .seq-row-name>span{grid-column:1;overflow:hidden;text-overflow:ellipsis}.han-drum .han-drum-solo{grid-column:2;grid-row:1 / -1;width:24px;height:24px;display:grid;place-items:center;padding:0;border:1px solid rgba(255,255,255,.16);border-radius:8px;background:#ffffff0f;color:#dcebf699;font-family:inherit;font-size:11px;font-weight:900;line-height:1;cursor:pointer;transition:color .16s ease,background .16s ease,border-color .16s ease}.han-drum .han-drum-solo:hover{border-color:#b3eef880;color:#fff}.han-drum .han-drum-solo.is-on{border-color:transparent;color:#07111b;background:var(--han-drum-pad)}.han-drum .seq-row-name:after{grid-column:1;content:"";color:#dcebf680;font-size:10px;font-weight:700;letter-spacing:0;text-transform:none}.han-drum .channel[data-inst=hihatfod] .seq-row-name:after{content:"Pedal hi-hat"}.han-drum .channel[data-inst=sidetamlys] .seq-row-name:after{content:"Tom cao · Tom thấp"}.han-drum .channel[data-inst=gulvtam] .seq-row-name:after{content:"Floor tom"}.han-drum .channel[data-inst=ride] .seq-row-name:after{content:"Ride cymbal"}.han-drum .channel[data-inst=hihat] .seq-row-name:after{content:"Đóng · Mở"}.han-drum .channel[data-inst=lilletromme] .seq-row-name:after{content:"Snare · Rim"}.han-drum .channel[data-inst=stortromme] .seq-row-name:after{content:"Trống bass"}.han-drum .seq-row-name:not(.active){opacity:.4;border-left-color:#ffffff4d}.han-drum .seq-row-name:not(.active)>span{text-decoration:line-through;text-decoration-thickness:1px}.han-drum .seq-row{display:flex;gap:var(--han-drum-gap);flex:1 1 auto;min-width:0}.han-drum .seq-row span{box-sizing:border-box;flex:1 0 var(--han-drum-pad-min);height:var(--han-drum-pad-h);display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.09);border-radius:10px;background:#ffffff0b;color:#dcebf642;font-size:11px;font-weight:800;cursor:pointer;transition:background .12s ease,border-color .12s ease,box-shadow .12s ease}.han-drum .seq-row span:hover{border-color:#b3eef866;background:#ffffff1c}.han-drum .seq-row span.seq-step-measure{border-color:#ffffff24;background:#ffffff16;color:transparent}.han-drum .seq-row span.seq-step-measure:not(:first-child),.han-drum-ruler__cell.is-beat:not(:first-child){margin-left:var(--han-drum-beat-gap)}.han-drum .seq-row span.seq-note,.han-drum .seq-row span.seq-note-yellow{border-color:transparent;background:#ffffff47;background:color-mix(in srgb,var(--han-drum-pad) 34%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--han-drum-pad) 55%,transparent)}.han-drum .seq-row span.seq-note.seq-active{background:var(--han-drum-pad);box-shadow:0 0 16px color-mix(in srgb,var(--han-drum-pad) 45%,transparent)}.han-drum .seq-row span.seq-note-yellow.seq-active{background:color-mix(in srgb,var(--han-drum-pad) 22%,transparent);box-shadow:inset 0 0 0 2px var(--han-drum-pad)}.han-drum .seq-row span.seq-note.seq-active:hover,.han-drum .seq-row span.seq-note-yellow.seq-active:hover{filter:brightness(1.12)}.han-drum .seq-row span.seq-playhead{border-color:#ffffff6b}.han-drum .channel[data-inst=hihatfod]{--han-drum-pad: #2dd4bf}.han-drum .channel[data-inst=sidetamlys]{--han-drum-pad: #4ade80}.han-drum .channel[data-inst=gulvtam]{--han-drum-pad: #fb923c}.han-drum .channel[data-inst=ride]{--han-drum-pad: #f472b6}.han-drum .channel[data-inst=hihat]{--han-drum-pad: #facc15}.han-drum .channel[data-inst=lilletromme]{--han-drum-pad: #a855f7}.han-drum .channel[data-inst=stortromme]{--han-drum-pad: #22d3ee}.han-drum-ruler{display:flex;align-items:flex-end;gap:12px;margin-bottom:10px;min-width:max-content}.han-drum-ruler__name{position:sticky;left:0;z-index:3;flex:0 0 var(--han-drum-name-w);width:var(--han-drum-name-w);align-self:stretch;background:var(--han-drum-panel);box-shadow:-18px 0 0 var(--han-drum-panel)}.han-drum-ruler__track{display:flex;gap:var(--han-drum-gap);flex:1 1 auto;min-width:0}.han-drum-ruler__cell{box-sizing:border-box;flex:1 0 var(--han-drum-pad-min);display:flex;flex-direction:column;align-items:center;gap:2px;padding-bottom:5px;border-bottom:1px solid var(--han-drum-line)}.han-drum-ruler__cell.is-beat{border-bottom-color:#b3eef86b}.han-drum-ruler__beat{color:#fff;font-size:13px;font-weight:900;line-height:1;min-height:13px}.han-drum-ruler__sub{color:#dcebf66b;font-size:10px;font-weight:700;line-height:1}.han-drum-playline{position:absolute;top:12px;bottom:14px;left:0;z-index:2;width:2px;margin-left:-1px;border-radius:2px;background:#b3eef8;box-shadow:0 0 12px #b3eef8bf;opacity:0;pointer-events:none;transition:opacity .12s ease}.han-drum-playline.is-on{opacity:.9}.han-drum-foot{display:flex;flex-wrap:wrap;gap:14px 32px;align-items:flex-start;justify-content:space-between;padding:16px 18px;border:1px solid rgba(255,255,255,.12);border-radius:20px;background:#03080e57}.han-drum-foot__cell{display:grid;gap:8px;min-width:0}.han-drum-foot__cell--keys{justify-items:flex-end;text-align:right}.han-drum-foot__hint,.han-drum-foot__keys{margin:0;color:#dcebf68f;font-size:12px;line-height:1.7}.han-drum-btn.is-done{border-color:#4ade8099;color:#4ade80}.han-drum kbd{display:inline-block;min-width:22px;margin:0 2px;padding:2px 7px;border:1px solid rgba(179,238,248,.26);border-radius:7px;background:#0d1824f0;color:#b3eef8;font-family:inherit;font-size:11px;font-weight:850;line-height:1.5}@media (max-width: 1200px){.han-drum{--han-drum-name-w: 116px;--han-drum-gap: 5px;--han-drum-pad-h: 40px}.han-drum .transport .module-inner,.han-drum .sequencer,.han-drum-foot{padding:13px;border-radius:17px}.han-drum .transport .module-inner{gap:10px 14px}.han-drum .seq-row-name{font-size:11px;padding:0 8px 0 10px}.han-drum .seq-row-name:after{display:none}.han-drum-foot{justify-content:flex-start}.han-drum-foot__cell--keys{justify-items:flex-start;text-align:left}}