.play-workspace { max-width:1280px; margin:auto; padding:24px 32px calc(var(--folio-dock-height,90px) + 24px); }
.topbar .quiet-button { margin:0; }
.reader-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; }
.reader-heading h1 { font-size:clamp(24px,4vw,34px); font-weight:550; letter-spacing:-.8px; margin:8px 0 5px; overflow-wrap:anywhere; }
.reader-heading .eyebrow { font-size:.7rem; letter-spacing:.08em; }
.reader { min-width:0; }
.score { overflow:auto; min-height:340px; height:calc(100dvh - var(--folio-dock-height,90px) - 350px); background:#eceae5; border:1px solid var(--line); border-radius:12px; position:relative; overscroll-behavior:contain; }
#score-page { min-width:100%; min-height:100%; display:grid; place-items:start center; padding:12px; }
#score-page:empty { display:none; }
#score-page canvas { background:white; display:block; box-shadow:0 3px 16px #00000012; }
.score-welcome { min-height:340px; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:32px; }
.score-welcome img { border-radius:16px; margin-bottom:24px; }
.score-welcome h2 { font-size:24px; font-weight:500; margin-bottom:12px; }
.score-welcome p { color:var(--muted); font-size:.95rem; line-height:1.6; max-width:340px; }
.reader-toolbar { display:flex; gap:8px; align-items:center; justify-content:center; min-height:48px; }
.reader-toolbar #page-position { font-size:.8rem; color:var(--muted); min-width:120px; text-align:center; }
.toolbar-divider { border-left:1px solid var(--line); height:22px; margin:0 8px; }
.reader-status { font-size:.85rem; line-height:1.5; color:var(--muted); text-align:center; padding:8px 0; }
.reader-status:empty { display:none; }
.play-rhythm { border:1px solid var(--line); background:var(--surface); border-radius:16px; padding:12px 18px 8px; }
.rhythm-strip { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.rhythm-choice { display:flex; align-items:center; gap:12px; min-height:48px; text-align:left; }
.rhythm-choice h2 { font-size:1rem; font-weight:550; }
.rhythm-choice .time-signature { color:var(--muted); font-size:.75rem; }
.rhythm-strip .tempo-number input { width:68px; font-size:28px; font-weight:450; letter-spacing:-1px; }
.rhythm-strip .tempo-number { gap:4px; }
.rhythm-strip .round { width:44px; height:44px; }
.rhythm-strip .play-button { min-width:110px; min-height:48px; padding:10px 18px; }
.rhythm-state { display:flex; align-items:center; justify-content:center; gap:12px; margin-top:6px; }
.rhythm-state .beats { gap:6px; }
.rhythm-state .beat { width:18px; height:18px; font-size:10px; }
.rhythm-state .transport-status { min-height:0; margin:0; }
.rhythm-state .error { margin:0; }
#rhythm-dialog { max-height:85dvh; padding:32px 24px 24px; }
#rhythm-dialog .catalogue { border:0; padding:0; }
#rhythm-dialog .catalogue-list { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
#rhythm-dialog .section-heading { padding-right:40px; }
#rhythm-dialog .rhythm-button { width:100%; min-width:0; }
#rhythm-dialog .catalogue-note { display:none; }
#rhythm-dialog .practice-settings { margin-top:16px; }
#rhythm-dialog label { display:flex; margin:0; }
#rhythm-dialog input[type=checkbox] { width:20px; }
#rhythm-dialog .tempo-stage { margin:16px auto; text-align:center; }
#rhythm-dialog .tempo-label,#rhythm-dialog .bpm-label { display:none; }
#library-dialog { width:min(760px,calc(100% - 24px)); height:min(760px,90dvh); max-height:90dvh; padding:20px 24px; }
.library-header { display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.library-header h2 { flex:1; margin:0; font-size:24px; }
.library-header .icon-button { font-size:24px; }
#library-dialog input { margin:0; }
.book-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:20px; padding:20px 0; }
.book-card { text-align:left; min-width:0; padding:0; }
.book-cover { height:160px; border-radius:6px; display:grid; place-items:center; overflow:hidden; background:#244e5e; color:white; font-size:36px; font-weight:300; }
.book-cover img { width:100%; height:100%; object-fit:cover; }
.book-card[data-color=forest] .book-cover { background:#385447; }
.book-card[data-color=plum] .book-cover { background:#644b6d; }
.book-card[data-color=coral] .book-cover { background:#a85749; }
.book-card[data-color=honey] .book-cover { background:#9a752e; }
.book-card[data-color=slate] .book-cover { background:#535b65; }
.book-card strong { display:block; margin:10px 0 4px; font-size:.9rem; overflow-wrap:anywhere; }
.book-card small { color:var(--muted); font-size:.75rem; }
.song-row { width:100%; display:flex; align-items:center; gap:12px; text-align:left; min-height:64px; padding:12px 4px; border-bottom:1px solid var(--line); }
.song-row>span { flex:1; min-width:0; }
.song-row strong { font-weight:500; display:block; overflow-wrap:anywhere; }
.song-row small { color:var(--muted); font-size:.75rem; display:block; margin-top:4px; }
.song-row .page-count { font-size:.75rem; flex:0 0 auto; color:var(--muted); }
body.reader-focused .reader-heading>div,body.reader-focused .reader-toolbar { display:none; }
body.reader-focused .reader-heading { position:absolute; right:40px; z-index:1; }
body.reader-focused .score { height:calc(100dvh - var(--folio-dock-height,90px) - 215px); }
@media(max-width:560px) {
 .topbar { gap:10px; height:64px; padding:0 12px; }
 .brand { font-size:22px; gap:7px; }
 .brand img { width:30px; height:30px; }
 .topbar .quiet-button { padding:8px 12px; font-size:.8rem; }
 .account-button { padding:8px; border:0; background:none; }
 .account-button>span { display:none; }
 .play-workspace { padding:16px 12px calc(var(--folio-dock-height,90px) + 16px); }
 .reader-heading { margin-bottom:12px; }
 .reader-heading h1 { font-size:23px; }
 .score { min-height:260px; height:calc(100dvh - var(--folio-dock-height,90px) - 300px); border-radius:8px; }
 .score-welcome { min-height:260px; padding:24px; }
 .score-welcome img { width:48px; height:48px; margin-bottom:16px; }
 .score-welcome h2 { font-size:21px; }
 .reader-toolbar { gap:2px; }
 .reader-toolbar #page-position { min-width:48px; font-size:.75rem; }
 .reader-toolbar .icon-button { width:36px; min-height:44px; }
 .reader-toolbar .text-button { padding-inline:6px; font-size:.8rem; }
 .toolbar-divider { margin:0 2px; }
 .play-rhythm { padding:8px; }
 .rhythm-strip { gap:4px; }
 .rhythm-choice { gap:5px; }
 .rhythm-choice h2 { font-size:.85rem; max-width:80px; }
 .rhythm-choice .time-signature { display:none; }
 .rhythm-strip .tempo-number input { width:48px; font-size:24px; }
 .rhythm-strip .round { width:36px; min-height:44px; background:none; border:0; }
 .rhythm-strip .play-button { min-width:80px; gap:6px; padding:10px; font-size:.85rem; }
 .rhythm-strip .play-button svg { width:16px; }
 #library-dialog { padding:16px; }
 .book-cover { height:145px; }
 body.reader-focused .reader-heading { right:20px; }
}