:root {
  color-scheme: light;
  background: #efedef;
  font-family: Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; }
body { overscroll-behavior: none; }
#reader {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  display: grid;
  place-items: center;
  overflow: hidden;
}
#book {
  width: 100%;
  height: 100%;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 2200px;
  outline: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: pan-y pinch-zoom;
}
#book:focus-visible { outline: 2px solid #a28796; outline-offset: -2px; }
#book .stf__wrapper { width: 100%; height: 100%; }
#book .stf__block {
  transition: transform 350ms ease;
  transform: translateX(var(--cover-offset, 0px));
  cursor: grab;
}
#book[data-state="user_fold"] .stf__block { cursor: grabbing; }
.page {
  background: #fff;
  overflow: hidden;
  box-shadow: 0 2px 12px #29202b20;
}
.page img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  -webkit-user-drag: none;
}
/* A restrained gutter gives the resting spread a paper spine. */
.page::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
}
#book[data-layout="landscape"] .page.--left::after {
  opacity: 1;
  background: linear-gradient(to left, #24182722, transparent 5%);
}
#book[data-layout="landscape"] .page.--right::after {
  opacity: 1;
  background: linear-gradient(to right, #2418271a, transparent 5%);
}
#book[data-cover="true"] .page::after { opacity: 0; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
@media (max-width: 600px) {
  #reader {
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  }
}
@media (prefers-reduced-motion: reduce) {
  #book .stf__block { transition: none; }
}