.pm-sel[data-astro-cid-2spupdku]{justify-content:center;gap:.25rem;margin-bottom:.6rem;display:none}.pm-btn[data-astro-cid-2spupdku]{color:#475569;text-transform:uppercase;letter-spacing:.04em;cursor:pointer;white-space:nowrap;background:#fff;border:1px solid #e2e8f0;border-radius:.45rem;padding:.3rem .65rem;font-size:9px;font-weight:800;transition:all .2s}.pm-btn[data-astro-cid-2spupdku]:hover{color:#3b82f6;border-color:#3b82f6}.pm-btn[data-astro-cid-2spupdku].active{color:#fff;background:#3b82f6;border-color:#3b82f6;box-shadow:0 2px 8px #3b82f64d}.lbl-toggle[data-astro-cid-2spupdku]{color:#475569;text-transform:uppercase;letter-spacing:.04em;cursor:pointer;z-index:10;background:#fff;border:1px solid #e2e8f0;border-radius:.45rem;align-items:center;gap:.3rem;padding:.3rem .7rem;font-size:9px;font-weight:800;transition:all .2s;display:none;position:absolute;top:.5rem;right:.5rem}.lbl-toggle[data-astro-cid-2spupdku]:hover{color:#3b82f6;border-color:#3b82f6}.lbl-toggle[data-astro-cid-2spupdku].active{color:#fff;background:#3b82f6;border-color:#3b82f6}.lbl-toggle-icon[data-astro-cid-2spupdku]{font-size:11px}.pk[data-astro-cid-2spupdku]{cursor:pointer;border:none;outline:none;transition:background 80ms,box-shadow 80ms,transform 50ms;position:relative}.pk[data-astro-cid-2spupdku]:focus-visible{outline-offset:2px;outline:2px solid #3b82f6}.note-name[data-astro-cid-2spupdku],.key-bind[data-astro-cid-2spupdku],.pv-label[data-astro-cid-2spupdku],.pv-sc[data-astro-cid-2spupdku]{pointer-events:none;user-select:none}.ph[data-astro-cid-2spupdku]{display:inline-block;position:relative}.ph-keys[data-astro-cid-2spupdku]{height:220px;display:flex;position:relative}.pw[data-astro-cid-2spupdku]{z-index:1;background:linear-gradient(#fafafa 0%,#fff 85%,#e8e8e8 100%);border:1px solid #bbb;border-top:none;border-radius:0 0 6px 6px;flex-shrink:0;width:52px;height:220px;margin-right:-1px;position:relative;box-shadow:0 2px 4px #00000026,inset 0 -2px 3px #0000000d}.pw[data-astro-cid-2spupdku]:hover{background:linear-gradient(#f0f0f0 0%,#f5f5f5 85%,#ddd 100%)}.pw[data-astro-cid-2spupdku]:active,.pw[data-astro-cid-2spupdku].pressed{background:linear-gradient(#e0e0e0 0%,#e8e8e8 85%,#d0d0d0 100%);height:218px;transform:translateY(1px);box-shadow:inset 0 2px 4px #0003}.pb[data-astro-cid-2spupdku]{z-index:2;background:linear-gradient(#222 0%,#000 70%,#111 100%);border:1px solid #000;border-top:none;border-radius:0 0 4px 4px;width:32px;height:140px;position:absolute;top:0;box-shadow:0 3px 5px #00000080,inset 0 -2px 3px #ffffff0d}.pb[data-astro-cid-2spupdku]:hover{background:linear-gradient(#333 0%,#111 70%,#222 100%)}.pb[data-astro-cid-2spupdku]:active,.pb[data-astro-cid-2spupdku].pressed{background:linear-gradient(#1a1a1a 0%,#000 100%);height:138px;transform:translateY(1px);box-shadow:inset 0 2px 4px #0009}.ph[data-astro-cid-2spupdku] .note-name[data-astro-cid-2spupdku]{color:#555;white-space:nowrap;font-size:10px;font-weight:800;position:absolute;bottom:28px;left:50%;transform:translate(-50%)}.ph[data-astro-cid-2spupdku] .key-bind[data-astro-cid-2spupdku]{color:#aaa;white-space:nowrap;font-size:11px;font-weight:600;position:absolute;bottom:12px;left:50%;transform:translate(-50%)}.ph[data-astro-cid-2spupdku] .nn-black[data-astro-cid-2spupdku]{color:#888;font-size:7px;font-weight:700;bottom:24px}.ph[data-astro-cid-2spupdku] .kb-black[data-astro-cid-2spupdku]{color:#666;font-size:9px;bottom:10px}.ph[data-astro-cid-2spupdku].labels-hidden .key-bind[data-astro-cid-2spupdku]{display:none!important}.pc[data-astro-cid-2spupdku]{display:none}.pc-tier[data-astro-cid-2spupdku]{background:linear-gradient(#f8f8f8,#fafafa);border:1px solid #ddd;border-radius:.625rem;margin-bottom:.5rem;position:relative;overflow:visible}.pc-tier[data-astro-cid-2spupdku]:last-child{margin-bottom:0}.pc-tier-label[data-astro-cid-2spupdku]{color:#94a3b8;text-transform:uppercase;letter-spacing:.08em;white-space:nowrap;z-index:5;background:#f1f5f9;border:1px solid #e2e8f0;border-radius:9999px;padding:.1rem .5rem;font-size:8px;font-weight:800;position:absolute;top:-8px;left:50%;transform:translate(-50%)}.pc-tier-keys[data-astro-cid-2spupdku]{height:140px;padding-top:6px;display:flex;position:relative}.pcw[data-astro-cid-2spupdku]{z-index:1;cursor:pointer;background:linear-gradient(#fcfcfc 0%,#fff 60%,#f0f0f0 95%,#e4e4e4 100%);border:none;border-right:1px solid #ddd;border-radius:0 0 6px 6px;outline:none;flex:1;min-width:42px;height:100%;transition:background 80ms,box-shadow 80ms,transform 40ms;position:relative;box-shadow:0 1px 3px #00000014}.pcw[data-astro-cid-2spupdku]:last-child{border-right:none}.pcw[data-astro-cid-2spupdku]:hover{background:linear-gradient(#f5f5f5 0%,#f8f8f8 60%,#eaeaea 95%,#ddd 100%)}.pcw[data-astro-cid-2spupdku]:active,.pcw[data-astro-cid-2spupdku].pressed{background:linear-gradient(#e8e8e8 0%,#e0e0e0 60%,#d8d8d8 95%,#d0d0d0 100%);transform:translateY(1px);box-shadow:inset 0 2px 4px #0000001f}.pcb[data-astro-cid-2spupdku]{z-index:3;cursor:pointer;background:linear-gradient(#333 0%,#111 40%,#000 70%,#1a1a1a 100%);border:1px solid #000;border-top:none;border-radius:0 0 4px 4px;outline:none;flex-direction:column;justify-content:flex-end;align-items:center;width:min(30px,58%);height:65%;padding-bottom:5px;transition:background 80ms,box-shadow 80ms,transform 40ms;display:flex;position:absolute;top:6px;transform:translate(-50%);box-shadow:0 3px 6px #00000073,inset 0 -1px 2px #ffffff0d}.pcb[data-astro-cid-2spupdku]:active,.pcb[data-astro-cid-2spupdku].pressed{background:linear-gradient(#222 0%,#0a0a0a 40%,#000 100%);transform:translate(-50%)translateY(1px);box-shadow:inset 0 2px 4px #0009}.cn[data-astro-cid-2spupdku]{color:#666;white-space:nowrap;font-size:9px;font-weight:800;position:absolute;bottom:20px;left:50%;transform:translate(-50%)}.ck[data-astro-cid-2spupdku]{color:#aaa;white-space:nowrap;font-size:8px;font-weight:600;position:absolute;bottom:8px;left:50%;transform:translate(-50%)}.cbn[data-astro-cid-2spupdku]{color:#888;font-size:6px;font-weight:700;top:50%;bottom:auto;transform:translate(-50%,-50%)}.cbk[data-astro-cid-2spupdku]{color:#666;font-size:6px;bottom:4px}.pw-wide[data-astro-cid-2spupdku]{display:none}.pw-wide-keys[data-astro-cid-2spupdku]{position:relative}.pw-wh[data-astro-cid-2spupdku]{-webkit-overflow-scrolling:touch;height:160px;display:flex;overflow-x:auto}.pww[data-astro-cid-2spupdku]{z-index:1;cursor:pointer;background:linear-gradient(#fcfcfc 0%,#fff 60%,#f0f0f0 95%,#e4e4e4 100%);border:none;border-right:1px solid #ddd;border-radius:0 0 5px 5px;outline:none;flex-shrink:0;width:42px;height:160px;margin-right:-1px;transition:background 80ms,box-shadow 80ms,transform 40ms;position:relative;box-shadow:0 1px 3px #00000014}.pww[data-astro-cid-2spupdku]:hover{background:linear-gradient(#f5f5f5,#f8f8f8 60%,#eaeaea 95%,#ddd)}.pww[data-astro-cid-2spupdku]:active,.pww[data-astro-cid-2spupdku].pressed{background:linear-gradient(#e8e8e8,#e0e0e0 60%,#d8d8d8 95%,#d0d0d0);transform:translateY(1px);box-shadow:inset 0 2px 4px #0000001f}.pwb[data-astro-cid-2spupdku]{z-index:2;cursor:pointer;background:linear-gradient(#333 0%,#111 40%,#000 70%,#1a1a1a 100%);border:1px solid #000;border-top:none;border-radius:0 0 3px 3px;outline:none;width:26px;height:100px;transition:background 80ms,box-shadow 80ms;position:absolute;top:0;box-shadow:0 3px 5px #0006}.pwb[data-astro-cid-2spupdku]:active,.pwb[data-astro-cid-2spupdku].pressed{background:linear-gradient(#1a1a1a,#000);transform:translateY(1px);box-shadow:inset 0 2px 4px #0009}.pw-vert[data-astro-cid-2spupdku]{touch-action:pan-y;flex-direction:column;width:100%;display:none}.pvk[data-astro-cid-2spupdku]{cursor:pointer;border:none;outline:none;align-items:center;width:100%;transition:background 80ms,box-shadow 80ms;display:flex;position:relative}.pvk[data-astro-cid-2spupdku]:focus-visible{outline-offset:2px;outline:2px solid #3b82f6}.pvw[data-astro-cid-2spupdku]{background:linear-gradient(90deg,#fafafa 0%,#fff 85%,#f0f0f0 100%);border-bottom:1px solid #ddd;justify-content:flex-start;height:40px;padding:0 .75rem;box-shadow:0 1px 2px #0000000f}.pvw[data-astro-cid-2spupdku]:active,.pvw[data-astro-cid-2spupdku].pressed{background:linear-gradient(90deg,#e8e8e8,#e0e0e0 85%,#d8d8d8);box-shadow:inset 0 2px 4px #0000001f}.pvb[data-astro-cid-2spupdku]{z-index:2;background:linear-gradient(90deg,#333 0%,#111 50%,#222 100%);border:1px solid #000;border-radius:0 3px 3px 0;justify-content:flex-end;width:50px;height:26px;padding:0 .5rem;position:absolute;right:0;box-shadow:2px 2px 4px #0000004d}.pvb[data-astro-cid-2spupdku]:active,.pvb[data-astro-cid-2spupdku].pressed{background:linear-gradient(90deg,#222,#000 50%,#111);box-shadow:inset 0 1px 3px #00000080}.pv-label[data-astro-cid-2spupdku]{color:#555;font-size:11px;font-weight:700}.pvb[data-astro-cid-2spupdku] .pv-label[data-astro-cid-2spupdku]{color:#bbb;font-size:8px;font-weight:700}.pv-sc[data-astro-cid-2spupdku]{color:#aaa;margin-left:.4rem;font-size:9px;font-weight:600}.pvb[data-astro-cid-2spupdku] .pv-sc[data-astro-cid-2spupdku]{color:#888;margin-left:.3rem;font-size:7px}.pw-wide[data-astro-cid-2spupdku] .cn[data-astro-cid-2spupdku]{color:#666;white-space:nowrap;font-size:8px;font-weight:800;position:absolute;bottom:22px;left:50%;transform:translate(-50%)}.pw-wide[data-astro-cid-2spupdku] .ck[data-astro-cid-2spupdku]{color:#aaa;white-space:nowrap;font-size:7px;font-weight:600;position:absolute;bottom:8px;left:50%;transform:translate(-50%)}.pw-wide[data-astro-cid-2spupdku] .cbn[data-astro-cid-2spupdku]{color:#888;font-size:6px}.pw-wide[data-astro-cid-2spupdku] .cbk[data-astro-cid-2spupdku]{color:#666;font-size:6px}.pk[data-astro-cid-2spupdku].marked,.pcw[data-astro-cid-2spupdku].marked,.pcb[data-astro-cid-2spupdku].marked,.pww[data-astro-cid-2spupdku].marked,.pwb[data-astro-cid-2spupdku].marked,.pvk[data-astro-cid-2spupdku].marked{box-shadow:0 0 0 2px #f59e0b,0 0 10px #f59e0b66!important}.pw[data-astro-cid-2spupdku].marked,.pcw[data-astro-cid-2spupdku].marked,.pww[data-astro-cid-2spupdku].marked,.pvw[data-astro-cid-2spupdku].marked{background:linear-gradient(#fef3c7,#fde68a 85%,#fcd34d)!important}.pb[data-astro-cid-2spupdku].marked,.pcb[data-astro-cid-2spupdku].marked,.pwb[data-astro-cid-2spupdku].marked,.pvb[data-astro-cid-2spupdku].marked{background:linear-gradient(#92400e,#78350f 70%,#92400e)!important}.pk[data-astro-cid-2spupdku].marked .note-name[data-astro-cid-2spupdku],.pcw[data-astro-cid-2spupdku].marked .note-name[data-astro-cid-2spupdku],.pww[data-astro-cid-2spupdku].marked .note-name[data-astro-cid-2spupdku],.pvk[data-astro-cid-2spupdku].marked .pv-label[data-astro-cid-2spupdku]{font-weight:800;color:#92400e!important}.pk[data-astro-cid-2spupdku].playback-active,.pcw[data-astro-cid-2spupdku].playback-active,.pcb[data-astro-cid-2spupdku].playback-active,.pww[data-astro-cid-2spupdku].playback-active,.pwb[data-astro-cid-2spupdku].playback-active,.pvk[data-astro-cid-2spupdku].playback-active{animation:.3s ease-out pb-glow}.pw[data-astro-cid-2spupdku].playback-active,.pcw[data-astro-cid-2spupdku].playback-active,.pww[data-astro-cid-2spupdku].playback-active,.pvw[data-astro-cid-2spupdku].playback-active{background:linear-gradient(#bbf7d0,#86efac 85%,#4ade80)!important;box-shadow:0 0 0 3px #22c55e,0 0 16px #22c55e80!important}.pb[data-astro-cid-2spupdku].playback-active,.pcb[data-astro-cid-2spupdku].playback-active,.pwb[data-astro-cid-2spupdku].playback-active,.pvb[data-astro-cid-2spupdku].playback-active{background:linear-gradient(#166534,#14532d 70%,#166534)!important;box-shadow:0 0 0 3px #22c55e!important}@keyframes pb-glow{0%{transform:scale(1.03)}to{transform:scale(1)}}.pk[data-astro-cid-2spupdku].quiz-correct,.pcw[data-astro-cid-2spupdku].quiz-correct,.pcb[data-astro-cid-2spupdku].quiz-correct,.pww[data-astro-cid-2spupdku].quiz-correct,.pwb[data-astro-cid-2spupdku].quiz-correct,.pvk[data-astro-cid-2spupdku].quiz-correct{animation:.5s ease-out q-ok}.pw[data-astro-cid-2spupdku].quiz-correct,.pcw[data-astro-cid-2spupdku].quiz-correct,.pww[data-astro-cid-2spupdku].quiz-correct,.pvw[data-astro-cid-2spupdku].quiz-correct{background:linear-gradient(#dcfce7,#bbf7d0 85%,#86efac)!important;box-shadow:0 0 0 3px #22c55e!important}.pb[data-astro-cid-2spupdku].quiz-correct,.pcb[data-astro-cid-2spupdku].quiz-correct,.pwb[data-astro-cid-2spupdku].quiz-correct,.pvb[data-astro-cid-2spupdku].quiz-correct{background:linear-gradient(#166534,#14532d 70%,#166534)!important;box-shadow:0 0 0 3px #22c55e!important}@keyframes q-ok{0%{transform:scale(1.05)}to{transform:scale(1)}}.pk[data-astro-cid-2spupdku].quiz-wrong,.pcw[data-astro-cid-2spupdku].quiz-wrong,.pcb[data-astro-cid-2spupdku].quiz-wrong,.pww[data-astro-cid-2spupdku].quiz-wrong,.pwb[data-astro-cid-2spupdku].quiz-wrong,.pvk[data-astro-cid-2spupdku].quiz-wrong{animation:.3s ease-out q-no}.pw[data-astro-cid-2spupdku].quiz-wrong,.pcw[data-astro-cid-2spupdku].quiz-wrong,.pww[data-astro-cid-2spupdku].quiz-wrong,.pvw[data-astro-cid-2spupdku].quiz-wrong,.pb[data-astro-cid-2spupdku].quiz-wrong,.pcb[data-astro-cid-2spupdku].quiz-wrong,.pwb[data-astro-cid-2spupdku].quiz-wrong,.pvb[data-astro-cid-2spupdku].quiz-wrong{box-shadow:0 0 0 3px #ef4444!important}@keyframes q-no{0%,50%{transform:translate(-2px)}to{transform:translate(0)}}@media (width>=768px){.ph[data-astro-cid-2spupdku]{display:inline-block}.ph[data-astro-cid-2spupdku] .key-bind[data-astro-cid-2spupdku]{display:none}.ph[data-astro-cid-2spupdku].kb-active .key-bind[data-astro-cid-2spupdku]{display:block}.pc[data-astro-cid-2spupdku],.pw-wide[data-astro-cid-2spupdku],.pm-sel[data-astro-cid-2spupdku]{display:none!important}.lbl-toggle[data-astro-cid-2spupdku]{display:inline-flex}.pc-tier-label[data-astro-cid-2spupdku]{display:none!important}}@media (width<=767px) and (orientation:landscape){.ph[data-astro-cid-2spupdku]{display:none}.pc[data-astro-cid-2spupdku],.pm-sel[data-astro-cid-2spupdku],.lbl-toggle[data-astro-cid-2spupdku]{display:none!important}.pw-wide[data-astro-cid-2spupdku]{display:block}.pw-wh[data-astro-cid-2spupdku]{display:flex;overflow-x:auto}.pw-vert[data-astro-cid-2spupdku]{display:none!important}.pww[data-astro-cid-2spupdku]{width:38px;height:140px}.pwb[data-astro-cid-2spupdku]{width:24px;height:88px}}@media (width>=768px){.lbl-toggle[data-astro-cid-2spupdku]{display:inline-flex}}@media (width<=767px) and (orientation:portrait){.ph[data-astro-cid-2spupdku]{display:none}.lbl-toggle[data-astro-cid-2spupdku]{display:none!important}.pm-sel[data-astro-cid-2spupdku]{display:flex}.pc[data-astro-cid-2spupdku].layout-compact{display:block}.pw-wide[data-astro-cid-2spupdku].layout-compact{display:none}.pw-wide[data-astro-cid-2spupdku].layout-wide{display:block}.pw-wide[data-astro-cid-2spupdku].layout-wide .pw-wh[data-astro-cid-2spupdku]{display:none!important}.pw-wide[data-astro-cid-2spupdku].layout-wide .pw-vert[data-astro-cid-2spupdku]{-webkit-overflow-scrolling:touch;background:#fafafa;border:1px solid #e2e8f0;border-radius:.75rem;max-height:65vh;display:flex;overflow:hidden auto}.pc[data-astro-cid-2spupdku].layout-wide{display:none}.pc[data-astro-cid-2spupdku].layout-auto{display:block}.pw-wide[data-astro-cid-2spupdku].layout-auto{display:none}}:root{--pno-bg:#0c0d0f;--pno-surface:#141518;--pno-surface-2:#1a1b1f;--pno-text:#f0ebe3;--pno-text-sec:#b8b3aa;--pno-muted:#77736c;--pno-orange:#e3a33b;--pno-orange-dark:#c78319;--pno-orange-soft:#e3a33b1a;--pno-purple:#8966ed;--pno-border:#25272c;--pno-border-soft:#1e2024;--pno-shadow:0 2px 12px #0003;--pno-shadow-lg:0 12px 40px #00000059;--pno-green:#78a56d;--pno-red:#e07070}body.light-mode,body.light-mode .pno-page{--pno-bg:#f8f2e9;--pno-surface:#fffaf3;--pno-surface-2:#f4ecdf;--pno-text:#1a1714;--pno-text-sec:#5c564e;--pno-muted:#8a8379;--pno-orange:#e88709;--pno-orange-dark:#c86f00;--pno-orange-soft:#e8870914;--pno-purple:#6940a5;--pno-border:#e7ded2;--pno-border-soft:#f0e8dc;--pno-shadow:0 2px 12px #3020100d;--pno-shadow-lg:0 12px 40px #30201014;--pno-green:#547c4d;--pno-red:#d94b4b}body{background-color:var(--pno-bg);color:var(--pno-text);transition:background .3s,color .3s}.pno-page{width:min(1200px,94%);margin:auto;padding-bottom:50px}.pno-hero{justify-content:center;align-items:center;gap:20px;height:110px;display:flex;position:relative}.pno-hero-title{color:var(--pno-text);letter-spacing:-.5px;margin:0;font-family:Playfair Display,Georgia,serif;font-size:clamp(26px,3vw,40px);font-weight:600}.pno-hero-deco{color:#c9a96e;opacity:.7;font-size:20px}.pno-hero-line{background:var(--pno-orange);width:44px;height:2px;position:absolute;bottom:16px;left:50%;transform:translate(-50%)}.pno-hero-line:after{content:"⌁";color:var(--pno-orange);background:var(--pno-bg);padding:0 8px;font-size:12px;position:absolute;top:-11px;left:50%;transform:translate(-50%)}.pno-card{background:var(--pno-surface);border:1px solid var(--pno-border);border-radius:var(--pno-radius);box-shadow:var(--pno-shadow-lg);grid-template-columns:220px 1fr;gap:20px;padding:18px;display:grid}.pno-learn-card{border:1px solid var(--pno-border);background:linear-gradient(145deg, var(--pno-surface), var(--pno-surface-2));border-radius:14px;flex-direction:column;padding:22px;display:flex}.pno-learn-icon{margin-bottom:8px;font-size:28px}.pno-learn-title{color:var(--pno-text);margin:0 0 8px;font-family:Playfair Display,Georgia,serif;font-size:14px;font-weight:600}.pno-learn-desc{color:var(--pno-muted);margin:0 0 14px;font-size:11px;line-height:1.6}.pno-learn-btn{cursor:pointer;letter-spacing:.02em;border:none;border-radius:8px;width:100%;margin-top:6px;padding:9px 10px;font-family:DM Sans,Inter,sans-serif;font-size:10px;font-weight:700;transition:transform .15s,box-shadow .15s;display:block}.pno-learn-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px #0000001a}.pno-learn-quiz{background:var(--pno-orange);color:#fff}.pno-learn-share{background:var(--pno-purple);color:#fff}.pno-learn-stats{border-top:1px solid var(--pno-border-soft);flex-direction:column;gap:8px;margin-top:auto;padding-top:16px;display:flex}.pno-learn-stat{background:var(--pno-orange-soft);border-radius:8px;align-items:center;gap:8px;padding:6px 8px;display:flex}.pno-learn-stat-icon{font-size:16px}.pno-learn-stat strong{color:var(--pno-text);font-size:13px;font-weight:800;display:block}.pno-learn-stat small{color:var(--pno-muted);text-transform:uppercase;letter-spacing:.05em;font-size:9px}.pno-instrument-area{flex-direction:column;min-width:0;display:flex}.pno-top-controls{justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;display:flex}.pno-main-btns{flex-wrap:wrap;gap:6px;display:flex}.pno-ctrl-btn{border:1px solid var(--pno-border);background:var(--pno-surface);color:var(--pno-text-sec);border-radius:var(--pno-radius-sm);cursor:pointer;white-space:nowrap;align-items:center;padding:9px 14px;font-family:DM Sans,Inter,sans-serif;font-size:11px;font-weight:600;text-decoration:none;transition:all .2s;display:inline-flex}.pno-link-btn{text-decoration:none}.pno-ctrl-btn:hover{border-color:var(--pno-orange);color:var(--pno-orange);transform:translateY(-1px)}.pno-ctrl-btn.active{background:var(--pno-orange);color:#fff;border-color:var(--pno-orange);box-shadow:0 2px 8px #e8870940}.pno-record-btn{border:1px solid var(--pno-border);background:var(--pno-surface);color:var(--pno-text-sec);border-radius:var(--pno-radius-sm);cursor:pointer;white-space:nowrap;align-items:center;gap:6px;padding:9px 16px;font-family:DM Sans,Inter,sans-serif;font-size:11px;font-weight:600;transition:all .2s;display:inline-flex}.pno-record-btn:hover{border-color:var(--pno-red);color:var(--pno-red)}.pno-record-dot{background:var(--pno-red);border-radius:50%;width:7px;height:7px;display:inline-block}.pno-record-active{animation:1s infinite pno-rec-pulse;background:var(--pno-red)!important;color:#fff!important;border-color:var(--pno-red)!important}.pno-record-btn.hidden{display:none}@keyframes pno-rec-pulse{0%,to{box-shadow:0 0 #d94b4b59}50%{box-shadow:0 0 0 6px #d94b4b00}}.pno-inst-selector{background:var(--pno-surface-2);border:1px solid var(--pno-border-soft);border-radius:10px;grid-template-columns:repeat(3,1fr);width:300px;max-width:100%;margin:0 auto 14px;padding:3px;display:grid}.pno-inst-btn{color:var(--pno-muted);cursor:pointer;background:0 0;border:none;border-radius:8px;padding:8px;font-family:DM Sans,Inter,sans-serif;font-size:10px;font-weight:600;transition:all .2s}.pno-inst-btn.active{background:var(--pno-surface);color:var(--pno-text);font-weight:700;box-shadow:0 2px 8px #0000000f}.pno-settings-row{align-items:flex-end;gap:30px;margin-bottom:16px;display:flex}.pno-setting-title{color:var(--pno-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px;font-size:10px;font-weight:700;display:block}.pno-kb-control{color:var(--pno-muted);align-items:center;gap:10px;font-size:10px;display:flex}.pno-kb-hint{font-size:10px}.pno-switch{width:38px;height:21px;display:inline-block;position:relative}.pno-switch input{display:none}.pno-slider{cursor:pointer;background:#c0bdb8;border-radius:20px;transition:all .25s;position:absolute;inset:0}.pno-slider:before{content:"";background:#fff;border-radius:50%;width:16px;height:16px;transition:all .25s;position:absolute;top:2.5px;left:3px;box-shadow:0 1px 3px #00000026}.pno-switch input:checked+.pno-slider{background:var(--pno-orange)}.pno-switch input:checked+.pno-slider:before{transform:translate(16px)}.pno-view-setting{display:none}.pno-view-btns{gap:5px;display:flex}.pno-view-btn{border:1px solid var(--pno-border);background:var(--pno-surface);cursor:pointer;width:34px;height:30px;color:var(--pno-muted);border-radius:8px;font-size:14px;transition:all .2s}.pno-view-btn.active{background:var(--pno-purple);color:#fff;border-color:var(--pno-purple)}.pno-labels-btn{color:#fff;cursor:pointer;background:#2867c7;border:none;border-radius:8px;height:34px;padding:0 14px;font-family:DM Sans,Inter,sans-serif;font-size:10px;font-weight:700;transition:all .2s}.pno-labels-btn.active{box-shadow:0 0 0 3px #2867c733}.pno-volume-setting{flex-direction:column;gap:4px;display:flex}.pno-volume-control{align-items:center;gap:8px;display:flex}.pno-volume-icon{font-size:14px}.pno-volume-slider{-webkit-appearance:none;appearance:none;background:var(--pno-border);cursor:pointer;border-radius:2px;outline:none;width:80px;height:4px}.pno-volume-slider::-webkit-slider-thumb{-webkit-appearance:none;background:var(--pno-orange);cursor:pointer;border:2px solid var(--pno-surface);border-radius:50%;width:14px;height:14px;box-shadow:0 1px 3px #0003}.pno-volume-slider::-moz-range-thumb{background:var(--pno-orange);cursor:pointer;border:2px solid var(--pno-surface);border-radius:50%;width:14px;height:14px}.pno-volume-val{color:var(--pno-muted);min-width:30px;font-size:10px;font-weight:700}.pno-piano-wrapper{background:linear-gradient(#242629 0%,#1a1c20 35%,#15171a 65%,#111315 100%);border:1px solid #ffffff0d;border-radius:16px;overflow:hidden;box-shadow:inset 0 1px #ffffff0a,inset 0 -2px 8px #0000004d,0 8px 32px #00000040,0 2px 8px #00000026}.pno-piano-body{justify-content:center;align-items:center;padding:18px 24px 14px;display:flex}.pno-piano-inner{background:#0e1012;border-radius:6px 6px 0 0;max-width:100%;overflow:hidden;box-shadow:inset 0 2px 10px #00000080,0 1px #ffffff08}.pno-piano-inner .ph{display:inline-block}.pno-piano-inner .ph-keys{display:flex;position:relative}.pno-status-bar{color:#ffffff8c;letter-spacing:.02em;background:linear-gradient(#0d0f11 0%,#111315 100%);border-top:1px solid #ffffff0a;justify-content:center;align-items:center;gap:8px;height:42px;font-family:DM Sans,Inter,sans-serif;font-size:11px;display:flex}.pno-status-dot{background:var(--pno-green);border-radius:50%;width:6px;height:6px;box-shadow:0 0 6px #547c4d80}.pno-piano-inner .kb-active .key-bind{display:block!important}.pno-piano-inner .kb-active .note-name{opacity:1!important}.pno-piano-inner .ph.wide-mode{min-width:100%}.pno-piano-inner .ph.wide-mode .ph-keys{min-width:900px}.pno-piano-inner .pm-sel,.pno-piano-inner .pw-wide,.pno-piano-inner .pno-exit-landscape,.pno-view-setting{display:none!important}.pno-mark-bar{background:var(--pno-orange-soft);border:1px solid var(--pno-border);border-radius:10px;flex-wrap:wrap;align-items:center;gap:.75rem;margin-top:12px;padding:.5rem 1rem;display:flex}.pno-mark-notes{flex-wrap:wrap;flex:1;align-items:center;gap:.35rem;display:flex}.pno-mark-chip{background:var(--pno-orange);color:#fff;border-radius:6px;padding:.2rem .55rem;font-size:9px;font-weight:800;display:inline-flex}.pno-mark-actions{gap:.3rem;display:flex}.pno-mark-btn{cursor:pointer;text-transform:uppercase;border:none;border-radius:6px;padding:.3rem .65rem;font-family:DM Sans,Inter,sans-serif;font-size:9px;font-weight:800;transition:all .15s}.pno-mark-play{background:var(--pno-green);color:#fff}.pno-mark-together{background:var(--pno-orange);color:#fff}.pno-mark-clear{background:var(--pno-surface);color:var(--pno-muted);border:1px solid var(--pno-border)}.pno-mark-stop{background:var(--pno-red);color:#fff}.pno-rec-timer{color:var(--pno-red);background:#d94b4b14;border:1px solid #d94b4b26;border-radius:9999px;align-items:center;gap:.4rem;width:fit-content;margin:10px auto 0;padding:.35rem 1rem;font-size:10px;font-weight:700;display:flex}.pno-rec-pulse{background:var(--pno-red);border-radius:50%;width:7px;height:7px;animation:1s infinite pno-dot-pulse}@keyframes pno-dot-pulse{0%,to{opacity:1}50%{opacity:.4}}.pno-post-rec{flex-wrap:wrap;justify-content:center;align-items:center;gap:.5rem;margin-top:10px;padding:.5rem;display:flex}.pno-post-label{color:var(--pno-muted);font-size:10px;font-weight:700}.pno-post-btn{background:var(--pno-surface);border:1px solid var(--pno-border);color:var(--pno-text-sec);text-transform:uppercase;cursor:pointer;white-space:nowrap;border-radius:8px;align-items:center;gap:.3rem;padding:.35rem .75rem;font-family:DM Sans,Inter,sans-serif;font-size:9px;font-weight:800;transition:all .2s;display:inline-flex}.pno-post-btn:hover{border-color:var(--pno-orange);color:var(--pno-orange)}.pno-post-delete{color:var(--pno-red);border-color:#d94b4b33}.pno-post-delete:hover{background:#d94b4b14}.hidden{display:none!important}.pno-howto{padding:40px 0 0}.pno-howto-heading{text-align:center;margin-bottom:28px}.pno-howto-heading h2{color:var(--pno-text);margin:0;font-family:Playfair Display,Georgia,serif;font-size:26px;font-weight:600}.pno-howto-line{background:var(--pno-orange);width:40px;height:2px;margin:8px auto 0}.pno-howto-grid{grid-template-columns:repeat(3,1fr);gap:14px;display:grid}.pno-tut-card{background:var(--pno-surface);border:1px solid var(--pno-border);min-height:160px;box-shadow:var(--pno-shadow);border-radius:14px;padding:20px;transition:box-shadow .25s,transform .25s}.pno-tut-card:hover{box-shadow:var(--pno-shadow-lg);transform:translateY(-2px)}.pno-tut-wide{grid-column:span 2;min-height:auto}.pno-tut-icon{border-radius:8px;place-items:center;width:32px;height:32px;margin-bottom:12px;font-size:14px;display:grid}.pno-tut-play{color:#279238;background:#e7f3e5}.pno-tut-key{color:#4266a8;background:#eaf1ff}.pno-tut-mark{color:#d69208;background:#f8edd5}.pno-tut-quiz{color:#7046a9;background:#eee7fb}.pno-tut-streak{color:#e88709;background:#fff0e6}.pno-tut-points{color:#c88a32;background:#fef9e7}.pno-tut-inst{color:var(--pno-orange);background:#fff0e6}.pno-tut-card h3{letter-spacing:.3px;color:var(--pno-text);margin:0 0 8px;font-size:11px;font-weight:700}.pno-tut-card p{color:var(--pno-muted);margin:0;font-size:11px;line-height:1.7}.pno-tut-card strong{color:var(--pno-text)}.pno-tut-list{color:var(--pno-muted);margin:8px 0 0;padding:0;font-size:10px;line-height:1.8;list-style:none}.pno-tut-list li{padding-left:12px;position:relative}.pno-tut-list li:before{content:"•";color:var(--pno-orange);font-weight:700;position:absolute;left:0}.pno-tut-list strong{color:var(--pno-text);font-weight:700}.pno-key-map{margin-top:12px}.pno-km-header{color:var(--pno-muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px;font-size:8px;font-weight:700}.pno-key-map-row{flex-wrap:wrap;gap:3px;margin-bottom:6px;display:flex}.pno-key-cell{border:1px solid var(--pno-border);background:var(--pno-surface);border-radius:4px;flex-direction:column;justify-content:center;align-items:center;min-width:32px;padding:3px 5px;display:flex}.pno-km-note{color:var(--pno-text-sec);font-size:7px;font-weight:700;line-height:1.2}.pno-km-key{color:var(--pno-orange);font-size:9px;font-weight:800;line-height:1.2}.pno-kc-black{background:linear-gradient(#333 0%,#111 40%,#000 100%);border-color:#000}.pno-kc-black .pno-km-note{color:#bbb}.pno-kc-black .pno-km-key{color:#e3a33b}.pno-quiz-overlay{backdrop-filter:blur(6px);z-index:9999;background:#00000080;justify-content:center;align-items:center;padding:1rem;display:flex;position:fixed;inset:0}.pno-quiz-overlay.hidden{display:none!important}.pno-quiz-modal{background:var(--pno-surface);border:1px solid var(--pno-border);border-radius:18px;width:100%;max-width:460px;max-height:90vh;overflow-y:auto;box-shadow:0 25px 50px #0000004d}.pno-quiz-header{border-bottom:1px solid var(--pno-border);justify-content:space-between;align-items:center;padding:1.25rem 1.5rem .75rem;display:flex}.pno-quiz-title{color:var(--pno-text);margin:0;font-size:1.1rem;font-weight:700}.pno-quiz-close{border:1px solid var(--pno-border);background:var(--pno-surface);cursor:pointer;width:30px;height:30px;color:var(--pno-muted);border-radius:50%;justify-content:center;align-items:center;font-size:13px;transition:all .15s;display:flex}.pno-quiz-close:hover{color:var(--pno-red);background:#d94b4b14}.pno-quiz-body{padding:1.25rem 1.5rem 1.5rem}.pno-q-progress{color:var(--pno-muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:.75rem;font-size:10px;font-weight:700}.pno-q-question{color:var(--pno-text);margin-bottom:1.25rem;font-size:1rem;font-weight:700;line-height:1.4}.pno-q-options{flex-direction:column;gap:.5rem;display:flex}.pno-q-option{border:2px solid var(--pno-border);background:var(--pno-surface);cursor:pointer;color:var(--pno-text-sec);border-radius:10px;align-items:center;gap:.75rem;padding:.7rem 1rem;font-size:.88rem;font-weight:600;transition:all .15s;display:flex}.pno-q-option:hover{border-color:var(--pno-orange);background:var(--pno-orange-soft)}.pno-q-option.correct{border-color:var(--pno-green);color:#3d5a35;background:#547c4d14}.pno-q-option.incorrect{border-color:var(--pno-red);color:#8b3030;background:#d94b4b14}.pno-q-letter{background:var(--pno-surface-2);width:28px;height:28px;color:var(--pno-muted);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:12px;font-weight:800;transition:all .15s;display:flex}.pno-q-option.correct .pno-q-letter{background:var(--pno-green);color:#fff}.pno-q-option.incorrect .pno-q-letter{background:var(--pno-red);color:#fff}.pno-q-fb{border-radius:10px;margin-top:1rem;padding:.7rem 1rem;font-size:.85rem;font-weight:700}.pno-q-fb.correct{color:#3d5a35;background:#547c4d14;border:1px solid #547c4d33}.pno-q-fb.incorrect{color:#8b3030;background:#d94b4b14;border:1px solid #d94b4b26}.pno-q-next{background:var(--pno-orange);color:#fff;cursor:pointer;text-transform:uppercase;letter-spacing:.05em;border:none;border-radius:10px;width:100%;margin-top:1rem;padding:.7rem;font-family:DM Sans,Inter,sans-serif;font-size:.85rem;font-weight:800;transition:all .2s}.pno-q-next:hover{background:var(--pno-orange-dark)}.pno-q-next:disabled{background:var(--pno-border);color:var(--pno-muted);cursor:not-allowed}.pno-q-result-icon{text-align:center;margin-bottom:.75rem;font-size:3rem}.pno-q-result-title{color:var(--pno-text);text-align:center;margin-bottom:.5rem;font-family:Playfair Display,Georgia,serif;font-size:1.3rem;font-weight:600}.pno-q-result-score{color:var(--pno-orange);text-align:center;margin-bottom:.25rem;font-size:2rem;font-weight:800}.pno-q-result-sub{color:var(--pno-muted);text-align:center;margin-bottom:1rem;font-size:.8rem}.pno-q-result-actions{gap:.5rem;display:flex}.pno-q-result-actions button{cursor:pointer;text-transform:uppercase;border:none;border-radius:10px;flex:1;padding:.65rem;font-family:DM Sans,Inter,sans-serif;font-size:.8rem;font-weight:800;transition:all .15s}.pno-q-btn-primary{background:var(--pno-orange);color:#fff}.pno-q-btn-primary:hover{background:var(--pno-orange-dark)}.pno-q-btn-secondary{background:var(--pno-surface-2);color:var(--pno-muted);border:1px solid var(--pno-border)!important}@media (width<=1000px){.pno-card{grid-template-columns:180px 1fr;gap:16px}.pno-howto-grid{grid-template-columns:repeat(3,1fr)}.pno-tut-wide{grid-column:span 1}}@media (width<=700px){body{overflow-x:hidden}.pno-page{width:100%;padding:0 10px}.pno-hero{gap:10px;height:95px}.pno-hero-title{text-align:center;font-size:24px}.pno-hero-deco{font-size:16px}.pno-card{border-radius:15px;padding:10px;display:block}.pno-learn-card{grid-template-columns:40px 1fr;column-gap:10px;margin-bottom:10px;padding:14px;display:grid}.pno-learn-icon{grid-row:span 2;margin:0;font-size:24px}.pno-learn-title{margin:0;font-size:13px}.pno-learn-desc{margin:2px 0 8px}.pno-learn-btn{width:auto;margin:0 3px 0 0;padding:7px 10px;font-size:9px;display:inline-block}.pno-learn-stats{border-top:none;flex-direction:row;grid-column:span 2;gap:6px;margin-top:6px;padding-top:0}.pno-top-controls{flex-wrap:wrap;gap:6px}.pno-main-btns{grid-template-columns:repeat(5,1fr);width:100%;display:grid}.pno-ctrl-btn{justify-content:center;padding:8px 4px;font-size:9px}.pno-record-btn{justify-content:center;width:100%}.pno-inst-selector{width:100%;margin:10px 0}.pno-settings-row{flex-wrap:wrap;gap:10px;margin-bottom:10px}.pno-kb-setting{flex:1;min-width:150px}.pno-view-setting{display:none!important}.pno-piano-body{padding:12px 14px 10px}.pno-howto{padding:25px 0 35px}.pno-howto-heading h2{font-size:22px}.pno-howto-grid{grid-template-columns:1fr;gap:10px}.pno-tut-card{min-height:auto;padding:16px}.pno-tut-wide{grid-column:span 1}.pno-tut-card h3{font-size:10px}.pno-tut-card p{font-size:9px;line-height:1.6}}@media (width<=420px){.pno-hero-title{font-size:22px}.pno-main-btns{grid-template-columns:repeat(3,1fr)}}