.opf-book{box-sizing:border-box;perspective:2000px;touch-action:pan-y;display:block;position:relative}.opf-book--top,.opf-book--bottom{touch-action:pan-x}.opf-page{transform-style:preserve-3d;display:none;position:absolute}.opf-shadow{pointer-events:none;position:absolute;top:0;left:0}:root{--ink:#f2f3f5;--ink-muted:#a9adb6;--focus:#8fb4ff;--bench:url(/assets/bench-BFj22_g8.webp);--paper-shadow:0 2px 3px #0009, 0 22px 38px -10px #000c;--page-turn-ms:.45s;color:var(--ink);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.4}*,:before,:after{box-sizing:border-box}body{background:#26282c;margin:0}a{color:inherit}:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:4px}.scene{min-height:100svh;padding:16px max(16px, env(safe-area-inset-right)) 24px max(16px, env(safe-area-inset-left));background:var(--bench) center / cover no-repeat;flex-direction:column;gap:clamp(12px,3svh,32px);display:flex;overflow:clip}.scene--message{text-align:center;justify-content:center;align-items:center}.scene--message button{font:inherit;color:#1b1c1f;background:var(--ink);cursor:pointer;border:0;border-radius:999px;padding:10px 18px}.scene__actions{flex-wrap:wrap;justify-content:center;align-items:center;gap:16px;display:flex}.scene__bar{--bar-button:44px;grid-template-columns:var(--bar-button) minmax(0, 1fr) var(--bar-button);grid-auto-rows:var(--bar-button);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#00000073;border-radius:999px;align-items:center;gap:8px;padding:4px;font-size:.95rem;display:grid}.scene__bar h1{text-align:center;white-space:nowrap;text-overflow:ellipsis;grid-column:2;margin:0;font-size:1rem;font-weight:600;overflow:hidden}.scene__bar-button{height:100%;color:inherit;cursor:pointer;background:#ffffff1a;border:0;border-radius:50%;place-items:center;padding:0;display:grid}.scene__bar-button svg{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round}.scene__bar-button--menu{anchor-name:--bar-menu}.scene__bar-button--menu svg{stroke-width:3px}.menu{min-width:180px;color:var(--ink);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:var(--paper-shadow);background:#1b1c1feb;border:1px solid #ffffff26;border-radius:14px;padding:6px}.menu a{border-radius:10px;padding:12px 14px;text-decoration:none;display:block}.menu a:hover{background:#ffffff1a}@supports (position-anchor:--bar-menu){.menu{position-anchor:--bar-menu;inset:auto;top:anchor(bottom);right:anchor(right);margin:8px 0 0}}.book-stage{--book-max-height:min(76svh, 1000px);width:min(100%, calc(var(--book-max-height) * var(--page-ratio) * 2));margin:auto}.book-stage[data-rest=single]{width:min(100%, calc(var(--book-max-height) * var(--page-ratio)))}.book{transition:transform var(--page-turn-ms) ease-in-out;position:relative}.book-stage[data-rest=back] .book{transform:translate(25%)}.book__guide{justify-content:center;align-items:center;padding:6%;display:flex;position:absolute;inset:0 50% 0 0}.book__guide-panel{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#00000073;border-radius:16px;padding:clamp(16px,2.2vw,28px);font-size:.95rem}.book__guide-panel h2{margin:0 0 12px;font-size:1.1rem}.book__guide-panel dl{gap:10px;margin:0;display:grid}.book__guide-panel dl>div{align-items:baseline;gap:12px;display:flex}.book__guide-panel dt{gap:4px;min-width:4.5em;display:flex}.book__guide-panel dd{color:var(--ink-muted);margin:0}.book__guide-panel kbd{font:inherit;background:#ffffff14;border:1px solid #ffffff40;border-radius:6px;padding:2px 8px;font-size:.85em}.book__guide-panel p{color:var(--ink-muted);margin:16px 0 0}.book__guide [data-input=pointer]{display:none}@media (hover:hover) and (pointer:fine){.book__guide-panel dl>[data-input=pointer]{display:flex}.book__guide [data-input=touch]{display:none}}.book__pages{touch-action:pan-y pinch-zoom}.book-stage[data-pinched] .book__pages{touch-action:pan-x pan-y pinch-zoom}.book__page{background:#fff;overflow:hidden}.book__page.opf-page--soft:not(.opf-page--flat){outline-offset:-1px;outline:1px solid #0000002e}.book__page img,.closed-book img{-webkit-user-select:none;user-select:none;-webkit-user-drag:none;width:100%;height:100%;display:block}.book-stage:not([data-rest=single]) .opf-page--left:after,.book-stage:not([data-rest=single]) .opf-page--right:after{content:"";pointer-events:none;position:absolute;inset:0}.book-stage:not([data-rest=single]) .opf-page--left:after{background:linear-gradient(270deg,#00000038,#0000000f 3%,#0000 9%)}.book-stage:not([data-rest=single]) .opf-page--right:after{background:linear-gradient(90deg,#00000038,#0000000f 3%,#0000 9%)}.book__lens{position:relative}.book-stage[data-zooming] .book__pages{pointer-events:none}.book-stage[data-zooming] .book__lens{cursor:zoom-in}.book-stage[data-zooming] .book__lens[data-zoomed]{cursor:none}.book__loupe{--zoom:2;--size:clamp(240px, min(28vw, 45svh), 560px);--r:calc(var(--size) / 2);--y:calc(var(--r) - var(--zoom-y) * var(--zoom));z-index:20;width:var(--size);height:var(--size);pointer-events:none;translate:calc(var(--zoom-x) - var(--r)) calc(var(--zoom-y) - var(--r));opacity:0;background-color:#fff;background-image:var(--loupe-left), var(--loupe-right);background-repeat:no-repeat;background-size:calc(var(--page-w) * var(--zoom)) calc(var(--page-h) * var(--zoom));background-position:calc(var(--r) - var(--zoom-x) * var(--zoom)) var(--y), calc(var(--r) - (var(--zoom-x) - var(--page-w)) * var(--zoom)) var(--y);border-radius:50%;position:absolute;top:0;left:0;scale:.6;box-shadow:0 0 0 3px #ffffffe6,0 0 0 4px #00000059,inset 0 0 24px #0000002e,0 14px 32px #0000008c}.book__lens[data-zoomed] .book__loupe{opacity:1;transition:scale .15s ease-out,opacity .15s ease-out;scale:1}.book__shadow{inset:0 calc(50% * (1 - var(--paper-right))) 0 calc(50% * (1 - var(--paper-left)));box-shadow:var(--paper-shadow);position:absolute}.book__edges{--stack:9px;transition:width var(--page-turn-ms) ease-in-out;background:repeating-linear-gradient(90deg,#e9e4d8 0 1px,#b9b2a2 1px 2px);position:absolute;top:.6%;bottom:.6%;box-shadow:0 10px 14px -6px #000000b3}.book__edges--left{width:calc(var(--stack) * var(--read));border-radius:2px 0 0 2px;right:100%}.book__edges--right{width:calc(var(--stack) * (1 - var(--read)));border-radius:0 2px 2px 0;left:100%}.book__edges--left{opacity:round(down, var(--paper-left), 1)}.book__edges--right{opacity:round(down, var(--paper-right), 1)}.book-stage[data-rest=single] .book__edges--left{opacity:0}.book-controls{justify-content:center;align-items:center;gap:16px;margin-top:clamp(16px,3svh,28px);display:flex}.book-controls__count{text-align:center;font-variant-numeric:tabular-nums;min-width:7ch;color:var(--ink-muted)}.book-controls button{font:inherit;color:var(--ink);cursor:pointer;background:#0006;border:1px solid #ffffff40;border-radius:999px;padding:10px 18px}.book-controls button[aria-pressed=true]{color:#1b1c1f;background:var(--ink)}.book-controls__zoom{align-items:center;gap:8px;display:none}.book-controls__zoom svg{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round}@media (hover:hover) and (pointer:fine){.book-controls__zoom{display:inline-flex}}.book-controls button:disabled{opacity:.35;cursor:default}.shelf{flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:clamp(24px,6vw,72px);margin:auto;padding:0;list-style:none;display:flex}.shelf__book{flex-direction:column;align-items:center;gap:16px;text-decoration:none;display:flex}.shelf__title{text-align:center;font-weight:600}.closed-book{width:min(62vw, 46svh, calc(46svh * var(--page-ratio)));aspect-ratio:var(--page-ratio);box-shadow:1px 0 0 #e9e4d8, 2px 0 0 #b9b2a2, 3px 0 0 #e9e4d8, 4px 0 0 #b9b2a2, var(--paper-shadow);background:#fff;transition:transform .2s ease-out;display:block}.shelf__book:hover .closed-book,.shelf__book:focus-visible .closed-book{transform:translateY(-6px)rotate(-1deg)}@media (prefers-reduced-motion:reduce){.book,.book__edges,.book__lens[data-zoomed] .book__loupe,.closed-book{transition:none}}
