.pn-app{gap:14px;display:grid}.pn-top{grid-template-columns:minmax(220px,1fr) auto;align-items:stretch;gap:14px;display:grid}.pn-display{border:1px solid var(--line);border-radius:var(--r-md);background:linear-gradient(#7c5cff1f,#00000059);align-content:center;gap:4px;min-width:0;padding:14px 18px;display:grid}.pn-display-label{font-family:var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--faint);font-size:.6rem}.pn-display strong{font-family:var(--font-display);color:var(--paper);white-space:nowrap;text-overflow:ellipsis;font-size:clamp(1.4rem,3vw,2.2rem);line-height:1.1;overflow:hidden}.pn-history{font-family:var(--font-mono);color:var(--muted);white-space:nowrap;text-overflow:ellipsis;font-size:.72rem;overflow:hidden}.pn-quick{border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);grid-template-columns:repeat(4,auto);align-items:end;gap:14px;padding:12px 16px;display:grid}.pn-quick .ak-field{min-width:150px}.pn-octave{color:var(--muted);gap:6px;font-size:.74rem;display:grid}.pn-octave div{align-items:center;gap:8px;display:flex}.pn-octave b{text-align:center;min-width:64px;font-family:var(--font-mono);color:var(--paper)}.pn-pedal kbd{margin-left:6px}.pn-keyboard{border-radius:var(--r-lg);height:clamp(180px,26vw,280px);box-shadow:inset 0 2px 0 #ffffff0f, var(--shadow-md);-webkit-user-select:none;user-select:none;touch-action:none;background:linear-gradient(#1c1a17,#0d0c0a);padding:14px 14px 18px;display:flex;position:relative;overflow:hidden}.pn-keyboard:before{content:"";opacity:.85;background:linear-gradient(90deg,#7c1d1d,#b91c1c 50%,#7c1d1d);height:14px;position:absolute;top:0;left:0;right:0}.pn-slot{flex:1 1 0;min-width:0;position:relative}.pn-white,.pn-black{cursor:pointer;font-family:var(--font-mono);touch-action:none;border:0;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px;padding:0 0 10px;transition:background 60ms,transform 60ms,box-shadow 60ms;display:flex;position:absolute}.pn-white{color:#6b665e;background:linear-gradient(#f2efe8 0%,#fffdf8 70%,#e6e1d6 100%);border-radius:0 0 7px 7px;font-size:.66rem;inset:0 1px;box-shadow:inset 0 -6px #d6d0c3,0 2px 3px #0006}.pn-white kbd,.pn-black kbd{font:inherit;background:#00000014;border-radius:4px;padding:1px 5px;font-size:.62rem}.pn-black{z-index:2;color:#bdb7ab;background:linear-gradient(#2b2925,#0a0908 85%,#3a3732);border-radius:0 0 5px 5px;width:60%;height:62%;font-size:.6rem;top:0;left:70%;box-shadow:inset 0 -5px #000,0 3px 4px #0009}.pn-black kbd{background:#ffffff1f}.pn-white.is-down{background:linear-gradient(#e7e2d6,#f3eee2);transform:translateY(2px);box-shadow:inset 0 -2px #d6d0c3,0 1px 1px #0006}.pn-black.is-down{background:linear-gradient(#1a1916,#050504);transform:translateY(2px);box-shadow:inset 0 -2px #000}.pn-white.is-lit,.pn-white.is-down{color:#111}.pn-white.is-lit{background:linear-gradient(#ffd6c4,#ffb08f)}.pn-black.is-lit{background:linear-gradient(#ff7a4a,#c2410c)}.pn-white.is-target{background:linear-gradient(#fff,#c9bcff);animation:1s ease-in-out infinite pn-target;box-shadow:inset 0 -6px #7c5cff,0 0 18px #7c5cffb3}.pn-black.is-target{background:linear-gradient(#a48cff,#5b3fd6);animation:1s ease-in-out infinite pn-target;box-shadow:0 0 18px #7c5cffcc}@keyframes pn-target{50%{filter:brightness(1.15)}}.pn-keyboard.is-dense .pn-white span{display:none}.pn-options{flex-wrap:wrap;align-items:center;gap:10px 18px;display:flex}.pn-learn,.pn-record,.pn-metro{gap:14px;margin-top:14px;display:grid}.pn-songs{flex-wrap:wrap;gap:6px;display:flex}.pn-songs button{border:1px solid var(--line);border-radius:var(--r-pill);color:var(--paper);cursor:pointer;background:#ffffff0a;padding:8px 12px;font-size:.8rem}.pn-songs button[aria-pressed=true]{border-color:var(--violet);background:#7c5cff2e}.pn-staff{flex-wrap:wrap;gap:4px;display:flex}.pn-staff span{font-family:var(--font-mono);color:var(--faint);background:#ffffff0d;border-radius:6px;padding:3px 7px;font-size:.72rem}.pn-staff .is-done{color:#5fbf8f;background:#5fbf8f1f}.pn-staff .is-now{color:#111;background:var(--violet)}.pn-rec-dot{font-family:var(--font-mono);color:#ff6a6a;align-items:center;gap:8px;font-size:.72rem;display:inline-flex}.pn-rec-dot:before{content:"";background:#ff3b3b;border-radius:50%;width:10px;height:10px;animation:1s steps(2,end) infinite pn-blink}@keyframes pn-blink{50%{opacity:.2}}.pn-takes{gap:6px;margin:0;padding:0;list-style:none;display:grid}.pn-takes li{grid-template-columns:minmax(120px,220px) 1fr auto auto auto auto;align-items:center;gap:8px;display:grid}.pn-take-meta{font-family:var(--font-mono);color:var(--faint);font-size:.7rem}.pn-beats{gap:10px;display:flex}.pn-beats i{background:#ffffff14;border-radius:50%;width:26px;height:26px;transition:background 50ms,transform 50ms}.pn-beats i.is-first{box-shadow:inset 0 0 0 2px rgba(var(--accent-rgb),.5)}.pn-beats i.is-on{background:var(--violet);transform:scale(1.15)}.pn-beats i.is-on.is-first{background:var(--orange)}.pn-metro-row{grid-template-columns:auto auto auto minmax(140px,1fr);align-items:center;gap:12px;display:grid}.pn-bpm{text-align:center;min-width:64px;display:grid}.pn-bpm b{font-family:var(--font-display);font-size:2rem;line-height:1}.pn-bpm span{letter-spacing:.14em;color:var(--faint);font-size:.6rem}.pn-help kbd{border:1px solid var(--line-strong);font-family:var(--font-mono);border-radius:4px;padding:1px 6px;font-size:.7rem}@media (max-width:1000px){.pn-top{grid-template-columns:1fr}.pn-quick{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:640px){.pn-keyboard{padding-inline:6px}.pn-white kbd,.pn-black kbd{display:none}.pn-takes li{grid-template-columns:1fr auto auto auto auto}.pn-take-meta{order:9;grid-column:1/-1}}