.pcpg-app{--pcpg-primary:#6D5DFB;--pcpg-primary-dark:#5546DF;--pcpg-soft:#F1EFFF;--pcpg-success:#168C63;--pcpg-text:#172033;--pcpg-muted:#667085;--pcpg-border:#E5E7EB;--pcpg-bg:#fff;--pcpg-shadow:0 12px 30px rgba(23,32,51,.08);max-width:1050px;margin:24px auto;color:var(--pcpg-text);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.55}.pcpg-app *{box-sizing:border-box}.pcpg-header{margin-bottom:18px}.pcpg-kicker{display:inline-block;padding:6px 10px;border-radius:999px;background:var(--pcpg-soft);color:var(--pcpg-primary-dark);font-size:13px;font-weight:700;margin-bottom:10px}.pcpg-header h2{font-size:clamp(28px,4vw,40px);line-height:1.15;margin:0 0 10px}.pcpg-header p{margin:0;color:var(--pcpg-muted);max-width:780px}.pcpg-grid{display:grid;gap:18px}.pcpg-grid-main,.pcpg-grid-secondary{grid-template-columns:1fr;margin-bottom:18px}.pcpg-card{background:var(--pcpg-bg);border:1px solid var(--pcpg-border);border-radius:18px;padding:18px;box-shadow:var(--pcpg-shadow)}.pcpg-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}.pcpg-card h3{margin:0;font-size:19px}.pcpg-badge{display:inline-flex;align-items:center;justify-content:center;padding:6px 9px;border-radius:999px;background:#F3F4F6;color:#475467;font-size:12px;font-weight:700}.pcpg-badge-success{background:#EAF8F2;color:var(--pcpg-success)}.pcpg-field-grid{display:grid;grid-template-columns:1fr;gap:14px}.pcpg-field{display:flex;flex-direction:column;gap:7px;font-size:14px;font-weight:700}.pcpg-field select,.pcpg-field input{min-height:48px;width:100%;font:inherit;color:var(--pcpg-text)}.pcpg-field select{border:1px solid var(--pcpg-border);border-radius:12px;padding:0 13px;background:#fff}.pcpg-field input[type=range]{min-height:36px;accent-color:var(--pcpg-primary)}.pcpg-field strong{float:right;color:var(--pcpg-primary-dark)}.pcpg-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}.pcpg-actions-stack{display:grid}.pcpg-btn{min-height:48px;border:1px solid var(--pcpg-border);border-radius:12px;padding:0 15px;background:#fff;color:var(--pcpg-text);font-size:15px;font-weight:750;cursor:pointer;transition:transform .15s ease,border-color .15s ease,background .15s ease}.pcpg-btn:hover{border-color:#C9C5FF;transform:translateY(-1px)}.pcpg-btn:focus-visible,.pcpg-link-btn:focus-visible,.pcpg-chord:focus-visible,.pcpg-field select:focus-visible,.pcpg-field input:focus-visible{outline:3px solid rgba(109,93,251,.25);outline-offset:2px}.pcpg-btn-primary{background:var(--pcpg-primary);border-color:var(--pcpg-primary);color:#fff}.pcpg-btn-primary:hover{background:var(--pcpg-primary-dark);border-color:var(--pcpg-primary-dark)}.pcpg-btn-quiet{background:#F9FAFB}.pcpg-progression{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.pcpg-chord{min-height:74px;border:1px solid var(--pcpg-border);border-radius:14px;background:#fff;padding:12px;cursor:pointer;text-align:left}.pcpg-chord.is-active{border-color:var(--pcpg-primary);box-shadow:0 0 0 3px rgba(109,93,251,.12)}.pcpg-chord-name{display:block;font-weight:800;font-size:19px}.pcpg-chord-sub{display:block;color:var(--pcpg-muted);font-size:12px;margin-top:4px}.pcpg-roman{margin-top:12px;padding:12px;border-radius:12px;background:var(--pcpg-soft);color:var(--pcpg-primary-dark);font-weight:800;text-align:center}.pcpg-helper,.pcpg-empty{color:var(--pcpg-muted);font-size:13px;margin:12px 0 0}.pcpg-inspector-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:14px}.pcpg-mini{background:#F8F9FC;border:1px solid var(--pcpg-border);border-radius:12px;padding:11px}.pcpg-mini span{display:block;color:var(--pcpg-muted);font-size:12px}.pcpg-mini strong{display:block;margin-top:3px}.pcpg-keyboard{display:flex;height:132px;border:1px solid var(--pcpg-border);border-radius:12px;overflow:hidden;background:#fff}.pcpg-white-key{position:relative;flex:1;border-right:1px solid #D0D5DD;background:#fff}.pcpg-white-key:last-child{border-right:0}.pcpg-white-key.is-on{background:#E9E6FF}.pcpg-black-key{position:absolute;z-index:2;top:0;right:-28%;width:56%;height:62%;border-radius:0 0 5px 5px;background:#1F2937}.pcpg-black-key.is-on{background:var(--pcpg-primary)}.pcpg-key-label{position:absolute;bottom:5px;left:0;right:0;text-align:center;font-size:10px;color:#667085}.pcpg-history{display:grid;gap:9px}.pcpg-history-item{border:1px solid var(--pcpg-border);border-radius:12px;padding:10px}.pcpg-history-item strong{display:block}.pcpg-history-item span{display:block;color:var(--pcpg-muted);font-size:12px;margin-top:2px}.pcpg-link-btn{border:0;background:transparent;padding:4px;color:var(--pcpg-primary-dark);font-weight:750;cursor:pointer}.pcpg-note-grid{display:grid;grid-template-columns:1fr;gap:12px}.pcpg-note{display:flex;flex-direction:column;gap:3px;padding:14px;border-radius:14px;background:#F8F9FC;border:1px solid var(--pcpg-border);font-size:13px}.pcpg-note span{color:var(--pcpg-muted)}.pcpg-status{margin-top:12px;color:var(--pcpg-muted);font-size:13px}.pcpg-field select:disabled,.pcpg-btn:disabled{opacity:.55;cursor:not-allowed}.pcpg-play-head{animation:pcpgPulse 1s ease-in-out infinite}@keyframes pcpgPulse{50%{box-shadow:0 0 0 5px rgba(109,93,251,.12)}}@media(min-width:720px){.pcpg-grid-main{grid-template-columns:.9fr 1.1fr}.pcpg-grid-secondary{grid-template-columns:1.25fr .75fr}.pcpg-field-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.pcpg-field-full{grid-column:1/-1}.pcpg-progression{grid-template-columns:repeat(4,minmax(0,1fr))}.pcpg-note-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}