/* The open book is a viewport-sized stage; the bookshelf remains a normal page. */
body.reader-active{height:100vh;height:var(--reader-height,100dvh);min-height:0;margin:0;overflow:hidden;overscroll-behavior:none}
.reader-active>.app-header,.reader-active>.app-footer{display:none}
.reader-active main{box-sizing:border-box;width:100%;max-width:1600px;height:100%;margin:0 auto;padding:max(8px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));overflow:hidden}
.reader-active #story-room{height:100%;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr);gap:7px;position:relative}
.reader-active .room-heading{display:flex;align-items:center;gap:10px;min-width:0;min-height:40px;text-align:left}
.reader-active .back-link{margin:0;padding:8px;min-height:40px;white-space:nowrap;font-size:14px}
.reader-active .room-heading h1{font-size:clamp(16px,2vw,24px);line-height:1.15;margin:0;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reader-active #book-label{display:none}
.reader-heading-actions{display:flex;gap:5px;align-items:center}
.reader-heading-actions button{border:1px solid #dcd7c9;border-radius:10px;background:#fffdf7;color:#263b43;min-height:40px;min-width:42px;padding:7px 10px;font:14px Arial,sans-serif;cursor:pointer}
.reader-active #app-status,.reader-active #mode-description{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.reader-active #app-status.is-error{position:fixed;top:52px;left:5%;right:5%;width:auto;height:auto;clip-path:none;white-space:normal;z-index:30;background:#fff3d5;border:1px solid #d3a343;padding:10px;border-radius:8px}
.reader-active #open-book{height:100%;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto minmax(0,1fr) auto;gap:7px}
.reader-active .story-modes{grid-column:1;grid-row:1;justify-self:start;align-self:center;margin:0;padding:3px;gap:3px}
.reader-active .story-modes button{min-height:36px;padding:7px 20px;font-size:14px}
.reader-active .reading-tools{grid-column:2;grid-row:1;margin:0;min-height:36px;gap:14px;font-size:13px}
.reader-active .reading-tools button{min-height:36px;min-width:36px;padding:3px 7px;font-size:16px}
.reader-active .reading-tools label{gap:5px;white-space:nowrap}
.reader-active .reading-tools input{width:18px;height:18px}
.reader-active .readalong-player{position:static;grid-column:1/-1;grid-row:2;margin:0;padding:5px 10px;min-height:40px;gap:12px;box-shadow:none;border-radius:12px;flex-wrap:nowrap}
.reader-active .readalong-player .btn{min-height:34px;min-width:130px;padding:7px 14px;font-size:13px;order:0}
.reader-active .readalong-player .seek-control{flex:1;min-width:20px;flex-basis:auto;order:0}
.reader-active .readalong-player #narration-clock{margin:0;font-size:12px;order:0}
.reader-active .readalong-player .text-button{order:0;white-space:nowrap;font-size:12px}
.reader-active .app-spread{grid-column:1/-1;grid-row:3;box-sizing:border-box;min-height:0;height:100%;width:100%;padding:clamp(8px,1.5vmin,18px);gap:clamp(8px,1.5vmin,20px);grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr);align-items:stretch;border-radius:14px;overflow:hidden;box-shadow:none}
.reader-active .app-story-art{box-sizing:border-box;grid-column:2;grid-row:1;width:100%;height:100%;min-width:0;min-height:0;overflow:hidden}
.reader-active .app-story-art>img{width:auto;height:auto;min-width:0;min-height:0;max-width:100%;max-height:100%;object-fit:contain}
.reader-active .app-story-text{box-sizing:border-box;grid-column:1;grid-row:1;width:100%;height:100%;min-width:0;min-height:0;align-self:stretch;padding:5px clamp(6px,1.2vw,16px);overflow:hidden;display:flex;flex-direction:column;justify-content:center;font-size:var(--app-story-size,22px);line-height:1.32;white-space:pre-line;border:0;border-bottom:0;border-right:1px solid #e8e1d3;overflow-wrap:anywhere}
.reader-active .app-story-text p{flex:0 0 auto;margin:0 0 .4em;padding:0;font-size:inherit;line-height:inherit}
.reader-active .app-story-text p:last-child{margin-bottom:0}
.reader-active .story-word{padding:0;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.reader-active .story-word.is-speaking{box-shadow:0 0 0 2px #f3d378}
.reader-active .watch-stage{grid-column:1/-1;grid-row:3;height:100%;min-height:0;width:100%;background:#163b4b}
.reader-active .watch-stage video{width:100%;height:100%;max-height:none;object-fit:contain}
.reader-active .app-page-controls{grid-column:1/-1;grid-row:4;display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0;min-height:40px}
.reader-active .app-page-controls .btn{min-height:40px;padding:8px 16px;font-size:14px}
.reader-active .app-page-controls>label{display:flex;align-items:center;gap:8px;min-width:0}
.reader-active .app-page-controls select{max-width:180px;min-height:38px;padding:7px 10px;font-size:13px}
.reader-active #text-part{font:12px Arial,sans-serif;color:#628a84;white-space:nowrap}
.reader-active #story-end{display:none}
.reader-active[data-reader-mode=read] #open-book{grid-template-rows:auto 0 minmax(0,1fr) auto;row-gap:5px}
.reader-active[data-reader-mode=watch] #open-book{grid-template-rows:auto 0 minmax(0,1fr) 0;row-gap:5px}
#reader-options{max-width:570px;width:calc(100% - 32px);max-height:85dvh;box-sizing:border-box;overflow:auto;border:1px solid #dcd7c9;border-radius:18px;padding:24px;background:#fffaf0;color:#263b43}
#reader-options::backdrop{background:#163b4b88}
#reader-options h2{font-size:26px;margin:0 0 12px}
#reader-options .app-extras{margin:12px 0 22px;padding-top:14px;text-align:left}
#reader-options .app-extras .buttons{justify-content:flex-start}
.reader-heading-actions{display:none}.reader-active .reader-heading-actions{display:flex}
@media(max-width:650px) and (orientation:portrait){
 .reader-active main{padding:max(5px,env(safe-area-inset-top)) max(7px,env(safe-area-inset-right)) max(5px,env(safe-area-inset-bottom)) max(7px,env(safe-area-inset-left))}
 .reader-active #story-room{gap:4px}
 .reader-active .room-heading{min-height:36px;gap:3px}
 .reader-active .back-link{font-size:0;min-width:36px;min-height:36px;padding:5px}
 .reader-active .back-link::before{content:'←';font-size:22px}
 .reader-active .room-heading h1{font-size:16px}
 .reader-active .reader-heading-actions button{min-width:36px;min-height:36px;padding:5px 7px;font-size:12px}
 .reader-active #open-book{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto minmax(0,1fr) auto;gap:4px}
 .reader-active .story-modes{grid-column:1;grid-row:1;justify-self:center;padding:2px;width:100%;box-sizing:border-box;justify-content:center}
 .reader-active .story-modes button{min-height:36px;padding:7px 10px;flex:1;font-size:13px}
 .reader-active .reading-tools{grid-column:1;grid-row:2;justify-content:space-between;min-height:32px;gap:8px;font-size:12px}
 .reader-active .reading-tools button{min-height:32px;min-width:34px;font-size:15px}
 .reader-active .readalong-player{grid-column:1;grid-row:3;gap:7px;padding:4px 7px;min-height:38px}
 .reader-active .readalong-player .btn{min-width:108px;min-height:32px;padding:6px 9px;font-size:12px}
 .reader-active .readalong-player #narration-clock{font-size:10px}
 .reader-active .readalong-player .text-button{display:none}
 .reader-active .app-spread{grid-column:1;grid-row:4;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,.36fr) minmax(0,.64fr);gap:6px;padding:7px}
 .reader-active .app-story-art{grid-column:1;grid-row:1}
 .reader-active .app-story-text{grid-column:1;grid-row:2;padding:7px 7px 3px;border-right:0;border-top:1px solid #e8e1d3;white-space:normal;line-height:1.27}
 .reader-active .app-story-text p{margin-bottom:.32em}
 .reader-active .watch-stage{grid-column:1;grid-row:4}
 .reader-active .app-page-controls{grid-column:1;grid-row:5;gap:5px;min-height:36px}
 .reader-active .app-page-controls .btn{min-height:36px;padding:7px 11px;font-size:12px}
 .reader-active .app-page-controls>label{gap:4px;flex-direction:column}
 .reader-active .app-page-controls select{min-height:28px;max-width:132px;padding:3px 5px;font-size:12px}
 .reader-active #text-part{font-size:10px}
 .reader-active[data-reader-mode=read] #open-book{grid-template-rows:auto auto 0 minmax(0,1fr) auto;row-gap:3px}
 .reader-active[data-reader-mode=watch] #open-book{grid-template-rows:auto 0 0 minmax(0,1fr) 0;row-gap:3px}
}
@media(orientation:landscape) and (max-height:520px){
 .reader-active main{padding:max(3px,env(safe-area-inset-top)) max(7px,env(safe-area-inset-right)) max(3px,env(safe-area-inset-bottom)) max(7px,env(safe-area-inset-left))}
 .reader-active #story-room,.reader-active #open-book{gap:3px}
 .reader-active .room-heading{min-height:30px;gap:5px}.reader-active .room-heading h1{font-size:16px}
 .reader-active .back-link{min-height:30px;padding:4px;font-size:12px}
 .reader-active .reader-heading-actions button{min-height:30px;min-width:32px;padding:4px 7px;font-size:12px}
 .reader-active .story-modes button{min-height:30px;padding:5px 13px;font-size:12px}
 .reader-active .reading-tools{min-height:30px;font-size:12px;gap:8px}.reader-active .reading-tools button{min-height:30px;min-width:30px;font-size:14px}
 .reader-active .readalong-player{min-height:32px;padding:3px 7px}.reader-active .readalong-player .btn{min-height:28px;min-width:115px;padding:5px 10px;font-size:12px}
 .reader-active .app-page-controls{min-height:30px}.reader-active .app-page-controls .btn{min-height:30px;padding:5px 11px;font-size:12px}.reader-active .app-page-controls select{min-height:28px;padding:3px 7px;font-size:12px}
 .reader-active .app-spread{padding:5px;gap:7px}.reader-active .app-story-text{padding:3px 7px;line-height:1.22;white-space:normal}.reader-active .app-story-text p{margin-bottom:.28em}
}

.reader-active .frontmatter-stage{grid-column:1/-1;grid-row:3;min-height:0;height:100%;overflow:hidden;border:1px solid #e5ddcb;border-radius:14px;background:#fffdf6;padding:10px;display:flex;align-items:center;justify-content:center}
.frontmatter-stage>img{width:100%;height:100%;object-fit:contain;min-height:0;min-width:0}
.front-title{text-align:center;max-width:700px;max-height:100%;padding:clamp(5px,2vmin,22px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(8px,2vmin,22px)}
.front-title p{margin:0;line-height:1.25}.front-title h2{font-size:clamp(24px,5vmin,60px);line-height:1.12;margin:0;text-wrap:balance}.front-title .eyebrow{font-size:clamp(9px,1.6vmin,14px)}.front-author{font-size:clamp(16px,2.7vmin,26px)}.front-tagline{color:#65736e;font-size:clamp(12px,2vmin,18px)}
@media(max-width:650px) and (orientation:portrait){.reader-active .frontmatter-stage{grid-column:1;grid-row:4;padding:6px}.front-title{gap:18px}}