.book-stage { position: relative; width: 100%; aspect-ratio: 3 / 2; margin: 0 auto; perspective: 2200px; touch-action: pan-y pinch-zoom; isolation: isolate; }
.book-spread { display: grid; position: absolute; inset: 0; background: #fff; backface-visibility: hidden; }
.book-spread[hidden] { display: none !important; }
.book-photos.portraits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.book-photos.landscape { grid-template-columns: minmax(0, 1fr); }
.book-photo, .book-cover-page { min-width: 0; min-height: 0; display: flex; justify-content: center; align-items: center; }
.book-photo img, .book-cover-page img { width: 100%; height: 100%; object-fit: contain; display: block; }
.book-spread.is-turning::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, transparent 40%, rgba(0,0,0,.12)); }
.book-controls { display: flex; justify-content: center; align-items: center; gap: 36px; margin-top: 24px; }
.book-controls button { width: 44px; height: 44px; padding: 0; background: #fff; color: #000; border: 1px solid #dedede; border-radius: 50%; font: 24px/1 Arial, sans-serif; cursor: pointer; }
.book-controls button:hover:not(:disabled) { border-color: #800020; color: #800020; }
.book-controls button:disabled { opacity: .22; cursor: default; }
.book-counter { min-width: 64px; margin: 0; text-align: center; font: 12px/1.5 Arial, sans-serif; color: #777; letter-spacing: .1em; }
@media (max-width: 760px) {
  .book-photos.portraits { gap: 6px; }
  .book-controls { margin-top: 20px; gap: 24px; }
}
@media (prefers-reduced-motion: reduce) { .book-spread { transform: none !important; } }