html.reader-lock{overflow:hidden}.book.is-reader{z-index:50;background:var(--color-paper);flex-direction:column;gap:.5rem;max-width:none;margin:0;padding:.75rem;display:flex;position:fixed;inset:0;overflow:hidden}.book.is-reader>*{margin-block:0}@media (orientation:landscape){.book.is-reader{grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:auto minmax(0,1fr);column-gap:1rem;display:grid}.book.is-reader>.reader-bar{grid-area:1/1}.book.is-reader>.reader-listen{grid-area:1/2}.book.is-reader>.spread.is-current{grid-area:2/1/3/-1}.book.is-reader>.reader-thumbs{grid-area:3/1/4/-1}}.book.is-reader .spread,.book.is-reader .the-end{display:none}.book.is-reader .spread.is-current{view-transition-name:page;border:3px solid #0000;border-image:var(--pen-frame-1) 36 / 13px / 2px stretch;flex:1;grid-template-rows:auto 1fr;grid-template-columns:1fr;min-height:0;display:grid}@media (orientation:landscape){.book.is-reader .spread.is-current{grid-template-rows:1fr;grid-template-columns:1fr 1fr}}@media (orientation:portrait){.book.is-reader .spread.is-current{grid-template-rows:auto minmax(0,1fr)}.book.is-reader .spread-verse{order:-1}.book.is-reader .spread.is-current.is-cramped{grid-template-rows:minmax(0,1fr) auto}}@media (orientation:landscape) and (height<=30rem){.book.is-reader .spread.is-current:has(.book-sting){position:relative}.book.is-reader .spread.is-current:has(.book-sting)>.spread-art{padding-bottom:3.5rem}.book.is-reader .book-sting{justify-content:center;margin:0;position:absolute;bottom:.4rem;left:50%;right:0}.book.is-reader .book-sting img{width:2rem}.book.is-reader .book-sting .btn{white-space:nowrap;min-height:2.75rem;padding-block:.25rem;font-size:.875rem}}.book.is-reader .spread-cover.is-current{grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr)}.book.is-reader .spread-cover .spread-page{container-type:size}.book.is-reader .spread-cover .book-cover{width:min(100cqw,128.571cqh)}.book.is-reader .spread-cover .spread-page>img{width:auto;max-width:100%;height:auto;max-height:100%}.book.is-reader .spread.is-cramped .spread-art>.spread-picture,.book.is-reader .spread.is-cramped .spread-art>.stage{display:none}.book.is-reader .spread.is-cramped .spread-art{padding:.35rem;overflow:visible}.see-picture{display:none}.book.is-reader .spread.is-cramped .see-picture{border:3px solid #0000;border-image:var(--pen-frame-3) 36 / 13px / 2px stretch;background:var(--color-paper) padding-box;align-items:center;gap:.6rem;padding:.3rem .8rem .3rem .3rem;font-weight:800;display:inline-flex}.see-picture img{object-fit:contain;width:auto;max-width:6rem;height:3.5rem}.picture-full{z-index:60;background:var(--color-paper);flex-direction:column;align-items:flex-start;gap:.5rem;padding:.75rem;display:flex;position:fixed;inset:0}.picture-full[hidden]{display:none}.picture-full .btn{padding:.45rem .9rem}.picture-full-frame{flex:1;justify-content:center;align-self:stretch;align-items:center;min-height:0;display:flex;container-type:size}.picture-full-frame>.spread-picture{object-fit:contain;width:auto;max-width:100%;height:auto;max-height:100%}.book.is-reader .spread-page{min-height:0;overflow:auto}.book.is-reader .spread-picture{object-fit:contain;width:auto;max-width:100%;max-height:100%}.book.is-reader .verse{font-size:clamp(1.25rem,2.6vw,2rem)}@media (width<=30rem){.book.is-reader .verse{font-size:1.0625rem}}.reader-bar,.reader-listen{flex-wrap:wrap;align-items:center;gap:.5rem;display:flex}.reader-bar .btn,.reader-listen .btn{padding:.45rem .9rem}.reader-counter{text-align:center;min-width:5rem;font-weight:800}@media (width<=26rem),(height<=30rem){.reader-bar .btn,.reader-listen .btn{padding:.3rem .65rem}.reader-counter{min-width:3.75rem}}.reader-auto{align-items:center;gap:.35rem;font-weight:700;display:inline-flex}.reader-auto input{width:1.25rem;height:1.25rem;accent-color:var(--color-green-deep)}.reader-voice{font-size:.85rem}.reader-thumbs{gap:.5rem;padding:.25rem;display:flex;overflow-x:auto}.reader-thumbs button{border:3px solid #0000;border-image:var(--pen-frame-3) 36 / 13px / 2px stretch;background:var(--color-paper) padding-box;flex:none;width:5.5rem;padding:2px}.reader-thumbs button[aria-current=true]{background-color:var(--color-sun);border-image-width:20px}.reader-thumbs img{object-fit:contain;width:100%;height:3.5rem}.w.is-reading{background:var(--color-sun)}::view-transition-old(page),::view-transition-new(page){animation-duration:.35s;animation-timing-function:ease-out}html[data-turn=forward]::view-transition-old(page){animation-name:page-out-left}html[data-turn=forward]::view-transition-new(page){animation-name:page-in-right}html[data-turn=back]::view-transition-old(page){animation-name:page-out-right}html[data-turn=back]::view-transition-new(page){animation-name:page-in-left}@keyframes page-out-left{to{opacity:0;transform:translate(-12%)}}@keyframes page-in-right{0%{opacity:0;transform:translate(12%)}}@keyframes page-out-right{to{opacity:0;transform:translate(12%)}}@keyframes page-in-left{0%{opacity:0;transform:translate(-12%)}}.book.is-reader .spread-page:has(>.stage){padding:.5rem;container-type:size}.stage{width:min(100cqw, 100cqh * var(--r));aspect-ratio:var(--r);isolation:isolate;background:var(--color-paper);margin:auto;position:relative;overflow:hidden}.stage .layer{mix-blend-mode:multiply;position:absolute}.stage .layer img{mix-blend-mode:normal;width:100%;height:100%;display:block}.stage .layer.alive{cursor:pointer}.stage .layer.normal{mix-blend-mode:normal}@media (orientation:landscape){.book.is-reader .spread.is-current:has(>.spread-page:last-child>.stage){grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}.book.is-reader .spread.is-current:has(>.spread-page:first-child>.stage){grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}}.stage .spin canvas{display:block}.book.is-reader .spread-art{position:relative}
