.btm{--accent:#c98ad6}.btm-board{display:flex;align-items:center;justify-content:center;padding:14px;overflow-x:auto}.bm-grid{display:flex;flex-direction:column;gap:6px;width:100%;max-width:860px}.bm-row{display:grid;grid-template-columns:96px repeat(16,1fr);gap:4px;align-items:stretch}.bm-name{appearance:none;border:1px solid var(--line);border-radius:9px;background:rgba(18,26,42,.7);cursor:pointer;display:flex;align-items:center;gap:6px;padding:4px 8px;color:var(--dim);transition:border-color .15s}.bm-name:hover{border-color:var(--tc)}.bm-name span{font-size:15px}.bm-name b{font:700 11px/1 var(--font-sans);letter-spacing:.02em}.bm-cell{appearance:none;border:1px solid rgba(140,160,235,.14);border-radius:7px;cursor:pointer;background:rgba(20,28,46,.55);min-height:32px;padding:0;transition:background .1s,box-shadow .1s;touch-action:manipulation}.bm-cell.beat{border-color:#8ca0eb52}.bm-cell:hover{background:rgba(140,160,235,.16)}.bm-cell.on{background:var(--tc);box-shadow:0 0 10px color-mix(in srgb,var(--tc) 60%,transparent)}.bm-cell.now{outline:2px solid #fff;outline-offset:-2px}@media (max-width:640px){.bm-row{grid-template-columns:44px repeat(16,1fr);gap:2.5px}.bm-name b{display:none}.bm-cell{min-height:24px;border-radius:5px}}