.mus-lab .play-body{flex-direction:column;gap:14px;display:flex}.mus-tabs{gap:6px}.mus-tabs .chip-btn{justify-content:center;min-width:84px}.mus-loading{min-height:420px}.mus-big{font-family:var(--f-display);font-size:26px;line-height:1.1}.mus-ink-line{fill:none;stroke:var(--ink);stroke-linecap:round;stroke-linejoin:round}.mus-ink-fill{fill:var(--ink)}.mus-hl .mus-ink-fill{fill:var(--accent)}.mus-hl .mus-ink-line{stroke:var(--accent)}.mus-play{flex-direction:column;gap:12px;display:flex}.mus-controls{flex-wrap:wrap;align-items:flex-end;gap:10px 12px;display:flex}.mus-controls .field{flex:130px;gap:4px;max-width:220px}.mus-controls .input{padding:8px 10px}.mus-toggles{flex-wrap:wrap;align-items:center;gap:8px 16px;min-height:40px;display:flex}.mus-toggles .toggle{font-size:14px}.mus-oct,.mus-tempo{align-items:center;gap:6px;display:inline-flex}.mus-oct .btn,.mus-tempo .btn{min-width:34px}.mus-oct b,.mus-tempo b{text-align:center;min-width:2.2ch;font-family:var(--f-mono)}.mus-drumnote,.mus-soundoff{margin:0}.mus-stage{width:100%;min-width:0;position:relative}.mus-piano-rows{flex-direction:column;gap:10px;display:flex}.mus-under{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);align-items:start;gap:12px;display:grid}.mus-readout{flex-direction:column;justify-content:center;gap:4px;min-height:76px;display:flex}.mus-keychords{flex-direction:column;gap:6px;display:flex}.mus-keychords.tx-opts{flex-direction:row}.mus-chord-btn{border:1.5px solid var(--line);border-radius:var(--radius);background:var(--surface);min-width:52px;color:var(--ink);cursor:pointer;flex-direction:column;align-items:center;gap:1px;padding:6px 8px;line-height:1.1;display:inline-flex}.mus-chord-btn small{font-family:var(--f-mono);color:var(--muted);font-size:11px}.mus-chord-btn b{font-family:var(--f-word);font-size:17px;font-weight:400}.mus-chord-btn:hover{border-color:var(--accent)}.mus-chord-btn:active{transform:translateY(1px)}@media (max-width:700px){.mus-under{grid-template-columns:1fr}}.mus-piano{touch-action:none;-webkit-user-select:none;user-select:none;background:linear-gradient(#2a2523,#171413);border-radius:8px 8px 6px 6px;height:190px;padding:10px 8px 8px;display:flex;position:relative;box-shadow:inset 0 2px #ffffff14,0 10px 22px -12px #0000008c}.mus-piano.small{height:130px;padding:6px}.mus-keys{flex:1;min-width:0;height:100%;display:flex;position:relative}.mus-key{cursor:pointer;-webkit-tap-highlight-color:transparent;font:600 12px/1 var(--f-body);border:0;justify-content:center;align-items:flex-end;padding:0;display:flex;position:relative}.mus-key span{pointer-events:none;white-space:nowrap;padding-bottom:8px}.mus-key.white{color:#4a4440;background:linear-gradient(#fffdf7,#f1ece1 85%,#e2dbcc);border-radius:0 0 5px 5px;flex:none;width:auto;height:100%;margin:0 1px;box-shadow:inset 0 -5px #d5cdbb,0 1px #0006}.mus-key.black{z-index:2;color:#e9e2d3;background:linear-gradient(#3a3532,#121010 75%);border-radius:0 0 4px 4px;min-width:25px;height:62%;font-size:10px;position:absolute;top:0;transform:translate(-50%);box-shadow:inset 0 -4px #000,inset 1px 0 #ffffff1f,0 3px 4px #00000080}.mus-key.white.in{background:linear-gradient(#fffdf7,#fff0c9 85%,#f2dfa5)}.mus-key.white.root{color:#3a2600;background:linear-gradient(#fff6e0,#ffd27a 85%,#f0b640)}.mus-key.black.in{background:linear-gradient(#5b4a2a,#2a2010 75%)}.mus-key.black.root{color:#fff4d6;background:linear-gradient(#c98a1a,#7a4e05 75%)}.mus-key.white.out span,.mus-key.black.out span{opacity:.5}.mus-key.white.on{background:linear-gradient(#ffe2a6,#ffb938);transform:translateY(1px);box-shadow:inset 0 -2px #d99a1c}.mus-key.black.on{color:#2a1a00;background:linear-gradient(#ffc555,#d98e0f 75%);box-shadow:inset 0 -2px #8a5800}.mus-key.white.good{color:#0b3b1d;background:linear-gradient(#e3ffec,#6ee59a)}.mus-key.black.good{background:linear-gradient(#5fdd8c,#1e8a48 75%)}.mus-key.white.bad{background:linear-gradient(#ffe4e4,#ff8c8c)}.mus-key.black.bad{background:linear-gradient(#ff7a7a,#a62626 75%)}.mus-board-wrap{width:100%}.mus-board{touch-action:none;-webkit-user-select:none;user-select:none;background:linear-gradient(90deg,#3b2417,#4a2e1e 30%,#3f2619 70%,#33200f);border-radius:6px;padding-right:6px;display:grid;position:relative;box-shadow:inset 0 0 0 1px #0006,0 10px 22px -12px #0009}.mus-board.vertical{touch-action:pan-y;background:linear-gradient(#3b2417,#4a2e1e 30%,#3f2619 70%,#33200f);width:100%;max-width:360px;margin-inline:auto;padding:0 6px 6px 0}.mus-board.ukulele{background:linear-gradient(90deg,#5a3a22,#6b4729 40%,#5e3d23)}.mus-board.ukulele.vertical{background:linear-gradient(#5a3a22,#6b4729 40%,#5e3d23)}.mus-fret{cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:0;border-right:3px solid #b9b4aa;place-items:center;min-width:0;padding:0;display:grid;position:relative}.mus-board.vertical .mus-fret{border-bottom:3px solid #b9b4aa;border-right:0}.mus-fret.open{background:#0000002e;border-right:6px solid #ede6d3}.mus-board.vertical .mus-fret.open{border-bottom:7px solid #ede6d3;border-right:0}.mus-string{height:var(--gauge);pointer-events:none;background:linear-gradient(#f4f1ea,#9c978c);position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);box-shadow:0 1px 1px #00000080}.mus-board.vertical .mus-string{width:var(--gauge);background:linear-gradient(90deg,#f4f1ea,#9c978c);height:auto;inset:0 auto 0 50%;transform:translate(-50%)}.mus-board.bass .mus-string{background:linear-gradient(#e0d9c8,#7e7466)}.mus-fret span{z-index:1;min-width:24px;height:24px;font:700 11px/1 var(--f-body);pointer-events:none;color:#3a2a1e;background:#f2eadb;border-radius:12px;place-items:center;padding:0 4px;display:grid;position:relative;box-shadow:0 1px 2px #00000080}.mus-fret.root span{color:#2a1a00;background:#ffb938}.mus-fret.out span{color:#f2eadb;background:#f2eadb59}.mus-fret.on span{color:#2a1a00;background:#fff;box-shadow:0 0 0 3px #ffb938,0 0 12px #ffb938}.mus-fret.good span{color:#062a12;background:#4fe08a}.mus-fret.bad span{color:#3a0606;background:#ff7a7a}.mus-fret.good:after,.mus-fret.bad:after{content:"";z-index:1;pointer-events:none;border-radius:50%;width:22px;height:22px;position:absolute}.mus-fret.good:not(:has(span)):after{background:#4fe08a}.mus-fret.bad:not(:has(span)):after{background:#ff7a7a}.mus-fret:hover span{filter:brightness(1.08)}.mus-fretno{font:600 10px/1 var(--f-mono);color:#c9b9a4;justify-content:center;align-items:center;gap:3px;display:flex}.mus-board.vertical .mus-fretno{flex-direction:column}.mus-fretno i{opacity:.75;background:#e8dcc6;border-radius:50%;width:6px;height:6px}.mus-grid{touch-action:none;-webkit-user-select:none;user-select:none;background:linear-gradient(#24262c,#17181c);border-radius:10px;gap:8px;padding:12px;display:grid;box-shadow:inset 0 1px #ffffff14,0 10px 22px -12px #0009}.mus-pad{--pad:#ffb938;aspect-ratio:1.15;cursor:pointer;-webkit-tap-highlight-color:transparent;background:color-mix(in srgb, var(--pad) 32%, #1c1d22);min-width:0;max-height:96px;box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--pad) 60%, #000), inset 0 -4px 0 #00000059;color:#fff;font:700 clamp(11px, 2.4vw, 16px)/1 var(--f-body);border:0;border-radius:8px;place-items:center;transition:background 60ms,box-shadow 60ms;display:grid;position:relative}.mus-pad span{pointer-events:none;text-shadow:0 1px 2px #00000080}.mus-pad.root{box-shadow:inset 0 0 0 3px var(--pad), inset 0 -4px 0 #00000059}.mus-pad.on{background:var(--pad);color:#16120a;box-shadow:0 0 18px color-mix(in srgb, var(--pad) 70%, transparent), inset 0 0 0 2px #fff}.mus-pad.on span{text-shadow:none}.mus-drums{touch-action:none;-webkit-user-select:none;user-select:none;background:linear-gradient(#2c3238,#1a1e22);border-radius:10px;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;width:100%;max-width:520px;margin-inline:auto;padding:12px;display:grid;box-shadow:inset 0 1px #ffffff14,0 10px 22px -12px #0009}.mus-drum{aspect-ratio:1.25;cursor:pointer;-webkit-tap-highlight-color:transparent;color:#e6ecf0;background:radial-gradient(circle at 50% 40%,#4a525a,#2a2f35 70%);border:0;border-radius:10px;flex-direction:column;justify-content:center;align-items:center;gap:6px;transition:background 50ms;display:flex;box-shadow:inset 0 -4px #0006,inset 0 0 0 2px #15181b}.mus-drum b{font:700 14px/1.1 var(--f-body);pointer-events:none}.mus-drum .kbd{pointer-events:none;color:#b8c4cc;border-color:#56616a}.mus-drum.kick,.mus-drum.snare{background:radial-gradient(circle at 50% 40%,#5a4d44,#33291f 70%)}.mus-drum.on{color:#2a1a00;background:radial-gradient(circle at 50% 40%,#ffe08a,#ffb938 60%,#c98a1a);box-shadow:0 0 18px #ffb93899}.mus-looper{flex-direction:column;gap:12px;display:flex}.mus-loop-head{flex-wrap:wrap;align-items:baseline;gap:10px;display:flex}.mus-loop-head .muted{font-size:13px}.mus-loop-main{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.mus-rec i{background:var(--bad);border-radius:50%;width:11px;height:11px}.mus-rec.on{background:var(--bad);border-color:var(--bad);color:#fff}.mus-rec.on i{background:#fff;animation:1s steps(2,start) infinite mus-blink}@keyframes mus-blink{to{opacity:.2}}.mus-timeline{border:1.5px solid var(--line);border-radius:var(--radius);background:var(--sunk);flex:240px;min-width:0;height:46px;display:flex;position:relative;overflow:hidden}.mus-beat{border-left:1px solid color-mix(in srgb, var(--line) 60%, transparent);flex:1}.mus-beat.bar{border-left:1.5px solid var(--line)}.mus-beat:first-child{border-left:0}.mus-beat.now{background:color-mix(in srgb, var(--accent) 14%, transparent)}.mus-timeline i{background:var(--ink);opacity:.75;border-radius:1px;width:4px;height:4px;margin-left:-2px;position:absolute}.mus-timeline i.d{background:var(--muted);height:6px}.mus-head{background:var(--accent);width:2px;margin-left:-1px;position:absolute;top:0;bottom:0}.mus-count{font:400 26px/1 var(--f-display);color:var(--accent);place-items:center;font-style:normal;display:grid;position:absolute;inset:0}.mus-loop-opts{flex-wrap:wrap;align-items:flex-end;gap:10px 14px;display:flex}.mus-loop-opts .field{gap:4px}.mus-loop-opts .input{width:auto;padding:7px 9px}.mus-loop-opts .toggle{min-height:36px;font-size:14px}.mus-export{gap:6px;margin-left:auto;display:inline-flex}.mus-practice{flex-direction:column;gap:12px;display:flex}.mus-drills{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px;display:grid}.mus-drill{text-align:left;flex-direction:column;align-items:flex-start;gap:3px;padding:10px 12px}.mus-drill b{font-family:var(--f-word);font-size:16px;font-weight:400}.mus-drill small{color:var(--muted);font-size:12px;font-weight:500;line-height:1.3}.mus-drill-opts{flex-wrap:wrap;gap:8px 18px;display:flex}.mus-start{text-align:center;flex-direction:column;align-items:center;gap:10px;padding:24px 16px;display:flex}.mus-start p{max-width:52ch;margin:0}.mus-q{flex-direction:column;align-items:stretch;gap:12px;display:flex}.mus-prompt{text-align:center;margin:0;font-size:17px;font-weight:600}.mus-target{font-family:var(--f-display);color:var(--accent);font-size:24px;font-weight:400}.mus-staff-wrap{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--radius);justify-content:center;padding:8px;display:flex}.mus-staff{width:100%;max-width:420px;height:auto;display:block}.mus-replay{align-self:center}.mus-choices{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;display:grid}.mus-choices.many{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}.mus-choice{padding:10px 8px;font-size:14px}.mus-choice.good,.mus-choice.good:disabled{background:var(--good-tint);border-color:var(--good);color:var(--good)}.mus-choice.bad,.mus-choice.bad:disabled{background:var(--bad-tint);border-color:var(--bad);color:var(--bad)}.mus-feedback{border-radius:var(--radius);border:1.5px solid;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0;padding:10px 12px;display:flex}.mus-feedback.good{background:var(--good-tint);border-color:var(--good)}.mus-feedback.bad{background:var(--bad-tint);border-color:var(--bad)}.mus-feedback>span{flex:220px}.mus-feedback .btn{margin-left:auto}.mus-feedback .btn .kbd{color:inherit;opacity:.7;border-color:currentColor}.mus-rhythm{flex-direction:column;align-items:center;gap:12px;display:flex}.mus-rhythm-bar{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--radius);max-width:560px;padding:6px}.mus-time{font:400 17px/1 var(--f-display);fill:var(--ink)}.mus-beat-hl{fill:color-mix(in srgb, var(--accent) 16%, transparent)}.mus-miss{stroke:var(--bad)}.mus-tap-good{fill:var(--good)}.mus-tap-ok{fill:var(--sun)}.mus-tap-bad{fill:var(--bad)}.mus-rhythm .mus-count{font:400 18px/1 var(--f-display);color:var(--muted);align-items:center;gap:8px;display:flex;position:static}.mus-rhythm .mus-count span{border:1.5px solid var(--line);border-radius:50%;place-items:center;width:36px;height:36px;display:grid}.mus-rhythm .mus-count span.in{border-color:var(--sun);color:var(--sun)}.mus-rhythm .mus-count span.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}.mus-rhythm .mus-count small{font:600 14px/1 var(--f-body);min-width:8ch}.mus-rhythm-btns{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.mus-tap{border:2px solid var(--line);background:var(--sunk);width:min(100%,320px);height:96px;color:var(--muted);font:400 22px/1 var(--f-display);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;border-radius:14px}.mus-tap.live{border-color:var(--accent);color:var(--ink);background:color-mix(in srgb, var(--accent) 10%, var(--surface))}.mus-tap.live:active{background:color-mix(in srgb, var(--accent) 30%, var(--surface))}.mus-rhythm .mus-feedback{width:100%;max-width:560px}.mus-explore{flex-direction:column;gap:16px;display:flex}.mus-circle-wrap{grid-template-columns:minmax(0,340px) minmax(0,1fr);align-items:start;gap:16px;display:grid}.mus-circle{width:100%;max-width:340px;margin-inline:auto;display:block}.mus-seg{fill:var(--surface);stroke:var(--line);stroke-width:1px;cursor:pointer}.mus-seg.minor{fill:var(--sunk)}.mus-seg:hover{fill:color-mix(in srgb, var(--accent) 14%, var(--surface))}.mus-seg.on{fill:var(--accent)}.mus-seg-t{font:400 11px/1 var(--f-word);fill:var(--ink);text-anchor:middle;dominant-baseline:central;pointer-events:none}.mus-seg-t.small{font-size:8px}.mus-seg-t.tiny{font:600 6px/1 var(--f-mono);fill:var(--muted)}.mus-seg.on+.mus-seg-t{fill:var(--accent-ink)}.mus-keyinfo,.mus-builder{flex-direction:column;gap:10px;min-width:0;display:flex}.mus-keyinfo p,.mus-builder p{margin:0}.mus-keyinfo .btn{align-self:flex-start}.mus-progs{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px;display:grid}.mus-prog{text-align:left;flex-direction:column;align-items:flex-start;gap:2px;padding:8px 10px}.mus-prog b{font-family:var(--f-mono);font-size:13px}.mus-prog small{font-size:12px;font-weight:500}.mus-builder .mus-controls .btn{flex:none}@media (max-width:760px){.mus-circle-wrap{grid-template-columns:1fr}}@media (max-width:560px){.mus-insts{order:1}.mus-soundoff{order:2}.mus-stage{order:3}.mus-controls{order:4}.mus-under{order:5}.mus-looper{order:6}.mus-piano{height:150px;padding:8px 5px 6px}.mus-key span{padding-bottom:6px;font-size:11px}.mus-key.black span{font-size:9px}.mus-controls .field{flex:40%;max-width:none}.mus-export{margin-left:0}.mus-drum b{font-size:12px}.mus-grid{gap:5px;padding:8px}.mus-pad{aspect-ratio:.8;border-radius:6px}.mus-drills{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.mus-drill{padding:8px 10px}.mus-drill small{display:none}.mus-drill b{font-size:15px}}@media (prefers-reduced-motion:reduce){.mus-rec.on i{animation:none}.mus-key.white.on{transform:none}}