:root{color-scheme:dark;--ink:#f7fbff;--muted:#9aabc3;--line:#32445f;--blue:#31a7ef;--navy:#07162f}
*{box-sizing:border-box}html,body{height:100%;margin:0}body{background:radial-gradient(circle at 50% 25%,#172d50 0,#0a1933 42%,#050d1c 100%);font-family:Arial,"Helvetica Neue",sans-serif;color:var(--ink);overflow:hidden}
button,.button-link,input{font:inherit}.reader{height:100%;display:grid;grid-template-rows:auto 2px minmax(0,1fr) auto;max-width:1600px;margin:auto;padding:0 24px}
.toolbar{min-height:76px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;border-bottom:1px solid rgba(255,255,255,.15)}
.brand{color:inherit;text-decoration:none;display:grid;gap:4px}.brand strong{font-size:11px;letter-spacing:.14em;color:#65c2fb}.brand span{font-family:Georgia,serif;font-size:21px}
.controls{display:flex;align-items:center;gap:7px}.controls button,.button-link{height:38px;min-width:38px;border:1px solid #42546e;background:rgba(7,22,47,.7);color:#fff;display:grid;place-items:center;text-decoration:none;cursor:pointer;transition:.2s ease}.controls button:hover,.button-link:hover{border-color:#75caff;background:#15345d;transform:translateY(-1px)}
.page-control{height:38px;border:1px solid #42546e;display:flex;align-items:center;gap:8px;padding:0 12px;color:#c9d5e5;font-size:12px}.page-control input{width:42px;border:0;border-bottom:1px solid #71819a;background:transparent;color:#fff;text-align:center;outline:0}.zoom-label{font-size:11px;color:#a9bad0;min-width:36px;text-align:center}.close{justify-self:end;color:#fff;text-decoration:none;font-size:34px;line-height:1;opacity:.8;transition:.2s}.close:hover{opacity:1;transform:rotate(90deg)}
.progress{height:2px;background:#283951}.progress span{display:block;width:0;height:100%;background:linear-gradient(90deg,#139eea,#8edaff);transition:width .25s}
.stage{position:relative;min-height:0;display:grid;place-items:center;padding:18px 64px;perspective:2200px;overflow:hidden}.book{position:relative;display:flex;max-width:100%;max-height:100%;filter:drop-shadow(0 26px 34px rgba(0,0,0,.48));transform-style:preserve-3d}.sheet{background:#fff;overflow:hidden;display:grid;place-items:center;backface-visibility:hidden;transform-style:preserve-3d}.sheet canvas{display:block;max-width:100%;max-height:100%;width:auto;height:auto}.sheet.left{transform-origin:right center}.sheet.right{transform-origin:left center}.sheet.turn-next{animation:turnNext .5s cubic-bezier(.45,.02,.2,1)}.sheet.turn-prev{animation:turnPrev .5s cubic-bezier(.45,.02,.2,1)}
.spine{position:absolute;z-index:3;left:50%;top:0;bottom:0;width:22px;transform:translateX(-50%);pointer-events:none;background:linear-gradient(90deg,transparent,rgba(0,0,0,.16),rgba(255,255,255,.24),rgba(0,0,0,.13),transparent);mix-blend-mode:multiply}
@keyframes turnNext{0%{transform:rotateY(0)}48%{transform:rotateY(-84deg);filter:brightness(.72)}100%{transform:rotateY(0)}}@keyframes turnPrev{0%{transform:rotateY(0)}48%{transform:rotateY(84deg);filter:brightness(.72)}100%{transform:rotateY(0)}}
.edge{position:absolute;z-index:5;top:50%;width:44px;height:76px;transform:translateY(-50%);border:0;background:rgba(4,14,31,.36);color:#fff;font:52px/1 Georgia,serif;cursor:pointer;opacity:.65;transition:.2s}.edge:hover{opacity:1;background:rgba(22,72,121,.72)}.prev-edge{left:8px}.next-edge{right:8px}
.loading{display:grid;place-items:center;gap:14px;color:#bdd0e6}.loading i{width:38px;height:38px;border-radius:50%;border:2px solid #3b506d;border-top-color:#4dbbff;animation:spin .75s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.error{max-width:600px;text-align:center;color:#ffd3d3}.hint{text-align:center;padding:8px 0 14px;font-size:10px;color:#7689a4}
@media(max-width:760px){.reader{padding:0 8px}.toolbar{min-height:106px;grid-template-columns:1fr auto;align-content:center}.brand{grid-column:1}.close{grid-column:2;grid-row:1}.controls{grid-column:1/-1;overflow-x:auto;padding-bottom:4px}.controls button,.button-link{flex:0 0 36px;height:34px}.page-control{flex:0 0 auto;height:34px}.zoom-label{display:none}.stage{padding:10px 32px}.sheet.left{display:none}.spine{display:none}.edge{width:30px;height:58px;font-size:38px}.prev-edge{left:0}.next-edge{right:0}.hint{font-size:9px;padding-bottom:8px}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}