.sequencer-handle{position:fixed;z-index:41;bottom:0;left:50%;transform:translateX(-50%);width:96px;height:28px;display:flex;justify-content:center;align-items:center;gap:13px;color:var(--muted);font:400 9px/1 var(--sans);letter-spacing:.22em}
.sequencer-handle i{width:6px;height:6px;border-top:1px solid currentColor;border-left:1px solid currentColor;transform:rotate(45deg);transition:transform .25s}
.sequencer-handle[aria-expanded=true] i{transform:rotate(225deg)}
.sequencer-handle:hover{color:var(--white)}
.drum-machine{position:fixed;z-index:40;left:0;right:0;bottom:0;padding:22px 3.1vw 34px;background:linear-gradient(180deg,rgba(5,9,14,.9),rgba(5,9,14,.98));border-top:1px solid rgba(255,255,255,.16);backdrop-filter:blur(12px);opacity:0;visibility:hidden;transform:translateY(20px);pointer-events:none;transition:opacity .3s,transform .3s,visibility .3s;color:var(--white)}
.drum-machine.is-open{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.drum-toolbar{display:flex;align-items:center;gap:24px;margin-bottom:20px;font:400 9px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase}
.drum-title{font-size:13px;letter-spacing:.14em;white-space:nowrap}.drum-title span{color:var(--muted);font-size:10px;margin-left:9px}
.drum-play{display:flex;gap:9px;align-items:center;min-width:62px;color:var(--white)}.drum-play[aria-pressed=true]{color:var(--gold)}
.drum-bpm,.drum-volume{display:flex;gap:10px;align-items:center;color:var(--muted)}
.drum-bpm input{width:49px;padding:3px 0;background:none;color:var(--white);border:0;border-bottom:1px solid rgba(255,255,255,.22);border-radius:0;font:500 14px/1 var(--sans);appearance:textfield;-moz-appearance:textfield}
.drum-bpm input::-webkit-inner-spin-button{appearance:none}
.drum-volume input{width:65px;height:2px;accent-color:var(--gold)}
.drum-clear{margin-left:auto;color:var(--muted);font-size:9px;letter-spacing:.12em;text-transform:uppercase}
.drum-scroll{overflow-x:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#4a4d51 transparent;padding-bottom:8px}
.drum-grid{min-width:870px;display:flex;flex-direction:column;gap:7px}
.drum-row,.drum-beats{display:grid;grid-template-columns:80px minmax(0,1fr);gap:14px;align-items:center}
.drum-label{display:flex!important;align-items:center;text-align:left;color:var(--muted);font:400 9px/1 var(--sans);text-transform:uppercase;letter-spacing:.1em;height:22px}
.drum-label:hover{color:var(--gold)}
.drum-label,.drum-beats>span{position:sticky;left:0;z-index:2;background:#080c12}
.drum-groups{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:10px}
.drum-group{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;position:relative}
.drum-group:nth-child(5)::before,.drum-beat:nth-child(5)::before{content:'';position:absolute;left:-6px;top:-2px;bottom:-2px;width:1px;background:rgba(255,255,255,.32)}
.drum-step{height:20px;border:1px solid rgba(255,255,255,.06)!important;background:rgba(255,255,255,.09)!important;border-radius:1px;transition:background .1s,box-shadow .1s;position:relative}
.drum-group:nth-child(even) .drum-step{background:rgba(255,255,255,.17)!important}
.drum-step.beat-start{border-left-color:rgba(255,255,255,.36)!important}
.drum-step[aria-pressed=true]{background:var(--gold)!important;border-color:var(--gold)!important}
.drum-step.is-current{box-shadow:0 0 0 1px var(--white);z-index:1}
.drum-step.is-current::after{content:'';position:absolute;top:-4px;left:0;right:0;height:2px;background:var(--white)}
.drum-beats{margin-bottom:1px;color:var(--muted);font-size:8px;letter-spacing:.12em;text-transform:uppercase}
.drum-beat{position:relative;display:flex;justify-content:space-between;align-items:center}.drum-beat small{font-size:7px;opacity:.55}.drum-beat:nth-child(4n+1){color:var(--gold)}
.drum-footer{display:flex;justify-content:space-between;gap:15px;margin-top:9px;font:400 8px/1.3 var(--sans);letter-spacing:.1em;color:var(--muted)}
.drum-footer a{font-size:7px;opacity:.65}
@media(max-width:680px){.drum-machine{padding:16px 20px 35px}.drum-toolbar{gap:15px;flex-wrap:wrap;margin-bottom:16px}.drum-title{font-size:11px}.drum-title span{font-size:9px;margin-left:4px}.drum-volume{gap:6px}.drum-volume input{width:50px}.drum-play{min-width:47px}.drum-clear{font-size:8px}.drum-footer{flex-direction:column;gap:5px}.drum-grid{min-width:980px}.drum-step{height:24px}.drum-row{height:26px}}
@media(max-height:450px){.drum-machine{padding-top:12px}.drum-toolbar{margin-bottom:10px}.drum-grid{gap:4px}.drum-step{height:18px}.drum-row{height:20px}}
@media(prefers-reduced-motion:reduce){.drum-machine,.drum-step{transition:none}}