/* Jenny's DrumSteps embeddable pattern player - self contained, dark/neon */
.dps-embed{--dps-bg:#12101c;--dps-cell:#241f38;--dps-on:#ff10f0;--dps-on2:#00e5ff;--dps-beat:#2e2747;--dps-cur:#39ff14;--dps-txt:#e8e4f5;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--dps-bg);color:var(--dps-txt);
  border-radius:16px;padding:16px;box-shadow:0 10px 30px rgba(0,0,0,.35);max-width:640px;margin:0 auto;box-sizing:border-box}
.dps-embed *{box-sizing:border-box}
.dps-title{font-weight:800;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:#b9b2d6;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(135deg,var(--dps-on),var(--dps-on2));box-shadow:0 0 10px rgba(255,16,240,.5)}
.dps-cell.current{outline:2px solid var(--dps-cur);outline-offset:1px}
.dps-cell.current.on{box-shadow:0 0 16px var(--dps-cur)}
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:800;font-size:15px;color:#120c1c;background:linear-gradient(135deg,#39ff14,#00e5ff);box-shadow:0 6px 18px rgba(57,255,20,.3)}
.dps-play.playing{background:linear-gradient(135deg,#ff10f0,#ff5a36);color:#fff}
.dps-play:focus-visible,.dps-cell:focus-visible,.dps-slider:focus-visible{outline:2px solid #00e5ff;outline-offset:2px}
.dps-tempo{display:flex;align-items:center;gap:8px;font-size:13px;color:#b9b2d6}
.dps-bpmval{font-weight:800;color:var(--dps-txt);min-width:30px}
.dps-slider{accent-color:#ff10f0;width:120px}
.dps-attr{margin-top:12px;font-size:12px;color:#8c85a8;text-align:center}
.dps-attr a{color:#ff10f0;text-decoration:none;font-weight:700}
.dps-attr a:hover{text-decoration:underline}
@media (prefers-reduced-motion:reduce){.dps-cell{transition:none}}