.mm-app{--mm-roll-bg:#fff;--mm-roll-black:#15181d0b;--mm-roll-line:#15181d1a;--mm-roll-bar:#15181d4d;--mm-roll-out:#7870601a;--mm-roll-c:#15181d29;--mm-gutter:#f4f3f0;--mm-gutter-ink:#3f444d;--mm-note:#2f53c8;--mm-note-ink:#fff;--mm-note-sel:#f2b33d;--mm-note-sel-ink:#2a1d00;--mm-note-play:#157a4b;--mm-cursor:#d63f2f;--mm-playhead:#1f9d63;--mm-white:#fff;--mm-white-ink:#2b2f36;--mm-white-out:#dcdad3;--mm-white-out-ink:#4d525c;--mm-black:#1d2026;--mm-black-out:#6b6f78;--mm-key-down:#2f53c8;--mm-key-down-ink:#fff;--mm-input-line:#7a7f89;--mm-input-hover:#5b606a;--mm-rec:#c62d1f;--mm-hum-a:#dfe6fb;--mm-hum-b:#d3ecdf;--mm-hum-ink:#23315f}html[data-theme=dark] .mm-app{--lc-bg:#0f1115;--lc-surface:#181b21;--lc-surface-2:#1d212a;--lc-sunken:#262b35;--lc-ink:#eef0f3;--lc-ink-2:#b6bcc7;--lc-ink-3:#a2a9b5;--lc-label:#dfe3e9;--lc-line:#ffffff21;--lc-line-2:#ffffff12;--lc-line-strong:#ffffff52;--lc-accent:#7f9cf5;--lc-accent-hover:#93aaf7;--lc-accent-ink:#c7d4fb;--lc-accent-soft:#7f9cf529;--lc-accent-line:#7f9cf56b;--mm-roll-bg:#14171c;--mm-roll-black:#ffffff09;--mm-roll-line:#ffffff17;--mm-roll-bar:#ffffff4d;--mm-roll-out:#00000052;--mm-roll-c:#ffffff29;--mm-gutter:#1d212a;--mm-gutter-ink:#c9ced8;--mm-note:#7f9cf5;--mm-note-ink:#0d1530;--mm-note-sel:#f2c35d;--mm-note-sel-ink:#2a1d00;--mm-note-play:#4fd08f;--mm-cursor:#ff7a68;--mm-playhead:#4fd08f;--mm-white:#e9eaee;--mm-white-ink:#1d2026;--mm-white-out:#a9adb6;--mm-white-out-ink:#1d2026;--mm-black:#07080a;--mm-black-out:#555a64;--mm-key-down:#7f9cf5;--mm-key-down-ink:#0d1530;--mm-input-line:#7a818d;--mm-input-hover:#9aa1ad;--mm-rec:#ff6b5c;--mm-hum-a:#27324f;--mm-hum-b:#1f3a31;--mm-hum-ink:#c7d4fb;color:var(--lc-ink)}html[data-theme=dark]:has(.mm-app){--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}html[data-theme=dark] body:has(.mm-app){color:#eef0f3;background-color:#0f1115}html[data-theme=dark] body:has(.mm-app) .site-wrapper{--site-bg:#0f1115;--site-ink:#eef0f3;--site-ink-2:#b6bcc7;--site-line:#ffffff21;--site-mark-bg:#181b21;--site-accent:#7f9cf5}html[data-theme=dark] .mm-app .lc-btn:hover{border-color:#ffffff73}html[data-theme=dark] .mm-app .lc-btn--accent:hover{border-color:var(--lc-accent-line);background:#7f9cf542}html[data-theme=dark] .mm-app .lc-btn--primary{color:#0d1530}html[data-theme=dark] .mm-app .lc-btn--danger{color:#ff9d92}html[data-theme=dark] .mm-app .lc-btn--danger:hover{background:#f0746424;border-color:#f0746480}html[data-theme=dark] .mm-app .lc-select{background-color:var(--lc-surface-2)}html[data-theme=dark] .mm-app .lc-input::placeholder{color:#8d94a0}html[data-theme=dark] .mm-app .lc-seg label:has(input:checked){box-shadow:0 0 0 1px var(--lc-line-strong)}html[data-theme=dark] .mm-app .lc-toast{color:#15181d;background:#eef0f3}.mm-app .lc-input,.mm-app .lc-select{border-color:var(--mm-input-line)}.mm-app .lc-input:hover,.mm-app .lc-select:hover{border-color:var(--mm-input-hover)}.mm-app .lc-input:focus,.mm-app .lc-select:focus{border-color:var(--lc-accent)}.mm-app{word-break:auto-phrase}.mm-app .lc-label,.mm-app .lc-check{white-space:nowrap}.mm-sr{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;position:absolute!important}.mm-head-tools{grid-area:1/2;align-self:center;align-items:center;gap:.5rem;margin-bottom:.5rem;display:flex}.mm-head>.mm-head-tools .lc-help{margin:0}.mm-icon-btn{border:1px solid var(--lc-line-strong);background:var(--lc-surface);width:36px;height:36px;color:var(--lc-ink-2);cursor:pointer;border-radius:9px;justify-content:center;align-items:center;display:inline-flex}.mm-icon-btn:hover{background:var(--lc-surface-2);color:var(--lc-ink)}.mm-icon-btn:focus-visible{outline:2px solid var(--lc-accent);outline-offset:2px}.mm-i-sun{display:none}html[data-theme=dark] .mm-app .mm-i-sun{display:block}html[data-theme=dark] .mm-app .mm-i-moon{display:none}.mm-editor{padding:1rem}.mm-bar{flex-wrap:wrap;align-items:center;gap:.5rem .75rem;margin-bottom:.75rem;display:flex}.mm-to-list{align-items:center;gap:.35rem;display:inline-flex}.mm-name{flex:12rem;min-width:9rem}.mm-name .lc-input{min-height:36px;padding:.35rem .65rem;font-size:.95rem}.mm-bpm{align-items:center;gap:.35rem;display:inline-flex}.mm-bpm .lc-label{margin-inline-end:.1rem}.mm-bpm-unit{color:var(--lc-ink-2);margin-inline-start:-.1rem;font-size:.78rem;display:none}.mm-bpm-num.lc-input{text-align:center;font-variant-numeric:tabular-nums;appearance:textfield;width:4.6rem;min-height:34px;padding:.25rem .4rem}.mm-bpm-num::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.mm-bpm-num::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.mm-step{justify-content:center;min-width:34px;font-size:.95rem}.mm-field{align-items:center;gap:.4rem;display:inline-flex}.mm-select.lc-select{width:auto;min-height:34px;padding-block:.2rem;font-size:.88rem}.mm-metro,.mm-loop{white-space:nowrap;font-size:.86rem}.mm-roll-wrap{border:1px solid var(--lc-line-strong);background:var(--mm-roll-bg);overscroll-behavior:contain;border-radius:10px;height:clamp(170px,28vh,320px);position:relative;overflow:auto}.mm-roll-wrap:focus-visible{outline:2px solid var(--lc-accent);outline-offset:2px}.mm-roll-inner{min-width:100%;position:relative}.mm-roll{touch-action:none;display:block;position:sticky;top:0;left:0}.mm-sel-row{flex-wrap:wrap;justify-content:space-between;gap:.25rem 1rem;min-height:1.5em;margin:.45rem .1rem .6rem;display:flex}.mm-sel,.mm-pos{color:var(--lc-ink-2);font-variant-numeric:tabular-nums;margin:0;font-size:.84rem}.mm-pos{color:var(--lc-ink-3)}.mm-controls{flex-direction:column;gap:.55rem;display:flex}.mm-group{flex-wrap:wrap;align-items:center;gap:.45rem;display:flex}.mm-play{justify-content:center;align-items:center;gap:.4rem;min-width:7.2rem;display:inline-flex}.mm-play .mm-i-stop{display:none}.mm-play.is-playing .mm-i-stop{display:block}.mm-play.is-playing .mm-i-play{display:none}.mm-from-start{align-items:center;gap:.35rem;display:inline-flex}.mm-rec{align-items:center;gap:.45rem;display:inline-flex}.mm-rec-dot{border:2px solid var(--mm-rec);background:0 0;border-radius:50%;width:.7rem;height:.7rem}.mm-rec[aria-pressed=true]{border-color:var(--mm-rec);color:var(--mm-rec);background:color-mix(in srgb, var(--mm-rec) 9%, var(--lc-surface));font-weight:600}.mm-rec[aria-pressed=true] .mm-rec-dot{background:var(--mm-rec)}.mm-dot[aria-pressed=true]{background:var(--lc-accent-soft);border-color:var(--lc-accent-line);color:var(--lc-accent-ink);font-weight:600}.mm-len label{padding-inline:.6rem}.mm-rec-hint{margin:-.15rem 0 0}.mm-edit-btns .lc-btn{align-items:center;gap:.25rem;display:inline-flex}.mm-app .lc-btn[aria-disabled=true],.mm-app .lc-btn[aria-disabled=true]:hover{cursor:not-allowed;color:var(--lc-ink-3);background:var(--lc-surface-2);border-color:var(--lc-line);box-shadow:none;transform:none}.mm-sep{background:var(--lc-line);align-self:stretch;width:1px;margin-inline:.15rem}.mm-kb-bar{flex-wrap:wrap;align-items:center;gap:.5rem 1rem;margin:1rem 0 .5rem;display:flex}.mm-oct{align-items:center;gap:.4rem;display:inline-flex}.mm-oct-text{text-align:center;font-variant-numeric:tabular-nums;min-width:6.5rem;color:var(--lc-ink-2);font-size:.86rem}.mm-field--inline .lc-label{white-space:nowrap}.mm-kb{--mm-whites:8;-webkit-user-select:none;user-select:none;border:1px solid var(--lc-line-strong);background:var(--mm-black);border-radius:0 0 10px 10px;height:clamp(110px,26vh,190px);display:flex;position:relative;overflow:hidden}.mm-key{-webkit-tap-highlight-color:transparent;touch-action:none;cursor:pointer;font:inherit;-webkit-touch-callout:none;margin:0;padding:0}.mm-key--white{background:var(--mm-white);min-width:0;color:var(--mm-white-ink);border:0;border-inline-end:1px solid #15181d38;border-radius:0 0 6px 6px;flex-direction:column;flex:1 1 0;justify-content:flex-end;align-items:center;gap:.1rem;padding-bottom:.45rem;display:flex;position:relative}.mm-key--white:last-child{border-inline-end:0}.mm-key-label{white-space:nowrap;font-size:clamp(.72rem,.6rem + .4vw,.9rem);font-weight:600;line-height:1.1}.mm-key-oct{opacity:.85;font-size:.68rem;line-height:1}.mm-key--black{z-index:2;--mm-bw:max(24px, calc(100% / var(--mm-whites) * .62));height:60%;width:var(--mm-bw);top:0;left:calc(100% * var(--mm-at) / var(--mm-whites) - var(--mm-bw) / 2);background:var(--mm-black);border:1px solid #000;border-top:0;border-radius:0 0 5px 5px;position:absolute;box-shadow:inset 0 -4px #ffffff14}.mm-key--white.mm-key--out{background:var(--mm-white-out);color:var(--mm-white-out-ink)}.mm-key--black.mm-key--out{background:var(--mm-black-out);border-color:#3a3d44}.mm-key.is-down,.mm-key:active{background:var(--mm-key-down);color:var(--mm-key-down-ink)}.mm-key:focus-visible{outline:3px solid var(--mm-cursor);outline-offset:-3px}.mm-kbd-hint{margin-top:.55rem}.mm-hum-head{flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.25rem 1rem;display:flex}.mm-hum-head .lc-panel-title{margin-bottom:.5rem}.mm-hum-total{color:var(--lc-ink-2);font-variant-numeric:tabular-nums;margin:0;font-size:.84rem}.mm-hum-top{margin-bottom:.6rem}.mm-hum-rec,.mm-hum-play{align-items:center;gap:.45rem;display:inline-flex}.mm-hum-rec.is-recording{border-color:var(--mm-rec);color:var(--mm-rec);background:color-mix(in srgb, var(--mm-rec) 9%, var(--lc-surface));font-weight:600}.mm-hum-rec.is-recording .mm-rec-dot{background:var(--mm-rec);border-radius:2px}.mm-hum-play .mm-i-stop{display:none}.mm-hum-play.is-playing .mm-i-stop{display:block}.mm-hum-play.is-playing .mm-i-play{display:none}.mm-hum-with{white-space:nowrap;font-size:.86rem}.mm-hum-meter{background:var(--lc-sunken);border:1px solid var(--mm-input-line);border-radius:99px;width:4.5rem;height:.5rem;display:inline-block;overflow:hidden}.mm-hum-meter[hidden]{display:none}.mm-hum-meter>span{background:var(--mm-rec);width:0;height:100%;transition:width 90ms linear;display:block}.mm-hum-wrap{border:1px solid var(--lc-line-strong);background:var(--mm-roll-bg);overscroll-behavior-x:contain;border-radius:10px;height:92px;position:relative;overflow:auto hidden}.mm-hum-wrap:focus-visible{outline:2px solid var(--lc-accent);outline-offset:2px}.mm-hum-inner{min-width:100%;height:100%;position:relative}.mm-hum-canvas{touch-action:pan-y;display:block;position:sticky;top:0;left:0}.mm-hum-btns .lc-btn{align-items:center;gap:.25rem;display:inline-flex}.mm-hum-hint.lc-hint{margin:.4rem 0 0}.mm-nowrap{white-space:nowrap}.mm-hum .lc-hint{margin-top:.6rem}.mm-export-row{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem 1rem;display:flex}.mm-export-btns{justify-content:flex-start;margin:0}.mm-export-info{font-variant-numeric:tabular-nums;margin-top:.6rem}.mm-app .lc-btn[aria-busy=true]{cursor:progress}.mm-how-list{color:var(--lc-ink-2);gap:.35rem;margin:0;padding-inline-start:1.3rem;font-size:.9rem;line-height:1.7;display:grid}.mm-list-head{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem;margin-bottom:.6rem;display:flex}.mm-list-head .lc-panel-title{margin:0}.mm-list-head .lc-panel-title:focus{outline:none}.mm-list-actions{flex-wrap:wrap;gap:.45rem;display:flex}.mm-list-items{gap:.5rem;margin:0;padding:0;list-style:none;display:grid}.mm-item{border:1px solid var(--lc-line);background:var(--lc-surface-2);border-radius:10px;align-items:stretch;gap:.45rem;padding:.45rem;display:flex}.mm-item.is-current{border-color:var(--lc-accent-line);background:var(--lc-accent-soft)}.mm-item-open{text-align:start;min-width:0;color:var(--lc-ink);font:inherit;cursor:pointer;background:0 0;border:0;border-radius:7px;flex-direction:column;flex:auto;gap:.15rem;padding:.35rem .55rem;display:flex}.mm-item-open:hover{background:var(--lc-sunken)}.mm-item-open:focus-visible{outline:2px solid var(--lc-accent);outline-offset:1px}.mm-item-name{overflow-wrap:anywhere;font-weight:600}.mm-item-meta{color:var(--lc-ink-2);font-variant-numeric:tabular-nums;font-size:.78rem}.mm-item-cur{color:var(--lc-accent-ink);align-self:flex-start;font-size:.72rem;font-weight:600}.mm-item .lc-btn{white-space:nowrap;align-self:center}.mm-item-meta span{white-space:nowrap}@media (width<=420px){.mm-item{flex-wrap:wrap}.mm-item-open{flex-basis:100%}.mm-item .lc-btn{flex:1 1 0}}.mm-help-steps ol{gap:.35rem;margin:0;padding-inline-start:1.3rem;line-height:1.7;display:grid}.mm-toast.lc-toast{text-align:center;max-width:min(92vw,30rem);top:1rem;bottom:auto;transform:translate(-50%)translateY(-12px)}.mm-toast.lc-toast.show{transform:translate(-50%)translateY(0)}.mm-settings-row{flex-wrap:wrap;align-items:center;gap:.75rem 1.25rem;display:flex}.mm-settings .mm-field{flex-wrap:wrap;min-width:0;max-width:100%}.mm-settings .mm-select.lc-select{min-width:0;max-width:100%}.mm-settings .lc-hint{margin-top:.6rem}@media (width<=640px),(height<=480px) and (orientation:landscape){.mm-editor{height:100svh;margin-bottom:1rem;padding:.5rem}.mm-bar{flex-wrap:nowrap;margin:0}.mm-name{flex:auto;order:0;min-width:0}.mm-bpm .lc-label,.mm-to-list span{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.mm-to-list{justify-content:center;min-width:36px}.mm-roll-wrap{height:auto;min-height:72px}.mm-editor .mm-pos,.mm-rec-hint,.mm-kbd-hint{display:none}.mm-kb-bar{margin:0}.mm-oct-text{flex:auto;min-width:0}.mm-oct{flex:auto}.mm-kb{height:auto;min-height:84px}.mm-bpm-unit{display:inline}.mm-controls .mm-group{display:contents}.mm-controls .mm-sep{display:none}.mm-play{order:1}.mm-rec{order:2}.mm-rest{order:3}#mm-undo{order:4}#mm-redo{order:5}.mm-len{order:6}.mm-dot{order:7}.mm-sel-btn{order:8}.mm-from-start{order:9}.mm-loop{order:10}#mm-up span:not([aria-hidden]),#mm-down span:not([aria-hidden]),#mm-left span:not([aria-hidden]),#mm-right span:not([aria-hidden]){display:none}.mm-sel-btn{justify-content:center;min-width:38px}}@media (width<=640px) and (height>=481px){.mm-app.lc-app{padding:1.25rem .75rem 2.5rem}.mm-editor{flex-direction:column;gap:.4rem;display:flex}.mm-editor>*{flex:none}.mm-roll-wrap{flex:1 1 0;min-height:64px}.mm-sel-row{min-height:0;margin:0 .1rem}.mm-sel{font-size:.78rem}.mm-bar{flex-wrap:wrap}.mm-name{flex:100%;order:-1}.mm-controls{flex-flow:wrap;align-items:center;gap:.35rem}.mm-play{min-width:5.5rem}.mm-app .mm-controls .lc-btn{min-height:36px;padding-inline:.6rem}.mm-len label{padding-inline:.5rem}.mm-kb{flex:0 26%}}@media (width<=640px) and (height>=481px) and (height<=600px){.mm-kb{flex-basis:20%;min-height:80px}.mm-roll-wrap{min-height:88px}}@media (width<=360px){.mm-app .mm-controls .lc-btn{padding-inline:.45rem;font-size:.8rem}.mm-len label{padding-inline:.38rem;font-size:.8rem}.mm-editor{gap:.3rem;padding:.4rem}}@media (height<=480px) and (orientation:landscape){.mm-head .lc-desc{display:none}.mm-editor{grid-template:"ctrl bar""ctrl roll"minmax(0,1fr)"ctrl kbbar""ctrl kb"/12rem minmax(0,1fr);gap:.3rem .5rem;padding:.4rem;display:grid}.mm-bar{grid-area:bar}.mm-bpm-unit{display:none}.mm-bpm-num.lc-input{width:3.6rem}.mm-name{min-width:7rem}.mm-roll-wrap{grid-area:roll}.mm-editor .mm-sel-row{display:none}.mm-controls{flex-flow:wrap;grid-area:ctrl;align-content:start;gap:.25rem;min-height:0;padding:2px;overflow:visible}.mm-controls .mm-group>.lc-btn,.mm-controls .lc-check{flex:calc(50% - .25rem);justify-content:center;min-width:0;padding-inline:.25rem}.mm-controls .lc-seg{flex-wrap:nowrap;flex:100%;justify-content:space-between;padding:2px}.mm-sel-btn{flex:calc(25% - .25rem)!important}#mm-shorter,#mm-longer,#mm-delete{flex-basis:calc(50% - .25rem)!important}.mm-app .mm-controls .lc-btn{min-height:30px;font-size:.78rem;line-height:1.15}.mm-play{min-width:0}.mm-dot,.mm-rest{order:3}#mm-undo,#mm-redo{order:5}.mm-len{order:6}.mm-len label{white-space:nowrap;flex:auto;justify-content:center;min-height:28px;padding-inline:.15rem;font-size:.74rem}.mm-loop{justify-content:center;min-height:28px;font-size:.8rem}.mm-kb-bar{grid-area:kbbar}.mm-kb{grid-area:kb;height:38svh;min-height:0}}