#roomBook{width:min(640px,calc(100vw - 36px));max-height:calc(100dvh - 36px);padding:22px;border:0;border-radius:14px;background:#f1e3c7;box-shadow:0 20px 90px #192b2e66;overflow:auto;color:#58674f}
#roomBook::backdrop{background:#26352c55;backdrop-filter:blur(4px)}
#roomBook button{border:0;border-radius:50%;background:#e0d2b3;color:#566450;min-width:48px;min-height:48px;font-size:32px;cursor:pointer;touch-action:manipulation}
#roomBook button:focus-visible{outline:3px solid #7a9868;outline-offset:3px}#roomBook button:disabled{opacity:.25}
#roomBook .book-close{position:absolute;right:10px;top:10px;z-index:2;background:#f6ecd9ed}
.book-spread{border:8px solid #f9f0dc;border-radius:4px;box-shadow:0 2px 9px #685e3730;overflow:hidden}
.book-picture{aspect-ratio:1;background-image:url('../frog-post/assets/postcards.41ec4e105c61.webp');background-size:300% 200%}
.book-letter{aspect-ratio:1;padding:42px 24px;font-size:clamp(17px,2.7vw,24px);line-height:1.9;display:flex;align-items:center;background:repeating-linear-gradient(#f7edd6 0 35px,#cbbb9630 36px)}
.book-letter[hidden],.book-picture[hidden]{display:none}.book-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px}.book-dots{flex:1;text-align:center;letter-spacing:4px;font-size:18px}.book-turn{font-size:23px!important}
@media(orientation:landscape) and (max-height:650px){#roomBook{width:min(420px,calc(100dvh - 34px));padding:12px 16px}.book-spread{margin:auto;width:calc(100dvh - 128px);max-width:100%}.book-nav{margin-top:7px}.book-letter{padding:20px;font-size:15px;line-height:1.6}#roomBook .book-close{right:4px;top:4px}}
@media(prefers-reduced-motion:reduce){#roomBook::backdrop{backdrop-filter:none}}