.mm-icons{position:absolute;width:0;height:0;overflow:hidden}.mm-app{max-width:560px;margin:0 auto;padding:14px 12px 10px;text-align:center;box-sizing:border-box}.mm-head{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;width:auto;margin:0 0 12px;padding:4px 0 0}.mm-logo{font-size:clamp(1.15rem,4.2vw,1.7rem);font-weight:800;color:#1e293b;letter-spacing:.01em;margin:0;line-height:1.1}.mm-chip{appearance:none;display:inline-flex;align-items:center;gap:6px;padding:5px 10px 5px 12px;border-radius:999px;background:#eef0ff;border:1.5px solid #dcd9f7;color:#6b6d8c;font-family:inherit;font-size:.72rem;font-weight:700;line-height:1;cursor:pointer;transition:background .2s ease,color .2s ease,border-color .2s ease}.mm-chip:hover{background:#e4e2ff}.mm-chip .mm-ic{width:15px;height:15px}.mm-chip .mm-chip-ck{display:none;color:#16a34a}.mm-chip .mm-chip-info{width:13px;height:13px;opacity:.65;flex:0 0 auto}.mm-chip.is-saved{background:#dcfce7;border-color:#bbf7d0;color:#16a34a}.mm-chip.is-saved:hover{background:#bbf7d0}.mm-chip.is-saved .mm-chip-hd{display:none}.mm-chip.is-saved .mm-chip-ck{display:inline-block}.mm-ic{width:24px;height:24px;display:block}.mm-ic,.mm-ic use{color:inherit}.mm-ic{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.mm-ic-fill{fill:currentColor;stroke:none}.mm-iconbtn{appearance:none;display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;padding:0;border:1.5px solid #dbe3ee;background:#fff;color:#475569;border-radius:12px;cursor:pointer;box-shadow:0 2px #94a3b840;transition:transform .12s ease,background .12s ease,border-color .12s ease,color .12s ease}.mm-iconbtn:hover{transform:translateY(-1px)}.mm-iconbtn:disabled{opacity:.4;cursor:default;transform:none}.mm-iconbtn.mm-danger{color:#ef4444;border-color:#fbcfcf}.mm-iconbtn.mm-danger:hover{background:#fef2f2}.mm-controls{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px 18px;margin:0 auto 12px}.mm-group{display:inline-flex;flex-wrap:wrap;justify-content:center;gap:6px}.mm-pill{appearance:none;border:1.5px solid #dbe3ee;background:#fff;color:#475569;font-family:inherit;font-size:.86rem;font-weight:800;padding:8px 14px;border-radius:999px;cursor:pointer;box-shadow:0 2px #94a3b840;transition:transform .12s ease,background .12s ease,border-color .12s ease,color .12s ease}.mm-pill:hover{transform:translateY(-1px)}.mm-pill.is-active{background:#6d28d9;border-color:#6d28d9;color:#fff;box-shadow:0 2px #4c1d9580}.mm-transport{display:flex;align-items:center;justify-content:center;gap:14px;margin:0 auto 14px;flex-wrap:wrap}.mm-playbtn{appearance:none;display:inline-flex;align-items:center;justify-content:center;width:60px;height:60px;border:none;border-radius:999px;background:#6d28d9;color:#fff;cursor:pointer;box-shadow:0 4px #4c1d9580,0 6px 16px #4c1d954d;transition:transform .14s cubic-bezier(.34,1.56,.64,1),background .14s ease;flex:0 0 auto}.mm-playbtn:hover{transform:translateY(-2px)}.mm-playbtn .mm-ic{width:30px;height:30px}.mm-playbtn .mm-stop-ic{display:none}.mm-playbtn.is-playing{background:#db2777;box-shadow:0 4px #9d174d80,0 6px 16px #9d174d4d}.mm-playbtn.is-playing .mm-play-ic{display:none}.mm-playbtn.is-playing .mm-stop-ic{display:block}.mm-tempo{display:inline-flex;align-items:center;gap:9px}.mm-tempo-label{font-size:.82rem;font-weight:700;color:#475569}.mm-range{-webkit-appearance:none;appearance:none;width:130px;max-width:42vw;height:6px;border-radius:999px;background:#ddd6f3;cursor:pointer}.mm-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:999px;background:#6d28d9;border:2px solid #fff;box-shadow:0 1px 4px #4c1d9566;cursor:pointer}.mm-range::-moz-range-thumb{width:18px;height:18px;border-radius:999px;background:#6d28d9;border:2px solid #fff;cursor:pointer}.mm-tempo-val{font-size:.82rem;font-weight:800;color:#1e293b;min-width:62px;text-align:left}.mm-stage{display:flex;justify-content:center;margin-bottom:12px}.mm-grid{--gut: 24px;--ch: clamp(15px, 4.6vw, 24px);display:grid;grid-template-columns:var(--gut) repeat(16,1fr);gap:2px;width:100%;max-width:480px;padding:10px;border-radius:14px;background:#1b1330;box-shadow:0 6px #4c1d9540,0 12px 26px #140c2847;box-sizing:border-box;touch-action:none;user-select:none;-webkit-user-select:none}.mm-rowlabel{height:var(--ch);display:flex;align-items:center;justify-content:center;font-size:.62rem;font-weight:700;color:#e2d6ffb8;line-height:1}.mm-rowlabel .mm-ic{width:13px;height:13px;color:#e2d6ffb8}.mm-cell{appearance:none;border:none;margin:0;padding:0;height:var(--ch);border-radius:4px;cursor:pointer;background:hsl(var(--hue, 260) 38% 24%);box-shadow:inset 0 0 0 1px #ffffff0a;transition:background .08s ease,box-shadow .08s ease,transform .08s ease}.mm-cell:hover{background:hsl(var(--hue, 260) 42% 32%)}.mm-cell.is-on{background:hsl(var(--hue, 260) 85% 60%);box-shadow:inset 0 -2px #00000047,0 0 8px hsl(var(--hue, 260) 90% 60% / .6)}.mm-cell.mm-beat{box-shadow:inset 2px 0 #e2d6ff59}.mm-cell.mm-beat.is-on{box-shadow:inset 2px 0 #e2d6ff80,inset 0 -2px #00000047,0 0 8px hsl(var(--hue, 260) 90% 60% / .6)}.mm-cell.mm-playing{box-shadow:inset 0 0 0 2px #ffffffd9}.mm-cell.mm-playing.is-on{box-shadow:inset 0 0 0 2px #fffffff2,0 0 12px hsl(var(--hue, 260) 90% 65% / .9);transform:scale(1.04)}.mm-rowgap{grid-column:1 / -1;height:8px}.mm-drumcell{border-radius:5px}.mm-editrow{display:flex;justify-content:center;gap:10px;margin-bottom:12px}.mm-actions{display:flex;justify-content:center;gap:10px;margin:0 auto 8px;flex-wrap:wrap}.mm-actbtn{appearance:none;display:inline-flex;align-items:center;gap:7px;border:1.5px solid #dbe3ee;background:#fff;color:#475569;font-family:inherit;font-size:.9rem;font-weight:700;padding:11px 18px;border-radius:999px;cursor:pointer;box-shadow:0 3px #94a3b840;transition:transform .15s cubic-bezier(.34,1.56,.64,1)}.mm-actbtn .mm-ic{width:20px;height:20px}.mm-actbtn:hover{transform:translateY(-2px)}.mm-toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%) translateY(10px);background:#1e293b;color:#fff;font-size:.86rem;font-weight:700;padding:11px 22px;border-radius:999px;box-shadow:0 10px 24px #0f172a59;opacity:0;transition:opacity .25s ease,transform .25s ease;pointer-events:none;z-index:120;max-width:90vw}.mm-toast.is-show{opacity:1;transform:translate(-50%) translateY(0)}.mm-overlay{position:fixed;inset:0;background:#0f172a80;display:flex;align-items:center;justify-content:center;padding:16px;z-index:100;opacity:0;transition:opacity .16s ease}.mm-overlay.is-open{opacity:1}.mm-modal{background:#fff;border-radius:18px;width:100%;max-width:400px;max-height:90vh;overflow-y:auto;padding:22px 20px;box-shadow:0 20px 50px #0f172a4d;text-align:center;transform:translateY(10px) scale(.98);transition:transform .16s cubic-bezier(.34,1.4,.64,1);box-sizing:border-box}.mm-overlay.is-open .mm-modal{transform:translateY(0) scale(1)}.mm-modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.mm-modal-title{font-size:1.15rem;font-weight:800;color:#1e293b;margin:0}.mm-modal-head .mm-modal-title{text-align:left}.mm-x{appearance:none;border:none;background:#f1f5f9;color:#64748b;width:34px;height:34px;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}.mm-x:hover{background:#e2e8f0}.mm-x .mm-ic{width:18px;height:18px}.mm-modal-icon{width:60px;height:60px;margin:4px auto 10px;border-radius:999px;background:#f1ecff;color:#6d28d9;display:flex;align-items:center;justify-content:center}.mm-modal-icon.mm-danger{background:#fef2f2;color:#ef4444}.mm-modal-icon .mm-ic{width:30px;height:30px}.mm-modal-text{font-size:.88rem;color:#475569;line-height:1.7;margin:0 0 16px}.mm-modal-text-left{text-align:left}.mm-modal-btns{display:flex;gap:12px;margin-top:18px}.mm-modal-btns .mm-mbtn{flex:1}.mm-mbtn{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1.5px solid transparent;font-family:inherit;font-size:.92rem;font-weight:700;padding:12px 16px;border-radius:12px;cursor:pointer;line-height:1.1;box-sizing:border-box}.mm-mbtn .mm-ic{width:18px;height:18px}.mm-mbtn-primary{background:#6d28d9;color:#fff}.mm-mbtn-primary:hover{background:#5b21b6}.mm-mbtn-danger{background:#ef4444;color:#fff}.mm-mbtn-danger:hover{background:#dc2626}.mm-mbtn-ghost{background:#fff;border-color:#dbe3ee;color:#475569}.mm-mbtn-ghost:hover{background:#f1f5f9}.mm-share-block{text-align:left;margin-bottom:16px}.mm-share-label{font-size:.82rem;font-weight:800;color:#1e293b;margin:0 0 8px}.mm-share-sub{font-size:.75rem;color:#64748b;line-height:1.6;margin:8px 0 0}.mm-urlrow{display:flex;gap:8px;align-items:stretch}.mm-urlrow input{flex:1;min-width:0;border:1.5px solid #dbe3ee;border-radius:10px;padding:10px 12px;font-size:.82rem;color:#475569;background:#f8fafc}.mm-urlrow .mm-mbtn{flex:0 0 auto}.mm-share-imgbtns{display:flex;gap:10px;flex-wrap:wrap}.mm-share-imgbtns .mm-mbtn{flex:1;min-width:130px;text-decoration:none}@media (prefers-reduced-motion: reduce){.mm-overlay,.mm-modal,.mm-iconbtn,.mm-pill,.mm-actbtn,.mm-playbtn,.mm-toast,.mm-chip,.mm-cell{transition:none!important}.mm-cell.mm-playing.is-on{transform:none}}@media (max-width: 360px){.mm-grid{--gut: 20px;padding:8px;gap:1.5px}.mm-iconbtn{width:42px;height:42px}.mm-actbtn{padding:10px 14px;font-size:.84rem}.mm-pill{padding:7px 11px;font-size:.8rem}.mm-range{width:110px}}.mm-article-details{max-width:880px;margin:30px auto 0;padding:0 16px}.mm-article-summary{display:block;width:fit-content;margin:0 auto;padding:8px 20px;border-radius:999px;border:1.5px solid #dbe3ee;background:#fff;color:#64748b;font-size:.88rem;font-weight:700;cursor:pointer;list-style:none;transition:background .15s ease,color .15s ease}.mm-article-summary::-webkit-details-marker{display:none}.mm-article-summary:hover{background:#f1f5f9;color:#334155}.mm-article{max-width:880px;margin:8px auto 0;padding:4px 6px 0;line-height:1.9;color:#334155;text-align:left}.mm-article h2{font-size:1.2rem;width:auto;margin:28px 0 10px;padding-bottom:6px;border-bottom:2px solid #e2e8f0;color:#1e293b}.mm-article p{margin:0 0 12px;font-size:.95rem}.mm-article ul,.mm-article ol{margin:0 0 12px;padding-left:1.4em}.mm-article ul{list-style:disc}.mm-article li{margin-bottom:6px;list-style:inherit;font-size:.95rem}.mm-article a{color:#7c3aed}@media screen and (max-width: 600px){.mm-app{padding-top:12px}.mm-app .mm-head{gap:8px;padding-top:0}.mm-app .mm-logo{font-size:20px}}