:root{color-scheme:dark;--accent:#2dd4bf;--grad:linear-gradient(92deg,#2ee6a6,#38bdf8 60%,#818cf8);--head:clamp(92px,24vw,130px);--cell-min:30px;--panel:rgba(13,19,27,.96)}*{box-sizing:border-box}body{background:radial-gradient(1100px 700px at 50% -10%,#0c1320 0,transparent 55%),#05070a;color:#e8edf1;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin:0;min-height:100vh;-webkit-font-smoothing:antialiased}.beats{margin:0 auto;max-width:1080px;padding:26px 16px 56px}.beats__bar{align-items:center;display:flex;gap:14px;margin-bottom:18px}.beats__title{background:var(--grad);-webkit-background-clip:text;background-clip:text;font-size:22px;font-weight:800;letter-spacing:-.01em;margin:0;-webkit-text-fill-color:transparent}.beats__back{margin-right:auto}.beats__back,.beats__home{color:#9fb0bb;font-size:15px;font-weight:600;text-decoration:none}.beats__home{margin-left:auto}.beats__back:hover,.beats__home:hover{color:#67e8f9}.transport{align-items:flex-end;display:flex;flex-wrap:wrap;gap:14px 18px;margin-bottom:14px}.ctl{display:flex;flex:1 1 150px;flex-direction:column;gap:6px;max-width:230px;min-width:0}.ctl__row{align-items:baseline;display:flex;gap:8px;justify-content:space-between}.ctl__row span{color:#9fb0bb;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}.ctl__row output{color:#bfeee6;font-size:12px;font-variant-numeric:tabular-nums;font-weight:700}.ctl input[type=range]{accent-color:var(--accent);cursor:pointer;height:26px;width:100%}.btn{background:rgba(45,212,191,.13);border:1px solid rgba(45,212,191,.42);border-radius:9px;color:#d6fbf3;cursor:pointer;font:inherit;font-size:12.5px;font-weight:700;padding:8px 13px;transition:background .14s,border-color .14s,transform .1s,filter .14s}.btn:hover{background:rgba(45,212,191,.24)}.btn:active{transform:translateY(1px)}.btn--ghost{background:hsla(0,0%,100%,.04);border-color:hsla(0,0%,100%,.16);color:#b9c6cf}.btn--ghost:hover{background:hsla(0,0%,100%,.09)}.btn--play{align-self:flex-end;background:var(--grad);border-color:transparent;color:#04221c;font-size:14px;font-weight:800;min-width:116px;padding:10px 18px}.btn--play:hover{filter:brightness(1.07)}.btn--play.is-playing{background:linear-gradient(92deg,#fb7185,#f472b6 60%,#c084fc)}.presets{align-items:center;display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}.presets__label{color:#7d909c;font-size:11px;font-weight:700;letter-spacing:.1em;margin-right:2px;text-transform:uppercase}.presets__sep{align-self:stretch;background:hsla(0,0%,100%,.12);margin:2px 4px;width:1px}.seq{background:linear-gradient(180deg,rgba(21,29,40,.5),rgba(12,17,24,.5));border:1px solid hsla(0,0%,100%,.08);border-radius:14px;box-shadow:0 12px 30px rgba(0,0,0,.3);padding:10px}.seq__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-color:rgba(45,212,191,.5) transparent}.seq__inner{display:flex;flex-direction:column;gap:6px;min-width:100%;width:-moz-max-content;width:max-content}.seq__row{align-items:stretch;display:flex;gap:6px}.row__head{background:var(--panel);border-radius:8px;display:flex;flex:none;flex-direction:column;gap:5px;justify-content:center;left:0;padding:6px 8px;position:sticky;width:var(--head);z-index:3}.row__top{align-items:center;display:flex;gap:6px;justify-content:space-between}.row__name{color:#cdd9e1;font-size:11.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.row__mute{background:hsla(0,0%,100%,.05);border:1px solid hsla(0,0%,100%,.16);border-radius:6px;color:#9fb0bb;cursor:pointer;flex:none;font:inherit;font-size:10px;font-weight:800;height:22px;line-height:1;padding:0;transition:background .12s,color .12s;width:22px}.row__mute:hover{background:hsla(0,0%,100%,.1)}.row__mute[aria-pressed=true]{background:#fb7185;border-color:transparent;color:#2a0d12}.row__vol{accent-color:var(--accent);cursor:pointer;height:16px;width:100%}.row__steps{display:grid;flex:1 1 auto;gap:4px;grid-template-columns:repeat(16,minmax(var(--cell-min),1fr))}.cell{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:hsla(0,0%,100%,.035);border:1px solid hsla(0,0%,100%,.08);border-radius:7px;cursor:pointer;height:40px;margin:0;padding:0;touch-action:manipulation;transition:background .1s,box-shadow .1s,transform .06s}.cell:hover{background:hsla(0,0%,100%,.08)}.cell.cell--beat{background:hsla(0,0%,100%,.06);border-color:hsla(0,0%,100%,.16)}.cell.is-on{background:linear-gradient(160deg,#2ee6a6,#22b8d8);border-color:rgba(46,230,166,.65);box-shadow:0 0 10px rgba(45,212,191,.4),inset 0 1px 0 hsla(0,0%,100%,.28)}.cell.is-cur{box-shadow:0 0 0 2px rgba(56,189,248,.85)}.cell.is-on.is-cur{box-shadow:0 0 0 2px rgba(56,189,248,.9),0 0 16px rgba(46,230,166,.7);transform:translateY(-1px) scale(1.03)}.seq__row.is-muted .cell{opacity:.3}.seq__row.is-muted .row__name{opacity:.5}.seq__ruler .row__head{background:transparent;z-index:2}.ruler__label{font-size:9.5px;letter-spacing:.06em;line-height:1.2;text-transform:uppercase}.ruler__cell,.ruler__label{color:#54636e;font-weight:700}.ruler__cell{align-items:center;border-radius:5px;display:flex;font-size:11px;font-variant-numeric:tabular-nums;height:22px;justify-content:center}.ruler__cell.is-beat{background:hsla(0,0%,100%,.045);color:#9fb0bb}.ruler__cell.is-cur{color:#38bdf8}.beats__hint{color:#71808a;font-size:12.5px;line-height:1.7;margin-top:16px}.beats__hint strong{color:#cdd9e1}.beats__hint kbd{background:hsla(0,0%,100%,.06);border:1px solid hsla(0,0%,100%,.14);border-radius:4px;color:#cdd9e1;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;padding:1px 6px}.btn:focus-visible,.cell:focus-visible,.row__mute:focus-visible{outline:2px solid rgba(45,212,191,.75);outline-offset:2px}input[type=range]:focus-visible{border-radius:4px;outline:2px solid rgba(45,212,191,.6);outline-offset:3px}@media (max-width:560px){:root{--cell-min:36px;--head:84px}.beats{padding:22px 12px 48px}.cell{height:40px}.btn--play{align-self:stretch;flex:1 1 100%}.ctl{flex:1 1 130px;max-width:none}.row__mute{position:relative}.row__mute:before{content:"";height:34px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:40px}}