@view-transition{navigation:auto}::view-transition-group(book-cover){z-index:20;animation-duration:.52s;animation-timing-function:cubic-bezier(.16,1,.3,1)}::view-transition-old(book-cover),::view-transition-new(book-cover){mix-blend-mode:normal;object-fit:cover;height:100%;animation:none}::view-transition-old(root){animation:.3s cubic-bezier(.4,0,1,1) both vt-shelf-recede}::view-transition-new(root){animation:.46s cubic-bezier(.16,1,.3,1) 80ms both vt-page-arrive}@keyframes vt-shelf-recede{to{opacity:0;filter:blur(3px);transform:scale(.97)}}@keyframes vt-page-arrive{0%{opacity:0;transform:translateY(10px)}}@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}.book{--w:150px;--ratio:1.5;--d:28px;--h:calc(var(--w) * var(--ratio));--ry:24deg;--rx:0deg;--tz:0px;--tx:0px;--ty:0px;--spine:oklch(32% .03 40);--spine-ink:oklch(94% .02 70);--paper-edge:oklch(95% .015 80);width:var(--w);height:var(--h);color:inherit;-webkit-tap-highlight-color:transparent;text-decoration:none;display:inline-block;position:relative}.book__scene{perspective:calc(var(--w) * 9);perspective-origin:50% 40%;position:absolute;inset:0}.book__body{transform-style:preserve-3d;transform:translate3d(var(--tx), var(--ty), var(--tz)) rotateX(var(--rx)) rotateY(var(--ry));transition:transform var(--dur) var(--ease-out-expo);position:absolute;inset:0}.book__face{-webkit-backface-visibility:hidden;backface-visibility:hidden;position:absolute;inset:0}.book__front{transform:translateZ(calc(var(--d) / 2));transform-origin:0;transform-style:preserve-3d;-webkit-backface-visibility:visible;backface-visibility:visible;transition:transform var(--dur-slow) var(--ease-in-out)}.book__front>.side{-webkit-backface-visibility:hidden;backface-visibility:hidden;position:absolute;inset:0;overflow:hidden}.book__front>.side--art{background:var(--spine);border-radius:1px 3px 3px 1px;transform:translateZ(.6px);box-shadow:inset 3px 0 6px -3px #00000059}.book__front>.side--endpaper{background:var(--paper-bright);background-image:linear-gradient(270deg,#00000029,#0000 18%),repeating-linear-gradient(115deg,#00000005 0 3px,#0000 3px 7px);border-radius:3px 1px 1px 3px;transform:rotateY(180deg)translateZ(.6px)}.book__front img{object-fit:cover;width:100%;height:100%}.book__gloss{pointer-events:none;opacity:0;transition:opacity var(--dur) var(--ease-out);mix-blend-mode:screen;background:linear-gradient(115deg,#0000 30%,#ffffff2e 46%,#ffffff0d 52%,#0000 62%);position:absolute;inset:0}.book__back{transform:rotateY(180deg) translateZ(calc(var(--d) / 2));background:color-mix(in oklch, var(--spine) 92%, black);border-radius:3px 1px 1px 3px}.book__inner{transform:translateZ(calc(var(--d) / 2 - 1px));background:var(--paper-bright);color:var(--ink);background-image:radial-gradient(120% 80% at 0%,#0000001f,#0000 40%);border-radius:1px 3px 3px 1px;align-content:center;justify-items:start;padding:9% 8% 9% 12%;display:grid;overflow:hidden}.book__inner .epigraph{font-family:var(--font-display);font-style:italic;font-size:calc(var(--w) * .075);text-wrap:pretty;text-align:left;line-height:1.25}.book__inner .epigraph-src{font-family:var(--font-ui);font-size:calc(var(--w) * .045);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);text-align:left;margin-top:.8em}.book__inner:after{content:"";border-top:1px solid color-mix(in oklch, var(--ink-mute) 35%, transparent);position:absolute;bottom:8%;left:12%;right:8%}.book__inner .titlepage{text-align:center;justify-items:center;gap:.5em;width:100%;padding-inline:4%;display:grid}.book__inner .titlepage__title{font-family:var(--font-display);font-style:italic;font-size:calc(var(--w) * .082);color:var(--ink-strong);text-wrap:balance;line-height:1.15}.book__inner .titlepage__rule{border-top:1px solid color-mix(in oklch, var(--ink-mute) 55%, transparent);width:28%;margin-block:.4em}.book__inner .titlepage__author{font-family:var(--font-ui);font-size:calc(var(--w) * .045);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}.book__inner .titlepage__year{font-family:var(--font-ui);font-size:calc(var(--w) * .04);letter-spacing:.08em;color:var(--ink-mute)}.book__spine{width:var(--d);left:calc(var(--d) / -2);background:var(--spine);color:var(--spine-ink);background-image:linear-gradient(90deg,#00000047,#0000 25% 75%,#0000002e);border-radius:2px 0 0 2px;justify-content:center;align-items:center;display:flex;overflow:hidden;transform:rotateY(-90deg)}.book__spine-text{writing-mode:vertical-rl;font-family:var(--font-display);font-size:clamp(8px, calc(var(--d) * .42), 15px);letter-spacing:.06em;white-space:nowrap;max-height:calc(var(--h) * .88);max-inline-size:calc(var(--h) * .88);text-overflow:ellipsis;font-variant:small-caps;opacity:.95;overflow:hidden}.book__spine-text b{font-weight:600}.book__spine-text i{font-variant:normal;font-style:italic}.book__pages{width:calc(var(--d) - 3px);right:calc((var(--d) - 3px) / -2);background:repeating-linear-gradient(to right, var(--paper-edge) 0 1px, oklch(86% .02 70) 1px 2px);background-image:linear-gradient(to bottom, #0000000d, transparent 10%, transparent 90%, #0000001a), repeating-linear-gradient(to right, var(--paper-edge) 0 1px, oklch(86% .02 70) 1px 2px);top:2px;bottom:2px;transform:rotateY(90deg)}.book__top,.book__bottom{height:calc(var(--d) - 3px);background:repeating-linear-gradient(to bottom, var(--paper-edge) 0 1px, oklch(88% .02 70) 1px 2px);left:2px;right:2px}.book__top{top:calc((var(--d) - 3px) / -2);transform:rotateX(90deg)}.book__bottom{bottom:calc((var(--d) - 3px) / -2);background-image:linear-gradient(#0003, #0003), repeating-linear-gradient(to bottom, var(--paper-edge) 0 1px, oklch(88% .02 70) 1px 2px);transform:rotateX(-90deg)}.book__shadow{background:radial-gradient(ellipse at 45% 50%, rgb(var(--shadow-ink) / .55), rgb(var(--shadow-ink) / .25) 45%, transparent 72%);filter:blur(6px);height:9%;transform:translateX(calc(var(--w) * .06)) scaleX(1);transform-origin:40%;transition:transform var(--dur) var(--ease-out-expo), opacity var(--dur) var(--ease-out);pointer-events:none;z-index:-1;position:absolute;bottom:-5%;left:6%;right:-4%}.cover-gen{background:var(--tone-bg,var(--spine));color:var(--tone-ink,var(--spine-ink));font-family:var(--font-display);background-image:linear-gradient(90deg,#00000038,#0000 6%),radial-gradient(130% 100% at 100% 0,#ffffff14,#0000 55%);grid-template-rows:auto 1fr auto;padding:8% 9% 9%;display:grid;position:absolute;inset:0}.cover-gen:before{content:"";border:1px solid color-mix(in oklch, currentColor 45%, transparent);pointer-events:none;position:absolute;inset:5%}.cover-gen__series{font-family:var(--font-ui);font-size:calc(var(--w) * .05);letter-spacing:.16em;text-transform:uppercase;opacity:.75}.cover-gen__title{font-size:calc(var(--w) * .12);letter-spacing:-.01em;text-wrap:balance;align-self:center;font-weight:500;line-height:1.02}.cover-gen__title.long{font-size:calc(var(--w) * .095)}.cover-gen__title.xlong{font-size:calc(var(--w) * .08)}.cover-gen__author{font-family:var(--font-ui);font-size:calc(var(--w) * .058);letter-spacing:.12em;text-transform:uppercase;opacity:.9;border-top:1px solid color-mix(in oklch, currentColor 45%, transparent);padding-top:6%}@media (hover:hover) and (pointer:fine){.card:hover .book[data-pull] .book__body,.card:focus-visible .book[data-pull] .book__body,.book[data-pull]:hover .book__body,.book[data-pull]:focus-visible .book__body{--ry:4deg;--tz:72px;--tx:4px;--ty:-14px}.card:hover .book[data-pull] .book__gloss,.book[data-pull]:hover .book__gloss{opacity:1}.card:hover .book[data-pull] .book__shadow,.book[data-pull]:hover .book__shadow{transform:translate(calc(var(--w) * -.02), 10px) scale(1.2, 1.9);opacity:.85}.card:hover+.card .book__body{--ry:30deg;--tx:-3px}.card:has(+.card:hover) .book__body{--ry:15deg;--tx:3px}.book[data-tilting] .book__body{transition-duration:.12s}}.book[data-state=open] .book__body{--ry:-8deg;--rx:0deg;--tx:calc(var(--w) * .44)}.book[data-state=open] .book__front{transform:translateZ(calc(var(--d) / 2)) rotateY(-162deg)}.book__inner>*{opacity:0;transition:opacity .26s var(--ease-out) .24s, transform .32s var(--ease-out-expo) .24s;transform:translateY(6px)}.book[data-state=open] .book__inner>*{opacity:1;transform:none}@media (prefers-reduced-motion:reduce){.book__inner>*{opacity:1;transition:none;transform:none}}.book[data-state=open] .book__gloss{opacity:0}.book[data-state=open] .book__shadow{transform:translateX(calc(var(--w) * -.25)) scaleX(1.5)}.book--button{cursor:pointer}@media (hover:none){.card:active .book__body{--tz:44px;--ry:10deg;--ty:-8px;transition-duration:.18s}.card:active .book__shadow{opacity:.8;transform:translateY(8px)scale(1.15,1.6)}}@media (prefers-reduced-motion:reduce){.card:active .book__body,.card:active .book__shadow{transition:none}.book__body,.book__front,.book__shadow,.book__gloss{transition:none!important}}
