/* Scene styling; common frame and typography are owned by hero-layout.css. */
.book {
  position: relative;
  isolation: isolate;
}
.book .right-page {
  animation: none;
  animation-play-state: running;
}
.paper-leaf {
  position: absolute;
  left: 50%;
  top: 0px;
  width: 50%;
  height: 100%;
  transform-origin: 0px 50%;
  transform-style: preserve-3d;
  z-index: 5;
  pointer-events: none;
  overflow-x: visible;
  overflow-y: visible;
  transform: none;
}
.paper-face {
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  overflow-x: hidden;
  overflow-y: hidden;
  box-shadow: rgba(76, 49, 91, 0.07) 2px 0px 2px;
  border-radius: 0px 12px 12px 0px;
  background: none rgb(255, 250, 252);
}
.paper-face > .right-page {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  margin: 0px;
}
.paper-face > .left-page {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  margin: 0px;
}
.paper-front {
  transform: translateZ(0.4px);
}
.paper-back {
  transform: rotateY(180deg) translateZ(0.4px);
  border-radius: 6px 0px 0px 6px;
}
.paper-back > .left-page {
  background: linear-gradient(90deg, rgb(240, 230, 251) 88%, rgb(213, 198, 230)) transparent;
}
.paper-face::after {
  content: "";
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(73, 48, 78, 0.08), transparent 22%, rgba(255, 255, 255, 0.133) 70%, rgba(90, 63, 102, 0.063)) transparent;
}
.paper-cast {
  position: absolute;
  left: 50%;
  top: 0px;
  width: 45%;
  height: 100%;
  transform-origin: left center;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(61, 36, 75, 0.52), transparent) transparent;
}
.controls button:disabled {
  cursor: default;
  opacity: 0.45;
}
.paper-strip {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  transform-origin: 0px 50%;
  transform-style: preserve-3d;
}
.paper-strip .paper-face {
  box-shadow: none;
  border-radius: 0px;
}
.paper-strip .paper-face::after {
  display: none;
}
.paper-strip .paper-front {
  transform: translateZ(0.15px);
}
.paper-strip .paper-back {
  transform: rotateY(180deg) translateZ(0.15px);
}
.book-plate {
  width: 130px;
  height: 130px;
  margin: 32px auto;
}
.book-plate svg {
  display: block;
  width: 100%;
  height: 100%;
}
.book-area .controls .book-auto-pause {
  width: 28px;
  height: 28px;
  font-size: 12px;
  color: rgb(153, 134, 172);
  background: none transparent;
  border: 0;
}
.book-auto-pause:focus-visible {
  outline-color: rgb(167, 130, 210);
  outline-style: solid;
  outline-width: 2px;
  outline-offset: 3px;
}