:root{
  --bg:#0f0f10;
  --paper:#fff;
  --shadow: rgba(0,0,0,.25);
}
html,body{height:100%;margin:0;background:var(--bg);font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;}
.wrap{
  min-height:100%;
  display:grid;
  place-items:center;
  padding:18px;
  gap:14px;
}
.toolbar{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  color:#fff;
}
.btn{
  appearance:none;
  border:1px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.08);
  color:#fff;
  padding:10px 12px;
  border-radius:10px;
  cursor:pointer;
  font-weight:700;
}
.btn:disabled{opacity:.35; cursor:not-allowed;}
.counter{opacity:.9; font-weight:700;}
.book-stage{
  width:min(900px, 96vw);
  height:min(82vh, 1200px);
  position:relative;
  perspective: 2400px;
}
.book{
  width:100%;
  height:100%;
  position:relative;
}
.page{
  position:absolute;
  inset:0;
  transform-style:preserve-3d;
  transform-origin:left center;
  transition:transform 650ms cubic-bezier(.2,.8,.2,1), box-shadow 650ms;
  border-radius:14px;
  overflow:hidden;
  box-shadow: 0 22px 60px var(--shadow);
  background: var(--paper);
}
.page img{
  width:100%;
  height:100%;
  object-fit:contain;
  background: var(--paper);
  display:block;
}
.page.flipped{
  transform: rotateY(-180deg);
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}
.page .back{
  position:absolute;
  inset:0;
  transform: rotateY(180deg);
  backface-visibility:hidden;
  background: var(--paper);
}
.page .front{
  position:absolute;
  inset:0;
  backface-visibility:hidden;
  background: var(--paper);
}
.hint{
  color:rgba(255,255,255,.75);
  font-size:13px;
  text-align:center;
}
@media (max-width:720px){
  .book-stage{height:min(76vh, 980px);}
}