.pp{border:1.5px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-sm);flex-direction:column;gap:16px;margin:1em 0 1.6em;padding:22px;display:flex}.pp-main{background:var(--bg-2);border-radius:var(--radius-md);grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:16px 24px;padding:18px 22px;display:grid}.pp-dial{width:100%;max-width:320px;height:auto;margin:0 auto;display:block}.pp-ring{fill:var(--surface);stroke:var(--ring);stroke-width:3px}.pp-hub{fill:var(--bg-2);stroke:var(--ring);stroke-width:2px}.pp-hubtext{font:800 22px var(--font-display);fill:var(--ink)}.pp-hubsub{font:700 12px var(--font-body);fill:var(--muted)}.pp-hole-btn{cursor:pointer}.pp-hole-btn:focus{outline:none}.pp-hole-btn circle{fill:var(--bg-2);stroke:var(--ink-soft);stroke-width:2px}.pp-hole-btn.black circle{fill:var(--surface-2)}.pp-hole-btn text{font:800 15px var(--font-body);fill:var(--ink);pointer-events:none}.pp-hole-btn text.pp-two{font-size:11.5px}.pp-hole-btn:hover circle,.pp-hole-btn:focus-visible circle{stroke:var(--accent);stroke-width:3px}.pp-hole-btn.on circle{fill:var(--accent);stroke:var(--accent)}.pp-hole-btn.on text{fill:#fff}.pp-keys{width:100%;height:auto;display:block}.pp-key{cursor:pointer}.pp-key:focus{outline:none}.pp-key.white rect{fill:#fffdf8;stroke:#cfc8b8;stroke-width:1.5px}.pp-key.black rect{fill:#1c1b33}.pp-key text{font:700 13px var(--font-body);fill:#4a4870;pointer-events:none}.pp-key:hover rect,.pp-key:focus-visible rect{stroke:var(--accent);stroke-width:3px}.pp-key.on rect{fill:var(--accent)}.pp-key.white.on text{fill:#fff}.pp-show{text-align:center;flex-direction:column;align-items:center;gap:4px;display:flex}.pp-name{font:700 1.1rem var(--font-body);color:var(--muted);margin:0}.pp-name b{font:800 3.4rem/1.1 var(--font-display);color:var(--accent)}.pp-chordnotes{font:700 1.1rem var(--font-body);color:var(--ink-soft);margin-top:2px;display:block}.pp.sounding .pp-name b{animation:1.2s ease-in-out infinite alternate pp-glow}@keyframes pp-glow{0%{opacity:1}to{opacity:.55}}.pp-draw{width:100%;max-width:280px}.pp-staff{width:100%;height:auto;display:block}.pp-line{stroke:var(--staff-line);stroke-width:2px}.pp-clef{fill:var(--staff-line)}.pp-note ellipse{fill:var(--ink)}.pp-note .pp-hole{fill:var(--bg-2)}.pp-acc line{stroke:var(--ink);stroke-width:2px}.pp-acc .pp-bar{stroke-width:5px}.pp-acc .pp-flat{fill:none;stroke:var(--ink);stroke-width:2.5px}.pp-octave{color:var(--muted);margin:0;font-size:.85rem}.pp-row{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.pp-row .btn{padding:10px 18px}.pp-row .btn:disabled{opacity:.45;cursor:default}.pp-row .pp-play{justify-content:center;min-width:100px}.pp-settings{border-top:1.5px solid var(--border);flex-wrap:wrap;align-items:flex-end;gap:14px 26px;padding-top:14px;display:flex}.pp-field{flex-direction:column;gap:6px;display:flex}.pp-label,.pp-vol{color:var(--ink-soft);font-size:.85rem;font-weight:700}.pp-vol{flex-direction:column;gap:6px;display:flex}.pp-vol input{accent-color:var(--accent)}.pp-seg{flex-wrap:wrap;gap:4px;display:flex}.pp-seg button{font:700 .9rem var(--font-body);border:2px solid var(--border);background:var(--surface);color:var(--ink-soft);cursor:pointer;border-radius:10px;min-height:36px;padding:6px 11px}.pp-seg button[aria-pressed=true]{border-color:var(--accent);color:var(--accent-text);background:var(--accent-soft)}.pp-compact{border-radius:var(--radius-md);box-shadow:none;gap:10px;margin:0;padding:14px}.pp-compact .pp-main{padding:12px 14px}.pp-compact .pp-name b{font-size:2.4rem}.pp-compact .pp-chordnotes{font-size:.95rem}.pp-compact .pp-row .btn{padding:8px 12px;font-size:.9rem}.pp-compact .pp-settings{gap:10px 18px;padding-top:10px}@media (prefers-reduced-motion:reduce){.pp.sounding .pp-name b{animation:none}}@media (width<=560px){.pp{border-radius:var(--radius-md);padding:14px}.pp-main{grid-template-columns:1fr;padding:14px}.pp-row .btn{flex:auto;justify-content:center}}@media (width>=380px){.pp-compact .pp-main{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:12px 14px}.pp-compact .pp-row .btn{flex:0 auto}}