/* A tactile picture book, while keeping every illustration and narration intact. */
dialog.book-shell[open]{width:min(1240px,97vw);height:min(880px,96dvh);max-height:96dvh;background:#174d45;border:0;border-radius:22px;color:#fff9e9;box-shadow:0 30px 100px #001e26a6;overflow:hidden}
.book-shell .dialogtop{background:transparent;padding:10px 22px;flex:none;border-bottom:1px solid #ffffff1c;color:#fff6d7}
.book-shell .dialogtop strong{font-size:14px;letter-spacing:.04em}
.book-shell .close{background:#fff6dd;color:#164e43;width:42px;height:42px;border-radius:50%;flex:none}
dialog.book-shell .reader{padding:10px 24px 24px;gap:10px;display:flex;flex-direction:column;overflow:hidden;min-height:0}
.book-shell .reader>.collectionback{color:#fff6dd;margin:0;background:transparent;border:0;font-size:13px;min-height:30px;align-self:flex-start;padding:2px 5px;flex:none}
.book-spread{position:relative;isolation:isolate;display:grid;grid-template-columns:1fr 1fr;flex:1 1 auto;min-height:0;background:#fffaeb;border:1px solid #d6bd85;border-radius:8px 16px 16px 8px;box-shadow:0 5px 0 #e4d3b0,0 9px 0 #f9edcf,0 12px 0 #bba272,0 20px 35px #05291b66;perspective:1800px;color:#153f39}
.book-spread::after{content:'';pointer-events:none;position:absolute;left:50%;top:0;bottom:0;width:36px;transform:translateX(-50%);z-index:3;background:linear-gradient(90deg,transparent,#71572a25 42%,#5e3e273e 50%,#fff7dc70 57%,transparent)}
.book-spread>.animatedscene{border-radius:6px 0 0 6px;height:100%;min-height:0;overflow:hidden;background:#e6e6c9;position:relative;isolation:isolate}
.book-spread>.animatedscene::before{content:'';position:absolute;inset:-24px;z-index:-1;background-image:var(--book-art);background-size:cover;background-position:center;filter:blur(20px);opacity:.48}
.book-shell .book-spread .storyscene{width:100%;height:100%;object-fit:contain;aspect-ratio:auto;background:transparent;transform:none!important}
.book-spread .wake-viewport{inset:0;display:flex;align-items:center;justify-content:center}
.book-spread .wake-poses{width:var(--book-frame-width,100%);height:var(--book-frame-height,auto);flex:none;aspect-ratio:3/2;max-width:100%;background-size:200% 200%}
.book-spread>.story-reading-text{position:relative;display:flex;flex-direction:column;overflow:auto;min-height:0;padding:clamp(18px,3vw,42px);gap:12px;background:radial-gradient(#b7995512 .65px,transparent .8px) 0 0/5px 5px,linear-gradient(90deg,#f4e7c9,#fffbef 9%,#fff9e9);border-radius:0 14px 14px 0}
.book-spread .picturebook{overflow:visible;background:transparent;border-radius:0;flex:1 0 auto;min-height:0}
.book-spread .storycaption{padding:0;background:transparent;text-align:left}
.book-spread .storycaption h2{font-size:clamp(23px,2.4vw,32px);line-height:1.2;margin:0 0 16px;color:#215b49}
.book-spread .storycaption p{font-size:var(--book-font,21px);line-height:1.5;margin:0;max-width:none}
.book-spread .storycaption .question{font-size:calc(var(--book-font,21px) - 2px);line-height:1.4;margin:16px 0 0;padding-top:12px;border-top:1px solid #d8c99d;color:#466744}
.book-spread .narration{margin:18px 0 0;padding:0;background:transparent;display:block}
.book-spread .narration audio{display:none}
.book-spread .narration .button{min-height:44px;min-width:0;font-size:15px;padding:9px 17px}
.book-spread .narration .small:empty{display:none}
.book-spread .motioncontrols{margin:0;display:flex;justify-content:flex-start;gap:12px;flex-wrap:wrap;flex:none}
.book-spread .motioncontrols .collectionback{margin:0;padding:3px 0;font-size:11px;color:#52684d;background:transparent;border:0}
.book-spread .readerbuttons{margin:0;display:flex;justify-content:space-between;align-items:center;gap:10px;flex:none}
.book-spread .readerbuttons .button{font-size:15px;min-width:82px;min-height:44px;padding:9px 15px;border-radius:14px}
.book-spread .pagedots{display:block;font-size:12px;color:#566c50;white-space:nowrap}
.book-spread .pagedots span{display:none}
.book-spread .book-folio{position:absolute;bottom:7px;left:22px;font-size:11px;color:#466346b3;z-index:2;pointer-events:none}
.book-turn-sheet{position:absolute;inset:0;z-index:6;pointer-events:none;transform-origin:left center;backface-visibility:hidden;border-radius:inherit;box-shadow:12px 0 24px #48351c40;overflow:hidden}
.book-turn-sheet .book-spread{width:100%;height:100%;box-shadow:none;border:0;margin:0}
.book-turn-sheet.turn-forward{animation:baoPaperForward .62s cubic-bezier(.3,.05,.25,1) both}
.book-turn-sheet.turn-back{transform-origin:right center;animation:baoPaperBack .62s cubic-bezier(.3,.05,.25,1) both}
@keyframes baoPaperForward{0%{transform:rotateY(0);filter:brightness(1)}55%{filter:brightness(.72)}100%{transform:rotateY(-110deg);filter:brightness(.9)}}
@keyframes baoPaperBack{0%{transform:rotateY(0);filter:brightness(1)}55%{filter:brightness(.72)}100%{transform:rotateY(110deg);filter:brightness(.9)}}
.book-cover-stage{flex:1;min-height:0;display:grid;place-items:center;padding:12px 20px 28px;perspective:1500px}
.bao-cover{position:relative;display:flex;flex-direction:column;align-items:center;gap:16px;width:min(410px,100%);height:100%;max-height:650px;padding:32px 28px 24px 42px;color:#fff6d5;border:1px solid #e8c879;border-radius:5px 20px 20px 5px;background:linear-gradient(90deg,#0b352b 0,#22634c 5%,#124e3f 8%,#175b46 90%,#0b392f);box-shadow:7px 3px 0 #e1d0a5,12px 6px 0 #fff3d0,17px 9px 0 #c5b68f,22px 12px 0 #0d392f,0 22px 35px #001c2066;transform:rotate(-2deg);transform-origin:left center;text-align:center;transition:transform .25s}
.bao-cover::before{content:'';position:absolute;inset:14px 12px 14px 28px;border:1px solid #e8cf8580;border-radius:2px 12px 12px 2px;pointer-events:none}
.bao-cover:hover{transform:rotate(0) translateY(-3px)}
.bao-cover .cover-kicker{font-size:12px;letter-spacing:.16em;line-height:1.2;color:#efd58d;font-weight:bold}
.bao-cover .cover-title{font-size:clamp(25px,4vw,37px);line-height:1.15;text-transform:uppercase;letter-spacing:.02em;font-weight:900}
.bao-cover img{width:100%;min-height:0;flex:1;object-fit:cover;border-radius:50% 50% 12px 12px;border:3px solid #e9cd8f}
.bao-cover .cover-cta{position:relative;background:#ffe391;color:#174c3e;padding:11px 22px;border-radius:25px;font-size:16px;font-weight:bold;flex:none}
.bao-cover .cover-note{font-size:11px;letter-spacing:.06em;color:#fff3c6;flex:none}
.book-opening .bao-cover{animation:baoOpenCover .6s ease-in both;pointer-events:none}
@keyframes baoOpenCover{to{transform:rotateY(-100deg);opacity:0}}
.book-end{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:18px;padding:24px;background:#fff9e9;color:#1d5844;border-radius:12px;box-shadow:0 7px #d8c395}
.book-end .end-mark{font-size:64px;line-height:1}.book-end h2{font-size:30px;margin:0}.book-end p{margin:0;max-width:420px}.book-end .end-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
@media(max-width:760px){
 dialog.book-shell[open]{width:calc(100vw - 12px);height:calc(100dvh - 12px);max-height:calc(100dvh - 12px);border-radius:17px}
 .book-shell .dialogtop{padding:7px 12px}.book-shell .dialogtop strong{font-size:11px}.book-shell .close{width:36px;height:36px}
 dialog.book-shell .reader{padding:4px 10px 18px;gap:4px}.book-shell .reader>.collectionback{font-size:11px;min-height:26px}
 .book-spread{display:flex;flex-direction:column;border-radius:6px 12px 12px 6px}
 .book-spread::after{left:0;width:16px;transform:none;background:linear-gradient(90deg,#75532b33,transparent)}
 .book-spread>.animatedscene{height:var(--book-image-height,35%);flex:none;border-radius:5px 10px 0 0}
 .book-spread>.story-reading-text{flex:1 1 auto;padding:14px 17px 18px;gap:8px;border-radius:0 0 10px 5px}
 .book-spread .storycaption h2{font-size:21px;margin-bottom:8px}.book-spread .storycaption p{font-size:var(--book-font,18px);line-height:1.38}
 .book-spread .storycaption .question{font-size:calc(var(--book-font,18px) - 1px);margin-top:8px;padding-top:7px}
 .book-spread .narration{margin-top:10px}.book-spread .narration .button{font-size:13px;min-height:40px;padding:8px 14px}
 .book-spread .readerbuttons .button{font-size:14px;min-height:42px;min-width:78px;padding:8px 13px}.book-spread .pagedots{font-size:11px}
 .book-spread .motioncontrols{gap:14px}.book-spread .motioncontrols .collectionback{font-size:10px;padding:2px 0;min-height:24px}
 .book-cover-stage{padding:15px 25px 30px}.bao-cover{max-height:670px;padding:27px 22px 23px 34px;gap:17px}.bao-cover .cover-title{font-size:29px}
 .book-spread .book-folio{display:none}.book-end h2{font-size:25px}
}
@media(prefers-reduced-motion:reduce){.bao-cover,.book-turn-sheet,.book-opening .bao-cover{animation:none!important;transition:none!important}.bao-cover:hover{transform:none}}