.book_perspective{--book-default-width:196;--book-color:0,0%,92%;--book-text-color:hsl(0,0%,9%);--book-depth:29cqw;--book-border-radius:6px 4px 4px 6px;--hover-rotate:-20deg;--hover-scale:1.066;--hover-translate-x:-8px;--aspect-ratio:49/60;--bg-shadow:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,0) 12%,hsla(0,0%,100%,0.25) 29.25%,hsla(0,0%,100%,0) 50.5%,hsla(0,0%,100%,0) 75.25%,hsla(0,0%,100%,0.25) 91%,hsla(0,0%,100%,0)),linear-gradient(90deg,rgba(0,0,0,0.03),rgba(0,0,0,0.1) 12%,transparent 30%,rgba(0,0,0,0.02) 50%,rgba(0,0,0,0.2) 73.5%,rgba(0,0,0,0.5) 75.25%,rgba(0,0,0,0.15) 85.25%,transparent);perspective:900px;display:inline-block;width:-moz-fit-content;width:fit-content;&:hover .book_rotate-wrapper{transform:rotateY(var(--hover-rotate)) scale(var(--hover-scale)) translateX(var(--hover-translate-x))}.stack{display:flex;flex-direction:var(--stack-direction,column);align-items:var(--stack-align,stretch);justify-content:var(--stack-justify,flex-start);flex:var(--stack-flex,initial);gap:var(--stack-gap,0)}svg{shape-rendering:crispEdges}svg path{shape-rendering:geometricprecision;fill:var(--book-text-color)}.book_rotate-wrapper{aspect-ratio:var(--aspect-ratio);width:-moz-fit-content;width:fit-content;transform:rotate(0deg);position:relative;transform-style:preserve-3d;min-width:calc(var(--book-width) * 1px);transition:transform .25s ease-out;container-type:inline-size;>:first-child{position:absolute;min-width:calc(var(--book-width) * 1px)}&.book_simple{.book_bind{mix-blend-mode:overlay;opacity:1!important}.book_book{background:var(--book-color);.book_body{width:100%;height:100%;.book_content{--stack-direction:column;gap:calc((16px / var(--book-default-width)) * var(--book-width));.book_title::selection{background-color:white;color:var(--book-color)}}}}.book_back{background:var(--book-color)}}&.book_stripe{.book_stripe{--stack-flex:initial;--stack-direction:row;--stack-align:stretch;--stack-justify:flex-start;--stack-padding:0px;--stack-gap:8px;background:var(--book-color);width:100%;position:relative;flex:1 1;overflow:hidden;.book_bind{position:absolute;background:var(--bg-shadow);mix-blend-mode:overlay}.book_content{--stack-direction:row;--stack-align:center;gap:calc((24px / var(--book-default-width)) * var(--book-width))}}.book_title::selection{background-color:var(--book-color);color:white}.book_back{background-color:hsl(0,0%,92%)}}.book_book{--stack-flex:initial;--stack-direction:column;--stack-align:stretch;--stack-justify:flex-start;--stack-padding:0px;--stack-gap:0px;position:absolute;width:calc(var(--book-width) * 1px);height:100%;border-radius:var(--book-border-radius);overflow:hidden;background:#fafafa;position:relative;box-shadow:0 1px 1px 0 rgba(var(--book-color),.02),0 4px 8px -4px rgba(var(--book-color),.1),0 16px 24px -8px rgba(var(--book-color),.03);.book_bind{height:100%;width:8.2%}.book_body{--stack-flex:initial;--stack-direction:row;--stack-align:stretch;--stack-justify:flex-start;--stack-padding:0px;--stack-gap:0px;.book_bind{min-width:8.2%;background:var(--bg-shadow);opacity:.2}.book_content{--stack-flex:initial;--stack-justify:space-between;--stack-padding:0px;--stack-gap:8px;padding:6.1%;container-type:inline-size;width:100%;.book_title{font-size:.875rem;line-height:1.25rem;letter-spacing:normal;font-weight:600;text-wrap:balance;color:var(--book-text-color);width:fit-content;overflow:hidden;text-overflow:ellipsis;max-width:100%;overflow-wrap:break-word}}}.book_texture{background-image:url(/book-texture.png);background-size:cover;border-radius:var(--book-border-radius);mix-blend-mode:hard-light;background-repeat:no-repeat;opacity:.5;filter:brightness(1.1)}&:after,.book_texture{position:absolute;inset:0;pointer-events:none}&:after{content:"";border:1px solid rgb(0,0,0,.08);width:100%;height:100%;border-radius:inherit;box-shadow:inset 0 1px 2px 0 hsla(0,0%,100%,.3)}}.book_pages{height:calc(100% - 2 * 3px);width:calc(var(--book-depth) - 2px);top:3px;position:absolute;transform:translateX(calc(var(--book-width) * 1px - var(--book-depth) / 2 - 3px)) rotateY(90deg) translateX(calc(var(--book-depth) / 2));background:linear-gradient(90deg,#eaeaea,transparent 70%),linear-gradient(#fff,#fafafa);.book_textured{background:repeating-linear-gradient(90deg,#fff,#efefef 1px,#fff 3px,#9a9a9a 0)}}.book_back{position:absolute;top:0;left:0;width:calc(var(--book-width) * 1px);height:100%;border-radius:var(--book-border-radius);transform:translateZ(calc(-1 * var(--book-depth)))}}}