:root{color-scheme:light;--ink:#1f2933;--muted:#5b6770;--line:#d5dcd8;--accent:#17675e;background:#fafaf7;color:var(--ink);font:15px/1.45 Avenir,"Helvetica Neue",sans-serif}*{box-sizing:border-box}body{margin:0}main{max-width:760px;margin:auto;padding:16px 14px 12px}header{display:flex;justify-content:space-between;align-items:start;gap:10px}h1{font-size:23px;line-height:1.2;margin:0}h2{font-size:18px;margin:0}.lead{font-size:12px;color:var(--muted);margin:7px 0 12px}button,select{font:inherit;background:white;border:1px solid #a8b6b0;border-radius:5px;color:var(--ink);padding:6px 10px;min-height:36px;cursor:pointer}button:disabled{opacity:.45;cursor:default}button:hover:not(:disabled){background:#edf2ee}button:focus-visible,select:focus-visible,input:focus-visible,.staff-scroll:focus-visible,a:focus-visible{outline:3px solid #a15a1a;outline-offset:3px}button#play{background:var(--accent);color:white;border-color:var(--accent)}fieldset{border:0;padding:0;margin:0 0 12px}legend{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.choices{display:flex;gap:6px;flex-wrap:wrap}.choices label{display:flex;gap:6px;align-items:center;border:1px solid var(--line);border-radius:5px;padding:6px 9px;min-height:36px;cursor:pointer}.choices label:has(:checked){background:#e6f0ec;border-color:var(--accent)}input{accent-color:var(--accent)}.staff-scroll{overflow-x:auto;max-width:100%;overscroll-behavior-x:contain;scroll-behavior:auto;margin:0 0 6px}.music-axis{width:600px}.bar-map{display:grid;grid-template-columns:repeat(4,1fr);width:520px;margin:0 0 0 60px}.bar{min-width:0;padding:6px 8px 7px;border-left:1px solid var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.bar:last-child{border-right:1px solid var(--line)}.bar label{display:block;font-size:12px;color:var(--muted);margin-bottom:4px}.bar select{width:100%;font-size:15px;min-height:38px;padding:5px 6px}.bar.active{background:#dcece7;box-shadow:inset 0 3px var(--accent)}#staff{min-height:130px}#staff svg{display:block}.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}.transport{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.transport label{display:flex;align-items:center;gap:5px;min-height:36px}.transport input{width:17px;height:17px}#status{font-size:12px;color:var(--muted);min-width:58px}.after{display:flex;align-items:center;justify-content:space-between;margin-top:7px;font-size:12px;color:var(--muted)}#restore{font-size:12px;min-height:30px;padding:3px 8px}#problem{color:#8b2929;font-size:13px}#help{border:1px solid #a8b6b0;border-radius:8px;background:white;max-width:min(530px,calc(100vw - 24px));max-height:80vh;overflow:auto;padding:16px;box-shadow:0 8px 32px #0002;font-size:14px}#help::backdrop{background:#0001}#help p{margin:12px 0}a{color:var(--accent)}[hidden]{display:none!important}.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;overflow:hidden!important;clip-path:inset(50%);white-space:nowrap;border:0}@media(max-width:420px){main{padding:12px 8px}h1{font-size:20px}.choices{gap:5px}.choices label{padding:5px 7px;font-size:13px}.transport{gap:6px}.transport button{padding:6px 8px}}