.paper::after{display:none}
.paper::before{
  content:"Bladzijde " attr(data-number);
  position:sticky;
  top:0;
  z-index:6;
  display:block;
  float:right;
  clear:both;
  width:max-content;
  margin:-.7rem -.7rem .75rem 1rem;
  padding:.35rem .65rem;
  border:1px solid rgba(102,78,47,.28);
  border-radius:999px;
  color:#5e4c36;
  background:rgba(250,241,221,.94);
  box-shadow:0 4px 14px rgba(62,43,20,.14);
  backdrop-filter:blur(5px);
  font:800 .78rem/1 system-ui,-apple-system,Segoe UI,sans-serif;
  letter-spacing:.02em;
}
.paper.cover::before{
  color:#fff;
  border-color:rgba(255,255,255,.28);
  background:rgba(3,23,35,.78);
}
.book.flipping-forward .turn-sheet{
  display:block;
  inset:0 0 0 50%;
  transform-origin:left;
  border-radius:0 12px 12px 0;
  animation:flip-forward .74s ease-in-out;
  transform-style:preserve-3d;
  backface-visibility:hidden;
}
.book.flipping-back .turn-sheet{
  display:block;
  inset:0 50% 0 0;
  transform-origin:right;
  border-radius:12px 0 0 12px;
  animation:flip-back .74s ease-in-out;
  transform-style:preserve-3d;
  backface-visibility:hidden;
}
@keyframes flip-forward{
  0%{transform:rotateY(0);box-shadow:0 0 0 #0000}
  50%{box-shadow:-18px 8px 28px #0008}
  100%{transform:rotateY(-180deg)}
}
@keyframes flip-back{
  0%{transform:rotateY(0);box-shadow:0 0 0 #0000}
  50%{box-shadow:18px 8px 28px #0008}
  100%{transform:rotateY(-180deg)}
}
@media (prefers-reduced-motion:reduce){
  .book.flipping-forward .turn-sheet,.book.flipping-back .turn-sheet{animation-duration:.01ms}
}