.fold-stage { display: grid; place-items: center; aspect-ratio: 1.12; perspective: 1800px; touch-action: pan-y pinch-zoom; cursor: grab; }
.fold-stage.is-dragging { cursor: grabbing; }
.fold-object { position: relative; width: 72%; aspect-ratio: 200 / 210; transform-style: preserve-3d; transform: scale(var(--fold-scale, 1)) translateX(var(--fold-shift, -25%)); transition: transform 750ms cubic-bezier(.22,.7,.18,1); }
.fold-book { position: absolute; inset: 0; transform-style: preserve-3d; transform-origin: 75% 50%; transform: rotateY(var(--fold-turn, 0deg)); transition: transform 750ms cubic-bezier(.22,.7,.18,1); transition-delay: var(--fold-turn-delay, 0ms); }
.fold-leaf { position: absolute; top: 0; height: 100%; width: 50%; transform-style: preserve-3d; transition: transform 750ms cubic-bezier(.22,.7,.18,1); transition-delay: var(--fold-leaf-delay, 0ms); }
.fold-leaf--base { left: 50%; }
.fold-leaf--left { left: 0; transform-origin: 100% 50%; transform: translateZ(2px) rotateY(var(--fold-left, 180deg)); }
.fold-face { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: #faf8f2; box-shadow: 0 1px 2px #2a294430, 0 1.6rem 2.2rem -.6rem #20203930; }
.fold-face--front { transform: translateZ(.3px); }
.fold-face--back { transform: rotateY(180deg) translateZ(.3px); }
.fold-face img { position: absolute; inset: 0 auto 0 var(--crop-x, 0%); display: block; width: var(--crop-width, 100%); max-width: none; height: 100%; user-select: none; -webkit-user-select: none; pointer-events: none; }
.fold-face::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 1px 0 #ffffff40, inset -1px 0 #211d3526; }
.fold-leaf--left .fold-face--front::after { background: linear-gradient(90deg, transparent 94%, #211d3512); }
.fold-leaf--base .fold-face--front::after { background: linear-gradient(90deg, #211d3512, transparent 6%, transparent 94%, #211d350d); }
.fold-viewer[data-fold-viewer="trifold"] .fold-object { width: 86%; aspect-ratio: 297 / 210; --fold-scale: 1.24; --fold-shift: -.50505%; }
.fold-viewer[data-fold-viewer="trifold"] .fold-book { transform-origin: 50.50505% 50%; }
.fold-viewer[data-fold-viewer="trifold"] .fold-leaf { width: 33.670034%; }
.fold-viewer[data-fold-viewer="trifold"] .fold-leaf--base { left: 33.670034%; }
.fold-viewer[data-fold-viewer="trifold"] .fold-leaf--right { left: 67.340067%; width: 32.659933%; transform-origin: 0 50%; transform: translateZ(1px) rotateY(var(--fold-right, -180deg)); }
.fold-stage:focus-visible { outline: 2px solid #425fc7; outline-offset: 4px; }
.fold-viewer.is-initializing .fold-object,
.fold-viewer.is-initializing .fold-book,
.fold-viewer.is-initializing .fold-leaf,
.fold-stage.is-dragging .fold-object,
.fold-stage.is-dragging .fold-book,
.fold-stage.is-dragging .fold-leaf { transition: none; }
.fold-dialog { width: min(94vw, 70rem); max-width: none; max-height: 92svh; padding: 0; border: 1px solid #fff; border-radius: 1.2rem; color: #19213b; background: #f2f3fa; box-shadow: 0 2rem 7rem #14162755; }
.fold-dialog::backdrop { background: #15172aaf; backdrop-filter: blur(7px); }
.fold-dialog__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.5rem; border-bottom: 1px solid #cdd5ed; }
.fold-dialog__bar h2 { margin: 0; font: 500 1rem/1.4 var(--font-sans); }
.fold-dialog__bar button { min-height: 44px; padding: .6rem .9rem; border: 1px solid #cdd3e4; border-radius: .5rem; color: #283f90; background: #fffdf8; cursor: pointer; }
.fold-dialog__content { padding: 1rem clamp(1rem, 3vw, 2rem) 1.8rem; overflow: auto; }
.fold-dialog .fold-viewer { width: min(100%, calc((90svh - 14rem) * 1.12)); margin-inline: auto; }
.fold-dialog .fold-stage { margin-top: 0; }
@media (max-width: 600px) {
  .fold-viewer .print-viewer__controls { display: grid; grid-template-columns: minmax(0, 1fr); gap: .55rem; }
  .fold-viewer .print-viewer__pages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fold-viewer[data-fold-viewer="trifold"] .print-viewer__pages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fold-viewer .print-viewer__pages button { padding-inline: .35rem; font-size: .72rem; }
  .fold-viewer .print-viewer__hint { text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .fold-object, .fold-book, .fold-leaf { transition: none; }
}