.book-reader{gap:var(--sp-4);display:grid}.book-reader__stage{align-items:center;gap:var(--sp-3);grid-template-columns:auto 1fr auto;display:grid;position:relative}.book-reader__stage:focus-visible{outline:2px solid var(--accent);outline-offset:6px;border-radius:var(--radius)}.book-reader__nav{border:1px solid var(--line);width:44px;height:44px;color:var(--ink);cursor:pointer;transition:background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);background:0 0;border-radius:50%;justify-content:center;align-items:center;display:inline-flex}.book-reader__nav:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}.book-reader__nav:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.book-reader__nav:disabled{opacity:.3;cursor:default}.book{background:var(--bg-deep);border:1px solid var(--line);aspect-ratio:14/9;perspective:2400px;grid-template-columns:1fr 1fr;max-height:640px;display:grid;position:relative;box-shadow:0 14px 36px #0000002e,0 2px 6px #00000014}.book__leaf{width:50%;transform-style:preserve-3d;will-change:transform;z-index:3;pointer-events:none;position:absolute;top:0;bottom:0}.book__leaf--next{transform-origin:0;left:50%}.book__leaf--prev{transform-origin:100%;left:0}.book__leaf__face{background:var(--paper);gap:var(--sp-4);cursor:default;backface-visibility:hidden;transform-origin:50%;grid-template-rows:auto 1fr auto;margin:0;padding:max(1.25rem,min(2.5vw,2.5rem)) max(1.5rem,min(3vw,3rem));display:grid;position:absolute;inset:0;overflow:hidden}.book__leaf__face--back{transform:rotateY(180deg)}.book__leaf--next .book__leaf__face--front{padding-left:max(1.5rem,min(2.5vw,2rem))}.book__leaf--next .book__leaf__face--back,.book__leaf--prev .book__leaf__face--front{padding-right:max(1.5rem,min(2.5vw,2rem))}.book__leaf--prev .book__leaf__face--back{padding-left:max(1.5rem,min(2.5vw,2rem))}.book__leaf__face:after{content:"";pointer-events:none;opacity:0;transition:opacity .2s ease-out;position:absolute;inset:0}.book__leaf--next .book__leaf__face--front:after{background:linear-gradient(90deg,#0000 0% 60%,#0000002e 100%)}.book__leaf--next .book__leaf__face--back:after,.book__leaf--prev .book__leaf__face--front:after{background:linear-gradient(270deg,#0000 0% 60%,#0000002e 100%)}.book__leaf--prev .book__leaf__face--back:after{background:linear-gradient(90deg,#0000 0% 60%,#0000002e 100%)}.book__leaf.is-flipping .book__leaf__face:after{opacity:1}.book__leaf--next.is-flipping{animation:.72s cubic-bezier(.6,0,.3,1) forwards leaf-flip-next}.book__leaf--prev.is-flipping{animation:.72s cubic-bezier(.6,0,.3,1) forwards leaf-flip-prev}@keyframes leaf-flip-next{0%{transform:rotateY(0)}to{transform:rotateY(-180deg)}}@keyframes leaf-flip-prev{0%{transform:rotateY(0)}to{transform:rotateY(180deg)}}.book__binding{pointer-events:none;z-index:1;background:linear-gradient(90deg,#0000 0%,#00000029 30%,#0000003d 50%,#00000029 70%,#0000 100%);width:14px;position:absolute;top:0;bottom:0;left:50%;transform:translate(-50%)}.book__page{background:var(--paper);gap:var(--sp-4);cursor:pointer;backface-visibility:hidden;transform-style:preserve-3d;grid-template-rows:auto 1fr auto;padding:max(1.25rem,min(2.5vw,2.5rem)) max(1.5rem,min(3vw,3rem));display:grid;position:relative;overflow:hidden}.book__page--left{transform-origin:100%;padding-right:max(1.5rem,min(2.5vw,2rem))}.book__page--right{transform-origin:0;padding-left:max(1.5rem,min(2.5vw,2rem))}.book__page--blank{opacity:.4;cursor:default}.book__page-head{justify-content:space-between;align-items:baseline;gap:var(--sp-3);color:var(--ink-mute);border-bottom:1px solid var(--line);padding-bottom:var(--sp-2);display:flex}.book__page-author{font-style:normal}.book__page-body{font-family:var(--font-display);color:var(--ink);text-wrap:pretty;align-self:start;max-width:50ch;font-size:max(.92rem,min(.85rem + .4vw,1.1rem));line-height:1.7;overflow-y:auto}.book__page-body h2,.book__page-body h3{font-family:var(--font-display);margin:0 0 var(--sp-3);letter-spacing:-.01em;font-weight:400;line-height:1.2}.book__page-body h2{font-size:max(1.4rem,min(1.2rem + 1vw,1.9rem))}.book__page-body h3{color:var(--accent);font-size:max(1.1rem,min(1rem + .5vw,1.3rem))}.book__page-body p{margin:0 0 var(--sp-3);max-width:50ch}.book__page-body p:last-child{margin-bottom:0}.book__page-body em{color:var(--accent);font-style:italic}.book__page-body blockquote{border-left:2px solid var(--accent);padding-left:var(--sp-3);margin:var(--sp-3) 0;color:var(--ink-soft);font-style:italic}.book__page-foot{color:var(--ink-mute);text-align:center}.book__page--left .book__page-foot{text-align:left}.book__page--right .book__page-foot{text-align:right}.book__page--left:hover:before,.book__page--right:hover:before{content:"";background:linear-gradient(to right, color-mix(in oklab, var(--accent) 16%, transparent), transparent);pointer-events:none;width:24px;position:absolute;top:0;bottom:0}.book__page--left:hover:before{left:0}.book__page--right:hover:before{background:linear-gradient(to left, color-mix(in oklab, var(--accent) 16%, transparent), transparent);right:0}.book-reader__meta{justify-content:space-between;align-items:baseline;gap:var(--sp-3);color:var(--ink-mute);flex-wrap:wrap;display:flex}.book-reader__progress{align-items:baseline;gap:.4rem;display:inline-flex}.book-reader__sep{color:var(--line)}.book-reader__hint{color:var(--ink-mute)}@media (prefers-reduced-motion:reduce){.book__leaf.is-flipping{animation:none}}@media (width<=720px){.book{aspect-ratio:auto;grid-template-columns:1fr;min-height:480px}.book__page--right,.book__binding{display:none}.book__page--left{padding-left:var(--sp-5);padding-right:var(--sp-5)}.book__page--left .book__page-foot{text-align:center}.book-reader__hint{display:none}}