/* GrooveSteps embeddable pattern player: self contained, Backbeat Room palette */
.dps-embed{--dps-bg:#17140f;--dps-cell:#2a241c;--dps-on:#e9b44c;--dps-on2:#f5d08a;--dps-beat:#3a3127;--dps-cur:#ff6b3d;--dps-txt:#f4ede1;
  font-family:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:linear-gradient(170deg,#1d1813,var(--dps-bg));color:var(--dps-txt);
  border:1px solid #3a3228;border-radius:16px;padding:16px;box-shadow:0 18px 40px -22px rgba(0,0,0,.9);max-width:640px;margin:0 auto;box-sizing:border-box}
.dps-embed *{box-sizing:border-box}
.dps-title{font-family:"Bricolage Grotesque","DM Sans",system-ui,sans-serif;font-weight:750;font-size:18px;margin:0 0 12px;letter-spacing:.3px}
.dps-gridwrap{overflow-x:auto}
.dps-grid{display:grid;grid-template-columns:auto repeat(16,1fr);gap:4px;min-width:520px;align-items:center}
.dps-rowlabel{font-size:12px;font-weight:700;color:#cdc2b0;padding-right:8px;white-space:nowrap;text-align:right}
.dps-row{display:contents}
.dps-cell{aspect-ratio:1;min-width:18px;border:none;border-radius:5px;background:var(--dps-cell);cursor:default;padding:0;transition:transform .06s,box-shadow .12s}
.dps-cell.beat{background:var(--dps-beat)}
.dps-cell.on{background:linear-gradient(160deg,var(--dps-on2),var(--dps-on));box-shadow:0 0 12px rgba(233,180,76,.35)}
.dps-cell.current{outline:2px solid var(--dps-txt);outline-offset:1px}
.dps-cell.current.on{background:var(--dps-cur);box-shadow:0 0 18px rgba(255,107,61,.75)}
button.dps-cell{cursor:pointer}
.dps-bar{display:flex;align-items:center;gap:16px;margin-top:14px;flex-wrap:wrap}
.dps-play{display:inline-flex;align-items:center;gap:8px;border:none;cursor:pointer;border-radius:999px;
  padding:11px 22px;font-weight:700;font-size:15px;color:#16110a;background:#e9b44c;box-shadow:0 10px 22px -12px rgba(233,180,76,.8)}
.dps-play.playing{background:#ff6b3d;color:#1a0b05}
.dps-play:focus-visible,.dps-cell:focus-visible,.dps-slider:focus-visible{outline:3px solid #f5d08a;outline-offset:2px}
.dps-tempo{display:flex;align-items:center;gap:8px;font-size:13px;color:#cdc2b0}
.dps-bpmval{font-weight:800;color:var(--dps-txt);min-width:30px}
.dps-slider{accent-color:#e9b44c;width:120px}
.dps-attr{margin-top:12px;font-size:12px;color:#a39684;text-align:center}
.dps-attr a{color:#e9b44c;text-decoration:none;font-weight:700}
.dps-attr a:hover{text-decoration:underline}
@media (prefers-reduced-motion:reduce){.dps-cell{transition:none}}