:root{font-family:system-ui,-apple-system,sans-serif;color:#223d35;background:#f2f5f1;line-height:1.7}*{box-sizing:border-box}body{margin:0}main{max-width:900px;margin:auto;padding:28px 20px 70px}a{color:#276b56}header{padding:35px 4px}h1{font-size:clamp(32px,6vw,48px);margin:5px 0}h2{font-size:21px;margin-top:0}.eyebrow{letter-spacing:.12em;color:#477060}.tags,.controls,.actions,.chords{display:flex;gap:12px;flex-wrap:wrap}.tags span{padding:5px 12px;background:#e0eadd;border-radius:20px}section{padding:26px;background:white;border:1px solid #dce5dc;border-radius:18px;margin-bottom:20px}select,button{font:inherit;border-radius:9px;padding:10px 15px;border:1px solid #aec3b5}button{cursor:pointer;background:#28674e;color:white}button.secondary{background:#edf3ed;color:#274c3a}select{background:white}audio{width:100%;margin:12px 0}.muted,footer{color:#63736b;font-size:14px}.line{border-left:4px solid transparent;padding:12px 15px;margin:8px 0;background:#f5f7f3;border-radius:8px}.line.active{border-color:#318558;background:#e2f1dd}.line p{margin:6px 0}.bars{display:grid;grid-template-columns:repeat(4,1fr);color:#41715a;font-weight:700}.bars span{border-right:1px solid #ccd9cc;padding-left:7px}.chords span{padding:12px;background:#f1f5ef}.drill{display:flex;gap:15px;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid #e1e8df}#beats{font-size:24px;letter-spacing:.25em;color:#47755b}button:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid #c08a24;outline-offset:3px}@media(max-width:500px){section{padding:18px}.drill{flex-wrap:wrap}}