.beatgrid,.beatgrid-grid{--bg-brand:#18478e;--bg-brand-soft:#e8eef7;--bg-strong:#d1495b;--bg-weak:#e9a83a;--bg-alt:#2a9d8f;--bg-note:#6a5acd;--bg-cell:#efe9dd;--bg-cell-b:#e6dfd0;--bg-band:#dce4f1;--bg-num:#1a1e27;--bg-off:#a8a294;--bg-rowname:#33507f;--bg-hair:#d9d2c4;--bg-play:#1f7a4d}.beatgrid{margin:1.75rem 0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.beatgrid-frame{border:2px solid var(--bg-brand);background:var(--bg-brand-soft);border-radius:12px;padding:12px 14px 14px;overflow-x:auto}.beatgrid-head{align-items:center;gap:10px;margin-bottom:10px;display:flex}.beatgrid-tag{letter-spacing:.16em;text-transform:uppercase;color:var(--bg-brand);font-size:10.5px;font-weight:800}.beatgrid-title{color:var(--bg-brand);letter-spacing:-.01em;font-size:15px;font-weight:800}.beatgrid-controls{align-items:center;gap:12px;margin-left:auto;display:flex}.beatgrid-count-toggle{cursor:pointer;border:1.5px solid var(--bg-hair);width:26px;height:26px;color:var(--bg-off);font-variant-numeric:tabular-nums;background:#fff;border-radius:999px;justify-content:center;align-items:center;font-size:13px;font-weight:800;display:inline-flex}.beatgrid-count-toggle.on{background:var(--bg-brand);border-color:var(--bg-brand);color:#fff}.beatgrid-count-toggle:focus-visible{outline:2px solid var(--bg-brand);outline-offset:2px}.beatgrid-tempo{color:#5c626f;align-items:center;gap:7px;font-size:12px;display:inline-flex}.beatgrid-tempo input[type=range]{width:92px;accent-color:var(--bg-brand);cursor:pointer}.beatgrid-tempo-val{font-variant-numeric:tabular-nums;min-width:4.5ch;font-weight:700}.beatgrid-tempo-val:after{content:" BPM";color:var(--bg-off);font-weight:500}.beatgrid-play{cursor:pointer;background:var(--bg-play);color:#fff;border:none;border-radius:999px;flex:none;justify-content:center;align-items:center;width:40px;height:40px;display:inline-flex}.beatgrid-play:hover{filter:brightness(1.06)}.beatgrid-play.on{background:var(--bg-strong)}.beatgrid-play:focus-visible{outline:3px solid var(--bg-brand);outline-offset:2px}.beatgrid-play svg{width:18px;height:18px}.beatgrid-spin{width:18px;height:18px;animation:.8s linear infinite beatgrid-rot}@keyframes beatgrid-rot{to{transform:rotate(360deg)}}.beatgrid-grid{gap:4px;min-width:max-content;display:grid}.beatgrid-cell{font-variant-numeric:tabular-nums;-webkit-user-select:none;user-select:none;border-radius:6px;justify-content:center;align-items:center;min-width:26px;height:32px;margin:0;font-size:13px;font-weight:700;display:flex}.beatgrid-rowname{text-align:right;color:var(--bg-rowname);border-right:2px solid var(--bg-brand);cursor:pointer;justify-content:flex-end;gap:5px;min-width:84px;padding-right:12px;font-size:12.5px;font-weight:700}.beatgrid-mute-ic{opacity:.55;flex:none;width:13px;height:13px}.beatgrid-rowname:hover .beatgrid-mute-ic{opacity:1}.beatgrid-rowname.muted{color:var(--bg-off);text-decoration:line-through}.beatgrid-rowname.muted .beatgrid-mute-ic{opacity:1;color:var(--bg-strong)}.beatgrid-rowname:focus-visible{outline:2px solid var(--bg-brand);outline-offset:-2px}.beatgrid-rowname.corner{color:var(--bg-off);letter-spacing:.08em;text-transform:uppercase;cursor:default;font-size:10.5px;font-weight:600}.beatgrid-count{color:var(--bg-off);background:0 0;font-weight:600}.beatgrid-count.main{color:var(--bg-num);font-size:14.5px;font-weight:800}.beatgrid-count.band{background:var(--bg-band)}.beatgrid-beat{background:var(--bg-cell);border:1px solid var(--bg-hair)}.beatgrid-beat.band:not(.strong):not(.weak){background:var(--bg-cell-b)}.beatgrid-beat.strong{background:var(--bg-strong);border-color:var(--bg-strong)}.beatgrid-beat.weak{background:var(--bg-weak);border-color:var(--bg-weak)}.beatgrid-beat.alt{background:var(--bg-alt);border-color:var(--bg-alt)}.beatgrid-beat.note{background:var(--bg-note);border-color:var(--bg-note)}.beatgrid-note{color:#fff;letter-spacing:-.02em;font-size:11px;font-weight:800}.beatgrid-group-start{box-shadow:-2px 0 0 0 var(--bg-brand)}.beatgrid-editing .beatgrid-count,.beatgrid-editing .beatgrid-beat{border:1px solid #c3cad6}.beatgrid-cell.playing{outline:2.5px solid var(--bg-num);outline-offset:-2.5px}.beatgrid-beat.pulse{animation:.18s beatgrid-pop}@keyframes beatgrid-pop{0%{transform:scale(1)}40%{transform:scale(1.16)}to{transform:scale(1)}}@media (prefers-reduced-motion:reduce){.beatgrid-beat.pulse{animation:none}}.beatgrid-caption{color:#5c626f;margin-top:11px;font-size:13.5px;font-style:italic}.beatgrid-raw{white-space:pre-wrap;color:#b91c1c;font-size:12px}