body {margin: 0;font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;color: #222;background: #faf9f5;}
#appHeader{display:flex;align-items:center;gap:10px;padding:10px 14px;background:#323326}#brand{font-size:18px;font-weight:700;color:#fff;letter-spacing:.2px}
#brand .sub{font-family:Nunito,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:#d8d7af}#brand .sub2{color:#8a7571}#brand .text{color:#ddd;font-weight:300;padding-left:10px}#brand a{color:#fff;text-decoration:none}
.hidden {display: none;}
.muted {color: #727272;}
h3 {font-family: Nunito, sans-serif;color: #6f5e5b;margin-bottom: -4px;}
.meta{font-size:.8em;color:#666}
.card {width: 980px;max-width: 92%;margin: 0 auto;padding: 18px 18px 8px;background: #fff;border: 1px solid #eee;border-radius: 16px;box-shadow: 0 2px 5px rgba(0,0,0,.08);}
.section {max-width: 1000px;margin: 0 auto;text-align: left;padding: 14px 4px;border-top: 1px dashed #eee;}
.section h3 {margin: 0 0 8px;font-size: 16px;}
.progression{color:#cb443d;font-size:clamp(28px, 6vw, 56px);text-align:center;font-weight:800;letter-spacing:.5px;margin:8px 0 12px}.sep{opacity:.5}
.notes {display: grid;grid-template-columns: repeat(2, 1fr);gap: 8px;}
.note-line {padding: 8px 10px;background: #fcfcfc;border: 1px solid #f0f0f0;border-radius: 10px;}
.note-chord {font-weight: 700;margin-right: 6px;}
.filter-row,.tags {display: flex;gap: 12px;flex-wrap: wrap;align-items: center;}
.tag{font-size:13px;border:1px solid #e4e4e4;background:#fff;border-radius:999px;padding:6px 10px;cursor:pointer}
.tag.active {background: #fcfcfc;}
.tag:hover{box-shadow:0 1px 4px rgba(0,0,0,.08)}
#controls{max-width:1000px;margin:10px auto;align-items:center;gap:10px}
#player {display: flex;flex-wrap: wrap;gap: 10px;margin: 15px 0;justify-content: center;align-items: center;}
#player label {font-size: 14px;color: #444;}
#player select {padding: 6px 8px;border: 1px solid #ccc;border-radius: 6px;}
button {font-size: .9em;font-weight: 600;padding: 12px 16px;margin:0 5px;border-radius: 999px;border: 1px solid #ddd;background: #fcfbe3;color: #222;cursor:pointer}
button:hover {box-shadow: 0 1px 4px rgba(0,0,0,.08);}
#nextBtn {margin-left:15px}
#oneHandBtn.active,#twoHandsBtn.active {border-color: #999;}
#labelToggleBtn {background: #f2f3fd;}
#labelToggleBtn.active,#labelToggleBtn.active:focus {background: #faf2fd !important;}
#pianoholder {text-align: center;margin-top: 6px;width: 100%;overflow-x: auto;}
#piano {display: block;max-width: 100%;margin: 0 auto;filter: drop-shadow(0 2px 3px rgba(0,0,0,.2));}
.key-label {font-size: 14px;fill: #ccc;}
.white-key{fill:url(#grad-white);stroke:#d4d4d4;stroke-width:1;transition:fill .15s}
.black-key{fill:url(#grad-black);stroke:#222;stroke-width:1;transition:fill .15s}
@keyframes keyPulse{0%{filter:brightness(1)}35%{filter:brightness(1.6)}100%{filter:brightness(1)}}
.key.pulse{animation:keyPulse .18s ease-out}
.key.playing.lh{ fill:url(#grad-right)!important; stroke:#fff!important; stroke-width:2 }
.key.playing.rh{ fill:url(#grad-left)!important; stroke:#fff!important; stroke-width:2 }
@media (max-width: 1020px) {
.card{max-width:92%;padding:18px 2% 8px;}}