.lp-list{flex-direction:column;gap:14px;display:flex}.lp-head{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;display:flex}.lp-lessons{grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:14px;margin:0;padding:0;list-style:none;display:grid}.lp-lesson{color:var(--ink);grid-template-columns:44px minmax(0,1fr);gap:14px;height:100%;padding:16px;text-decoration:none;transition:transform .14s;display:grid}.lp-lesson:hover{transform:translateY(-2px)}.lp-lesson h3{font-family:var(--f-display);font-size:19px;font-weight:400;line-height:1.15}.lp-lesson p{font-size:13px}.lp-num{border:2px solid var(--ink);border-radius:var(--radius);place-items:center;width:44px;height:44px;font-size:18px;font-weight:600;display:grid}.lp-tags{flex-wrap:wrap;gap:6px;margin-top:6px;display:flex}@media (prefers-reduced-motion:reduce){.lp-lesson{transition:none}.lp-lesson:hover{transform:none}}.lp-read{flex-direction:column;gap:12px;max-width:68ch;font-size:16px;line-height:1.55;display:flex}.lp-figure{color:var(--ink);flex-direction:column;gap:6px;margin:4px 0 0;display:flex}.lp-figure figcaption{font-size:14px}.lp-diagram{width:min(100%,300px);height:auto}.lp-fig-staff{width:min(100%,420px);height:auto}.lp-pager{flex-wrap:wrap;justify-content:space-between;gap:10px;display:flex}.lp-practice{flex-direction:column;gap:14px;min-width:0;max-width:900px;padding:18px;display:flex}.lp-ptop{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;display:flex}.lp-dots{flex-wrap:wrap;gap:6px;display:flex}.lp-dot{border:2px solid var(--line);background:var(--surface);width:32px;height:32px;color:var(--muted);font:600 13px var(--f-mono);cursor:pointer;border-radius:50%;padding:0}.lp-dot.done{border-color:var(--good);background:var(--good-tint);color:var(--good)}.lp-dot.now{border-color:var(--accent);color:var(--ink)}.lp-ex{flex-direction:column;gap:12px;min-width:0;display:flex}.lp-prompt{margin-top:4px;font-size:16px}.lp-midi{justify-content:center;margin:0;display:flex}.lp-keys-note{text-align:center;margin:0;font-size:12px}@media (pointer:coarse){.lp-keys-note{display:none}}.lp-steps{flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none;display:flex}.lp-steps li{border:1.5px solid var(--line);border-radius:var(--radius);background:var(--surface);flex-direction:column;align-items:center;min-width:40px;padding:4px 8px;font-size:15px;font-weight:600;display:flex}.lp-steps li small{font:500 11px var(--f-mono);color:var(--muted)}.lp-steps li.done{border-color:var(--good);background:var(--good-tint);color:var(--good)}.lp-steps li.now{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}.lp-target{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:6px;min-height:132px;display:flex}.lp-big-name{font-family:var(--f-display);max-width:28ch;margin:0;font-size:clamp(22px,5vw,32px);line-height:1.15}.lp-big{font-family:var(--f-display);color:var(--accent);font-size:48px;line-height:1}.lp-ear{flex-direction:column;align-items:center;gap:8px;display:flex}.lp-staff{width:150px;height:auto;color:var(--ink)}.lp-count{margin:0;font-size:13px}.lp-done{flex-direction:column;align-items:center;gap:8px;display:flex}.lp-done p{margin:0}.lp-kb{--lp-bw:calc(100% / var(--lp-whites,15) * .6);touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;cursor:pointer;width:100%;height:clamp(130px,24vw,200px);box-shadow:0 0 0 1.5px var(--line);border-radius:0 0 10px 10px;display:flex;position:relative}.lp-w{color:#14213d;background:#f7f8fa;border:1px solid #9aa7b8;border-top:none;border-radius:0 0 7px 7px;flex-direction:column;flex:1;justify-content:flex-end;align-items:center;min-width:0;padding-bottom:6px;display:flex;position:relative}.lp-b{width:var(--lp-bw);z-index:1;color:#f2f5f9;background:#1a2233;border-radius:0 0 5px 5px;justify-content:center;align-items:flex-end;height:62%;padding-bottom:5px;display:flex;position:absolute;top:0}.lp-w.is-down{background:#bfe9f7}.lp-b.is-down{background:#3d8fb0}.lp-w.is-lit{background:#ffe2a0;box-shadow:inset 0 -6px #ffc233}.lp-b.is-lit{background:#e0a419}.lp-w.is-ok{background:#b8f0c6}.lp-b.is-ok{background:#2f9e52}.lp-w.is-bad{background:#ffc2d8}.lp-b.is-bad{background:#c93a72}.lp-labels{pointer-events:none;flex-direction:column;align-items:center;gap:2px;display:flex}.lp-labels b{font-size:12px;font-weight:700}.lp-comp{font:600 10px var(--f-mono);opacity:.55;pointer-events:none;border:1px solid;border-radius:3px;padding:0 3px}@media (pointer:coarse){.lp-comp{display:none}}.lp-mid{pointer-events:none;background:#ff5c9c;border-radius:50%;width:7px;height:7px;position:absolute;top:42%}.lp-song-end{text-align:center;flex-direction:column;align-items:center;gap:10px;display:flex}.lp-song-end p{margin:0}.lp-options{gap:8px;max-width:560px;display:grid}.lp-option{text-align:left;border:1.5px solid var(--line);border-radius:var(--radius);background:var(--surface);color:var(--ink);font:inherit;cursor:pointer;padding:10px 14px;font-size:15px}.lp-option:hover:not(:disabled),.lp-option:focus-visible{border-color:var(--accent)}.lp-option.bad{border-color:var(--bad);background:var(--bad-tint);color:var(--bad)}.lp-option.good{border-color:var(--good);background:var(--good-tint);color:var(--good)}.lp-option:disabled{opacity:.55;cursor:default}.lp-say{min-height:1.4em}.lp-say p{max-width:60ch;margin:0}.lp-say .good{color:var(--good)}.lp-say .bad{color:var(--bad)}.lp-finished{border-top:1.5px solid var(--line);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;padding-top:12px;display:flex}.lp-finished p{margin:0}@media (max-width:640px){.lp-practice{padding:14px 10px}.lp-kb{height:clamp(130px,40vw,190px)}.lp-labels b{font-size:10px}}