[dir=ltr]{--dir:-1}[dir=rtl]{--dir:1}.book-preview-container{background-color:#333;justify-content:center;align-items:center;width:100%;height:100%;padding:1em;display:flex;container-type:size}.book-preview{perspective:min(2000px,200vh);aspect-ratio:210/297;transform-style:preserve-3d;transform:translateX(calc(-50%*var(--dir)));cursor:pointer}@container (min-aspect-ratio:297/210){.book-preview{height:100%}}@container not (min-aspect-ratio:297/210){.book-preview{width:50cqw}}.book-preview>*{width:100%;height:100%;transform-origin:calc(50% + 50%*calc(var(--dir)));transition:opacity 1s ease-in,transform 1s ease-out;position:absolute;top:0;left:0}@keyframes flip-hint{0%,to{transform:rotateY(0)}50%{transform:rotateY(calc(30deg*var(--dir)))}}.book-preview>:first-child{animation:2s ease-in-out 2 flip-hint}.book-preview>:first-child.flipped{animation:none}.book-preview>.flipped{transform:rotateY(calc(180deg*var(--dir)))}.book-preview>:nth-child(odd){backface-visibility:hidden}.book-preview>:nth-child(2n){opacity:0;transform:rotateY(calc(-180deg*var(--dir)))translateX(calc(100%*var(--dir)))}.book-preview>.flipped:nth-child(2n){opacity:1;transform:rotateY(0)translateX(calc(100%*var(--dir)))}
@keyframes fab-bounce{0%,to{transform:translateY(-5%)}50%{transform:translateY(0%)}}.fab-button{top:0;z-index:999;cursor:pointer;width:100px;transition:transform .2s ease-in-out;position:fixed;inset-inline-start:10px;transform:translateY(-60%)}.fab-button:hover{animation:none;transform:translateY(6%)scale(1.1)}.fab-button svg{animation:1.5s ease-in-out infinite fab-bounce}
.preview-text{white-space:pre-wrap;color:#222;width:75%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.preview-text,.preview-text>textarea{font-size:4.8cqw;font-weight:700;line-height:1.3}.preview-text>textarea{field-sizing:content;background-color:#0000;border:none;padding:0}.preview-text>textarea:focus{background-color:#ffffff4d}.preview-text button{font-size:small}