.thumb-window-note {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 8px;
  border-radius: 7px;
  background: #102633;
  color: #b8cad1;
  font-size: .7rem;
  text-align: center;
}

.page,
.sheet-face img {
  content-visibility: auto;
}

.spread {
  contain: layout paint style;
}

.book-stage {
  width: min(68vw, calc((100vh - 170px) * 1.4845));
  height: min(calc(100vh - 170px), calc(68vw / 1.4845));
  flex: 0 0 auto;
}

.spread {
  width: 100%;
  height: 100%;
}

.page-wrap,
.spread.single .page-wrap {
  width: 50%;
  height: 100%;
  max-width: none;
  max-height: none;
  flex: 0 0 50%;
}

.page,
.spread.single .page {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
}

@media (max-width: 820px) {
  .book-stage {
    width: min(84vw, calc((100vh - 185px) * .7422));
    height: min(calc(100vh - 185px), calc(84vw / .7422));
  }
  .page-wrap,
  .spread.single .page-wrap {
    width: 100%;
    flex-basis: 100%;
  }
  .spread { filter: drop-shadow(0 12px 18px #0008); }
  .flip-sheet { transition-duration: .62s; }
  .sheet-face { box-shadow: 0 4px 16px #0006; }
}