* {
  box-sizing: border-box;
}

body {
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #dcd7cf;
  font-family: Georgia, serif;
}

/* Perspective container */
.scene {
  perspective: 1800px;
}

/* Book */
.book {
  position: relative;
  width: 480px;
  height: 300px;
  transform-style: preserve-3d;
  transform-origin: left center;
  transition: transform 1.2s ease;
}

/* Pages */
.page {
  position: absolute;
  inset: 0;
  background: #faf7f2;
  border-radius: 4px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  backface-visibility: hidden;
  transform-origin: left center;
}

/* Cover */
.cover {
  background: #5a3828;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

/* TOC */
.toc {
  padding: 25px;
  transform: rotateY(180deg);
}

.toc ul {
  padding: 0;
  list-style: none;
}

.toc li {
  cursor: pointer;
  margin: 10px 0;
}

/* Content */
.content {
  display: flex;
  transform: rotateY(180deg);
}

.left, .right {
  width: 50%;
  padding: 18px;
  position: relative;
}

.left {
  border-right: 1px solid #ddd;
}

/* Bookmark */
.bookmark {
  position: absolute;
  left: -18px;
  top: 50%;
  cursor: pointer;
  font-size: 18px;
}

/* Back cover */
.back {
  background: #2a2a2a;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: rotateY(180deg) translateZ(-2px);
}