:root{color-scheme:light;--bg:#f7f8f4;--paper:#fff;--ink:#223c32;--muted:#707a72;--line:#dde3d9;--green:#254b3e;--pale:#edf2e4;--serif:Georgia,'Times New Roman',serif;--sans:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.6 var(--sans)}button,input,select{font:inherit}a{color:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #96b275;outline-offset:3px}[hidden]{display:none!important}.site-header{height:70px;padding:0 max(20px,calc((100vw - 1120px)/2));border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:14px}.brand{text-decoration:none;font:25px/1 var(--serif);letter-spacing:-.7px}.brand span{margin-left:9px;font:9px var(--sans);letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}.online-link{font-size:12px;color:var(--green);text-decoration:none}.online-link:hover,footer a:hover{text-decoration:underline}main{max-width:1120px;margin:auto;padding:42px 24px 55px}.intro{max-width:650px;margin-bottom:27px}.eyebrow{margin:0 0 7px;color:#7d8979;font-size:9px;font-weight:700;letter-spacing:1.7px}.intro h1{margin:0;font:clamp(34px,7vw,48px)/1.12 var(--serif);letter-spacing:-.7px}.intro>p:last-child{max-width:610px;margin:13px 0 0;color:var(--muted);font-size:13px}.status{padding:12px 15px;border:1px solid var(--line);border-radius:7px;background:#fff;font-size:13px}.status.error{border-color:#e1c4b6;background:#fff4ef;color:#853f2d}.library{margin-top:20px}.search{display:flex;align-items:center;gap:10px;max-width:510px;height:43px;padding:0 13px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--muted)}.search input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:var(--ink);font-size:13px}.records{display:grid;gap:9px;margin-top:15px}.record{display:flex;align-items:center;gap:15px;min-width:0;padding:14px 17px;border:1px solid var(--line);border-radius:7px;background:var(--paper)}.record-open{flex:1;min-width:0;border:0;background:transparent;text-align:left;color:var(--ink);cursor:pointer}.record-open strong{display:block;overflow-wrap:anywhere;font:20px/1.3 var(--serif)}.record-open span{display:block;margin-top:4px;color:var(--muted);font-size:11px}.record-open:hover strong{color:var(--green);text-decoration:underline}.record-remove,.remove{border:1px solid #d8ded3;border-radius:5px;background:#fff;padding:8px 10px;color:#586759;font-size:11px;cursor:pointer}.record-remove:hover,.remove:hover{background:#f4eee9}.empty{padding:20px;color:var(--muted);text-align:center}.reader{margin-top:23px;border:1px solid var(--line);border-radius:8px;background:#fff;overflow:hidden}.back{margin:16px 19px 0;padding:0;border:0;background:none;color:var(--green);font-size:12px;cursor:pointer}.reader-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:16px 20px 12px}.reader-heading h2{margin:0;overflow-wrap:anywhere;font:27px/1.2 var(--serif)}.muted{margin:6px 0 0;color:var(--muted);font-size:11px}.copy-note{margin:0;padding:10px 20px;background:var(--pale);color:#4c5d4e;font-size:11px}.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:11px 18px;border-bottom:1px solid var(--line);background:#fbfcf9}.toolbar label{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:11px}.toolbar select{min-width:100px;max-width:min(260px,52vw);padding:6px 8px;border:1px solid var(--line);border-radius:4px;background:#fff;color:var(--ink);font-size:12px}.zoom{display:flex;align-items:center;gap:5px;margin-left:auto}.zoom button{min-width:37px;height:36px;border:1px solid #cbd5c5;border-radius:4px;background:#fff;color:var(--green);cursor:pointer}.zoom button:hover:not(:disabled){background:var(--pale)}.zoom button:disabled{opacity:.45}.zoom #zoom-value{min-width:48px;text-align:center;color:var(--muted);font-size:11px;font-variant-numeric:tabular-nums}.zoom #zoom-fit{width:auto;padding:0 10px;font-size:11px}.paper-scroll{min-height:180px;max-height:72vh;overflow:auto;padding:18px;background:#eef0e9;touch-action:pan-x pan-y;overscroll-behavior:contain}.paper{width:900px;min-width:540px;min-height:150px;margin:0 auto;padding:22px 28px;background:#fff;box-shadow:0 2px 8px #243d3212;transform-origin:top left}#notation{color:#26342b}#notation svg{max-width:none}.error{padding:12px 18px;color:#853f2d;font-size:13px}footer{display:flex;justify-content:space-between;gap:15px;max-width:1120px;margin:auto;padding:18px 24px 25px;border-top:1px solid var(--line);color:#929b8a;font-size:10px}footer a{text-decoration:none}@media(max-width:600px){.site-header{height:60px;padding-inline:16px}.brand{font-size:22px}.brand span{margin-left:5px;font-size:8px}.online-link{font-size:11px}main{padding:28px 14px 38px}.intro{margin-bottom:21px}.intro>p:last-child{font-size:12px}.record{gap:9px;padding:12px}.record-open strong{font-size:18px}.record-remove{padding:7px;font-size:10px}.reader-heading{display:block;padding:14px 15px}.reader-heading h2{font-size:23px}.remove{margin-top:12px}.copy-note{padding:10px 15px}.toolbar{gap:9px;padding:10px}.voice-picker{flex:1 1 100%}.transpose{flex:1}.zoom{margin-left:auto;gap:3px}.zoom button{min-width:38px;height:40px}.paper-scroll{max-height:68vh;padding:8px}.paper{padding:16px;min-width:540px}.back{margin-inline:15px}footer{padding-inline:14px;font-size:9px}}@media(max-width:360px){.online-link{max-width:120px;text-align:right;line-height:1.3}.toolbar{gap:8px}.zoom button{min-width:34px}.zoom #zoom-value{min-width:41px}}

/* Compact reading mode and generous touch targets. */
body.reading .site-header{height:48px}body.reading main{padding-top:12px;padding-bottom:24px}body.reading .intro,body.reading #status{display:none!important}body.reading .reader{margin-top:0}@media(max-width:600px){body.reading .site-header{height:44px;padding-inline:12px}.site-header{height:52px}.brand{font-size:19px}.brand span{font-size:7px}.online-link{max-width:145px;font-size:10px;line-height:1.25;text-align:right}main{padding-top:17px}.record-open{min-height:44px;padding:5px 0}.record-remove,.remove{min-height:44px;padding:8px}.back{display:flex;align-items:center;min-height:44px}.toolbar select{min-height:44px}.zoom button{min-width:44px;height:44px}.zoom #zoom-fit{padding-inline:9px}.zoom #zoom-value{min-width:44px}.search{min-height:44px}}@media(max-width:360px){.site-header{padding-inline:10px}.brand{font-size:18px}.online-link{max-width:124px;font-size:9px}}

.remove-row{display:flex;justify-content:flex-end;padding:10px 18px;border-top:1px solid var(--line)}@media(max-width:600px){body.reading .reader-heading{padding:8px 12px 7px}body.reading .reader-heading .eyebrow,body.reading #score-meta,body.reading .copy-note{display:none!important}body.reading .reader-heading h2{font-size:20px;line-height:1.15}body.reading .back{min-height:36px;margin-top:4px;margin-bottom:0;padding-block:0}body.reading .toolbar{gap:5px;padding:6px 9px}body.reading .toolbar label{font-size:10px}body.reading .remove-row{padding:8px 10px}}

/* Keep the offline reader's mobile controls in the same places as the online score view. */
.reader-heading .reader-title{flex:1;min-width:0}
.reader-heading .back{flex:none;margin:0;min-height:44px}
.mobile-tools,.mobile-fit{display:none}
@media screen and (max-width:600px){
  body.reading{padding-bottom:calc(66px + env(safe-area-inset-bottom));background:#e9ede4}
  body.reading main{max-width:none;padding:0}
  body.reading .reader{border:0;border-radius:0;overflow:visible}
  body.reading .reader-heading{display:flex;align-items:center;gap:6px;min-height:60px;padding:7px max(8px,env(safe-area-inset-right)) 7px max(8px,env(safe-area-inset-left));background:var(--bg)}
  body.reading .back{display:flex;align-items:center;justify-content:center;flex:0 0 44px;width:44px;height:44px;min-height:44px;margin:0;padding:0;border-radius:8px;font-size:22px}
  body.reading .back span{display:none}
  body.reading .reader-title{flex:1;min-width:0}
  body.reading .reader-heading h2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:19px;line-height:1.2;letter-spacing:-.2px}
  body.reading .mobile-tools{display:block;flex:0 0 auto;position:relative}
  body.reading .mobile-tools summary{display:flex;align-items:center;justify-content:center;min-width:76px;min-height:44px;padding:5px 7px;border:1px solid #d5ddce;border-radius:9px;background:#fff;color:var(--green);font-size:11px;list-style:none;cursor:pointer}
  body.reading .mobile-tools summary::-webkit-details-marker{display:none}
  body.reading .mobile-tools[open] summary{background:var(--pale)}
  body.reading .mobile-tools-body{position:absolute;top:calc(100% + 6px);right:0;z-index:3;width:min(300px,calc(100vw - 16px));padding:14px;border:1px solid var(--line);border-radius:9px;background:#fff;box-shadow:0 10px 28px #223c3226}
  body.reading .mobile-tools-body label{display:grid;gap:5px;color:var(--muted);font-size:12px}
  body.reading .mobile-tools-body select{width:100%;min-height:44px;font-size:16px}
  body.reading .mobile-tools-body p{margin:8px 0 0;color:var(--muted);font-size:11px;line-height:1.4}
  body.reading .toolbar{display:flex;flex-wrap:nowrap;gap:8px;padding:6px max(12px,env(safe-area-inset-right)) 8px max(12px,env(safe-area-inset-left));border-bottom:1px solid #d6dfce;background:var(--bg)}
  body.reading .voice-picker{flex:1 1 auto;min-width:0}
  body.reading .voice-picker select{flex:1;width:100%;max-width:none;min-width:0;height:44px;padding:8px 10px;border-color:#bccbb2;border-radius:8px;font-size:16px}
  body.reading .toolbar .voice-picker{gap:0;font-size:0}
  body.reading .mobile-fit{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-height:44px;padding:8px 10px;border:1px solid #bccbb2;border-radius:8px;background:#fff;color:var(--green);font-size:12px;white-space:nowrap}
  body.reading .mobile-fit[aria-pressed=true]{background:#e4eddc;border-color:#91a77c}
  body.reading .toolbar>.transpose{display:none}
  body.reading .zoom{position:fixed;inset:auto 0 0;z-index:5;display:flex;align-items:center;justify-content:center;gap:5px;min-height:60px;margin:0;padding:8px max(12px,env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));border-top:1px solid #c8d3be;background:#f7f8f4f7;box-shadow:0 -3px 20px #223c3210}
  body.reading .zoom button{min-width:44px;height:44px;border-radius:8px;font-size:20px}
  body.reading .zoom #zoom-value{min-width:44px;font-size:11px}
  body.reading .zoom #zoom-fit{display:none}
  body.reading .paper-scroll{max-height:none;overflow-x:auto;overflow-y:hidden;padding:8px 4px;background:#e9ede4;overflow-anchor:none}
  body.reading .paper{padding:10px 12px 16px;box-shadow:0 1px 6px #223c3210}
  body.reading #notation svg:has(.abcjs-title):not(:has(.abcjs-note)){display:none}
  body.reading footer{display:none}
}