/* A stable, full-viewport music stand. Drawers overlay; they never resize paper. */
:root{--ink:#24344d;--green:#245ca9;--lime:#dce9fb;--muted:#718098;--line:#dce3ed;--surface:#fafcff;--workspace:#e8edf5;--accent:#245ca9;--dark:#1e4c92;--tint:#eaf1fc;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC',sans-serif}
:root[data-theme=jade]{--ink:#24443e;--green:#2e7163;--lime:#d9eee6;--line:#d7e4df;--accent:#2e7163;--dark:#235c52;--tint:#e7f2ec;--workspace:#e6eeea}
:root[data-theme=graphite]{--ink:#303746;--green:#4a5264;--lime:#e3e6ed;--line:#dce0e7;--accent:#4a5264;--dark:#3d4657;--tint:#edf0f5;--workspace:#e7e9ed}
[hidden]{display:none!important}html,body.focus-reader{height:100%;overflow:hidden;overscroll-behavior:none}
body.focus-reader{background:var(--workspace)}button,input,select{accent-color:var(--accent)}button{min-height:44px}.primary{background:var(--accent)}.primary:hover:enabled{background:var(--dark)}.secondary{border-color:var(--line)}.secondary:hover:enabled,.quiet:hover:enabled{background:var(--tint)}
.focus-reader .workspace{display:block;min-height:0;height:100dvh}.focus-reader .reader{position:fixed;inset:0;height:100dvh;min-height:0;padding:0;overflow:hidden;background:var(--workspace)}
.focus-reader .score-stage{height:100%;min-height:0;max-height:none;width:100%;padding:6px;border:0;border-radius:0;background:var(--workspace);touch-action:pan-y pinch-zoom;-webkit-user-select:none;user-select:none}
.focus-reader .score-stage:not(.zoomed){overflow:hidden}.focus-reader .score-stage.zoomed{touch-action:pan-x pan-y pinch-zoom;padding:12px}.focus-reader .pages{gap:8px;align-self:center}.sheet{box-shadow:0 3px 25px #172a461c;contain:layout style}.sheet canvas{max-width:none}.focus-reader .empty-state{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:50px;min-height:0;box-shadow:0 20px 90px #21426b12}.empty-state h2{font-family:inherit}.empty-state .primary{background:var(--accent);color:white}.empty-state p,.empty-state small,.empty-kicker{color:var(--muted)}
.edge-reveal{position:fixed;z-index:120;background:var(--surface);color:var(--accent);box-shadow:0 2px 14px #132e5420;border:1px solid var(--line);opacity:.64;min-width:44px;min-height:44px;transition:opacity .15s}.edge-reveal:hover,.edge-reveal:focus-visible{opacity:1}.shelf-reveal{top:50%;left:max(4px,env(safe-area-inset-left));border-radius:0 12px 12px 0;font-size:18px}.tools-reveal{left:50%;top:max(4px,env(safe-area-inset-top));transform:translateX(-50%);border-radius:0 0 12px 12px;width:64px;font-size:26px;line-height:1}.tools-reveal:active{transform:translateX(-50%)}
.drawer-backdrop{position:fixed;inset:0;z-index:200;background:#0d1d3838;cursor:default}.focus-reader .sidebar{position:fixed;left:0;top:0;bottom:0;z-index:210;display:flex;flex-direction:column;gap:0;width:min(370px,90vw);max-height:100dvh;overflow:auto;padding:24px;padding-top:max(16px,env(safe-area-inset-top));transform:translateX(-105%);transition:transform .22s ease;box-shadow:20px 0 80px #0e254023;overscroll-behavior:contain;visibility:hidden}
.focus-reader.shelf-open .sidebar{transform:none;visibility:visible}.sidebar .drawer-heading{margin:0 0 24px}.drawer-heading{display:flex;justify-content:space-between;align-items:center;gap:14px;min-height:48px;color:var(--ink);font-size:14px;font-weight:600}.drawer-heading strong{font-size:24px;letter-spacing:-1px}.drawer-heading strong span{font-size:13px;font-weight:400;letter-spacing:0}.drawer-heading>div{display:flex;gap:8px}
.top-drawer{position:fixed;top:0;left:0;right:0;z-index:220;background:var(--surface);border:1px solid var(--line);border-top:0;border-radius:0 0 22px 22px;box-shadow:0 20px 70px #0e254028;padding:12px max(24px,env(safe-area-inset-right)) 22px max(24px,env(safe-area-inset-left));padding-top:max(12px,env(safe-area-inset-top));max-height:85dvh;overflow:auto;transform:translateY(-110%);visibility:hidden;transition:transform .22s ease;overscroll-behavior:contain}.tools-open .top-drawer{transform:none;visibility:visible}.top-drawer>.drawer-heading{border-bottom:1px solid var(--line)}
.top-drawer .topbar{display:none}.top-drawer .reader-toolbar{min-height:58px}.top-drawer .reader-location .eyebrow{color:var(--accent)}.top-drawer .reader-location #page-label{color:var(--muted);font-variant-numeric:tabular-nums}.icon-button{min-height:44px;min-width:44px}.icon-button.selected,.ink-tools button.selected,.library-group.selected{background:var(--lime);color:var(--accent);box-shadow:none}.top-drawer .edition-toolbar{background:var(--tint);border:0;border-radius:12px;padding:12px 16px}.edition-toolbar p{font-size:12px}.ink-toolbar small{color:var(--muted)}.top-drawer .page-navigation{padding:10px 0;justify-content:center;gap:24px;border-top:1px solid var(--line)}.page-navigation .secondary{min-height:44px}.page-navigation input{background:var(--surface);border-color:var(--line);min-width:64px;min-height:44px;font-size:16px}.top-drawer .listening-bar{background:var(--tint);border-color:var(--line);min-height:70px;padding:12px 16px}.listening-info p,.reader-footer,.reader-footer select{color:var(--muted)}.mic-icon{background:var(--lime);color:var(--accent)}.listening-bar .primary{background:var(--accent);color:white}.reader-footer{min-height:42px}.settings-entry{color:var(--accent);margin-bottom:28px}.offline-status{font-size:12px;color:var(--muted);line-height:1.7;margin:10px 0 16px}.section-label,.text-button,.eyebrow,.step p,.score-card p{color:var(--muted)}.anchor.active,.library-category-card:hover{background:var(--tint);border-color:var(--line)}.library-category-card,.library-card{background:var(--surface);border-color:var(--line)}.sidebar>.section-label{display:flex}.sidebar .steps{display:block}.sidebar .step{display:flex}.sidebar .anchors{display:block;max-height:180px}.sidebar .anchor{width:100%}.sidebar .import-links{margin:13px 0 27px}.sidebar .score-card{padding:23px 0;margin-bottom:20px}.sidebar .score-card .eyebrow{display:inline}.sidebar .sidebar-bottom{display:flex}
dialog{background:var(--surface);border-color:var(--line);border-radius:20px;max-height:92dvh;overscroll-behavior:contain}dialog::backdrop{background:#12254277;backdrop-filter:none}dialog p,dialog li{color:var(--muted)}dialog h2{font-weight:600;letter-spacing:-.5px}.toast{z-index:250;background:var(--dark)}.render-status{background:var(--dark);pointer-events:none;font-size:12px;opacity:.9}
.settings-dialog{max-width:920px;padding:36px}.settings-dialog h2{margin-bottom:30px}.settings-layout{display:grid;grid-template-columns:1fr 1fr;gap:40px}.settings-layout h3{font-size:16px;margin:24px 0 12px}.settings-layout h3:first-child{margin-top:0}.settings-layout p{font-size:13px;line-height:1.8}.theme-choices{display:flex;gap:10px;margin:16px 0 30px}.theme-choices button{flex:1;padding:14px 8px;border:1px solid var(--line);border-radius:12px;background:transparent;color:var(--ink);font-size:13px;display:flex;flex-direction:column;align-items:center;gap:10px}.theme-choices i{width:26px;height:26px;border-radius:50%;background:var(--swatch)}.theme-choices [aria-pressed=true]{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);background:var(--tint)}.setting-row{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:16px 0;border-bottom:1px solid var(--line);line-height:1.6}.setting-row span{font-size:14px}.setting-row small{display:block;color:var(--muted);font-size:12px;line-height:1.7;margin-top:4px}.setting-row input[type=checkbox]{width:22px;height:22px;flex-shrink:0}.setting-row select{max-width:160px;border:1px solid var(--line);border-radius:8px;background:white;color:var(--ink);padding:10px;font-size:13px}.settings-dialog>.primary{margin-top:26px;float:right;min-width:100px}.settings-note{padding:14px;background:var(--tint);border-radius:10px}.offline-list{max-height:240px;overflow:auto;margin-bottom:14px}.offline-item{display:flex;gap:12px;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding:12px 0;font-size:13px;line-height:1.6}.offline-item span{overflow-wrap:anywhere}.offline-item small{color:var(--muted);display:block}.offline-item .quiet{flex-shrink:0;color:var(--accent)}.gesture-guide{display:grid;grid-template-columns:2fr 1fr 2fr;background:var(--tint);border-radius:12px;margin:20px 0;text-align:center;color:var(--accent);font-size:13px}.gesture-guide span{padding:20px 8px;align-content:center}.gesture-guide span+span{border-left:1px solid var(--line)}
/* Performance has no permanent navigation, status or exit menu. */
body.focus-reader.performance-mode .reader{padding:0;background:#10151d;z-index:100}body.focus-reader.performance-mode .score-stage{padding:6px;background:#10151d}body.performance-mode .edge-reveal{visibility:hidden;pointer-events:none}body.performance-mode .top-drawer{background:#172131;border-color:#344158;color:#e5edf9;max-height:44dvh}body.performance-mode .top-drawer>:not(.drawer-heading):not(.page-navigation){display:none!important}body.performance-mode .top-drawer .drawer-heading{color:#dce7f9;border-color:#344158}body.performance-mode .drawer-heading [data-open-settings]{display:none}body.performance-mode .top-drawer .page-navigation{display:flex;margin:8px 0;padding:8px 0;gap:18px;border:0}body.performance-mode .page-navigation .secondary{background:#24334b;border-color:#405472}body.performance-mode .page-navigation .secondary:hover:enabled{background:#314563}body.performance-mode #performance-exit{color:#dce7f9}body.performance-mode #performance-follow-status{color:#9eb4d5}#performance-error:not([hidden]){position:fixed;z-index:230;bottom:max(12px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:max-content;max-width:90vw;padding:12px 18px;border-radius:10px;background:#573c1c;color:#fff0d7;font-size:14px;text-align:center;pointer-events:none}
@media(max-width:650px){.settings-dialog{padding:26px 20px}.settings-layout{grid-template-columns:1fr;gap:28px}.top-drawer{padding-left:16px;padding-right:16px}.top-drawer .reader-location .eyebrow{display:none}.top-drawer .page-navigation{gap:14px}.focus-reader .empty-state{padding:32px;max-width:90vw}.focus-reader .sidebar{padding:20px}.library-body{grid-template-columns:110px minmax(0,1fr)}.reader-footer{flex-wrap:wrap}.edge-reveal{opacity:.52}}
@media(prefers-reduced-motion:reduce){.top-drawer,.focus-reader .sidebar{transition:none}}

/* Match the actual window, including iPad fullscreen safe-area transitions.
   Home Screen uses a sized document; only paper and tool containers scroll. */
:root{--reader-height:100%;--reader-width:100%;--reader-background:var(--workspace);background:var(--reader-background)}
:root.performance-active{--reader-background:#10151d;color-scheme:dark}
/* A stable Home Screen background is present before the PDF/application loads.
   A browser/system inset must not expose the old pale launch colour. */
:root.home-screen{--reader-background:#10151d;--reader-height:100vh}
html{width:100%;height:100%;min-height:0;overflow:hidden;overscroll-behavior:none}
html:fullscreen,html:-webkit-full-screen{width:100%;height:100%;margin:0;padding:0;background:var(--reader-background)}
body.focus-reader,body.focus-reader.performance-mode{position:fixed;inset:0;width:100%;height:auto;min-height:0;margin:0;padding:0;background:var(--reader-background);overflow:hidden;overscroll-behavior:none}
/* Home Screen must not use WebKit's viewport-fixed compositor for its shell.
   Increasing a fixed shell's height alone can still clip it above the bottom
   safe area. Size the document itself and anchor the reader to that document. */
html.home-screen{position:relative;width:var(--reader-width);height:var(--reader-height);min-height:var(--reader-height)}
html.home-screen body.focus-reader{position:relative;inset:auto;width:var(--reader-width);height:var(--reader-height)}
.viewport-probe{position:fixed;inset:0;width:auto;height:auto;visibility:hidden;pointer-events:none;contain:strict}
.focus-reader .workspace{width:var(--reader-width);height:var(--reader-height);min-height:0;background:var(--reader-background)}
body.focus-reader .reader,body.focus-reader.performance-mode .reader{inset:0 auto auto 0;width:var(--reader-width);height:var(--reader-height);min-height:0;max-height:none;padding:0;background:var(--reader-background)}
html.home-screen body.focus-reader .reader,html.home-screen body.focus-reader.performance-mode .reader{position:absolute}
body.focus-reader .score-stage{height:100%;min-height:0;max-height:none;background:var(--reader-background)}
.focus-reader .sidebar{height:var(--reader-height);max-height:var(--reader-height);bottom:auto}
.top-drawer{max-height:calc(var(--reader-height) * .85)}
body.performance-mode .top-drawer{max-height:calc(var(--reader-height) * .44)}
.viewport-details{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-top:18px;font-size:13px}.viewport-details summary{cursor:pointer;min-height:32px;align-content:center}.viewport-details pre{font:12px/1.8 -apple-system,BlinkMacSystemFont,sans-serif;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--muted);margin:12px 0}.viewport-details .secondary{font-size:12px;padding:8px 12px}
.screen-calibration{margin-top:24px}.screen-calibration>label{display:flex;justify-content:space-between;gap:12px;margin-top:16px;font-size:13px}.screen-calibration output{font-variant-numeric:tabular-nums;color:var(--muted)}.screen-calibration input[type=range]{display:block;width:100%;min-height:44px;margin:8px 0;touch-action:pan-y}.screen-calibration>.secondary{font-size:12px}

/* A small, task-specific top drawer; preparation lives in the left shelf. */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
body.focus-reader>.topbar{display:none}
.top-drawer{padding:18px 26px 12px;border-radius:0 0 20px 20px}
.top-drawer>.drawer-heading{padding-bottom:10px;border:0;align-items:center}
.top-drawer>.drawer-heading>div{display:grid;gap:5px;min-width:0}
.top-drawer #reader-title{font-size:18px;font-weight:600;letter-spacing:0;line-height:1.6;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top-drawer #reader-meta{font-size:11px;color:var(--muted);font-weight:400}
.top-drawer .drawer-collapse{width:40px;min-width:40px;height:40px;min-height:40px;padding:0;border-radius:50%;display:grid;place-items:center;font-size:20px;color:var(--muted)}
.top-drawer .reader-toolbar{padding:16px 0;min-height:0;gap:14px}
.view-controls,.reader-mode-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.view-segments{display:flex;background:var(--tint);padding:3px;border-radius:11px;gap:3px}
.view-segments button{min-width:64px;border-radius:8px}
.view-segments .selected{background:var(--surface);color:var(--accent);box-shadow:0 1px 5px #182e4717}
.zoom-control{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px}
.zoom-control select{padding:10px 12px;min-height:44px;border:1px solid var(--line);border-radius:9px;color:var(--ink);background:var(--surface);font-size:14px}
.reader-mode-actions button{min-height:44px;padding:10px 16px}
.top-drawer .edition-toolbar{background:transparent;padding:0;margin:0;border-radius:0}
.edition-toolbar strong,.edition-toolbar #edition-hint{display:none}
.edition-toolbar select{min-height:44px!important;background:var(--tint);border:0!important;border-radius:9px!important;font-size:13px!important}
.edition-toolbar label{color:var(--muted);font-size:13px}
.edition-toolbar .library-open-status:not(.error){display:none}
.top-drawer .page-navigation{margin:0;padding:10px 0 0;border-top:1px solid var(--line);gap:24px}
.page-navigation .secondary{font-size:14px;padding:10px 16px}
.focus-reader .sidebar{width:min(350px,90vw);padding:24px}
.sidebar .drawer-heading{margin-bottom:20px}.sidebar .library-entry{margin-bottom:10px}
.sidebar .score-card{border-top:1px solid var(--line);border-bottom:0;padding:20px 0 0;margin-bottom:14px}
.sidebar .score-card h1{font-size:16px;font-weight:600;line-height:1.8;margin:8px 0}
.sidebar .score-card p{font-size:12px}.sidebar .import-links{margin:12px 0 20px}
.sidebar #offline-save{font-size:13px;background:var(--tint);border:0;min-height:42px;padding:10px}
.sidebar .offline-status{font-size:11px;margin:8px 0 18px}
.practice-drawer{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:6px 0;font-size:14px}
.practice-drawer>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;min-height:44px;font-weight:600}
.practice-drawer>summary::-webkit-details-marker,.pencil-dock summary::-webkit-details-marker{display:none}
.practice-drawer>summary>span:last-child,.bookmark-bar>summary>span:last-child,.pdf-outline>summary>span:last-child{font-size:20px;color:var(--muted);transition:transform .16s}
.practice-drawer[open]>summary>span:last-child,.bookmark-bar[open]>summary>span:last-child,.pdf-outline[open]>summary>span:last-child{transform:rotate(90deg)}
.practice-content{padding-top:18px}.practice-intro{font-size:12px;line-height:1.8;color:var(--muted);margin-bottom:12px}
.learning-actions{display:flex;gap:8px}.learning-actions button{flex:1;padding:10px;font-size:13px}
.practice-content .reference-panel{margin:14px 0;padding:12px;background:var(--tint);border:0}
.practice-content .reference-heading{flex-direction:column;gap:6px}.practice-content .reference-actions button{font-size:12px;padding:8px 10px}
.practice-content .listening-bar{margin-top:16px;padding:14px;background:var(--tint);border:0;display:block;min-height:0}
.practice-content .listening-info{gap:8px}.practice-content .listening-info p{line-height:1.7}.practice-content .mic-icon{display:none}.practice-content .meter{display:none}
.practice-content .listening-bar .primary{margin-top:12px;width:100%}
.practice-content .reader-footer{display:flex;flex-wrap:wrap;gap:8px;min-height:0;padding:10px 0;color:var(--muted)}
.practice-content .reader-footer>span:last-child{display:none}
.anchor-details{margin-top:8px;color:var(--muted);font-size:12px}.anchor-details>summary{cursor:pointer;min-height:36px;align-content:center}
.shelf-actions{padding-top:14px;display:grid;gap:4px}.shelf-actions button{display:flex;justify-content:space-between;font-size:13px;text-align:left;padding:12px 0}
.sidebar .sidebar-bottom{padding-top:20px;margin-top:auto}.sidebar-bottom p{font-size:11px;color:var(--muted)}
/* Pencil receives pointer events even before a tool is selected. One-finger
   movement is handled by the reader; native two-finger pinch remains available. */
body.focus-reader .sheet .ink-overlay{pointer-events:auto;touch-action:pinch-zoom;-webkit-touch-callout:none;user-select:none}
.pencil-dock{position:fixed;right:max(10px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));z-index:130;display:flex;flex-direction:column;gap:3px;padding:5px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:16px;box-shadow:0 4px 20px #18365525;opacity:.8;transition:opacity .15s}
.pencil-dock:hover,.pencil-dock:focus-within{opacity:1}.pencil-tool{background:transparent;border-radius:10px;min-width:48px;min-height:52px;padding:7px;display:flex;flex-direction:column;gap:3px;align-items:center;justify-content:center;color:var(--ink);font-size:11px}
.pencil-tool svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pencil-tool.selected{background:var(--lime);color:var(--accent)}
.pencil-dock summary{list-style:none;cursor:pointer;min-height:32px;min-width:48px;text-align:center;font-size:23px;line-height:24px;border-radius:8px;user-select:none}
.pencil-dock summary:hover{background:var(--tint)}
.pencil-options-panel{position:absolute;right:calc(100% + 10px);bottom:0;width:min(272px,calc(100vw - 92px));padding:18px;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:0 8px 32px #16345930;font-size:13px;line-height:1.7}
.pencil-options-panel>strong{display:block;margin-bottom:12px;font-size:15px}.pencil-options-panel>label{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.pencil-options-panel select{border:1px solid var(--line);border-radius:8px;padding:8px;background:white;color:var(--ink)}
.ink-history{display:flex;gap:8px}.ink-history button{flex:1;font-size:13px;padding:8px}
.pencil-options-panel p{font-size:12px;color:var(--muted);margin:10px 0;line-height:1.8}.pencil-options-panel small{font-size:11px;color:var(--muted)}
.pencil-feedback{position:absolute;right:calc(100% + 10px);bottom:50px;width:max-content;max-width:calc(100vw - 100px);padding:10px 14px;background:var(--dark);color:white;border-radius:10px;font-size:12px;line-height:1.6;pointer-events:none}
body.performance-mode .pencil-dock,body.shelf-open .pencil-dock,body.tools-open .pencil-dock{display:none!important}
/* Fit screen covers both dimensions. Horizontal excess is centered and clipped;
   taller pages remain vertically accessible instead of cutting off lower staves. */
body.focus-reader .score-stage.screen-fit,body.focus-reader.performance-mode .score-stage.screen-fit{display:block;padding:0;overflow-x:hidden;overflow-y:auto;touch-action:pinch-zoom;scrollbar-width:none}
.score-stage.screen-fit::-webkit-scrollbar{display:none}
body.focus-reader .pages.screen-fit{gap:0;min-height:100%;align-items:flex-start;width:100%;justify-content:center}
.pages.screen-fit .sheet{flex-shrink:0;box-shadow:none}
@media(max-width:650px){.top-drawer{padding:16px 18px 10px}.top-drawer #reader-title{font-size:15px}.top-drawer .reader-toolbar{gap:10px}.view-controls{gap:8px}.view-segments button{min-width:52px;padding:8px}.zoom-control{gap:5px}.zoom-control select{padding:8px}.reader-mode-actions{width:100%;justify-content:flex-end}.top-drawer .page-navigation{gap:10px}.top-drawer .page-navigation .secondary{padding:8px 10px}}
/* Tools and their hit targets use the same full-size document as the paper. */
html.home-screen body.focus-reader .edge-reveal,
html.home-screen body.focus-reader .sidebar,
html.home-screen body.focus-reader .top-drawer,
html.home-screen body.focus-reader .drawer-backdrop,
html.home-screen body.focus-reader .pencil-dock,
html.home-screen body.focus-reader #performance-error,
html.home-screen body.focus-reader .toast{position:absolute}
.dock-drag{touch-action:none;cursor:grab;min-height:32px;padding:0 8px;font-size:22px;line-height:1;border-radius:10px;background:transparent;color:var(--muted);user-select:none;-webkit-touch-callout:none}
.pencil-dock.dragging{opacity:1;box-shadow:0 8px 28px #18365540}.pencil-dock.dragging .dock-drag{cursor:grabbing}
.pencil-dock[data-side=left] .pencil-options-panel,.pencil-dock[data-side=left] .pencil-feedback{right:auto;left:calc(100% + 10px)}
.pencil-dock[data-vertical=top] .pencil-options-panel{bottom:auto;top:0}
.pencil-dock[data-vertical=top] .pencil-feedback{bottom:auto;top:50px}
#fit-check-status{padding:12px;border-radius:10px;background:var(--tint);font-size:12px}
/* Zoom belongs to the paper, never to the app viewport or drawers. */
body.focus-reader .score-stage,
body.focus-reader .score-stage.screen-fit,
body.focus-reader .score-stage.zoomed,
body.focus-reader.performance-mode .score-stage,
body.focus-reader .sheet .ink-overlay{touch-action:none}
body.focus-reader .score-stage:not(.zoomed){display:flex;align-items:flex-end;justify-content:center;padding:0;overflow:hidden}
body.focus-reader .pages:not(.zoomed){min-height:0;align-self:flex-end;align-items:flex-end;width:100%;flex-shrink:0}
body.focus-reader .score-stage.zoomed{display:block;padding:0;overflow:auto}
body.focus-reader .pages.zoomed{min-height:100%;min-width:100%;width:max-content;justify-content:flex-start;align-items:flex-end}
body.focus-reader .sheet{overflow:hidden;flex-shrink:0}
.paper{line-height:0}.paper .ink-overlay{position:absolute;inset:0;width:100%;height:100%}
/* Form fields never trigger iPad's automatic focus zoom. Menus can still scroll. */
.sidebar,.top-drawer,dialog{touch-action:pan-y}
.sidebar input,.sidebar select,.top-drawer input,.top-drawer select,dialog input,dialog select,dialog textarea{font-size:16px!important}
/* Local-only settings do not need account or trusted-device controls. */
/* Idle chrome: the handles and the pencil dock tuck back into their edge so nothing floats over the music. */
.edge-reveal,.pencil-dock{transition:opacity .18s ease,transform .18s ease}
body:not(.chrome-idle) .edge-reveal,body:not(.chrome-idle) .pencil-dock{opacity:1}
body.chrome-idle .edge-reveal,body.chrome-idle .pencil-dock{opacity:0;transition:opacity .3s ease,transform .3s ease}
body.chrome-idle .shelf-reveal{transform:translateX(calc(-100% - 8px))}
body.chrome-idle .tools-reveal{transform:translate(-50%,calc(-100% - 8px))}
body.chrome-idle .pencil-dock[data-side=right]{transform:translateX(calc(100% + 14px))}
body.chrome-idle .pencil-dock[data-side=left]{transform:translateX(calc(-100% - 14px))}
/* A tucked control keeps a hit area on the edge it slid behind, so one touch slides it back out. */
body.chrome-idle .edge-reveal::after,body.chrome-idle .pencil-dock::after{content:'';position:absolute}
body.chrome-idle .shelf-reveal::after{left:100%;width:48px;top:-10px;bottom:-10px}
body.chrome-idle .tools-reveal::after{top:100%;height:48px;left:-10px;right:-10px}
body.chrome-idle .pencil-dock[data-side=right]::after{right:100%;width:56px;top:0;bottom:0}
body.chrome-idle .pencil-dock[data-side=left]::after{left:100%;width:56px;top:0;bottom:0}
/* Anything in use stays out on screen at full strength. */
body.chrome-idle .edge-reveal:hover,body.chrome-idle .edge-reveal:focus-visible,
body.chrome-idle .pencil-dock.dragging,body.chrome-idle .pencil-dock:has(details[open]),
body.chrome-idle .pencil-dock:has(.pencil-feedback:not([hidden])){opacity:1;transition:opacity .18s ease,transform .18s ease}
body.chrome-idle .shelf-reveal:hover,body.chrome-idle .shelf-reveal:focus-visible,
body.chrome-idle .pencil-dock.dragging,body.chrome-idle .pencil-dock:has(details[open]),
body.chrome-idle .pencil-dock:has(.pencil-feedback:not([hidden])){transform:none}
body.chrome-idle .tools-reveal:hover,body.chrome-idle .tools-reveal:focus-visible{transform:translateX(-50%)}
@media(prefers-reduced-motion:reduce){
  .edge-reveal,.pencil-dock{transition:none}
  body.chrome-idle .shelf-reveal,body.chrome-idle .pencil-dock{transform:none}
  body.chrome-idle .tools-reveal{transform:translateX(-50%)}
}
/* The paper colour is the reader's own setting; performance mode and the home screen keep their dark stage. */
:root[data-surface=white]:not(.performance-active):not(.home-screen){--reader-background:#fff}
:root[data-surface=paper]:not(.performance-active):not(.home-screen){--reader-background:#f6efe2}
:root[data-surface=mist]:not(.performance-active):not(.home-screen){--reader-background:var(--workspace)}
:root[data-surface=dark]:not(.performance-active):not(.home-screen){--reader-background:#10151d}
.surface-choices{margin-bottom:8px}
/* Drawers leave the screen the way they arrived: visibility waits for the slide to finish. */
.focus-reader .sidebar{transition:transform .26s cubic-bezier(.32,.72,0,1),visibility 0s linear .26s}
.focus-reader.shelf-open .sidebar{transition:transform .26s cubic-bezier(.32,.72,0,1),visibility 0s}
.top-drawer{transition:transform .26s cubic-bezier(.32,.72,0,1),visibility 0s linear .26s}
.tools-open .top-drawer{transition:transform .26s cubic-bezier(.32,.72,0,1),visibility 0s}
.drawer-backdrop{opacity:0;transition:opacity .26s ease}
.shelf-open .drawer-backdrop,.tools-open .drawer-backdrop{opacity:1}
/* Recently played scores, in the shelf where you go to change score. */
.recent-scores{margin:4px 0 18px}
.recent-scores .section-label{margin-bottom:8px}
.recent-list{display:grid;gap:6px;max-height:210px;overflow:auto;overscroll-behavior:contain}
.recent-item{display:flex;align-items:baseline;justify-content:space-between;gap:12px;width:100%;min-height:40px;padding:8px 12px;border:0;border-radius:10px;background:var(--tint);color:var(--ink);font-size:13px;text-align:left}
.recent-item:hover:enabled{background:var(--lime)}
.recent-item:disabled{opacity:.6}
.recent-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.recent-item small{flex:none;color:var(--muted);font-size:11px}
@media(prefers-reduced-motion:reduce){
  .focus-reader .sidebar,.focus-reader.shelf-open .sidebar,.top-drawer,.tools-open .top-drawer{transition:none}
  .drawer-backdrop{transition:none}
}
/* Deploying the reader to a device: only the app shell is stored here. */
#deploy-dialog{max-width:min(560px,92vw)}
.deploy-step{margin:18px 0;padding-top:16px;border-top:1px solid var(--line)}
.deploy-step strong{display:block;margin-bottom:10px;font-size:13px;color:var(--accent)}
.deploy-bar{height:8px;border-radius:99px;background:var(--tint);overflow:hidden}
.deploy-bar i{display:block;width:0;height:100%;border-radius:99px;background:var(--accent);transition:width .2s ease}
#offline-deploy{margin-bottom:12px}
/* The top drawer is about the score in front of you: a slider replaces page buttons that only repeated a tap. */
.page-scrubber{flex:1;min-width:0;display:flex;align-items:center;gap:14px}
#page-range{flex:1;min-width:120px;height:32px;accent-color:var(--accent);background:transparent}
#page-range:disabled{opacity:.4}
body:not(.performance-mode) .top-drawer .page-navigation #prev-button,
body:not(.performance-mode) .top-drawer .page-navigation #next-button{display:none}
body.performance-mode .page-scrubber{display:none}
.top-drawer #score-card{border:0;border-top:1px solid var(--line);border-radius:0;padding:14px 0 4px;margin:0}
.top-drawer #score-card h1{font-size:16px;font-weight:600;margin:6px 0}
.top-drawer #score-card p{font-size:12px}
.top-drawer #offline-save{font-size:13px;background:var(--tint);border:0;min-height:40px;padding:9px;width:auto;min-width:220px}
.top-drawer #practice-drawer{border-top:1px solid var(--line);padding-top:10px}
body.performance-mode .top-drawer #score-card,body.performance-mode .top-drawer #practice-drawer{display:none!important}
/* The pencil dock carries its own undo, and each tool opens its own settings. */
.pencil-dock .pencil-tool:disabled{opacity:.35}
.pencil-popover summary{list-style:none;cursor:pointer;min-height:26px;min-width:48px;text-align:center;font-size:20px;line-height:20px;border-radius:8px;color:var(--muted);user-select:none}
.pencil-popover summary:hover{background:var(--tint)}
.ink-swatches{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:8px 0 12px}
.ink-swatches button{width:100%;min-height:34px;border:2px solid transparent;border-radius:9px;background:var(--swatch)}
.ink-swatches button[aria-pressed=true]{border-color:var(--ink);box-shadow:0 0 0 2px var(--surface) inset}
.ink-size{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--muted)}
.ink-size input{flex:1;min-width:90px;accent-color:var(--accent)}

/* One compact, continuous toolbar row for score controls and page scrubbing. */
.top-drawer .reader-toolbar{display:flex;flex-wrap:nowrap;align-items:center;gap:clamp(6px,1.2vw,14px);min-width:0;overflow:hidden}
.top-drawer .view-controls{flex:0 0 auto;flex-wrap:nowrap;gap:6px;min-width:0}
.top-drawer .view-segments{flex-wrap:nowrap;gap:2px;padding:2px;border-radius:10px}
.top-drawer .view-segments button{width:42px;min-width:42px;height:42px;min-height:42px;padding:8px;display:grid;place-items:center}
.top-drawer .view-segments svg,.reader-mode-actions svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.top-drawer .zoom-control{flex:0 0 auto;display:block}
.top-drawer .zoom-control select{max-width:82px;min-height:42px;padding:7px 22px 7px 9px;border:1px solid var(--line);border-radius:9px;background-color:var(--surface);color:var(--ink);font-size:13px}
.top-drawer .page-scrubber{flex:1 1 160px;min-width:72px;gap:8px}
.top-drawer #page-range{min-width:40px;height:44px;margin:0;appearance:none;-webkit-appearance:none;touch-action:pan-x;cursor:pointer}
.top-drawer #page-range::-webkit-slider-runnable-track{height:5px;border-radius:99px;background:linear-gradient(90deg,var(--accent) var(--page-progress,0%),color-mix(in srgb,var(--accent) 20%,var(--line)) var(--page-progress,0%))}
.top-drawer #page-range::-moz-range-track{height:5px;border-radius:99px;background:linear-gradient(90deg,var(--accent) var(--page-progress,0%),color-mix(in srgb,var(--accent) 20%,var(--line)) var(--page-progress,0%))}
.top-drawer #page-range::-webkit-slider-thumb{width:18px;height:18px;margin-top:-6.5px;border:3px solid var(--surface);border-radius:50%;background:var(--accent);box-shadow:0 1px 5px #10254238;-webkit-appearance:none}
.top-drawer #page-range::-moz-range-thumb{width:13px;height:13px;border:3px solid var(--surface);border-radius:50%;background:var(--accent);box-shadow:0 1px 5px #10254238}
.top-drawer #page-range:focus-visible{outline:0}
.top-drawer #page-range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent)}
.top-drawer .page-jump{display:flex;flex:0 0 auto;align-items:center;white-space:nowrap}
.top-drawer .page-jump input{width:3.4em;min-width:44px;min-height:40px;padding:5px 3px;text-align:center}
.top-drawer .page-navigation{display:none}
body.performance-mode .top-drawer .page-navigation{display:flex}
.top-drawer .reader-mode-actions{width:auto;flex:0 0 auto;flex-wrap:nowrap;justify-content:flex-end;gap:7px}
.top-drawer .reader-mode-actions button{width:44px;height:44px;min-height:44px;padding:10px;display:grid;place-items:center;border-radius:10px}
.top-drawer .reader-mode-actions #performance-open{background:var(--accent);color:white}

/* The close affordance remains reachable while long dialogs scroll. */
dialog{overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
dialog .dialog-close{position:sticky!important;top:8px;z-index:8;width:40px;height:40px;min-height:40px;margin:-20px -20px 8px auto;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--surface);color:var(--muted);display:grid;place-items:center;font-size:16px;line-height:1;box-shadow:0 2px 10px #10254218}
dialog .dialog-close:hover{background:var(--tint)}
.pencil-dock .pencil-tool{flex-direction:row;min-height:46px}
.pencil-dock .dock-export{margin-top:8px;padding-top:10px;border-top:1px solid var(--line);border-radius:0 0 10px 10px}
.pencil-dock .pencil-tool svg{flex:0 0 auto}
@media(max-width:650px){.top-drawer .reader-toolbar{gap:7px;padding:12px 0}.top-drawer .view-controls{gap:5px}.top-drawer .view-segments button{width:38px;min-width:38px;height:40px;min-height:40px;padding:7px}.top-drawer .zoom-control select{max-width:70px;min-height:40px;padding:6px 18px 6px 7px;font-size:12px}.top-drawer #page-range{height:40px}.top-drawer .reader-mode-actions{gap:4px}.top-drawer .reader-mode-actions button{width:40px;height:40px;min-height:40px;padding:8px}.top-drawer .page-scrubber{gap:5px}.top-drawer .page-navigation{display:none}}
@media(max-width:430px){.top-drawer .reader-mode-actions #fullscreen-button{display:none}.top-drawer #page-input{display:none}.top-drawer .page-jump #page-count{margin:0;font-size:11px}.top-drawer .view-segments button{width:36px;min-width:36px}}
.ink-size i{flex:none;width:var(--dot,6px);height:var(--dot,6px);max-width:22px;max-height:22px;border-radius:50%;background:var(--ink)}
/* Bookmarks: the pages you keep coming back to, one tap away. */
.pdf-outline{border-top:1px solid var(--line);padding:6px 0}
.pdf-outline>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;cursor:pointer;font-size:14px;font-weight:600}
.pdf-outline>summary::-webkit-details-marker{display:none}
.pdf-outline-list{display:grid;max-height:min(42vh,420px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:5px 2px 8px;scrollbar-gutter:stable}
.pdf-outline-item{--outline-depth:0;display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;min-height:38px;padding:7px 10px 7px calc(10px + var(--outline-depth)*18px);border:0;border-radius:9px;background:transparent;color:var(--ink);font-size:13px;text-align:left}
button.pdf-outline-item:hover{background:var(--tint)}
.pdf-outline-item.group{font-weight:650}
.pdf-outline-item.current{background:var(--lime)}
.pdf-outline-item span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pdf-outline-item small{flex:none;color:var(--muted);font-size:11px;font-variant-numeric:tabular-nums}
.bookmark-bar{border-top:1px solid var(--line);padding:6px 0}
.bookmark-bar>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;cursor:pointer;font-size:14px;font-weight:600}
.bookmark-bar>summary::-webkit-details-marker{display:none}
.bookmark-content{padding:8px 0 4px}
.bookmark-add{display:flex;gap:8px;align-items:center}
#bookmark-label{flex:1;min-width:0;min-height:40px;padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink)}
#bookmark-add{flex:none;min-height:40px;padding:8px 14px;white-space:nowrap}
.bookmark-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;max-height:104px;overflow:auto;overscroll-behavior:contain}
.bookmark-list .muted{margin:2px 0;font-size:12px}
.bookmark{display:inline-flex;align-items:center;border-radius:999px;background:var(--tint);overflow:hidden}
.bookmark.current{background:var(--lime)}
.bookmark-go{min-height:34px;padding:6px 6px 6px 14px;border:0;background:transparent;color:var(--ink);font-size:13px;max-width:210px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bookmark-remove{min-height:34px;min-width:30px;padding:0 10px 0 4px;border:0;background:transparent;color:var(--muted);font-size:12px;line-height:1}
.bookmark-go:hover,.bookmark-remove:hover{background:#00000010}
body.performance-mode .top-drawer .bookmark-add{display:none}
body.performance-mode .top-drawer .bookmark-bar{border:0;padding:6px 0 0}
/* MIDI listening sits with the score's own information, in the top drawer. */
.midi-bar{border-top:1px solid var(--line);padding:12px 0 4px}
.midi-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
#midi-play{flex:none;min-height:40px;padding:8px 16px;white-space:nowrap}
#midi-pick{flex:none;max-width:44%;min-height:40px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink)}
#midi-seek{flex:1;min-width:120px;height:32px;accent-color:var(--accent);background:transparent}
.midi-time{flex:none;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
#midi-status:empty{display:none}
#midi-status{margin:8px 0 0;font-size:12px}
body.performance-mode .top-drawer .midi-bar{display:none}
/* Choosing a folder on this device is a way to change score, so it lives on the shelf. */
.local-folder{margin:4px 0 18px}
.local-folder .section-label{margin-bottom:8px}
#local-folder{font-size:13px;min-height:42px}
#local-folder-status{margin:8px 0 0}
#local-folder-status:empty{display:none}

/* The one thing a newcomer needs before the app can do anything: what folder to point it at. */
.folder-intro{margin-top:.75rem;font-size:.82rem;line-height:1.55;color:var(--muted)}
.folder-intro p{margin:0 0 .5rem}
.folder-intro summary{cursor:pointer;color:var(--ink);font-weight:600}
.folder-intro pre{margin:.5rem 0;padding:.5rem .6rem;border-radius:.5rem;background:rgba(127,127,127,.12);
  font-size:.72rem;line-height:1.5;white-space:pre;overflow-x:auto}
.folder-intro ul{margin:.4rem 0 0;padding-left:1.1rem}
.folder-intro li{margin:.3rem 0}
.folder-intro a{color:inherit}

/* The tool button is its own settings button: hold it. The summary stays for the details
   element to work, but it has nothing left to show. */
.pencil-dock .pencil-popover>summary{display:none}
.pencil-options-panel .popover-hint{margin:-6px 0 12px;font-size:11px;color:var(--muted)}
.pencil-tool[disabled]{opacity:.38}

/* .empty-state small is display:block, which would otherwise outrank [hidden]. */
.empty-state small[hidden]{display:none}
.empty-state small .text-button{font-size:inherit;color:inherit;padding:0}

/* Kept outside the drawers so the three-second cue survives hidden chrome. */
.turn-cue{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:260;width:min(340px,calc(100vw - 40px));padding:12px 16px;border:1px solid rgba(255,255,255,.25);border-radius:16px;background:rgba(24,51,80,.95);color:white;box-shadow:0 6px 28px #0003;pointer-events:none;font-size:14px}
#turn-cue:not([hidden])~#toast{visibility:hidden}
.turn-cue[hidden]{display:none}.turn-cue>div{display:flex;align-items:center;justify-content:space-between;gap:14px}.turn-cue strong{font-size:20px;font-variant-numeric:tabular-nums;white-space:nowrap}.turn-cue progress{display:block;width:100%;height:5px;margin-top:9px;border:0;border-radius:4px;overflow:hidden;appearance:none;background:#ffffff30;color:#bada86}.turn-cue progress::-webkit-progress-bar{background:#ffffff30}.turn-cue progress::-webkit-progress-value{background:#bada86}.turn-cue progress::-moz-progress-bar{background:#bada86}.turn-cue.paused{background:rgba(55,62,70,.95)}.turn-cue.paused progress{opacity:.5}.turn-map-actions{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}#midi-learn{margin-top:8px}

.anchor-time-edit{width:88px;min-height:36px;border:1px solid var(--line);border-radius:8px;padding:5px;color:var(--ink);background:var(--surface);font-variant-numeric:tabular-nums}.anchor{flex-wrap:wrap}