:root{--pc-bg:#08090b;--pc-card:#111318;--pc-card-hover:#1a1d24;--pc-border:#ffffff14;--pc-text:#f5f0e8;--pc-text-sec:#b8b3aa;--pc-text-muted:#77736c;--pc-gold:#d9a441;--pc-gold-dim:#d9a4411f;--pc-shadow:0 4px 20px #0000004d;--pc-radius:14px}body.light-mode .pc-page,.light-mode .pc-page{--pc-bg:#f7f4ee;--pc-card:#fff;--pc-card-hover:#faf7f2;--pc-border:#e7e1d8;--pc-text:#191919;--pc-text-sec:#555;--pc-text-muted:#888;--pc-gold:#c88a32;--pc-gold-dim:#c88a321a;--pc-shadow:0 4px 16px #0000000f}.pc-page{background:var(--pc-bg);min-height:100vh;color:var(--pc-text)}.pc-container{max-width:1100px;margin:0 auto;padding:0 1.5rem}.pc-hero{text-align:center;padding:2rem 0 1.25rem}.pc-title{color:var(--pc-text);margin:0 0 .4rem;font-family:Dancing Script,cursive;font-size:clamp(1.8rem,4vw,2.6rem);font-weight:500}.pc-subtitle{color:var(--pc-text-sec);margin:0;font-family:Inter,sans-serif;font-size:.82rem}.pc-filters{padding:0 0 1.25rem}.pc-search-wrap{margin-bottom:1rem;position:relative}.pc-search-icon{color:var(--pc-text-muted);position:absolute;top:50%;left:14px;transform:translateY(-50%)}.pc-search{background:var(--pc-card);border:1px solid var(--pc-border);width:100%;color:var(--pc-text);border-radius:10px;outline:none;padding:.7rem 1rem .7rem 2.8rem;font-family:DM Sans,sans-serif;font-size:.85rem;transition:border-color .2s}.pc-search:focus{border-color:var(--pc-gold)}.pc-search::placeholder{color:var(--pc-text-muted)}.pc-section-label{color:var(--pc-text-muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:.5rem;font-family:DM Sans,sans-serif;font-size:.7rem;font-weight:700;display:block}.pc-root-section{margin-bottom:1rem}.pc-root-grid{flex-wrap:wrap;gap:.35rem;display:flex}.pc-root-btn{border:1px solid var(--pc-border);background:var(--pc-card);color:var(--pc-text-sec);cursor:pointer;text-align:center;border-radius:8px;min-width:38px;padding:.4rem .7rem;font-family:DM Sans,sans-serif;font-size:.78rem;font-weight:600;transition:all .2s}.pc-root-btn:hover{border-color:var(--pc-gold);color:var(--pc-gold)}.pc-root-btn.active{background:var(--pc-gold);color:#1a1a1a;border-color:var(--pc-gold);font-weight:700}.pc-type-section{margin-bottom:1rem}.pc-type-grid{flex-wrap:wrap;gap:.35rem;display:flex}.pc-type-btn{border:1px solid var(--pc-border);background:var(--pc-card);color:var(--pc-text-sec);cursor:pointer;border-radius:8px;padding:.4rem .85rem;font-family:DM Sans,sans-serif;font-size:.78rem;font-weight:600;transition:all .2s}.pc-type-btn:hover{border-color:var(--pc-gold);color:var(--pc-gold)}.pc-type-btn.active{background:var(--pc-gold);color:#1a1a1a;border-color:var(--pc-gold);font-weight:700}.pc-grid-section{padding-bottom:1.5rem}.pc-grid{grid-template-columns:repeat(auto-fill,minmax(85px,1fr));gap:.5rem;display:grid}.pc-card{background:var(--pc-card);border:1px solid var(--pc-border);text-align:center;cursor:pointer;border-radius:10px;padding:.65rem .4rem;transition:all .2s}.pc-card:hover{border-color:var(--pc-gold);background:var(--pc-card-hover);transform:translateY(-1px)}.pc-card.selected{border-color:var(--pc-gold);background:var(--pc-gold-dim);box-shadow:0 0 0 1px var(--pc-gold)}.pc-card-name{color:var(--pc-text);font-family:DM Sans,sans-serif;font-size:.82rem;font-weight:700}.pc-empty{text-align:center;color:var(--pc-text-muted);padding:2rem;font-family:Inter,sans-serif;font-size:.82rem}.pc-detail{padding:0 0 3rem}.pc-detail-card{background:var(--pc-card);border:1px solid var(--pc-border);border-radius:var(--pc-radius);box-shadow:var(--pc-shadow);flex-direction:column;gap:0;padding:1.25rem;display:flex}.pc-detail-piano{width:100%}.pc-detail-info{text-align:center}.pc-keyboard{width:100%;max-width:950px;margin:0 auto;position:relative}.pc-piano-keys{width:100%;height:200px;display:flex;position:relative}.pc-pw{z-index:1;cursor:pointer;background:linear-gradient(#fafafa 0%,#fff 85%,#e8e8e8 100%);border:1px solid #bbb;border-top:none;border-radius:0 0 6px 6px;outline:none;flex:1;justify-content:center;align-items:flex-end;min-width:0;height:200px;margin-right:-1px;padding-bottom:10px;transition:background 80ms,box-shadow 80ms,transform 50ms;display:flex;position:relative;box-shadow:0 2px 4px #00000026,inset 0 -2px 3px #0000000d}.pc-pw:hover{background:linear-gradient(#f0f0f0 0%,#f5f5f5 85%,#ddd 100%)}.pc-pw:active{background:linear-gradient(#e0e0e0 0%,#e8e8e8 85%,#d0d0d0 100%);height:198px;transform:translateY(1px);box-shadow:inset 0 2px 4px #0003}.pc-pb{z-index:2;cursor:pointer;background:linear-gradient(#222 0%,#000 70%,#111 100%);border:1px solid #000;border-top:none;border-radius:0 0 4px 4px;outline:none;justify-content:center;align-items:flex-end;width:5%;height:65%;padding-bottom:8px;transition:background 80ms,box-shadow 80ms,transform 50ms;display:flex;position:absolute;top:0;transform:translate(-50%);box-shadow:0 3px 5px #00000080,inset 0 -2px 3px #ffffff0d}.pc-pb:hover{background:linear-gradient(#333 0%,#111 70%,#222 100%)}.pc-pb:active{background:linear-gradient(#1a1a1a 0%,#000 100%);height:63%;transform:translate(-50%)translateY(1px);box-shadow:inset 0 2px 4px #0009}.pc-pw-label{pointer-events:none;user-select:none;color:#555;white-space:nowrap;opacity:1;font-family:DM Sans,sans-serif;font-size:10px;font-weight:800;transition:opacity .15s}.pc-pw-label sub{color:#999;font-size:7px}.pc-pb-label{pointer-events:none;user-select:none;color:#888;white-space:nowrap;opacity:0;font-family:DM Sans,sans-serif;font-size:7px;font-weight:700;transition:opacity .15s}.pc-pw:hover .pc-pw-label,.pc-pb:hover .pc-pb-label{opacity:1}.pc-kb-label{color:var(--pc-orange);pointer-events:none;user-select:none;opacity:.6;font-family:DM Sans,sans-serif;font-size:8px;font-weight:700;line-height:1;position:absolute;bottom:3px;left:50%;transform:translate(-50%)}.pc-kb-label-black{color:#e3a33b;font-size:7px;bottom:3px}.pc-pw.pc-key-active .pc-kb-label,.pc-pw.pc-key-root .pc-kb-label{opacity:.8;color:#8b6914}.pc-chord-label{color:#0000;pointer-events:none;user-select:none;z-index:5;font-family:DM Sans,sans-serif;font-size:12px;font-weight:900;transition:color .15s;position:absolute;left:50%;transform:translate(-50%)}.pc-chord-label-active{color:#1a1a1a}.pc-pw .pc-chord-label{bottom:32px}.pc-pb .pc-chord-label,.pc-chord-label-black{color:#0000;font-size:9px;bottom:16px}.pc-chord-label-black.pc-chord-label-active{color:#f5e6c8}.pc-pw.pc-key-active{background:linear-gradient(#f5e6c8 0%,#e8d4b0 85%,#d4c4a8 100%)!important;box-shadow:0 0 12px #d9a44180,inset 0 -2px 3px #0000000d!important}.pc-pw.pc-key-active .pc-pw-label{opacity:1!important;color:#8b6914!important}.pc-pb.pc-key-active{background:linear-gradient(#8b6914 0%,#6b4f0a 40%,#5a3d0a 100%)!important;box-shadow:0 0 10px #d9a44180!important}.pc-pb.pc-key-active .pc-pb-label{opacity:1!important;color:#f5e6c8!important}.pc-pw.pc-key-root{background:linear-gradient(#d9a441 0%,#c88a32 85%,#b8860b 100%)!important;box-shadow:0 0 16px #d9a441b3,inset 0 -2px 3px #0000001a!important}.pc-pw.pc-key-root .pc-pw-label{opacity:1!important;color:#1a1a1a!important;font-weight:900!important}.pc-pb.pc-key-root{background:linear-gradient(#d9a441 0%,#b8860b 40%,#8b6914 100%)!important;box-shadow:0 0 14px #d9a441b3!important}.pc-pb.pc-key-root .pc-pb-label{opacity:1!important;color:#1a1a1a!important;font-weight:900!important}.pc-key-flash{animation:.25s pcKeyFlashW}@keyframes pcKeyFlashW{0%,to{transform:translate(-50%)translateY(0)scale(1)}50%{transform:translate(-50%)translateY(1px)scale(.98)}}.pc-chord-info{background:var(--pc-card);border:1px solid var(--pc-border);border-radius:10px;flex-direction:column;gap:10px;padding:12px 16px;display:flex}.pc-sr-only{clip:rect(0,0,0,0);width:1px;height:1px;position:absolute;overflow:hidden}.pc-chord-meta{flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;display:flex}.pc-chord-name{color:var(--pc-text);white-space:nowrap;margin:0;font-family:DM Serif Display,Georgia,serif;font-size:1.15rem;font-weight:400}.pc-chord-sep{color:var(--pc-border);user-select:none;font-size:.85rem;font-weight:300}.pc-chord-notes{flex-wrap:wrap;justify-content:center;align-items:center;gap:4px;display:flex}.pc-note-chip{background:var(--pc-gold-dim);color:var(--pc-gold);border-radius:4px;padding:2px 7px;font-family:DM Sans,sans-serif;font-size:.72rem;font-weight:700;line-height:1.4;display:inline-flex}.pc-note-root{background:var(--pc-gold);color:#1a1a1a}.pc-chord-formula,.pc-chord-finger{white-space:nowrap;align-items:center;gap:4px;display:flex}.pc-chord-formula span:last-child,.pc-chord-finger span:last-child{color:var(--pc-gold);font-family:DM Sans,sans-serif;font-size:.75rem;font-weight:700}.pc-cf-label{color:var(--pc-text-muted);text-transform:uppercase;letter-spacing:.04em;font-family:DM Sans,sans-serif;font-size:.65rem;font-weight:700}.pc-chord-controls{flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;display:flex}.pc-inv-buttons{flex-wrap:wrap;justify-content:center;gap:5px;display:flex}.pc-inv-btn{border:1px solid var(--pc-border);background:var(--pc-card);color:var(--pc-text-sec);cursor:pointer;border-radius:6px;padding:4px 10px;font-family:DM Sans,sans-serif;font-size:.7rem;font-weight:600;transition:all .2s}.pc-inv-btn:hover{border-color:var(--pc-gold);color:var(--pc-gold)}.pc-inv-btn.active{background:var(--pc-gold);color:#1a1a1a;border-color:var(--pc-gold)}.pc-chord-actions{gap:6px;margin-left:auto;display:flex}.pc-btn{cursor:pointer;border:none;border-radius:7px;align-items:center;gap:4px;padding:5px 12px;font-family:DM Sans,sans-serif;font-size:.72rem;font-weight:700;text-decoration:none;transition:all .2s;display:inline-flex}.pc-btn-play{background:var(--pc-gold);color:#1a1a1a}.pc-btn-play:hover{background:#e5b85c;transform:translateY(-1px)}.pc-btn-play.playing{animation:.3s pcPulse}.pc-btn-practice{background:var(--pc-card);color:var(--pc-text-sec);border:1px solid var(--pc-border)}.pc-btn-practice:hover{border-color:var(--pc-gold);color:var(--pc-gold)}@keyframes pcPulse{0%,to{transform:scale(1)}50%{transform:scale(1.04)}}@media (width<=768px){.pc-detail-card{gap:1rem;padding:1.25rem}.pc-piano-keys{height:160px}.pc-pw{height:160px;padding-bottom:8px}.pc-pw-label{font-size:8px}.pc-pw-label sub,.pc-pb-label{font-size:6px}.pc-chord-info{padding:10px 12px}.pc-chord-meta{gap:6px}.pc-chord-sep{display:none}.pc-chord-name{font-size:1rem}.pc-chord-controls{gap:8px}.pc-chord-actions{justify-content:center;width:100%;margin-left:0}.pc-grid{grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:.4rem}.pc-root-grid{gap:.25rem}.pc-root-btn{min-width:32px;padding:.35rem .5rem;font-size:.72rem}}@media (width<=480px){.pc-detail-card{gap:.75rem;padding:1rem}.pc-piano-keys{height:130px}.pc-pw{height:130px;padding-bottom:6px}.pc-pw-label{font-size:7px}.pc-pw-label sub,.pc-pb-label{font-size:5px}.pc-chord-info{padding:8px 10px}.pc-chord-name{font-size:.9rem}.pc-inv-btn{padding:3px 7px;font-size:.65rem}.pc-btn{padding:4px 9px;font-size:.68rem}}