:root{color-scheme:light;font:17px/1.45 system-ui;color:#1f2933;background:#faf9f6}*{box-sizing:border-box}body{margin:0}main{max-width:1020px;margin:0 auto;padding:22px 20px 40px}a{color:#21465d}.back{font-size:.85rem}.heading{display:flex;justify-content:space-between;gap:16px;align-items:baseline;flex-wrap:wrap;margin:20px 0 18px}h1{margin:0;font-size:1.6rem}.prototype{font-size:.8rem;color:#52616b}.workspace{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,1fr);gap:28px;align-items:center;background:#f4ecd9;border:1px solid #d7d9d7;border-radius:14px;padding:24px}.reference{margin:0 0 8px;font-size:.85rem;color:#52616b}h2{margin:0;text-transform:capitalize;font-size:1.55rem;line-height:1.2}#distance-label{margin:6px 0 20px;color:#52616b}.axis{margin:0 0 18px}#distance{display:block;width:100%;height:44px;margin:0;appearance:none;background:transparent;cursor:ew-resize}#distance::-webkit-slider-runnable-track{height:8px;border-radius:6px;background:linear-gradient(to right,#2d7375 0 var(--extent,0%),#d1d7d6 var(--extent,0%) 100%)}#distance::-webkit-slider-thumb{appearance:none;width:26px;height:26px;margin-top:-9px;border-radius:50%;border:2px solid #fff;background:#21465d;box-shadow:0 0 0 1px #21465d}#distance::-moz-range-track{height:8px;border-radius:6px;background:#d1d7d6}#distance::-moz-range-thumb{width:24px;height:24px;border:2px solid #fff;border-radius:50%;background:#21465d}.ticks{display:flex;justify-content:space-between;padding:0 10px;font-size:.7rem;color:#52616b}.endpoints{display:flex;justify-content:space-between;gap:12px;margin:6px 0 0;font-size:.75rem;color:#52616b}.spellings{min-height:44px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}.spelling{font:inherit;min-width:70px;min-height:44px;display:inline-flex;justify-content:center;align-items:center;padding:6px 12px;border:1px solid #b7c3c5;border-radius:8px;background:#fcfcfb;color:inherit}button.spelling{cursor:pointer}button.spelling[aria-pressed=true]{background:#e3efec;border-color:#2d7375}.notation{margin:0;min-width:0}#score-action{display:block;width:100%;border:1px solid #d7d9d7;border-radius:10px;padding:8px;background:#fcfcfb;cursor:pointer}#score{width:100%;max-width:320px;margin:auto;height:240px}#score svg{display:block;width:100%;height:240px}#score .abcjs-note{pointer-events:none}#staff-caption{margin:4px 0 0;text-align:center;font-size:.85rem;color:#52616b}main[data-playing=true] #score-action{border-color:#2d7375;box-shadow:0 0 0 1px #2d7375}.controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:16px;position:relative}.controls>button,#help-close{font:inherit;min-height:44px;min-width:44px;border:1px solid #b7c3c5;border-radius:8px;padding:6px 12px;background:#fff;color:inherit;cursor:pointer}button:disabled{opacity:.5;cursor:default}button:focus-visible,input:focus-visible{outline:3px solid #7ab2c9;outline-offset:3px}#status{font-size:.85rem;color:#52616b}#help-panel{position:absolute;z-index:3;top:100%;left:0;width:min(100%,420px);padding:14px;background:white;border:1px solid #b7c3c5;border-radius:9px;box-shadow:0 4px 16px #1f293326;font-size:.85rem}#help-panel[hidden]{display:none}#help-panel p{margin:0 46px 10px 0}#help-close{float:right;padding:4px 10px}#help-panel p:last-child{margin-bottom:0}.compare{font-size:.85rem;color:#52616b;margin:18px 0 0}
#score{display:block}
.score-figure{margin:0}
.notation .root-controls{position:relative;left:50%;width:max-content;max-width:100%;flex-wrap:nowrap;justify-content:center;transform:translateX(-50%)}
main .workspace{grid-template-columns:minmax(320px,1.3fr) minmax(0,1fr)}
@media(max-width:660px){main .workspace{grid-template-columns:1fr}}
.score-row.upper-controls{display:grid;grid-template-columns:minmax(0,1fr) 48px;gap:8px;align-items:center;margin:0}
.upper-readout{margin-bottom:24px}
.notation .root-controls{margin-top:20px}.notation .reference{margin-bottom:0}.explore{padding-top:4px}.interval-heading{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap}
.interval-heading #boundary{display:inline-block;font-size:.72rem;border:1px solid #a7c5bf;border-radius:5px;background:#e3efec;padding:3px 7px;margin:0;color:#285b58}
.arrows button[aria-disabled=true]{opacity:.5;cursor:default}
.workspace{grid-template-columns:minmax(260px,1fr) minmax(0,1.2fr);align-items:start}
.notation{position:sticky;top:20px}.view-control{display:flex;align-items:center;gap:10px;margin-bottom:12px;font-size:.85rem}
select,.arrows button{font:inherit;min-height:44px;border:1px solid #b7c3c5;border-radius:8px;background:#fcfcfb;color:inherit;padding:7px 10px}
select:focus-visible{outline:3px solid #7ab2c9;outline-offset:3px}.root-controls{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.field-label{display:block;font-size:.8rem;color:#52616b}.root-controls>.field-label{width:100%}
.reference{margin:8px 0 18px}.upper-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}#upper-note{display:block;font-size:1.5rem;font-weight:600}.arrows{display:flex;flex-direction:column;gap:4px}.arrows button{min-width:48px;font-size:1.3rem;line-height:1;cursor:pointer}
#distance-label{margin-bottom:10px}.spelling:not(button){border:0;background:transparent;padding-left:0;justify-content:start}.spellings{margin-bottom:10px}.compound-control{display:flex;gap:10px;align-items:center;min-height:44px;font-size:.85rem;cursor:pointer}.compound-control input{width:20px;height:20px;accent-color:#2d7375}
#boundary{font-size:.85rem;border-left:3px solid #2d7375;padding:7px 10px;margin:6px 0 10px;background:#e3efec}#boundary[hidden]{display:none}.axis{margin:12px 0 0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}#score{max-width:300px}#score svg{height:auto}
@media(max-width:660px){.notation{position:static}.workspace{grid-template-columns:1fr}.notation{order:0}.explore{order:1}#score-action{max-width:340px}}
@media(max-width:660px){main{padding:14px 14px 30px}.workspace{grid-template-columns:1fr;padding:16px;gap:18px}.heading{margin-top:14px}#distance-label{margin-bottom:12px}#score-action{max-width:380px;margin:auto}#score{max-width:300px}.controls{margin-top:12px}}