:root{--ink:#2e312a;--muted:#777a70;--accent:#993f36;--line:#e1e2d9;--bg:#f7f7f1;--paper:#fffefa;--mono:ui-monospace,'SFMono-Regular',Menlo,Consolas,'Liberation Mono',monospace;--tab-size:14px;--lh:21px;--ch:8.4px}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:14px -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}button,input,textarea{font:inherit}button,a,input,summary{touch-action:manipulation}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:4px}a{color:inherit}button{color:inherit}button:disabled{opacity:.55;cursor:wait}button:hover{filter:brightness(.96)}[hidden]{display:none!important}
.sidebar{position:fixed;inset:0 auto 0 0;width:254px;padding:35px 23px 22px;border-right:1px solid var(--line);display:flex;flex-direction:column;background:#f0f1e9;z-index:5}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:600 31px Georgia,serif;letter-spacing:-1.5px}.brand img{width:34px;height:34px}.brand-dot{color:var(--accent)}.brand-caption{font-size:11px;color:var(--muted);margin:13px 0 34px;letter-spacing:.1px}.open-button{border:0;background:var(--accent);color:#fffefa;border-radius:6px;padding:12px 17px;font-size:13px;font-weight:600;display:flex;gap:9px;align-items:center;justify-content:center}.open-button>span{font-size:19px;line-height:1}.library-label{font-size:9px;font-weight:600;color:var(--muted);letter-spacing:1.7px;margin:37px 0 17px}.piece{width:100%;text-align:left;display:flex;align-items:start;gap:12px;background:transparent;border:1px solid transparent;border-radius:6px;padding:17px 11px;margin-bottom:5px}.piece-index{font:11px var(--mono);color:#9a9d91;padding-top:3px}.piece strong{font:17px Georgia,serif;display:block;margin-bottom:6px}.piece small{font-size:10px;display:block;color:var(--muted)}.piece em{font-size:9px;display:block;margin-top:6px;font-style:normal;color:#96998f}.piece.active{background:#fffefa;border-color:#e4e4d9;box-shadow:0 2px 4px #31352503}.piece.active strong,.piece.active .piece-index{color:var(--accent)}.playing-dot{margin-left:auto;color:var(--accent);font-size:7px;padding-top:7px;visibility:hidden}.active .playing-dot{visibility:visible}.sidebar-note{margin-top:48px;padding:0 11px}.note-glyph{font:36px Georgia,serif;color:#92978a}.sidebar-note p{font:italic 23px/1.3 Georgia,serif;margin:12px 0 13px}.sidebar-note small{font-size:10px;line-height:1.8;color:var(--muted)}.sidebar-bottom{font-size:9px;color:var(--muted);margin-top:auto;padding-top:32px;display:flex;align-items:center;gap:7px}.local-dot{width:5px;height:5px;background:#7d8d71;border-radius:50%}
main{margin-left:254px;min-width:0}.topbar{height:73px;padding:0 48px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;font-size:9px;font-weight:600;letter-spacing:1.7px;color:var(--muted)}.text-button{background:transparent;border:0;color:var(--muted);font-size:11px;letter-spacing:0;font-weight:400}.text-button span{margin-left:7px}.page-content{max-width:1650px;margin:0 auto;padding:42px 48px 24px}.eyebrow{font-size:9px;letter-spacing:1.9px;font-weight:600;color:var(--accent)}h1{font:normal clamp(29px,3.6vw,48px)/1.14 Georgia,serif;letter-spacing:-1px;margin:14px 0 11px}#subtitle{font-size:13px;color:var(--muted);margin:0}#subtitle span{padding:0 9px}.score-meta{display:flex;gap:9px;flex-wrap:wrap;margin:23px 0 31px}.meta-chip{font:10px var(--mono);padding:5px 9px;border:1px solid var(--line);border-radius:3px;color:#6e7367;background:#f4f5ee}.toolbar{display:flex;align-items:center;justify-content:space-between;padding:13px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);gap:15px}.view-switch{padding:3px;background:#eceedf;border-radius:5px;display:flex}.view-switch button{padding:6px 16px;border:0;background:transparent;font-size:11px;color:var(--muted);border-radius:3px}.view-switch .selected{background:var(--paper);box-shadow:0 1px 4px #1e281015;color:var(--ink)}.toolbar-controls{display:flex;align-items:center;gap:25px}.font-control{display:flex;align-items:center;gap:9px;font-family:Georgia,serif;font-size:11px;color:#62685c}.large-a{font-size:17px}.font-control input{width:83px;height:3px;accent-color:var(--accent)}.annotation-toggle{font-size:11px;display:flex;align-items:center;gap:6px;color:#62685c}.annotation-toggle input{accent-color:var(--accent);width:12px;height:12px}.focus-button{background:transparent;border:0;font-size:16px;display:flex;align-items:center;gap:6px}.focus-button span{font-size:11px;color:#62685c}.reading-status{display:flex;align-items:center;justify-content:space-between;font-size:10px;color:var(--muted);padding:19px 0 15px;gap:12px}#wrap-note{display:flex;align-items:center;gap:6px}.status-dot{width:5px;height:5px;background:#798975;border-radius:50%}
.score-paper{background:var(--paper);border:1px solid #dedfd4;border-radius:7px;box-shadow:0 3px 6px #30362203;padding:29px 24px 20px;min-height:220px;overflow:hidden}.system-row{margin-bottom:25px;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:#cbd0be transparent;border-bottom:1px solid #f0f0e6;padding:0 0 13px}.system-content{width:max-content;min-width:100%;display:flex;align-items:stretch;padding-left:calc(var(--ch) * 3);position:relative}.string-labels{position:absolute;left:0;color:#898d7f;white-space:pre;font:var(--tab-size)/var(--lh) var(--mono);top:calc(var(--above) * var(--lh));margin:0}.measure-group{position:relative;width:calc(var(--cols) * var(--ch));height:calc((var(--above) + 6 + var(--below)) * var(--lh));flex:none}.measure-group:hover{background:#f8f7ef}.staff-string,.annotation{position:absolute;font:var(--tab-size)/var(--lh) var(--mono);white-space:pre;letter-spacing:0;font-variant-ligatures:none;height:var(--lh);margin:0}.staff-string{color:#34382d;left:calc(var(--x) * var(--ch));top:calc((var(--above) + var(--lane)) * var(--lh))}.annotation{color:#8c5b4b;left:calc(var(--x) * var(--ch));top:calc(var(--lane) * var(--lh))}.annotation.below{color:#79806c}.row-number{font:9px var(--mono);color:#a0a48f;margin:0 0 7px}.section-heading{font:22px Georgia,serif;margin:23px 0 9px}.section-description{white-space:pre-wrap;font:11px/1.8 var(--mono);color:var(--muted);margin-bottom:20px}.scroll-hint{font-size:9px;color:var(--accent);padding:6px 0 0}.original{font:var(--tab-size)/var(--lh) var(--mono);font-variant-ligatures:none;background:var(--paper);border:1px solid var(--line);padding:25px;overflow:auto;max-height:none;margin:0;border-radius:7px;tab-size:8}.details-area{margin-top:20px}.details-area details{border-bottom:1px solid var(--line);padding:15px 0}.details-area summary{font-size:11px;cursor:pointer;color:#6d7366}.details-area pre{font:11px/1.7 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere;color:var(--muted)}.details-area ul{font-size:11px;line-height:1.8;color:var(--muted);padding-left:20px}.page-footer{display:flex;justify-content:space-between;gap:15px;padding:28px 0 10px;font-size:9px;color:#8a8f7f}.page-footer a{text-decoration:none}.focus-mode .sidebar{display:none}.focus-mode main{margin-left:0}.focus-mode .page-content{max-width:none}.error{background:#f4e5df;color:#873b2f;border-radius:5px;padding:13px;margin-bottom:15px;font-size:12px}.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}
dialog{border:1px solid var(--line);border-radius:12px;padding:30px;background:var(--paper);color:var(--ink);width:min(560px,calc(100vw - 28px));max-height:calc(100dvh - 30px);box-shadow:0 15px 100px #242b2630}dialog::backdrop{background:#242c2555;backdrop-filter:blur(3px)}.dialog-heading{display:flex;justify-content:space-between;gap:20px;align-items:center}.dialog-heading h2{font:30px Georgia,serif;margin:11px 0}.close-button{background:transparent;border:0;font-size:27px;color:var(--muted);padding:0 4px}.dialog-description,dialog>p{font-size:12px;line-height:1.8;color:var(--muted)}.drop-area{border:1px dashed #b7beaa;border-radius:7px;background:#f4f6ee;display:flex;flex-direction:column;align-items:center;padding:17px;cursor:pointer;margin:22px 0;gap:7px;position:relative}.drop-area>span{font-size:24px;color:#718161}.drop-area strong{font-size:12px}.drop-area small{font-size:10px;color:var(--muted)}.drop-area input{position:absolute;width:100%;height:100%;opacity:0;inset:0;cursor:pointer}#import-form>label:not(.drop-area){font-size:11px;color:var(--muted);display:block;margin-bottom:8px}textarea{width:100%;height:138px;resize:vertical;padding:12px;border:1px solid var(--line);background:#fffefa;border-radius:5px;font:11px/1.5 var(--mono);color:var(--ink)}.or{font-size:10px;color:var(--muted);margin:17px 0 10px}#url-input{width:100%;padding:10px 12px;border:1px solid var(--line);background:#fffefa;border-radius:5px;font-size:12px}.dialog-actions{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:23px}.dialog-actions small{font-size:9px;line-height:1.6;max-width:240px;color:var(--muted)}.dialog-actions button{white-space:nowrap}.import-error{color:var(--accent);font-size:12px;line-height:1.6}.help-tip{padding-top:15px;border-top:1px solid var(--line)}#drop-overlay{position:fixed;inset:12px;z-index:100;background:#f7f7f1ee;border:2px dashed var(--accent);border-radius:12px;display:flex;align-items:center;justify-content:center;flex-direction:column;font:35px Georgia,serif;pointer-events:none;gap:15px}#drop-overlay span{font:14px -apple-system,sans-serif;color:var(--muted)}
@media(min-width:1600px){.page-content{padding-left:64px;padding-right:64px}}@media(max-width:1000px){.sidebar{width:218px;padding:28px 16px}.brand-caption{font-size:10px}.piece{gap:8px;padding:15px 8px}.piece strong{font-size:16px}.piece small{font-size:9px}.sidebar-note{margin-top:30px}main{margin-left:218px}.page-content{padding:34px 26px 20px}.topbar{padding:0 26px;height:65px}.toolbar-controls{gap:14px}.focus-button span{display:none}.score-paper{padding:24px 16px 12px}.font-control input{width:60px}}
@media(max-width:720px){.sidebar{position:relative;width:100%;padding:18px 20px 13px;display:block;border-right:0;border-bottom:1px solid var(--line)}.brand{font-size:27px}.brand img{width:29px;height:29px}.brand-caption,.library-label,.sidebar-note,.sidebar-bottom{display:none}.sidebar>.open-button{position:absolute;right:20px;top:18px;padding:8px 12px;font-size:11px}#library{display:flex;gap:6px;margin-top:16px}.piece{width:auto;flex:1;padding:10px 9px;margin:0;min-width:0}.piece-index,.piece small,.piece em,.playing-dot{display:none}.piece strong{font:13px Georgia,serif;margin:0}main{margin-left:0}.topbar{height:47px;padding:0 20px;font-size:8px}.text-button{font-size:10px}.page-content{padding:27px 20px 15px}h1{font-size:35px}.score-meta{margin:20px 0 24px}.toolbar{gap:8px}.toolbar-controls{gap:10px}.font-control{gap:5px}.font-control input{width:48px}.annotation-toggle{font-size:10px;gap:3px}.view-switch button{padding:6px 10px;font-size:10px}.reading-status{font-size:9px;padding:16px 0 13px}#wrap-note{font-size:8px}.score-paper{padding:19px 12px 9px}.system-row{margin-bottom:21px}.page-footer{font-size:8px;line-height:1.6}.page-footer>span{max-width:160px}.focus-mode .sidebar{display:none}.focus-mode .page-content{padding-top:22px}.dialog-actions{align-items:flex-end}.dialog-actions small{max-width:170px}.dialog-actions .open-button{padding:11px 13px;font-size:11px}dialog{padding:23px}.dialog-heading h2{font-size:27px}}
.row-number{position:relative;height:11px}.row-number>span{position:absolute;top:0;white-space:nowrap}
@media(max-width:380px){.toolbar{flex-wrap:wrap}.toolbar-controls{margin-left:auto}.reading-status{align-items:flex-start}#wrap-note{max-width:120px}.sidebar>.open-button{font-size:10px;padding:8px 9px}.brand{font-size:26px}}
@media(prefers-reduced-motion:no-preference){button{transition:background .15s,color .15s}.piece{transition:background .15s}}
/* The library is a horizontal drawer. The score always gets the viewport width. */
.system-content{padding-left:calc(var(--ch) * var(--label-columns,3))}
main,.focus-mode main{margin-left:0}.page-content,.focus-mode .page-content{max-width:none;padding:18px 18px 24px}.topbar{height:58px;padding:0 18px;letter-spacing:0;background:#f0f1e9}.brand{font-size:24px;gap:8px;letter-spacing:-1px}.brand img{width:28px;height:28px}.topbar-actions{display:flex;gap:19px;align-items:center}.topbar-actions .text-button{font-size:11px}.library-toggle{font-size:12px;background:var(--paper);border:1px solid #d7dcce;border-radius:5px;padding:8px 11px;display:flex;align-items:center;gap:8px}.library-toggle #catalog-count{color:var(--muted);font:10px var(--mono)}.chevron{font-size:16px;line-height:10px;transition:transform .15s}.library-toggle[aria-expanded=true] .chevron{transform:rotate(180deg)}.score-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:1px 0 9px}.score-title-group{min-width:0}.score-heading h1{font-size:28px;letter-spacing:-.5px;overflow-wrap:anywhere;margin:8px 0 7px}.score-heading .eyebrow{font-size:8px}.score-heading #subtitle{font-size:12px;overflow-wrap:anywhere}.score-meta{margin:10px 0 6px}.current-ratings{display:flex;gap:7px;flex:none;padding-top:20px}.mark-button{background:transparent;border:1px solid #dce0d2;border-radius:4px;padding:7px 10px;font-size:11px;white-space:nowrap;color:#6d7464}.mark-button[aria-pressed=true]{background:#f3e7de;color:var(--accent);border-color:#d6b4a4}.toolbar{padding:9px 0}.toolbar-controls{gap:23px}.piece-navigation{display:flex;align-items:center;gap:9px;font:9px var(--mono);color:var(--muted)}.piece-navigation button{border:1px solid #dce0d2;border-radius:4px;background:var(--paper);padding:4px 8px;font-size:13px}.piece-navigation button:disabled{cursor:default;opacity:.3}.reading-status{padding:12px 0 10px}.score-paper{padding:22px 16px 12px;box-shadow:none}.focus-mode .score-heading{display:none}.focus-mode .page-content{padding-top:9px}.focus-mode .topbar{height:48px}.page-footer{padding-top:19px}
.library-panel{padding:21px 20px 12px;background:#f0f1e9;border-bottom:1px solid #d9dece}.library-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:18px}.library-heading h2{font:25px Georgia,serif;margin:7px 0 0}.library-controls{display:grid;grid-template-columns:minmax(200px,330px) minmax(220px,1fr);gap:15px}.composer-control,.search-control{font-size:10px;color:#6c7463;display:block}.composer-control select,.search-field{margin-top:6px;width:100%;height:38px;background:var(--paper);border:1px solid #d4dbca;border-radius:5px}.composer-control select{padding:0 10px;color:var(--ink);font-size:12px}.search-field{display:flex;align-items:center;gap:8px;padding:0 11px}.search-field>span{font-size:22px}.search-field input{min-width:0;flex:1;border:0;background:transparent;outline-offset:5px;font-size:12px;color:var(--ink);width:100%}.search-field input::-webkit-search-cancel-button{display:none}.search-field button{border:0;background:transparent;font-size:22px;color:var(--muted);padding:0}.library-filter-row{display:flex;align-items:center;gap:17px;margin-top:16px;flex-wrap:wrap}.library-views{display:flex;gap:5px}.library-views button{border:1px solid transparent;background:transparent;font-size:11px;padding:7px 11px;border-radius:4px;color:#6d7663}.library-views button[aria-pressed=true]{background:var(--paper);border-color:#d9dece;color:var(--accent)}.library-views span{font:9px var(--mono);margin-left:4px;color:var(--muted)}.hide-disliked{display:flex;align-items:center;gap:5px;font-size:10px;color:#6d7663}.hide-disliked input{accent-color:var(--accent)}#reset-filters{margin-left:auto;font-size:10px}.library-results-header{font-size:10px;color:var(--muted);display:flex;justify-content:space-between;gap:12px;margin:17px 0 10px}.library-results{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:7px;max-height:270px;overflow:auto;scrollbar-width:thin;scrollbar-color:#bfc8b5 transparent;padding:2px 3px 3px 0}.library-row{display:flex;align-items:center;background:var(--paper);border:1px solid #dfe3d7;border-radius:5px;min-width:0;padding:5px}.library-row.active{border-color:#bf9786;background:#fffaf2}.library-piece{border:0;background:transparent;min-width:0;flex:1;text-align:left;padding:7px 9px}.library-piece strong{font:14px/1.3 Georgia,serif;color:var(--ink);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.library-piece small{font-size:9px;color:var(--muted);display:block;margin-top:5px}.library-marks{display:flex;gap:3px;padding:0 5px}.library-marks button{border:0;padding:7px 6px;border-radius:4px;background:transparent;color:#8a927e;font-size:18px;line-height:1}.library-marks button[aria-pressed=true]{color:var(--accent);background:#f3e7de}.library-bottom{font-size:9px;color:var(--muted);display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px}.library-bottom button{font-size:10px}.library-empty{grid-column:1/-1;text-align:center;font-size:13px;padding:45px 15px;color:var(--muted)}
@media(max-width:900px){.toolbar-controls{gap:15px}.score-heading h1{font-size:25px}.library-results{grid-template-columns:repeat(2,minmax(0,1fr))}.library-controls{grid-template-columns:minmax(190px,270px) 1fr}}
@media(max-width:620px){.topbar{padding:0 12px;height:52px}.brand{font-size:21px}.brand img{width:24px;height:24px}.topbar-actions{gap:11px}.topbar-actions .text-button{font-size:10px}.library-toggle{padding:7px 8px;font-size:11px;gap:6px}.page-content,.focus-mode .page-content{padding-left:10px;padding-right:10px}.score-paper{padding:17px 10px 8px}.score-heading{gap:10px;flex-wrap:wrap}.score-heading h1{font-size:24px}.current-ratings{padding-top:0}.score-heading .eyebrow{font-size:7px}.current-ratings .mark-button{font-size:10px;padding:5px 8px}.toolbar{flex-wrap:wrap;justify-content:space-between;gap:9px}.toolbar-controls{gap:13px;flex:1;justify-content:flex-end;margin-left:0}.piece-navigation{gap:6px}.piece-navigation button{padding:3px 7px}#navigation-label{display:none}.font-control{gap:5px}.font-control input{width:55px}.focus-button span{display:none}.annotation-toggle{font-size:10px}.library-panel{padding:18px 12px 12px}.library-heading{margin-bottom:15px}.library-heading h2{font-size:23px}.library-controls{grid-template-columns:1fr;gap:12px}.library-results{grid-template-columns:1fr;max-height:255px}.library-filter-row{gap:9px}.library-views button{font-size:10px;padding:6px 8px}.library-views{gap:1px}.hide-disliked{font-size:9px}#reset-filters{margin-left:0}.library-results-header{font-size:9px}#preferences-status{max-width:155px;text-align:right}.library-bottom>span{max-width:185px}.reading-status{font-size:9px}#wrap-note{font-size:8px}.library-heading .text-button{font-size:10px}}
@media(max-width:380px){.toolbar-controls{flex-basis:100%;justify-content:space-between}.topbar-actions{gap:7px}.topbar-actions #help{display:none}.brand{font-size:20px}.topbar-actions .text-button{font-size:9px}.library-toggle{gap:4px}.library-views button{padding:6px 6px}.library-views span{margin-left:2px}.library-heading h2{font-size:21px}}
.hide-metadata .score-heading,.hide-metadata #details,.hide-metadata .section-heading,.hide-metadata .section-description,.hide-metadata .row-number{display:none}
/* Gap is additional space, never taken from the six strings or annotation lanes. */
:root{--staff-spacing:38px}
@media(max-width:720px){:root{--staff-spacing:34px}}
.system-row{padding-bottom:min(13px,calc(var(--staff-spacing) / 2));margin-bottom:calc(var(--staff-spacing) - min(13px,calc(var(--staff-spacing) / 2)))}
.spacing-control{display:flex;align-items:center;gap:7px;font-size:11px;color:#62685c;white-space:nowrap}
.spacing-control input{width:65px;accent-color:var(--accent)}
.toolbar,.toolbar-controls{flex-wrap:wrap}
.toolbar-controls{row-gap:12px}
.brand{white-space:nowrap;flex-shrink:0}.topbar-actions .text-button{white-space:nowrap}
@media(max-width:480px){.library-toggle #catalog-count{display:none}.brand{font-size:18px;gap:6px}.topbar-actions{gap:8px}.topbar{gap:12px}}
@media(max-width:380px){.brand img{display:none}.brand{gap:0}}
/* library-ui-v2: deliberate grouping, not uncontrolled toolbar wrapping. */
.topbar-actions button,.library-panel button,.mark-button,.close-button{min-height:44px;min-width:44px}
.topbar-actions .text-button{font-size:12px}.topbar-actions #help{display:block}
.toolbar{justify-content:flex-start;gap:16px;padding:6px 0}
.toolbar-controls{display:contents}
.annotation-toggle,.font-control,.spacing-control,.focus-button{min-height:44px;font:12px -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;gap:7px;color:#51594b;white-space:nowrap}
.annotation-toggle{cursor:pointer}.annotation-toggle input{width:16px;height:16px;margin:0;flex:none}
.font-control input,.spacing-control input{width:82px;height:44px;margin:0;min-width:44px;accent-color:var(--accent)}
.focus-button{min-width:64px}.focus-button span{display:inline;font-size:12px}
.library-controls .piece-navigation{grid-column:1 / -1;gap:8px}
.piece-navigation button{font-size:14px;min-width:44px;min-height:44px}
#random-piece{font:12px -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;padding:0 14px}
#navigation-label{display:inline;font-size:11px}
.composer-control select,.search-field{height:44px}.search-field input{height:42px}
.hide-disliked{min-height:44px;font-size:12px;cursor:pointer}.hide-disliked input{width:16px;height:16px}
.library-views button{font-size:12px;padding:6px 8px}.library-marks button{width:44px;height:44px}
select:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(max-width:620px){
 .toolbar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 12px;padding:4px 0}
 .font-control{order:1}.spacing-control{order:2}.original-toggle{order:3}.focus-button{order:4;justify-self:start}.annotation-toggle:has(#annotations){order:5}.annotation-toggle:has(#metadata){order:6}
 .font-control,.spacing-control{min-width:0;justify-content:space-between}
 .font-control input,.spacing-control input{width:calc(100% - 64px);max-width:115px}
 .library-panel{padding-top:12px}.library-heading{gap:8px;margin-bottom:12px}.library-heading h2{font-size:20px}
 .library-controls{gap:10px}.library-filter-row{gap:4px 8px}.library-views{width:100%;justify-content:flex-start;gap:4px}
 .library-views button{flex:1;font-size:11px}.library-results-header{flex-direction:column;gap:4px}
 #preferences-status{max-width:none;text-align:left}.library-bottom{align-items:center}
 .library-piece{min-height:60px}.library-marks{gap:0}.library-row{min-width:0}
}
@media(max-width:430px){
 .topbar{display:grid;grid-template-columns:1fr auto;height:96px;gap:0 8px;padding:4px 12px}
 .brand{grid-row:1;grid-column:1;font-size:22px;gap:7px}.brand img{display:block;width:24px;height:24px}
 .topbar-actions{display:contents}.topbar-actions #help{grid-row:1;grid-column:2;justify-self:end}
 .library-toggle{grid-row:2;grid-column:1;justify-self:start;font-size:12px;padding:7px 12px}
 .topbar-actions #open{grid-row:2;grid-column:2;justify-self:end;font-size:12px}
 .focus-mode .topbar{height:96px}.page-content{padding-top:12px}
}