:root{--sky:#eaf6fb;--peach:#d99e87;--cream:#fbf2e5;--ink:#2c5467;--muted:#6e90a1;--page-ratio:1.25;color-scheme:light}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;}body{font-family:'Avenir Next',Avenir,'Trebuchet MS',system-ui,sans-serif;color:var(--ink);background:radial-gradient(ellipse 90% 72% at 50% 52%,#fff 0%,#eaf6fb 70%,#dceef7 100%)}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a,button{touch-action:manipulation}button:focus-visible,a:focus-visible,.book:focus-visible{outline:3px solid #2e88b0;outline-offset:3px}
.app{min-height:100svh;max-width:1800px;margin:auto;padding:17px clamp(14px,3vw,48px) 25px;display:flex;flex-direction:column;align-items:center;overflow-x:hidden}.topbar{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;z-index:20}.branding{white-space:nowrap}.brand{font-size:clamp(20px,2vw,30px);letter-spacing:-1px;line-height:1;font-weight:1000;color:#367da4}.brand em{font-style:normal;color:var(--peach)}.brand i{font-size:20px;color:#d3a55d;font-style:normal;margin-left:5px}.branding small{display:block;font-size:9px;letter-spacing:2px;font-weight:900;color:#86a4b3;margin-top:6px}.top-actions{display:flex;align-items:center;gap:8px}.header-button,.exit-link{display:flex;align-items:center;justify-content:center;gap:8px;height:41px;border-radius:14px;border:1px solid #c6dfe9;background:#fffdfae8;color:#4e829e;padding:0 15px;font-size:12px;font-weight:850;text-decoration:none;box-shadow:0 3px 15px #6096ad10;transition:background .2s,transform .2s}.header-button:hover,.exit-link:hover{background:#fff;transform:translateY(-1px)}.header-button svg{width:17px;height:17px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}.primary-button{color:#fff;background:#438eb4;border-color:#438eb4}.primary-button:hover{background:#367eaa}.exit-link{background:#f8f0e6;border-color:#e5d8c6;color:#876d52}
.intro{text-align:center;margin:clamp(18px,3vh,34px) 0 clamp(14px,2vh,25px)}.eyebrow{font-size:10px;letter-spacing:3px;color:#8cabb8;font-weight:900;margin:0 0 6px}.intro h1{font-size:clamp(27px,3.45vw,54px);letter-spacing:-1.8px;line-height:1.05;margin:0;font-weight:1000;color:#36789a}.intro p:last-child{font-size:12px;margin:9px 0 0;color:#869eaa}
.stage{display:flex;align-items:center;justify-content:center;gap:clamp(6px,1.6vw,23px);width:100%;flex:1;min-height:0;position:relative}.arrow{width:clamp(42px,4.5vw,61px);height:clamp(52px,5vw,70px);border:1px solid #d3e6ed;border-radius:99px;background:#fffefcf2;color:#4a91b0;display:grid;place-items:center;flex:none;z-index:11;box-shadow:0 7px 24px #779dbb30;transition:transform .18s,background .18s,opacity .18s}.arrow:not(:disabled):hover{background:#fff;transform:scale(1.07)}.arrow:disabled{opacity:.22;cursor:not-allowed;box-shadow:none}.arrow svg{width:29px;height:29px;stroke:currentColor;stroke-width:2.3;fill:none;stroke-linecap:round;stroke-linejoin:round}
.book{position:relative;isolation:isolate;flex:0 1 auto;width:min(81vw,1460px,calc((100svh - 257px)*2*var(--page-ratio)));aspect-ratio:calc(2*var(--page-ratio));display:flex;align-items:stretch;perspective:2300px;transform-style:preserve-3d;filter:drop-shadow(0 22px 26px #566c7648);touch-action:pan-y;user-select:none;-webkit-user-select:none;transition:width .4s cubic-bezier(.2,.7,.2,1)}
.book[data-layout="solo"],.book[data-layout="single"]{width:min(41vw,740px,calc((100svh - 257px)*var(--page-ratio)));aspect-ratio:var(--page-ratio)}.page{position:relative;flex:0 0 50%;min-width:0;overflow:hidden;background:#f5edde;box-shadow:0 0 0 1px #87766520}.page-left{border-radius:8px 0 0 8px}.page-right{border-radius:0 8px 8px 0}.page img{display:block;width:100%;height:100%;object-fit:contain;object-position:center;pointer-events:none}.page::after{content:'';position:absolute;inset:0;pointer-events:none}.book[data-layout="spread"] .page-left::after{background:linear-gradient(to right,transparent 80%,#342d2920 100%)}.book[data-layout="spread"] .page-right::after{background:linear-gradient(to left,transparent 80%,#342d2925 100%)}
.book[data-layout="solo"] .page-left{display:none}.book[data-layout="solo"] .page-right{flex-basis:100%;border-radius:9px;box-shadow:0 1px 0 #a59a8b,3px 3px 0 #f0e3d4,5px 7px 0 #b2aaa030}.book[data-layout="single"] .page-left{flex-basis:100%;border-radius:9px}.book[data-layout="single"] .page-right{display:none}.book[data-layout="solo"] .book-spine,.book[data-layout="single"] .book-spine{display:none}.book-spine{position:absolute;inset:0 auto 0 calc(50% - 5px);z-index:5;width:10px;background:linear-gradient(90deg,#100f0f07,#33282042 49%,#ffffff4a 51%,#100f0f09);pointer-events:none;mix-blend-mode:multiply}
/* The paper leaf has real front/back faces. On forward turn: current right on front, next left on back. */
.flip-layer{position:absolute;inset:0;z-index:8;pointer-events:none;display:none;perspective:2300px;transform-style:preserve-3d}.flip-layer.is-active{display:block}.turn-leaf{position:absolute;top:0;width:50%;height:100%;transform-style:preserve-3d;will-change:transform}.turn-leaf.next{left:50%;transform-origin:left center;animation:flipForward .82s cubic-bezier(.22,.58,.20,1) both}.turn-leaf.prev{left:0;transform-origin:right center;animation:flipBackward .82s cubic-bezier(.22,.58,.20,1) both}.leaf-face{position:absolute;inset:0;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 2px 10px #1114;background:#f4efea}.leaf-face.back{transform:rotateY(180deg)}.leaf-face img{width:100%;height:100%;object-fit:contain;display:block}.leaf-face.front:after,.leaf-face.back:after{content:'';inset:0;position:absolute;box-shadow:inset 0 0 22px #392a1618;pointer-events:none}.leaf-face.front:after{background:linear-gradient(90deg,#100c0924,transparent 22%,transparent 75%,#100d0920)}.leaf-face.back:after{background:linear-gradient(90deg,transparent 75%,#19160e22)}
@keyframes flipForward{0%{transform:rotateY(0deg)}43%{transform:rotateY(-78deg)}58%{transform:rotateY(-105deg)}100%{transform:rotateY(-180deg)}}@keyframes flipBackward{0%{transform:rotateY(0deg)}43%{transform:rotateY(78deg)}58%{transform:rotateY(105deg)}100%{transform:rotateY(180deg)}}
/* Fade/float for cover changes and single-page reading. Never transforms the image itself. */
.book.revealing .page{animation:revealPage .56s cubic-bezier(.2,.65,.25,1) both}@keyframes revealPage{0%{opacity:.14;filter:blur(4px)}100%{opacity:1;filter:blur(0)}}.dissolve-overlay{position:absolute;inset:0;z-index:10;pointer-events:none;background:transparent;animation:dissolveAway .55s ease both}.dissolve-overlay img{display:block;width:100%;height:100%;object-fit:contain}.dissolve-overlay.old-spread{display:flex}.dissolve-overlay.old-spread img{width:50%}@keyframes dissolveAway{from{opacity:1}to{opacity:0}}
.loading-notice{position:absolute;inset:0;background:var(--cream);z-index:12;display:grid;place-items:center;font-weight:800;color:#6d95a8}.loading-notice[hidden]{display:none}
.footer{width:min(740px,82vw);margin:clamp(15px,2.6vh,25px) auto 0;z-index:12}.reading-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px;font-size:12px;font-weight:900;color:#62879c}.progress{height:6px;background:#d4e7f0;border-radius:99px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,#99cee4,#5298bd);width:0%;transition:width .3s ease;border-radius:99px}.bottom-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:13px}.minor{background:none;border:0;color:#557f94;font-size:12px;font-weight:800;padding:5px 0}#readerHelp{font-size:11px;color:#8a9fa9;text-align:center}
.thumbnail-panel{position:relative;z-index:30;background:#fffefa;width:min(1100px,95vw);padding:16px 19px 19px;border:1px solid #dce8ed;border-radius:17px;margin-top:18px;box-shadow:0 14px 38px #6d95aa21}.panel-top{display:flex;justify-content:space-between;align-items:center}.panel-top strong{color:#346e8c}.panel-top button{border:0;background:transparent;color:#698a9b;font-size:19px}.thumbnail-list{display:flex;overflow-x:auto;gap:10px;padding:15px 1px 2px;scrollbar-color:#81c1db transparent}.thumb{min-width:95px;width:95px;border:2px solid #e5e2d9;border-radius:10px;background:#f8f4ec;padding:5px;display:grid;gap:6px;text-align:center;color:#6c8593;font-size:11px;font-weight:900}.thumb img{display:block;width:100%;aspect-ratio:var(--page-ratio);object-fit:contain}.thumb[aria-current="page"]{border-color:#308abd;background:#e6f5fb}.help-panel{position:relative;z-index:30;background:#fffefa;line-height:1.55;padding:12px 20px;max-width:800px;font-size:12px;border-radius:14px;margin:15px auto 0;color:#577589}.error{background:#ffebe2;padding:12px 15px;border:1px solid #e6a58d;color:#854a33;border-radius:13px;max-width:750px}.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}[hidden]{display:none!important}
@media(max-width:900px){.app{padding:12px 8px 14px}.brand{font-size:21px}.branding small{font-size:7px;letter-spacing:1.2px}.top-actions{gap:5px}.header-button,.exit-link{padding:0 10px;height:37px}.wide-only{display:none}.intro{margin:clamp(18px,3vh,29px) 0 clamp(14px,2.5vh,22px)}.intro h1{font-size:clamp(27px,6vw,37px)}.intro .eyebrow{font-size:9px;letter-spacing:2px}.stage{gap:4px;flex:0 0 auto}.book,.book[data-layout="solo"],.book[data-layout="single"]{width:min(calc(100vw - 105px),calc((100svh - 219px)*var(--page-ratio)));aspect-ratio:var(--page-ratio);filter:drop-shadow(0 14px 17px #61788742)}.arrow{width:44px;height:55px}.footer{width:87vw;margin-top:18px}#readerHelp{display:none}.book[data-layout="spread"] .page-left{flex-basis:100%}.book[data-layout="spread"] .page-right{display:none}.book-spine{display:none}}
@media(max-width:410px){.brand{font-size:18px}.brand i{display:none}.header-button,.exit-link{padding:0 8px;height:34px}.book,.book[data-layout="solo"],.book[data-layout="single"]{width:min(calc(100vw - 99px),calc((100svh - 213px)*var(--page-ratio)))}.arrow{width:40px;height:51px}.footer{width:91vw}.intro{margin:15px 0}}
/* True immersive browser fullscreen: illustration has the entire viewport, not a reduced-size book frame. */
:is(.app:fullscreen,.app.focus-mode){position:relative;max-width:none;width:100vw;height:100vh;min-height:100vh;margin:0;padding:0;overflow:hidden;background:#111b27;color:white}:is(.app:fullscreen,.app.focus-mode) .topbar{position:absolute;z-index:30;inset:max(9px,env(safe-area-inset-top)) 0 auto 0;width:100%;padding:0 clamp(12px,2vw,26px);pointer-events:none}:is(.app:fullscreen,.app.focus-mode) .top-actions{pointer-events:auto}:is(.app:fullscreen,.app.focus-mode) .branding{opacity:0;pointer-events:none}:is(.app:fullscreen,.app.focus-mode) .top-actions .header-button,:is(.app:fullscreen,.app.focus-mode) .top-actions .exit-link{background:#101c2ab8;color:#eefaff;border-color:#ffffff4a;backdrop-filter:blur(10px);box-shadow:none}:is(.app:fullscreen,.app.focus-mode) .top-actions .header-button:hover{background:#21394bd9}:is(.app:fullscreen,.app.focus-mode) .intro{display:none}:is(.app:fullscreen,.app.focus-mode) .stage{position:absolute;inset:0;width:100vw;height:100vh;min-height:0;max-height:none;display:flex;margin:0;background:radial-gradient(ellipse at center,#243347 0%,#101b26 90%)}:is(.app:fullscreen,.app.focus-mode) .book,:is(.app:fullscreen,.app.focus-mode) .book[data-layout="single"]{position:relative;width:100vw;height:100vh;max-width:100vw;max-height:100vh;aspect-ratio:auto;border:0;border-radius:0;filter:none;background:none;box-shadow:none;flex:1}:is(.app:fullscreen,.app.focus-mode) .book[data-layout="single"] .page-left{display:block;width:100%;height:100%;flex:0 0 100%;border:0;border-radius:0;background:none;box-shadow:none;overflow:visible}:is(.app:fullscreen,.app.focus-mode) .page-left::after{display:none}:is(.app:fullscreen,.app.focus-mode) .page-left img{width:100%;height:100%;max-width:100vw;max-height:100vh;object-fit:contain;object-position:center}:is(.app:fullscreen,.app.focus-mode) .page-right,:is(.app:fullscreen,.app.focus-mode) .book-spine,:is(.app:fullscreen,.app.focus-mode) .flip-layer{display:none!important}:is(.app:fullscreen,.app.focus-mode) .arrow{position:absolute;z-index:20;top:50%;transform:translateY(-50%);border:1px solid #fff5;background:#101c2ab9;color:#fff;box-shadow:none;backdrop-filter:blur(8px)}:is(.app:fullscreen,.app.focus-mode) .arrow:not(:disabled):hover{transform:translateY(-50%) scale(1.07);background:#233849d9}:is(.app:fullscreen,.app.focus-mode) .arrow-prev{left:max(9px,env(safe-area-inset-left))}:is(.app:fullscreen,.app.focus-mode) .arrow-next{right:max(9px,env(safe-area-inset-right))}:is(.app:fullscreen,.app.focus-mode) .footer{position:absolute;bottom:max(8px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:min(720px,72vw);margin:0;z-index:21;padding:12px 17px 9px;background:#101c2aae;color:#f8fcff;border:1px solid #ffffff2b;border-radius:18px;backdrop-filter:blur(12px)}:is(.app:fullscreen,.app.focus-mode) .reading-row{color:#eefaff}:is(.app:fullscreen,.app.focus-mode) .progress{background:#ffffff35;height:4px}:is(.app:fullscreen,.app.focus-mode) .bottom-row{margin-top:8px}:is(.app:fullscreen,.app.focus-mode) .bottom-row .minor{color:#d8edf9}:is(.app:fullscreen,.app.focus-mode) #readerHelp{color:#cedfe9}:is(.app:fullscreen,.app.focus-mode) .thumbnail-panel,:is(.app:fullscreen,.app.focus-mode) .help-panel{position:absolute;bottom:95px;z-index:40;max-height:36vh;overflow-y:auto;background:#fbf9f4;color:#346078}:is(.app:fullscreen,.app.focus-mode) .help-panel{max-width:min(700px,88vw)}:is(.app:fullscreen,.app.focus-mode) .error{position:absolute;top:60px;z-index:50}
@media(max-width:700px){:is(.app:fullscreen,.app.focus-mode) .brand{display:none}:is(.app:fullscreen,.app.focus-mode) .arrow{width:40px;height:50px}:is(.app:fullscreen,.app.focus-mode) .footer{width:min(84vw,600px);padding:7px 10px 6px}:is(.app:fullscreen,.app.focus-mode) .reading-row{font-size:11px;margin-bottom:5px}:is(.app:fullscreen,.app.focus-mode) .bottom-row{display:none}:is(.app:fullscreen,.app.focus-mode) .thumbnail-panel{bottom:57px}:is(.app:fullscreen,.app.focus-mode) .top-actions .header-button{font-size:11px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
/* Phone refinement: use nearly all available screen width and center the image
   vertically; controls float at the sides instead of shrinking the page. */
@media(max-width:900px){
 .stage{flex:1 1 auto;min-height:0}
 .book,.book[data-layout="solo"],.book[data-layout="single"]{width:min(94vw,calc((100svh - 240px)*var(--page-ratio)));}
 .arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:15;width:41px;height:54px;background:#ffffffcf;box-shadow:0 5px 16px #375b6c27;backdrop-filter:blur(5px)}
 .arrow-prev{left:0}.arrow-next{right:0}
 .arrow:not(:disabled):hover{transform:translateY(-50%) scale(1.05)}
 .footer{width:93vw;margin-top:10px;padding-bottom:3px}
}
@media(max-width:410px){.book,.book[data-layout="solo"],.book[data-layout="single"]{width:min(94vw,calc((100svh - 230px)*var(--page-ratio)));}}
/* Fullscreen retains its own page/arrow placement at every breakpoint. */
/* Keep the 3D paper strictly inside the open book's silhouette during its turn. */
.flip-layer{overflow:hidden;border-radius:8px}