:root { color-scheme: light; font-family: system-ui, sans-serif; color: #262626; background: #f0eee9; }
* { box-sizing: border-box; }
body { margin: 0; }
button, input { font: inherit; }
button, a, input { touch-action: manipulation; }
button { color: inherit; cursor: pointer; }
button:disabled { opacity: .24; cursor: default; }
:focus-visible { outline: 3px solid #1768af; outline-offset: 3px; }
a { color: inherit; text-underline-offset: .2em; }
[hidden] { display: none !important; }
.reader { position: relative; height: 100dvh; min-height: 260px; display: flex; flex-direction: column; }
.reader-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .65rem 1rem; border-bottom: 1px solid #d8d5ce; }
.reader-header h1 { margin: 0; font-size: .9rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reader-header a { flex: none; font-size: .8rem; }
.icon { display: block; width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon-button { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 7px; background: transparent; }
.icon-button:hover:enabled { background: #0000000b; }
.reader-stage { position: relative; flex: 1; min-height: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 12px; }
.reader-toolbar { display: flex; flex: none; align-items: center; justify-content: center; gap: .4rem; padding: .55rem; border-top: 1px solid #d8d5ce; background: #f8f7f4; }
.reader-toolbar .icon-button { border: 1px solid #c9c6bf; border-radius: 4px; background: #fff; }
.reader-toolbar .icon-button:hover:enabled { background: #e8e5dd; }
.reader-page-label { min-width: 90px; text-align: center; font-size: .85rem; font-variant-numeric: tabular-nums; }
.reader-book { flex: none; opacity: 0; transition: opacity .15s; filter: drop-shadow(0 5px 9px #00000014); }
.reader-book.is-ready { opacity: 1; }
.reader-page { background: #fff; overflow: hidden; box-shadow: inset 0 0 0 1px #0000000c; }
.reader-page img { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; }
.page-placeholder { position: absolute; inset: 0; display: grid; place-content: center; color: #777; font-size: .8rem; }
.reader-status { position: absolute; z-index: 6; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: calc(100% - 100px); padding: .75rem 1rem; margin: 0; border-radius: 6px; background: #fffffff2; text-align: center; font-size: .82rem; box-shadow: 0 2px 15px #0000000b; }
.reader-status.is-idle { width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; box-shadow: none; }
.reader-status.is-error { color: #a12721; }
.reader-noscript { position: absolute; inset: auto 16px 70px; text-align: center; font-size: .8rem; }
.reader-zoom { width: calc(100% - 16px); max-width: 1400px; height: calc(100% - 16px); max-height: none; padding: 0; border: 0; border-radius: 10px; background: #eeece7; color: inherit; }
.reader-zoom[open] { display: flex; flex-direction: column; }
.reader-zoom::backdrop { background: #0008; }
.zoom-toolbar { display: flex; align-items: center; justify-content: end; gap: .1rem; padding: .4rem; background: #fffffff5; }
.zoom-toolbar h2 { flex: 1; font-size: .8rem; margin: 0 .5rem; font-weight: 500; }
.zoom-toolbar .icon { width: 22px; height: 22px; }
.zoom-level { min-width: 2.5rem; font-size: .75rem; text-align: center; }
.zoom-status { font-size: .75rem; text-align: center; margin: .25rem; }
.zoom-scroll { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.zoom-image { display: block; max-width: none; height: auto; margin: 0 auto; background: #fff; }
@media (max-width: 480px) {
    .reader-header { padding: .5rem .65rem; }
    .reader-toolbar { gap: .25rem; padding: .4rem; }
    .zoom-toolbar { flex-wrap: wrap; }
    .zoom-toolbar h2 { flex-basis: 100%; padding: .2rem; }
}
@media (prefers-reduced-motion: reduce) { .reader-book { transition: none; } }