.sequencer-section{max-width:1600px}
.seq{--signal:#ff6f56;--label:118px;--cell:14px;border:1px solid #70403b;background:linear-gradient(160deg,#24161a,#130e12 56%);box-shadow:0 18px 50px #0008,inset 0 1px #ff8c7040}
.seq[data-track=bass]{--signal:#f3c06b}
.seq[data-track=guitar]{--signal:#ff8fb5}
.seq[data-track=piano]{--signal:#8be7f4}
.seq[data-track=synths]{--signal:#c2a6ff}
.seq-toolbar,.seq-tabs{display:flex;gap:.7rem;align-items:center;flex-wrap:wrap;padding:.75rem 1rem;border-bottom:1px solid #634044}
.seq-toolbar label,.seq-status,.seq-ruler{font:700 .78rem/1.2 var(--text);letter-spacing:.075em;text-transform:uppercase}
.seq-toolbar label{display:flex;align-items:center;gap:.38rem;color:var(--muted)}
.seq-toolbar select{font:inherit;color:var(--paper);background:#1a1014;border:1px solid #634044;padding:.4rem}
.seq-toolbar input{accent-color:var(--signal)}
.seq-toolbar label:has(input:disabled){opacity:.5}
.seq-transport{display:flex;gap:4px}
.seq-transport button,.seq-tabs button{display:grid;place-items:center;color:var(--paper);background:#201317;border:1px solid #634044;min-height:36px;padding:.35rem .7rem}
.seq-transport button{min-width:38px}
.seq-transport svg{width:17px;height:17px;fill:currentColor}
.seq button:focus-visible,.seq select:focus-visible,.seq-scroll:focus-visible{outline:2px solid var(--paper);outline-offset:2px}
.seq-transport button:hover,.seq-tabs button:hover,.seq button[aria-selected=true],.seq button[aria-pressed=true]:not(.seq-cell){border-color:var(--signal);color:var(--signal);box-shadow:inset 0 -2px var(--signal),0 0 12px color-mix(in srgb,var(--signal) 24%,transparent)}
.seq-status{margin-left:auto;color:var(--signal)}
.seq-tabs{gap:4px}
.seq-tabs button{font:700 .83rem/1.2 var(--text);min-width:76px}
.seq-scroll{overflow-x:auto;scrollbar-color:#a7564d #221418;overscroll-behavior-inline:contain;position:relative}
.seq-grid{min-width:calc(var(--label) + var(--steps,64)*var(--cell));user-select:none}
.seq-ruler,.seq-row{display:grid;grid-template-columns:var(--label) repeat(var(--steps),minmax(0,1fr))}
.seq-ruler{background:#2c1b20;color:#edd9d4;touch-action:pan-x pan-y}
.seq-ruler span{padding:.57rem .4rem;border-left:2px solid #a85950;white-space:nowrap}
.seq-ruler span:first-child,.seq-label{position:sticky;left:0;z-index:2;background:#26191f;border-left:0;border-right:1px solid #a85950}
.seq-row{border-top:1px solid #402a31}
.seq-label{padding:.34rem .5rem;color:#edd9d4;font:700 .8rem/1.2 var(--text);display:flex;align-items:center}
.seq-cell{touch-action:none;position:relative;min-height:27px;padding:0;border:0;border-left:1px solid #36262d;background:#1a1218;cursor:crosshair}
.seq-cell.beat{border-left-color:#6b4448;background:#24161e}
.seq-cell.bar{border-left:2px solid #a85950}
.seq-cell:hover{background:#4a2934}
.seq-cell:focus-visible{z-index:1;outline-offset:-2px!important}
.seq-cell.note::before{content:"";position:absolute;inset:3px 0;background:var(--signal);box-shadow:0 0 9px color-mix(in srgb,var(--signal) 65%,transparent);pointer-events:none}
.seq-cell.note-start::before{left:2px;border-radius:3px 0 0 3px}
.seq-cell.note-end::before{right:2px;border-radius:0 3px 3px 0}
.seq-cell.note-start.note-end::before{border-radius:3px}
.seq-cell.playhead::after{content:"";position:absolute;inset:0;background:#fff4;border-left:1px solid #fff;pointer-events:none}
.seq-help{padding:.8rem 1rem;margin:0;color:var(--muted);font-size:.88rem;border-top:1px solid #634044}
@media(max-width:650px){.seq{--label:82px;--cell:12px}.seq-toolbar,.seq-tabs{padding:.65rem}.seq-tabs button{min-width:0;flex:1;padding:.35rem .25rem}.seq-cell{min-height:34px}}

@media(max-width:600px){.seq{--cell:0px}.seq-label{font-size:.74rem}}