:root{font-family:ui-rounded,"Avenir Next",Avenir,system-ui,sans-serif;color:#173a61;background:#f5efde}*{box-sizing:border-box}html,body{margin:0;min-height:100%}button{font:inherit}button:focus-visible{outline:3px solid #e88b56;outline-offset:4px}[hidden]{display:none!important}
.shelf-screen{min-height:100dvh;background:#f5efde}.hero{display:flex;align-items:center;justify-content:space-between;min-height:310px;padding:48px max(5vw,24px) 38px;background:#153c69;color:#fff7df;border-radius:0 0 30px 30px}.hero-copy{max-width:700px}.eyebrow{text-transform:uppercase;letter-spacing:.22em;font-size:.78rem;font-weight:800;color:#f5c779}.hero h1{font-size:clamp(3.2rem,7vw,6.8rem);line-height:.95;letter-spacing:-.055em;margin:18px 0}.hero h1 em{font-style:normal;color:#f5c779}.heart{font-size:.28em;color:#f08b60;vertical-align:top;margin-left:.35em}.hero p{font-size:clamp(1rem,2vw,1.25rem);margin:0}.hero-icon{width:clamp(155px,27vw,310px);border-radius:24%;margin-right:5vw}.library{padding:36px max(5vw,24px) 70px;max-width:1500px;margin:auto}.section-heading{display:flex;justify-content:space-between;align-items:center;gap:1rem;font-size:1.15rem;font-weight:800;margin:0 0 23px}.section-heading span:last-child{font-size:.9rem;color:#54738d}.book-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,310px),1fr));gap:32px 28px}
.book-card{position:relative;min-width:0;padding:0 6px 12px 0}.cover-button{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;text-align:left}.cover-frame{position:relative;display:block;width:100%;aspect-ratio:2244/1535;background:var(--accent);border-radius:2px 4px 4px 2px;box-shadow:3px 4px 0 #e8d7b5,6px 7px 0 #b99e75,9px 12px 18px #1b314460;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease}.cover-button:hover .cover-frame,.cover-button:focus-visible .cover-frame{transform:translateY(-4px);box-shadow:3px 7px 0 #e8d7b5,6px 10px 0 #b99e75,9px 16px 20px #1b314460}.cover-frame img{display:block;width:100%;height:100%;object-fit:cover}.cover-frame::before{content:"";position:absolute;z-index:1;inset:0 auto 0 0;width:19px;background:linear-gradient(90deg,#121e2a8c,#24456c55 30%,#fff9df8a 64%,transparent);border-left:3px solid #173a61b0;pointer-events:none}.offline-button{position:absolute;top:8px;right:13px;z-index:2;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:#fff9e8eb;color:#173a61;box-shadow:0 2px 8px #162c3b66;cursor:pointer;font-size:1.2rem}.offline-button.saved{background:#e7f2dc;color:#2b7552}.offline-button:disabled{opacity:.65;cursor:wait;font-size:.76rem}
.reader{position:fixed;inset:0;z-index:10;height:100dvh;background:#172d43;color:#fff;overflow:hidden}.close-reader{position:absolute;z-index:10;top:calc(env(safe-area-inset-top) + 10px);left:calc(env(safe-area-inset-left) + 12px);display:grid;place-items:center;width:46px;height:46px;border:0;border-radius:50%;background:#fff9e8e8;color:#173a61;box-shadow:0 3px 12px #09182670;cursor:pointer;font-size:1.55rem}.reading-stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:max(20px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left))}
.book{position:relative;width:min(calc(100vw - 40px),calc(292.3dvh - 140.3px));flex:none;aspect-ratio:4488/1535;perspective:1800px;filter:drop-shadow(0 14px 17px #081521a8);user-select:none;-webkit-user-select:none;touch-action:none}.book::before{content:"";position:absolute;z-index:0;inset:0;border:0;background:transparent;box-shadow:0 4px 0 #d8c8a4,0 8px 0 #9e855e}.book.is-closed::before{left:25%;right:25%}.book.is-opening::before{animation:reveal-pages .95s both}.spread,.old-half,.turn-sheet,.end-card{position:absolute;inset:0}.spread{z-index:1;width:100%;height:100%;object-fit:fill;border-radius:1px}.book.is-opening .spread{animation:reveal-image .95s both}.book-gutter{position:absolute;z-index:2;left:50%;top:0;bottom:0;width:16px;transform:translateX(-50%);background:linear-gradient(90deg,#1e22353b,#fff7d720 25%,#08142158 52%,#fff7d71a 78%,transparent);pointer-events:none}
.cover-panel{position:absolute;z-index:5;left:25%;top:0;width:50%;height:100%;transform-origin:left center;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;box-shadow:3px 0 0 #e7d9b4,7px 5px 0 #ad8d63,12px 12px 17px #0815218c}.cover-panel::after{content:"";position:absolute;z-index:2;inset:0 auto 0 0;width:6%;border-left:4px solid #173a61a0;background:linear-gradient(90deg,#152a4599,#ffffff82 58%,transparent);pointer-events:none;backface-visibility:hidden;-webkit-backface-visibility:hidden}.cover-front,.cover-inside{position:absolute;inset:0;display:block;width:100%;height:100%;border-radius:2px 4px 4px 2px;backface-visibility:hidden;-webkit-backface-visibility:hidden}.cover-front{object-fit:fill;transform:translateZ(1px)}.cover-inside{background:#e7d8b2;transform:rotateY(180deg) translateZ(1px);box-shadow:inset 12px 0 20px #78633d5c}.cover-panel.opening{animation:cover-open .95s cubic-bezier(.22,.65,.3,1) both}
.old-half{z-index:3;width:50%;height:100%;object-fit:fill}.old-half.right{left:50%}.turn-sheet{z-index:4;width:50%;height:100%;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;will-change:transform}.turn-sheet.forward{left:50%;transform-origin:left center}.turn-sheet.backward{left:0;transform-origin:right center}.turn-sheet::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#24384e1a,#17273405 42%,#13243855);backface-visibility:hidden;-webkit-backface-visibility:hidden}.turn-face{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform:translateZ(1px);box-shadow:0 0 10px #101e2e48}.turn-face.back{transform:rotateY(180deg) translateZ(1px)}
.end-card{display:grid;place-content:center;background:#f5efde;color:#173a61;text-align:center;font-size:clamp(1rem,4vw,2.2rem);font-weight:800}.end-card span{display:block;font-size:.55em;font-weight:500;margin-top:12px}
@keyframes cover-open{0%{left:25%;transform:rotateY(0)}20%{left:50%;transform:rotateY(0)}100%{left:50%;transform:rotateY(-180deg)}}@keyframes reveal-pages{0%,17%{left:25%;right:25%;opacity:0}25%,100%{left:0;right:0;opacity:1}}@keyframes reveal-image{0%{clip-path:inset(0 25%)}20%,100%{clip-path:inset(0)}}
.toast{position:fixed;z-index:20;bottom:max(24px,env(safe-area-inset-bottom));left:50%;transform:translate(-50%,20px);background:#fff8e7;color:#173a61;border-radius:16px;padding:12px 18px;box-shadow:0 9px 25px #0004;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;max-width:90vw;text-align:center}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:650px){.hero{min-height:250px;padding:calc(env(safe-area-inset-top) + 32px) 22px 30px}.hero-icon{width:118px;margin-right:-12px;align-self:flex-end}.hero h1{font-size:clamp(2.6rem,11vw,4rem)}.hero p{max-width:220px}.eyebrow{font-size:.64rem;letter-spacing:.12em}.library{padding:27px 18px 60px}.book-grid{gap:26px}}
@media(max-width:700px) and (orientation:portrait){.book{width:min(calc(100dvh - 36px),calc(292.3vw - 87.7px));transform:rotate(90deg)}}
@media(prefers-reduced-motion:reduce){.cover-panel.opening,.turn-sheet.forward.turning,.turn-sheet.backward.turning,.book.is-opening .spread,.book.is-opening::before{animation-duration:.01ms}.cover-frame{transition:none}}

/* Shelf layout and private, on-device library controls. */
.hero-inner{width:100%;max-width:1280px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr;align-items:center;gap:32px}
.hero-icon{justify-self:center;margin:0}
.library{max-width:1280px}
.book-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.shelf-actions{display:flex;align-items:center;gap:14px}
#random-book{border:0;border-radius:18px;padding:10px 16px;background:#173a61;color:#fff7df;font-weight:800;cursor:pointer;font-size:.86rem}
#random-book:hover{background:#245489}
.favorites-section{margin:0 0 34px;padding:20px 0 30px;border-bottom:1px solid #d9cbaa}
.favorites-section h2{font-size:1.05rem;margin:0 0 17px}
.favorite-button{position:absolute;right:13px;bottom:19px;z-index:2;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:#fff9e8eb;color:#c45c56;box-shadow:0 2px 8px #162c3b66;cursor:pointer;font-size:1.45rem;line-height:1}
.favorite-button[aria-pressed=true]{background:#fff0eb;color:#b83f50}
.app-version{padding:0 20px max(24px,env(safe-area-inset-bottom));text-align:center;font-size:.72rem;color:#687b88}

/* A closed back cover replaces the former end card. */
.reading-stage.has-recommendations{gap:clamp(18px,3vw,48px)}
.book.is-ended{width:min(42vw,calc(146.2dvh - 42px));aspect-ratio:2244/1535}
.book.is-ended::before{box-shadow:3px 4px 0 #e9dbb8,7px 7px 0 #9e855e}
.back-cover{position:absolute;z-index:1;inset:0;width:100%;height:100%;object-fit:fill;border-radius:2px 4px 4px 2px;box-shadow:inset 10px 0 8px #182c4355}
.recommendations{width:min(42vw,540px);flex:none}
.recommendations h2{margin:0 0 16px;color:#fff7df;font-size:clamp(1rem,2vw,1.5rem)}
.recommendation-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.recommendation-button{border:0;padding:0;background:none;cursor:pointer;box-shadow:3px 4px 0 #c6ac7c,6px 9px 15px #0006;transition:transform .2s}
.recommendation-button:hover,.recommendation-button:focus-visible{transform:translateY(-4px)}
.recommendation-button img{display:block;width:100%;aspect-ratio:2244/1535;object-fit:cover}
.back-closing{position:absolute;z-index:6;left:0;top:0;width:50%;height:100%;transform-origin:right center;transform-style:preserve-3d;-webkit-transform-style:preserve-3d}
.back-closing.closing{animation:close-back .85s cubic-bezier(.3,.04,.2,1) both}
.closing-front,.closing-back{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform:translateZ(1px)}
.closing-back{transform:rotateY(180deg) translateZ(1px)}
@keyframes close-back{to{transform:rotateY(-180deg)}}
@media(max-width:950px){.book-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){.hero-inner{grid-template-columns:minmax(0,1fr) auto;gap:12px}.hero-icon{width:118px}.book-grid{grid-template-columns:1fr}.section-heading{align-items:flex-start}.shelf-actions{gap:8px;flex-wrap:wrap;justify-content:flex-end}#random-book{font-size:.72rem;padding:8px 11px}.reading-stage.has-recommendations{flex-direction:column;gap:22px;padding-top:72px;padding-bottom:24px}.book.is-ended{width:min(86vw,calc(63dvh - 80px));transform:none}.recommendations{width:min(86vw,420px)}.recommendations h2{font-size:1rem;margin-bottom:10px}.recommendation-grid{gap:10px}}
@media(max-width:700px) and (orientation:portrait){.book.is-ended{transform:none}}
@media(prefers-reduced-motion:reduce){.back-closing.closing{animation-duration:.01ms}.recommendation-button{transition:none}}
@media(max-width:650px){
  .hero h1{font-size:clamp(2.15rem,9.1vw,3.2rem)}
  .section-heading{display:block}
  .shelf-actions{margin-top:10px;justify-content:space-between}
}

/* One uninterrupted turn; the crease briefly disappears as the leaf stands upright. */
.cover-inside-page{display:block;width:100%;height:100%;object-fit:fill}
.book-gutter{z-index:3}
.book-gutter.during-turn{animation:crease-flip .92s ease-in-out both}
.turn-sheet.forward.turning{animation:turn-forward .92s cubic-bezier(.45,0,.55,1) both}
.turn-sheet.backward.turning{animation:turn-backward .92s cubic-bezier(.45,0,.55,1) both}
.turn-sheet.turning::after,.turn-sheet.turning::before{z-index:2;animation:leaf-shade .92s ease-in-out both}
.turn-sheet::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#11253d8a,transparent 68%);transform:rotateY(180deg) translateZ(2px);backface-visibility:hidden;-webkit-backface-visibility:hidden}
@keyframes turn-forward{from{transform:rotateY(0)}to{transform:rotateY(-180deg)}}
@keyframes turn-backward{from{transform:rotateY(0)}to{transform:rotateY(180deg)}}
@keyframes crease-flip{0%,25%{opacity:1}45%,55%{opacity:0}75%,100%{opacity:1}}
@keyframes leaf-shade{0%{opacity:.08}50%{opacity:.48}100%{opacity:.08}}
@media(prefers-reduced-motion:reduce){.turn-sheet.forward.turning,.turn-sheet.backward.turning,.book-gutter.during-turn{animation-duration:.01ms}}

/* Keep the iPhone status area and rotation backdrop in the same blue family. */
:root,html,body,#app{background:#153c69}
.hero{min-height:260px;padding-top:38px;padding-bottom:30px}
.hero-icon{width:clamp(140px,22vw,260px)}
.eyebrow{white-space:nowrap}
.favorite-button,.favorite-button[aria-pressed=true]{background:transparent;box-shadow:none}
.favorite-button svg{display:block;width:27px;height:27px;overflow:visible;filter:drop-shadow(0 1px 2px #172d4380)}
.favorite-button path{fill:#fffdf5;stroke:#b83f50;stroke-width:1.8;stroke-linejoin:round}
.favorite-button[aria-pressed=true] path{fill:#b83f50}

/* The right leaf folds left; the closed cover then slides beside the suggestions. */
.back-closing{left:50%;transform-origin:left center}
.book.is-closing .spread{clip-path:inset(0 50% 0 0)}
.book.is-closing::before{right:50%}
.reading-stage.has-recommendations{display:grid;grid-template-columns:min(42vw,calc(146.2dvh - 42px)) min(42vw,540px);align-items:start;align-content:safe center;justify-content:center;overflow-y:auto}
.reading-stage.has-recommendations .recommendations{position:relative}
.reading-stage.has-recommendations .recommendations h2{position:absolute;left:0;bottom:calc(100% + 10px);margin:0;white-space:nowrap}
.reading-stage.arriving .recommendations{pointer-events:none}
.reading-stage.arriving .recommendations h2{animation:recommend-in .46s .18s both}
.reading-stage.arriving .recommendation-button{animation:recommend-in .46s both}
.reading-stage.arriving .recommendation-button:nth-child(1){animation-delay:.32s}
.reading-stage.arriving .recommendation-button:nth-child(2){animation-delay:.45s}
.reading-stage.arriving .recommendation-button:nth-child(3){animation-delay:.58s}
.reading-stage.arriving .recommendation-button:nth-child(4){animation-delay:.71s}
@keyframes recommend-in{from{opacity:0;transform:translateY(13px)}to{opacity:1;transform:translateY(0)}}

@media(max-width:650px){
  .hero{min-height:0;padding:calc(env(safe-area-inset-top) + 20px) 18px 24px}
  .hero-inner{grid-template-columns:minmax(0,1fr) 96px;gap:8px}
  .hero-icon{width:96px;align-self:center;margin:0}
  .eyebrow{font-size:clamp(.49rem,2.3vw,.68rem);letter-spacing:.06em}
  .hero h1{font-size:clamp(2rem,8.3vw,3.1rem);margin:13px 0 0}
  .reading-stage.has-recommendations{grid-template-columns:min(86vw,420px);gap:18px;justify-items:center;padding-top:max(66px,env(safe-area-inset-top));padding-bottom:max(24px,env(safe-area-inset-bottom))}
  .reading-stage.has-recommendations .recommendations h2{position:static;margin:0 0 10px}
}
@media(prefers-reduced-motion:reduce){.reading-stage.arriving .recommendations h2,.reading-stage.arriving .recommendation-button{animation-duration:.01ms;animation-delay:0ms}}

/* The front cover carries page one; page two travels with its moving hinge. */
@keyframes cover-open{from{left:25%;transform:rotateY(0)}to{left:50%;transform:rotateY(-180deg)}}
@keyframes reveal-pages{from{left:25%;right:25%;opacity:1}to{left:0;right:0;opacity:1}}
.book.is-opening,.book.is-cover-closing{perspective:6000px}
.book.is-opening::before{animation-timing-function:ease-in-out}
.opening-right{position:absolute;z-index:1;top:0;left:25%;width:50%;height:100%;object-fit:fill}
.opening-right.opening{animation:shift-right .95s cubic-bezier(.22,.65,.3,1) both}
.opening-right.closing-ready{left:50%}
.opening-right.closing{animation:shift-right .95s cubic-bezier(.22,.65,.3,1) reverse both}
.cover-panel.closing-ready{left:50%;transform:rotateY(-180deg)}
.cover-panel.closing{animation:cover-open .95s cubic-bezier(.22,.65,.3,1) reverse both}
.book.is-cover-closing::before{animation:reveal-pages .95s ease-in-out reverse both}
@keyframes shift-right{from{left:25%}to{left:50%}}

/* The closed back cover retraces its path before the last spread unfolds. */
.back-closing.closed{transform:rotateY(-180deg)}
.back-closing.reopening{animation:reopen-back .85s cubic-bezier(.22,.65,.3,1) both}
.book.is-reopening-back .spread{animation:reveal-last .85s ease-in-out both}
.book.is-reopening-back::before{animation:reveal-last-pages .85s ease-in-out both}
.reading-stage.departing .recommendations h2,.reading-stage.departing .recommendation-button{animation:recommend-out .4s both;pointer-events:none}
.reading-stage.departing .recommendation-button:nth-child(1){animation-delay:.25s}
.reading-stage.departing .recommendation-button:nth-child(2){animation-delay:.17s}
.reading-stage.departing .recommendation-button:nth-child(3){animation-delay:.09s}
.reading-stage.departing .recommendation-button:nth-child(4){animation-delay:0s}
@keyframes reopen-back{from{transform:rotateY(-180deg)}to{transform:rotateY(0)}}
@keyframes reveal-last{from{clip-path:inset(0 50% 0 0)}to{clip-path:inset(0)}}
@keyframes reveal-last-pages{from{right:50%}to{right:0}}
@keyframes recommend-out{to{opacity:0;transform:translateY(10px)}}
@media(prefers-reduced-motion:reduce){.opening-right.opening,.opening-right.closing,.cover-panel.closing,.book.is-cover-closing::before,.back-closing.reopening,.book.is-reopening-back .spread,.book.is-reopening-back::before,.reading-stage.departing .recommendations h2,.reading-stage.departing .recommendation-button{animation-duration:.01ms;animation-delay:0ms}}