:root[data-theme=dark] .reader{--page-shadow: rgb(0 0 0 / .55)}html,body.reader-body{overscroll-behavior-x:none}body.reader-body{margin:0;height:100dvh;overflow:hidden;background:var(--bg);color:var(--text)}.reader{position:relative;display:flex;flex-direction:column;height:100dvh;overscroll-behavior:none;--gutter: 14px;--page-shadow: rgb(60 40 20 / .28);--chrome: color-mix(in srgb, var(--bg) 92%, transparent)}.reader .bar{position:absolute;left:0;right:0;z-index:5;display:flex;align-items:center;gap:.75rem;padding:.55rem max(.9rem,env(safe-area-inset-left)) .55rem max(.9rem,env(safe-area-inset-right));background:var(--chrome);backdrop-filter:blur(8px);font-family:var(--font-ui);font-size:.85rem;transition:opacity .18s ease,transform .18s ease}.reader .bar.top{top:0;padding-top:calc(.55rem + env(safe-area-inset-top,0px));border-bottom:1px solid var(--border)}.reader .bar.bottom{bottom:0;padding-bottom:calc(.55rem + env(safe-area-inset-bottom,0px));border-top:1px solid var(--border)}.reader[data-chrome=off] .bar{opacity:0;pointer-events:none}.reader[data-chrome=off] .bar.top{transform:translateY(-100%)}.reader[data-chrome=off] .bar.bottom{transform:translateY(100%)}@media(prefers-reduced-motion:reduce){.reader .bar{transition:none}}.reader .back{color:var(--text);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-right:auto}.reader .back:hover{color:var(--accent)}.reader .back:has(+.private-pill){margin-right:0}.reader .private-pill{margin:0 auto 0 .6rem;padding:.2rem .6rem;border:1px solid var(--accent);border-radius:999px;color:var(--accent);font-family:var(--font-ui);font-size:.75rem;font-weight:600;white-space:nowrap;text-decoration:none}.reader .private-pill:hover{background:var(--accent);color:#fff}.reader .controls{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;justify-content:flex-end}.reader .group{display:inline-flex;gap:.2rem}.reader button{font:inherit;font-family:var(--font-ui);background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:6px;padding:.3rem .6rem;cursor:pointer;white-space:nowrap}.reader button:hover:not(:disabled){border-color:var(--accent)}.reader button[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:#fff}.reader button:disabled{opacity:.35;cursor:default}.reader .zoom button{min-width:2rem}.reader .zoom-level{min-width:3.4rem}.reader .readout{font-variant-numeric:tabular-nums;font-weight:600;font-size:.95rem;white-space:nowrap;min-width:7.5rem}.reader .step{font-size:1.1rem;line-height:1;padding:.2rem .65rem}.reader .scrubber{flex:1;min-width:4rem;appearance:none;height:4px;border-radius:999px;background:var(--border);cursor:pointer}.reader .scrubber::-webkit-slider-thumb{appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent);border:2px solid var(--bg);cursor:grab}.reader .scrubber::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--accent);border:2px solid var(--bg);cursor:grab}.reader .scrubber:focus-visible{outline:2px solid var(--accent);outline-offset:4px}.reader .stage{position:relative;flex:1;min-height:0;display:grid;grid-template-columns:3rem minmax(0,1fr) 3rem;align-items:stretch;padding:calc(var(--top-bar, 3rem) + .75rem) max(.25rem,env(safe-area-inset-right)) calc(var(--bottom-bar, 3.5rem) + .75rem) max(.25rem,env(safe-area-inset-left));background:var(--bg)}.reader .book-host{position:relative;min-width:0;min-height:0;touch-action:none;user-select:none;-webkit-user-select:none}.reader .book,.reader .book .stf__wrapper{width:100%;height:100%}.reader .book .stf__wrapper{position:relative}.reader .book .stf__block{transform:translate(var(--spread-shift, 0px));transition:transform .35s ease}@media(prefers-reduced-motion:reduce){.reader .book .stf__block{transition:none}}.reader .book .leaf{box-shadow:0 12px 24px var(--page-shadow)}.reader .leaf-void{background:var(--bg)}.reader .book.onto-void .stf__outerShadow{display:none!important}.reader .book.onto-void .leaf{box-shadow:none}.reader .book.flat{display:flex;align-items:center;justify-content:center;overflow:hidden}.reader .book.flat .leaf{position:relative;flex:none}.reader .leaf{background:#f4efe6;overflow:hidden}.reader .leaf img{display:block;width:100%;height:100%;object-fit:contain;background:#f4efe6;pointer-events:none}.reader .leaf img[data-half]{position:absolute;top:0;width:200%;max-width:none}.reader .leaf img[data-half=left]{left:0}.reader .leaf img[data-half=right]{left:-100%}.reader .leaf[data-side=left]:after,.reader .leaf[data-side=right]:after{content:"";position:absolute;top:0;bottom:0;width:9%;pointer-events:none}.reader .leaf[data-side=left]:after{right:0;background:linear-gradient(to left,rgb(0 0 0 / .22),rgb(0 0 0 / .06) 35%,transparent)}.reader .leaf[data-side=right]:after{left:0;background:linear-gradient(to right,rgb(0 0 0 / .22),rgb(0 0 0 / .06) 35%,transparent)}.reader .leaf-half:after{opacity:.4}.reader .leaf-blank{background:#e9e2d6}.reader .leaf-gate{display:flex;align-items:center;justify-content:center;padding:1rem;background:var(--surface)}.reader .leaf-gate .gate{border:none;background:none}.reader .turn{align-self:center;height:6rem;padding:0;border:none;background:none;color:var(--text);font-size:2.4rem;line-height:1;opacity:.45;transition:opacity .14s ease}.reader .turn:hover:not(:disabled),.reader .turn:focus-visible{opacity:1;border-color:transparent}.reader .turn:disabled{opacity:0}.reader .turn:focus-visible{outline:2px solid var(--accent);outline-offset:-4px}@media(max-width:560px){.reader .stage{grid-template-columns:0 minmax(0,1fr) 0}.reader .turn{visibility:hidden}}.reader .zoom-view{position:absolute;inset:0;z-index:3;overflow:auto;overscroll-behavior:contain;background:var(--bg);cursor:grab;touch-action:none}.reader .zoom-view:active{cursor:grabbing}.reader .zoom-pages{display:flex;width:max-content;margin:auto;height:calc((100dvh - var(--top-bar, 3rem) - var(--bottom-bar, 3.5rem)) * var(--zoom, 1));padding:var(--top-bar, 3rem) 0 var(--bottom-bar, 3.5rem);box-sizing:content-box}.reader .zoom-pages img{height:100%;width:auto;display:block;user-select:none}.reader .scroller{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:calc(var(--top-bar, 3rem) + .5rem) 0 calc(var(--bottom-bar, 3.5rem) + .5rem)}.reader .scroller .slot{display:flex;justify-content:center;margin:0 auto var(--gutter);max-width:1100px}.reader .scroller img{display:block;width:100%;height:auto;background:var(--surface)}.reader .overview{position:absolute;inset:0;z-index:8;background:var(--bg);display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0px)}.reader .overview-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 1rem;border-bottom:1px solid var(--border);font-family:var(--font-ui);font-size:.9rem}.reader .thumbs{flex:1;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:.9rem;padding:1rem}.reader .thumb{background:none;border:none;padding:0;display:flex;flex-direction:column;gap:.3rem;cursor:pointer}.reader .thumb img{width:100%;aspect-ratio:2 / 3;object-fit:cover;border:2px solid transparent;border-radius:4px;background:var(--surface)}.reader .thumb span{font-family:var(--font-ui);font-size:.75rem;color:var(--muted)}.reader .thumb:hover img{border-color:var(--muted)}.reader .thumb.here img{border-color:var(--accent)}.reader .thumb.here span{color:var(--accent);font-weight:600}.reader .gate-wrap{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.reader .gate{max-width:26rem;margin:auto;padding:2rem 1.5rem;text-align:center;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);font-family:var(--font-ui)}.reader .gate h2{margin:0 0 .6rem;font-size:1.2rem;color:var(--text)}.reader .gate p{margin:0 0 1.25rem;color:var(--muted);font-size:.95rem;line-height:1.6}.reader .gate-cta{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;font-weight:600;padding:.55rem 1.1rem;border-radius:999px}.reader .gate-cta:hover{filter:brightness(.95);text-decoration:none}@media(max-width:560px){.reader .bar{font-size:.8rem;gap:.5rem}.reader .readout{min-width:5.5rem;font-size:.85rem}.reader .back{max-width:40%}}
