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}
.card{width: clamp(320px, 92vw, 980px);margin: 10px auto 0;background:#fff;border:1px solid #eee;border-radius:16px;box-shadow:0 2px 5px rgba(0,0,0,.08);padding:16px;}
h1{font-family:'Nunito',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:#6f5e5b;font-size:28px;margin:15px 0 -10px;}
/* Piano */
#pianoholder{text-align:center;margin-top: 6px;width:100%;overflow-x:auto}
#piano{display:block;max-width:100%;height:auto;margin:0 auto;filter:drop-shadow(0 2px 3px rgba(0,0,0,0.2))}

.key-label{font-size:14px;fill:#999}
.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}
.key.playing.lh,.key.playing.lh.black-key{fill:url(#grad-left)!important;stroke:#fff!important}

#piano .key.playing.lh{ fill:url(#grad-left)!important; stroke:#fff!important; stroke-width:2 }
#piano .key.playing.rh{ fill:url(#grad-right)!important; stroke:#fff!important; stroke-width:2 }
#piano .black-key.key.playing.lh,
#piano .black-key.key.playing.rh{ filter:brightness(1.4) }
#piano .key-label{ pointer-events:none; user-select:none }

@keyframes keyPulse{0%{filter:brightness(1)}35%{filter:brightness(1.6)}100%{filter:brightness(1)}}
.key.pulse{animation:keyPulse .18s ease-out}
/* Controls */
#player{display:flex;flex-wrap:wrap;align-items:center;gap:10px;justify-content:center;margin-top:10px}
#player label{font-size:14px;color:#444}
button{font-weight:600;background:#fcfbe3;color:#222;font-size:.9em;border:1px solid #ddd;border-radius:999px;margin:0 5px;padding:12px 16px;cursor:pointer}
button:hover{box-shadow:0 1px 4px rgba(0,0,0,.08)}
.metronome-flash{box-shadow:0 0 0 4px rgba(101,178,132,.35) inset;border-radius:6px;transition:box-shadow .08s}
/* Bar grid */
#progression{display:grid;grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));gap:2px;width:100%;margin:0 auto;padding:2px;border:1px solid #e6e6e6;border-radius:10px;background:#fafafa;box-sizing:border-box}
.bar{position:relative;width:100%;min-width:200px;height:50px;border:1px solid #e6e6e6;border-radius:8px;transition: background-color .5s ease, color .2s ease, border-color .5s ease, font-size .1s ease;display:flex;flex-direction:column;justify-content:center;padding:6px;box-sizing:border-box}
.bar.current{background:#cb443d;color:#fff;font-size:1.2em}
.bar-num{position:absolute;top:3px;left:7px;font-size:.7em;color:#999}
.bar-chords{display:flex;align-items:center;justify-content:center;min-height:24px}
.chord-name{font-weight:700;font-size:1em;white-space:nowrap}
/* Progression menu (scrollable) */
#progWrap{display:grid;grid-template-columns:1fr;gap:10px;align-items:start;margin:10px auto;max-width:100%}
#progList{border:1px solid #e6e6e6;background:#fafafa;padding:2px;max-height:150px;overflow-y:auto;overflow-x:hidden}
.prog-item{display:block;width:100%;text-align:left;margin:2px 0;padding:8px 10px;border:1px solid #e6e6e6;border-radius:0;background:#fff;font-weight:700;cursor:pointer}
.prog-item:first-child{margin-top:0}.prog-item:last-child{margin-bottom:0}
.prog-item:hover,.prog-item.active{background:#fff9e6;border-color:#bbb27d}
#progInfo{border:1px solid #e6e6e6;background:#fff;padding:10px 12px;min-height:80px;text-align:left}
#progInfo .title{font-weight:800;margin:0 0 4px}
#progInfo .desc{color:#555;margin:0}

#metronome{display:flex;justify-content:center;gap:8px;margin:10px 0 5px 0;}
#metronome .beat{width:24px;height:24px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:#fafafa;font-weight:700;line-height:1; user-select:none;transition:transform .08s ease, background .08s ease, color .08s ease, box-shadow .08s ease;}
#metronome .beat.active{background:#cb443d;color:#fff;transform:scale(1.1);}
@media (min-width: 720px){
#progWrap{grid-template-columns:minmax(240px,320px) 1fr}
}
@media (max-width: 450px) {
h1{font-size:25px;}
#progression {grid-template-columns: repeat(2, 1fr);}
#metronome .beat{width:18px;height:18px;font-weight:500;}
}