:root{
  --w: min(980px, 94vw);
  --h: min(560px, 70vh);
  --paper: #fffaf0;
  --paper2:#fff6e8;
  --ink: #111;
  --shadow: rgba(0,0,0,.25);
  --edge: rgba(0,0,0,.10);
}

*{ box-sizing:border-box; }
body{
  margin:0;
  min-height:100vh;
  display:grid;
  place-items:center;
  background: radial-gradient(1200px 600px at 50% 40%, #2b2b2b, #0f0f10);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:#fff;
  overflow:hidden;
}

.ui{
  position:fixed;
  top:18px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:10px;
  z-index:50;
}
.btn{
  width:46px; height:46px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(20,20,20,.65);
  color:#fff;
  font-size:20px;
  cursor:pointer;
  backdrop-filter: blur(8px);
}
.btn:disabled{ opacity:.35; cursor:not-allowed; }

.scene{
  width:var(--w);
  height:var(--h);
  perspective: 1800px;
}

.book{
  position:relative;
  width:100%;
  height:100%;
  transform-style:preserve-3d;
  transform: rotateX(4deg) rotateY(-10deg);
}

/* book drop shadow */
.book::before{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:22px;
  box-shadow: 0 40px 90px rgba(0,0,0,.55);
  transform: translateZ(-40px);
}

/* base pages (background) */
.base{
  position:absolute;
  top:0;
  width:50%;
  height:100%;
  background: linear-gradient(90deg, var(--paper2), var(--paper));
  border:1px solid var(--edge);
  overflow:hidden;
}
.base.left{
  left:0;
  border-right:none;
  border-radius:22px 0 0 22px;
  box-shadow: inset -18px 0 30px rgba(0,0,0,.08);
}
.base.right{
  left:50%;
  border-left:none;
  border-radius:0 22px 22px 0;
  box-shadow: inset 18px 0 30px rgba(0,0,0,.08);
}

.pageContent{
  height:100%;
  padding: 42px 46px;
  color:var(--ink);
}
.pageContent h2{ margin:0 0 10px; font-size: 34px; }
.pageContent p{ margin:0; font-size: 18px; line-height:1.5; }

/* spine */
.spine{
  position:absolute;
  top:0;
  left:50%;
  width:16px;
  height:100%;
  transform: translateX(-50%);
  background: linear-gradient(#1b1b1b, #111);
  box-shadow:
    inset 2px 0 0 rgba(255,255,255,.06),
    inset -2px 0 0 rgba(0,0,0,.35);
  border-radius: 10px;
  opacity:.9;
}

/* flipping sheets stack on right side */
.sheets{
  position:absolute;
  inset:0;
  transform-style:preserve-3d;
}

/* One sheet: front = right page, back = next left page */
.sheet{
  position:absolute;
  top:0;
  left:50%;
  width:50%;
  height:100%;
  transform-origin: left center;
  transform-style:preserve-3d;
  transition: transform 900ms cubic-bezier(.18,.8,.2,1);
  border-radius:0 22px 22px 0;
  will-change: transform;
}

/* small “lift” when flipping */
.sheet.turning{
  transition: transform 900ms cubic-bezier(.18,.8,.2,1),
              filter 900ms cubic-bezier(.18,.8,.2,1);
  filter: drop-shadow(0 22px 20px rgba(0,0,0,.25));
}

.sheet.flipped{
  transform: rotateY(-180deg);
}

/* page faces */
.face{
  position:absolute;
  inset:0;
  backface-visibility:hidden;
  background: linear-gradient(90deg, var(--paper2), var(--paper));
  border:1px solid var(--edge);
  overflow:hidden;
}
.face.front{
  border-left:none;
  border-radius:0 22px 22px 0;
  box-shadow: inset 18px 0 28px rgba(0,0,0,.07);
}
.face.back{
  transform: rotateY(180deg);
  border-right:none;
  border-radius:22px 0 0 22px;
  box-shadow: inset -18px 0 28px rgba(0,0,0,.07);
}

/* nicer typography inside faces */
.face .pageContent{
  padding: 42px 46px;
}