.book-card {grid-template-columns:minmax(240px,360px) minmax(0,1fr)}
.book-card > .book-spine {display:none}
.book-viewer {width:100%;max-width:360px;margin:0;min-width:0}
.book-stage {perspective:1100px;padding:22px 24px 30px;touch-action:pan-y;cursor:grab;user-select:none}
.book-stage:active {cursor:grabbing}
.book-solid {position:relative;width:100%;aspect-ratio:2/3;transform-style:preserve-3d;transition:transform .55s ease;--depth:26px}
.book-solid.is-dragging {transition:none}
.book-face {position:absolute;inset:0;backface-visibility:hidden;background:#f1eee6;box-shadow:0 14px 25px #0006}
.book-front {transform:translateZ(13px)}
.book-front img {width:100%;height:100%;display:block}
.book-back {transform:rotateY(180deg) translateZ(13px);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#222;container-type:inline-size}
.book-back img {display:block;width:36%;height:auto;margin-top:-6%;object-fit:contain}
.book-back p {width:36%;margin:3% 0 0;text-align:center;font:italic 8.8px/1.2 Georgia,serif;font-size:3.04cqw;color:#222;overflow-wrap:break-word}
.book-edge {position:absolute;top:0;bottom:0;width:26px;backface-visibility:hidden}
.book-binding {left:-13px;transform:rotateY(-90deg);background:linear-gradient(90deg,#d5cfc2,#f1eee6 24%,#e7e1d5 90%,#c5beb0);display:flex;justify-content:center;align-items:center;color:#17191b}
.book-binding span {writing-mode:vertical-rl;font:700 15px/1 monospace;letter-spacing:.12em}
.book-pages {right:-13px;transform:rotateY(90deg);background:repeating-linear-gradient(90deg,#d6d0c4 0px,#eee8dd 1px,#eee8dd 3px)}
.book-cap {position:absolute;left:0;right:0;height:26px;backface-visibility:hidden;background:repeating-linear-gradient(#d6d0c4 0px,#eee8dd 1px,#eee8dd 3px)}
.book-top {top:-13px;transform:rotateX(90deg)}
.book-bottom {bottom:-13px;transform:rotateX(-90deg)}
.book-controls {display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.book-controls button {min-height:44px;padding:8px 10px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--paper);font:11px/1.3 var(--mono);cursor:pointer}
.book-controls button[aria-pressed=true] {background:var(--paper);color:var(--ink)}
.book-viewer figcaption {margin-top:12px;color:var(--muted);text-align:center;font:11px/1.6 var(--mono)}
@media(max-width:700px){.book-card{grid-template-columns:1fr}.book-viewer{margin-inline:auto}}
@media(prefers-reduced-motion:reduce){.book-solid{transition:none}}
@supports not (transform-style:preserve-3d){.book-edge,.book-cap,.book-back,.book-controls{display:none}.book-front{transform:none}}