:root{color-scheme:light;font-family:system-ui,sans-serif;line-height:1.5;color:#253238;background:#f6f3ec;--accent:#17675e;--rule:#c8cec8}*{box-sizing:border-box}body{margin:0}main{max-width:820px;margin:auto;padding:22px 20px 40px}nav{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}a{color:var(--accent);min-height:44px;display:inline-flex;align-items:center;font-size:14px}h1{font:normal clamp(27px,5vw,37px)/1.2 Georgia,serif;margin:12px 0}.eyebrow{font-size:12px;letter-spacing:.08em;margin:6px 0}.intro{max-width:65ch}.card{min-width:0;background:#fff;border:1px solid var(--rule);border-radius:10px;padding:18px;margin:16px 0}.selectors{display:grid;grid-template-columns:1fr 1fr;gap:12px}.selectors label{font-size:14px;font-weight:600;min-width:0}select{display:block;width:100%;min-height:44px;border:1px solid #7b8e88;border-radius:5px;background:#f7f9f6;color:#253238;font:inherit;padding:8px 10px;margin-top:5px}.pair{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}.pair>div{min-width:0;padding:10px 12px;background:#f3f5f1;border:1px solid var(--rule);border-radius:5px;display:flex;flex-direction:column;gap:3px}.pair>div.active{border-color:var(--accent);box-shadow:inset 0 0 0 2px var(--accent)}.bar-label{font-size:12px;color:#526365}.pair strong{font-size:22px;font-family:Georgia,serif}.pair>div>span:last-child{font-size:14px}.motion{min-height:69px;padding:10px 12px;border-left:3px solid var(--accent);background:#f7f8f5;margin:12px 0;font-size:15px}.transport{display:flex;align-items:center;gap:8px;flex-wrap:wrap}button{font:inherit;min-height:44px;padding:9px 14px;border:1px solid #7b8e88;border-radius:5px;background:#f7f9f6;color:#253238;cursor:pointer}#play{min-width:112px;background:var(--accent);color:#fff;border-color:var(--accent)}#stop{min-width:76px}button:disabled{opacity:.48;cursor:default}button:focus-visible,a:focus-visible,summary:focus-visible,select:focus-visible{outline:3px solid #b55c12;outline-offset:3px}#position{font-size:13px;color:#4b5c60;min-width:128px}.status{min-height:46px;font-size:14px;margin:8px 0}.instruction,.caption,.prompt{font-size:14px}.instruction{color:#4b5c60}.staff-scroll{width:100%;max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;border:1px solid var(--rule);border-radius:5px}.staff{width:620px;min-height:170px}.staff svg{display:block}.caption{margin:9px 0;color:#4b5c60}details{margin-top:14px}summary{min-height:44px;cursor:pointer;display:flex;align-items:center}details p{font-size:14px}@media(max-width:480px){main{padding:14px 12px 30px}.card{padding:12px}.selectors{gap:9px}.selectors select{padding:8px 5px;font-size:13px}.pair{gap:8px}.pair>div{padding:9px}.pair>div>span:last-child{font-size:13px}.motion{min-height:92px}.transport{gap:7px}#position{font-size:12px}}
.score-block{margin:12px 0}.score-block .caption{margin:7px 0 10px}.staff-scroll{scroll-behavior:auto}.staff-scroll:focus-visible{outline:3px solid #b55c12;outline-offset:3px}.abcjs-note.is-current{color:var(--accent);fill:currentColor}.current-chord-frame{fill:none;stroke:currentColor;stroke-width:2;vector-effect:non-scaling-stroke;pointer-events:none}