.mu{gap:14px;container-type:inline-size}.mu-stage{border-radius:var(--t-radius,12px);background:var(--t-surface,#f5f7fa);border:1px solid var(--t-border,#dde3ea);justify-items:center;gap:4px;padding:16px 12px 14px;display:grid}.mu-note{font:700 clamp(56px, 15cqi, 104px)/1.12 var(--t-font,system-ui, sans-serif);color:var(--t-text,#1c2430);letter-spacing:-.01em;min-height:1em}.mu-note__sub{color:var(--t-muted,#5d6b7c);text-align:center;font-variant-numeric:tabular-nums;min-height:1.4em;font-size:15px}.mu-gauge{aspect-ratio:240/130;width:min(340px,86cqi);margin-top:4px;position:relative}.mu-gauge svg{width:100%;height:100%;display:block;overflow:visible}.mu-g__arc{fill:none;stroke:var(--t-border,#dde3ea);stroke-width:10px;stroke-linecap:round}.mu-g__near{fill:none;stroke:color-mix(in srgb, var(--t-warn,#b45309) 35%, transparent);stroke-width:10px}.mu-g__ok{fill:none;stroke:var(--t-ok,#15803d);stroke-width:10px}.mu-g__tick{stroke:var(--t-muted,#5d6b7c);stroke-width:1.5px}.mu-g__tick--big{stroke-width:2.5px}.mu-g__lbl{font:600 12px var(--t-font,system-ui, sans-serif);fill:var(--t-muted,#5d6b7c);text-anchor:middle;dominant-baseline:middle}.mu-g__lbl--big{font-size:22px}.mu-needle{background:var(--t-text,#1c2430);transform-origin:50% 100%;width:4px;height:74%;transform:rotate(var(--a,0deg));opacity:.35;border-radius:2px;transition:transform 90ms linear,background-color .15s;position:absolute;bottom:7.7%;left:calc(50% - 2px)}.mu-needle:after{content:"";background:inherit;border-radius:50%;width:16px;height:16px;position:absolute;bottom:-8px;left:-6px}.mu-stage.is-on .mu-needle{opacity:1}.mu-stage.is-lost .mu-needle{opacity:.35}.mu-stage.is-ok .mu-needle{background:var(--t-ok,#15803d)}.mu-stage.is-near .mu-needle{background:var(--t-warn,#b45309)}.mu-stage.is-ok .mu-note{color:var(--t-ok,#15803d)}.mu-stage.is-lost .mu-note,.mu-stage.is-lost .mu-cents{opacity:.45}.mu-cents{font:600 18px var(--t-font,system-ui, sans-serif);font-variant-numeric:tabular-nums;min-height:1.4em;color:var(--t-text,#1c2430)}.mu-say{text-align:center;min-height:1.5em;color:var(--t-muted,#5d6b7c);max-width:46ch;font-size:16px}.mu-say[data-kind=ok]{color:var(--t-ok,#15803d);font-weight:600}.mu-say[data-kind=err]{color:var(--t-err,#b91c1c)}.mu-hist{border-top:1px solid var(--t-border,#dde3ea);width:100%;max-width:640px;height:120px;margin-top:8px}.mu-ctrl{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.mu-ctrl .tool-btn{min-height:48px;padding-inline:18px;font-size:16px}.mu-go{min-width:190px}.mu-modes{flex-wrap:wrap;justify-content:center;gap:6px;display:flex}.mu-strings{grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;gap:6px;display:grid}.mu-str{appearance:none;font:inherit;cursor:pointer;border:1.5px solid var(--t-border,#dde3ea);background:var(--t-bg,#fff);min-height:72px;color:var(--t-text,#1c2430);border-radius:10px;align-content:center;justify-items:center;gap:1px;padding:6px 2px;display:grid;position:relative}.mu-str small{color:var(--t-muted,#5d6b7c);white-space:nowrap;font-size:12px;line-height:1.1}.mu-str b{font:700 20px/1.1 var(--t-font,system-ui, sans-serif)}.mu-str span{color:var(--t-muted,#5d6b7c);font-size:12px}.mu-str:hover{border-color:var(--t-accent,#2563eb)}.mu-str[aria-pressed=true]{border-color:var(--t-accent,#2563eb);background:color-mix(in srgb, var(--t-accent,#2563eb) 10%, var(--t-bg,#fff));box-shadow:inset 0 0 0 1px var(--t-accent,#2563eb)}.mu-str.is-hear{outline:2px dashed var(--t-accent,#2563eb);outline-offset:2px}.mu-str.is-ok{border-color:var(--t-ok,#15803d)}.mu-str.is-ok:after{content:"✓";color:var(--t-ok,#15803d);font-size:14px;font-weight:700;position:absolute;top:2px;right:6px}.mu-done{text-align:center;color:var(--t-ok,#15803d);font-weight:700}.mu-tines{background:color-mix(in srgb, var(--t-warn,#b45309) 12%, var(--t-surface,#f5f7fa));border:1px solid var(--t-border,#dde3ea);border-radius:12px 12px 40% 40%/12px 12px 30px 30px;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;align-items:start;gap:3px;padding:10px 8px 0;display:grid}.mu-tines .mu-str{min-height:calc(190px * var(--len,1));color:#1c2430;background:linear-gradient(90deg,#c9ced6,#f4f6f9 45%,#b9bfc9);border-color:#9aa2ae;border-radius:0 0 999px 999px;align-content:end;gap:0;padding:6px 0}.mu-tines .mu-str b{font-size:13px}.mu-tines .mu-str span{color:#4b5563;font-size:10px}.mu-tines .mu-str[aria-pressed=true]{background:linear-gradient(90deg,#9ec1ff,#e8f0ff 45%,#8db4fb)}.mu-tines .mu-str.is-ok{background:linear-gradient(90deg,#9fd8b2,#eafaf0 45%,#8fcaa4)}.mu-tines .mu-str.is-ok:after{top:auto;bottom:26px;right:auto}.mu-set{gap:12px;padding-top:8px;display:grid}.mu-range{width:100%;max-width:280px;accent-color:var(--t-accent,#2563eb)}.mu-hint{color:var(--t-muted,#5d6b7c);margin:0;font-size:14px}@container (width<=520px){.mu-str{min-height:64px}.mu-str b{font-size:17px}.mu-strings{gap:4px}.mu-tines{gap:2px;padding-inline:4px}.mu-tines .mu-str b{font-size:11px}.mu-tines .mu-str span{display:none}}.mu-strings:has(>:nth-child(9)){grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-flow:row}.mu-stage--fork{gap:2px}.mu-fork{appearance:none;cursor:pointer;background:0 0;border:0;border-radius:16px;width:110px;height:190px;padding:4px 20px}.mu-fork svg{width:100%;height:100%}.mu-fork__body{fill:var(--t-muted,#5d6b7c)}.mu-fork:hover .mu-fork__body,.mu-stage.is-on .mu-fork__body{fill:var(--t-accent,#2563eb)}.mu-fork:focus-visible{outline:2px solid var(--t-accent,#2563eb)}.mu-fork.is-hit svg{animation:.5s linear 3 mu-buzz}@keyframes mu-buzz{25%{transform:translate(-1.5px)}75%{transform:translate(1.5px)}}@media (prefers-reduced-motion:reduce){.mu-fork.is-hit svg{animation:none}}.mu-row{flex-wrap:wrap;align-items:center;gap:8px 16px;display:flex}.mu-block{border-top:1px solid var(--t-border,#dde3ea);gap:10px;padding-top:14px;display:grid}.mu-keys{grid-template-columns:repeat(7,minmax(0,1fr));max-width:520px;height:150px;display:grid;position:relative}.mu-key{appearance:none;font:inherit;cursor:pointer;border:1px solid var(--t-border,#c9d1db);color:#1c2430;background:#fff;border-radius:0 0 8px 8px;justify-content:center;align-items:flex-end;padding-bottom:8px;font-size:13px;font-weight:600;display:flex}.mu-key:active,.mu-key:hover{background:#e8f0ff}.mu-key--black{z-index:1;width:9%;height:60%;top:0;left:calc((var(--pos) / 7) * 100% - 4.5%);background:#1c2430;border-color:#1c2430;border-radius:0 0 6px 6px;position:absolute}.mu-key--black:hover,.mu-key--black:active{background:#3b4656}.mu-note--hz{font-variant-numeric:tabular-nums;font-size:clamp(44px,12cqi,84px)}.mu-range--wide{max-width:none}.mu-steps{flex-wrap:wrap;gap:6px;display:flex}.mu-trio{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;display:grid}.mu-hint[data-kind=warn]{color:var(--t-warn,#b45309)}.mu-bpmrow{align-items:center;gap:8px;display:flex}.mu-bpmbox{justify-items:center;min-width:4.2ch;display:grid}.mu-bpm{font:700 clamp(64px, 18cqi, 120px)/1 var(--t-font,system-ui, sans-serif);font-variant-numeric:tabular-nums;color:var(--t-text,#1c2430)}.mu-bpmbox span{color:var(--t-muted,#5d6b7c);font-size:13px}.mu-step{font-variant-numeric:tabular-nums;min-width:48px;min-height:48px;padding:0 8px;font-size:16px}.mu-beats{flex-wrap:wrap;justify-content:center;gap:10px;padding:10px 0 4px;display:flex}.mu-beats i{border:2px solid var(--t-border,#c9d1db);background:var(--t-bg,#fff);border-radius:50%;width:22px;height:22px;transition:background-color 50ms}.mu-beats i.is-strong{border-color:var(--t-accent,#2563eb);width:28px;height:28px}.mu-beats i.is-mid{border-color:color-mix(in srgb, var(--t-accent,#2563eb) 55%, var(--t-border,#c9d1db))}.mu-beats i.on{background:var(--t-accent,#2563eb);border-color:var(--t-accent,#2563eb)}.mu-beats i.is-strong.on{background:var(--t-err,#b91c1c);border-color:var(--t-err,#b91c1c)}.mu-stage--metro{gap:10px;position:relative}.mu-stage.is-beat{animation:.14s ease-out mu-flash}.mu-stage.is-beat1{animation:.18s ease-out mu-flash1}@keyframes mu-flash{0%{background:color-mix(in srgb, var(--t-accent,#2563eb) 22%, var(--t-surface,#f5f7fa))}}@keyframes mu-flash1{0%{background:color-mix(in srgb, var(--t-err,#b91c1c) 26%, var(--t-surface,#f5f7fa))}}@media (prefers-reduced-motion:reduce){.mu-stage.is-beat,.mu-stage.is-beat1{animation:none}}.tool-btn.is-hit{background:color-mix(in srgb, var(--t-accent,#2563eb) 18%, var(--t-bg,#fff))}.mu-stage.is-full,.mu-stage.is-pseudo-full{background:#0d0f14;border:0;border-radius:0;align-content:center;min-height:100%}.mu-stage.is-pseudo-full{z-index:1000;position:fixed;inset:0}.mu-stage.is-full .mu-bpm,.mu-stage.is-pseudo-full .mu-bpm{color:#f5f7fa;font-size:clamp(96px,26vmin,320px)}.mu-stage.is-full .mu-note__sub,.mu-stage.is-pseudo-full .mu-note__sub,.mu-stage.is-full .mu-bpmbox span,.mu-stage.is-pseudo-full .mu-bpmbox span{color:#9aa3b2}.mu-stage.is-full .tool-btn:not(.tool-btn--primary),.mu-stage.is-pseudo-full .tool-btn:not(.tool-btn--primary){color:#f5f7fa;background:#1d2028;border-color:#333744}.mu-stage.is-full .mu-beats i,.mu-stage.is-pseudo-full .mu-beats i{background:#1d2028;border-color:#333744;width:44px;height:44px}.mu-stage.is-full .mu-beats i.on,.mu-stage.is-pseudo-full .mu-beats i.on{background:#3b82f6;border-color:#3b82f6}.mu-stage.is-full .mu-beats i.is-strong.on,.mu-stage.is-pseudo-full .mu-beats i.is-strong.on{background:#ef4444;border-color:#ef4444}.mu-stage.is-full.is-beat,.mu-stage.is-pseudo-full.is-beat{animation-name:mu-flashd}.mu-stage.is-full.is-beat1,.mu-stage.is-pseudo-full.is-beat1{animation-name:mu-flashd1}@keyframes mu-flashd{0%{background:#1e3a8a}}@keyframes mu-flashd1{0%{background:#7f1d1d}}@container (width<=440px){.mu-bpmrow{gap:4px}.mu-step{min-width:40px;padding:0 4px}.mu-ctrl{grid-template-columns:1fr 1fr;width:100%;display:grid}.mu-ctrl .mu-go{grid-column:1/-1}.mu-ctrl .tool-btn{padding-inline:8px;font-size:15px}}@container (width<=520px){.mu-tines .mu-str b{writing-mode:vertical-rl;padding-bottom:4px;font-size:12px;line-height:1;transform:rotate(180deg)}}.mu-stage{min-width:0}.mu-bpmrow{max-width:100%}@container (width<=440px){.mu-bpm{font-size:56px}.mu-step{flex:none;width:40px;min-width:0;padding:0}.mu-bpmbox{min-width:0}}