.mu{gap:12px;-moz-user-select:none;user-select:none;-webkit-user-select:none}.mu button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}.mu-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}.mu-head .yl-q{min-width:0}.mu-note{font-size:13px;color:var(--yl-ink2);text-align:center}.mu-note.good{color:var(--yl-good);font-weight:700}.mu-btn{border:1px solid var(--yl-axis);background:var(--yl-grid);border-radius:12px;padding:8px 12px;font-size:14px;font-weight:700;min-height:40px}.mu-btn:disabled{opacity:.45;cursor:default}.mu-btn:active:not(:disabled){transform:scale(.97)}.mu-send{width:100%;background:var(--accent);border-color:var(--accent);color:#fff!important;min-height:46px;font-size:15px}.mu-send.rec{background:var(--yl-bad);border-color:var(--yl-bad)}.mu-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.mu-play{min-width:92px}.mu-hold.on,.mu-play.on{background:var(--yl-ink);color:var(--screen-bg)!important;border-color:var(--yl-ink)}.mu-step{display:flex;align-items:center;gap:6px}.mu-step span{min-width:30px;text-align:center;font-weight:800;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.mu-step .mu-btn{width:40px;padding:0}.mu-chip{border:1px solid var(--yl-axis);background:transparent;border-radius:999px;padding:5px 11px;font-size:12.5px;font-weight:600}.mu-chip.on{background:var(--yl-ink);color:var(--screen-bg)!important;border-color:var(--yl-ink)}.mu-played{font-size:12.5px;color:var(--yl-ink2);font-feature-settings:"tnum";font-variant-numeric:tabular-nums;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex:1 1;min-width:0;text-align:right}.mu-chords .mu-played{text-align:center}.mu-grid{display:grid;grid-gap:4px;gap:4px;align-items:center}.mu-grid+.mu-grid{padding-top:8px;border-top:1px dashed var(--yl-axis)}.mu-rowname{border:0;background:none;padding:0 2px 0 0;font-size:10.5px;font-weight:700;color:var(--yl-ink2)!important;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mu-cell{width:100%;aspect-ratio:1;min-height:0;border:0;border-radius:5px;padding:0;background:var(--yl-grid);transition:background .08s ease,transform .08s ease}.mu-cell.beat:not(.on){background:color-mix(in srgb,var(--yl-grid) 70%,var(--yl-axis))}.mu-cell.on{background:var(--mu-row,var(--accent))}.mu-cell.head{outline:2px solid var(--yl-ink);outline-offset:-2px}.mu-cell.head.on{transform:scale(1.08);filter:brightness(1.25)}.mu-pads{display:grid;grid-gap:8px;gap:8px}.mu-pad{aspect-ratio:1;border:0;border-radius:18px;background:color-mix(in srgb,var(--mu-row) 28%,var(--yl-grid));font-size:15px;font-weight:800;letter-spacing:.02em;touch-action:none;transition:background .12s ease,transform .06s ease;box-shadow:inset 0 -3px 0 rgba(0,0,0,.18)}.mu-c4 .mu-pad{border-radius:12px;font-size:12px}.mu-pad.hit{background:var(--mu-row);transform:scale(.96);color:#fff!important}.mu-progress{height:6px;border-radius:3px;background:var(--yl-grid);overflow:hidden}.mu-progress i{display:block;height:100%;background:var(--yl-bad);transition:width .1s linear}.mu-sounds{display:flex;flex-wrap:wrap;gap:6px}.mu-kbd{position:relative;height:150px;touch-action:none}.mu-black,.mu-white{position:absolute;top:0;box-sizing:border-box;cursor:pointer}.mu-white{width:10%;height:100%;background:#f4f4f8;border:1px solid #b9bccb;border-radius:0 0 8px 8px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:6px}.mu-white span{font-size:9.5px;font-weight:700;color:#6b6f86;pointer-events:none}.mu-black{width:6.4%;height:60%;background:#20222e;border-radius:0 0 6px 6px;z-index:1;box-shadow:0 2px 0 rgba(0,0,0,.35)}.mu-white.root{background:color-mix(in srgb,var(--accent) 14%,#f4f4f8)}.mu-black.root{background:color-mix(in srgb,var(--accent) 45%,#20222e)}.mu-white.off{background:#9a9cab}.mu-black.off{background:#4a4c58}.mu-black.down,.mu-white.down{background:var(--accent)}.mu-oct{min-width:28px;text-align:center;font-weight:800}.mu-keys .mu-bar .mu-btn{width:40px;padding:0;font-size:20px}.mu-keys .mu-bar .mu-hold{width:auto;padding:0 14px;font-size:14px}.mu-chordgrid{display:grid;grid-template-columns:repeat(2,1fr);grid-gap:10px;gap:10px}.mu-chord{min-height:88px;border:0;border-radius:18px;background:color-mix(in srgb,var(--mu-row) 26%,var(--yl-grid));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;touch-action:none;transition:background .15s ease,transform .06s ease}.mu-chord b{font-size:28px;font-weight:900}.mu-chord small{font-size:12px;font-weight:700;color:var(--yl-ink2);letter-spacing:.04em}.mu-chord.hit{background:var(--mu-row);transform:scale(.97);color:#fff!important}.mu-chord.hit small{color:rgba(255,255,255,.85)}.mu-dial{display:flex;flex-direction:column;align-items:center}.mu-dial svg{width:100%;max-width:260px;overflow:visible}.mu-arc{fill:none;stroke:var(--yl-grid);stroke-width:10;stroke-linecap:round}.mu-tick{stroke:var(--yl-axis);stroke-width:2}.mu-needle{stroke:var(--yl-ink);stroke-width:3;stroke-linecap:round;transform-origin:100px 100px;transition:transform .12s ease-out,stroke .15s ease}.mu-hub{fill:var(--yl-ink)}.mu-dial.good .mu-hub,.mu-dial.good .mu-needle{stroke:var(--yl-good);fill:var(--yl-good)}.mu-dial.good .mu-arc{stroke:color-mix(in srgb,var(--yl-good) 35%,var(--yl-grid))}.mu-read{display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:-6px;min-height:60px;justify-content:center}.mu-read b{font-size:40px;font-weight:900;line-height:1}.mu-read sub{font-size:16px;font-weight:700;color:var(--yl-ink2)}.mu-read span{font-size:12.5px;color:var(--yl-ink2);font-feature-settings:"tnum";font-variant-numeric:tabular-nums;min-height:16px}.mu-dial.good .mu-read b{color:var(--yl-good)}.mu-strings{display:grid;grid-gap:6px;gap:6px}.mu-string{border:1px solid var(--yl-axis);background:var(--yl-grid);border-radius:12px;min-height:44px;font-size:13px;font-weight:800;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4px 0}.mu-string small{font-size:10px;color:var(--yl-good)}.mu-string.near{border-color:var(--yl-ink)}.mu-string.done{border-color:var(--yl-good)}.mu-bpm{justify-content:space-between;gap:10px}.mu-bpm,.mu-bpm div{display:flex;align-items:center}.mu-bpm div{flex-direction:column}.mu-bpm b{font-size:56px;font-weight:900;line-height:1;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.mu-bpm span{font-size:12px;font-weight:700;color:var(--yl-ink2);letter-spacing:.08em}.mu-round{width:52px;height:52px;border-radius:50%;padding:0;font-size:24px}.mu-dots{display:flex;justify-content:center;gap:12px;padding:4px 0}.mu-dots i{width:16px;height:16px;border-radius:50%;background:var(--yl-grid);border:2px solid var(--yl-axis);transition:background .05s ease,transform .05s ease}.mu-dots i.first{width:20px;height:20px}.mu-dots i.on{background:var(--yl-ink);border-color:var(--yl-ink);transform:scale(1.15)}.mu-dots i.first.on{background:var(--accent);border-color:var(--accent)}.mu-metro .mu-bar .mu-btn{flex:1 1}