.book-section { padding-block: 14vw; background: #fff; }
.book-stage {
  position: relative;
  width: min(100%, 1320px);
  height: min(70vw, 850px, 90svh);
  min-height: 360px;
  margin-inline: auto;
  isolation: isolate;
  background: #fff;
  touch-action: pan-y pinch-zoom;
  outline-offset: 8px;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.book-stage:focus { outline: none; }
.book-stage:focus-visible:not([data-pointer-focus="true"]) { outline: 2px solid #111; }
.book-canvas {
  position: absolute;
  display: block;
  inset: -25% 0 auto;
  width: 100%;
  height: 150%;
  touch-action: pan-y pinch-zoom;
  cursor: grab;
}
.book-stage[data-dragging="true"] .book-canvas { cursor: grabbing; }
.book-flat {
  position: absolute;
  inset: 8% 9%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.book-flat img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 6px 12px rgb(0 0 0 / .12));
  -webkit-user-drag: none;
}
.book-stage[data-renderer="webgl"] .book-flat { visibility: hidden; pointer-events: none; }
.book-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
@media (max-width: 767px), (orientation: portrait) {
  .book-stage { height: min(92vw, 80svh); min-height: 260px; }
  .book-flat { inset: 3% 4%; }
}

.book-stage[data-renderer="flat"] .book-canvas { visibility: hidden; pointer-events: none; }

@media (max-width: 767px) { .book-section { padding-block: 20vw; } }