.hc{--hc-ry:-30deg;--hc-rx:3deg;--hc-t:9cqw;--hc-board:color-mix(in oklab, var(--hc-hue) 82%, black);perspective:1400px;width:100%;position:relative;container-type:inline-size}.hc[data-tilt=card]{--hc-ry:-24deg;--hc-rx:2deg;--hc-t:8cqw}.hc-book{width:100%;aspect-ratio:var(--hc-ratio,800 / 1165);transform-style:preserve-3d;transform:rotateY(var(--hc-ry)) rotateX(var(--hc-rx));transition:transform .7s cubic-bezier(.25,1,.4,1);position:relative}.hc:before,.hc:after{content:"";pointer-events:none;z-index:-1;position:absolute}.hc:before{filter:blur(4px);background:radial-gradient(closest-side,#0000008c,#0000);border-radius:50%;height:7%;bottom:-3%;left:2%;right:-2%}.hc:after{filter:blur(26px);background:#0000004d;border-radius:12px;inset:8% -6% -2% 10%;transform:skew(-6deg)}.hc-cover,.hc-back{border-radius:1.2cqw 2cqw 2cqw 1.2cqw;position:absolute;inset:0}.hc-cover{transform:translateZ(calc(var(--hc-t) / 2));background:var(--hc-board);overflow:hidden;box-shadow:inset 0 0 0 1px #0000001f}.hc-cover img{object-fit:cover;width:100%;height:100%;display:block}.hc-sheen{pointer-events:none;background:linear-gradient(90deg,#00000061 0,#ffffff59 1.4%,#0000000d 2.6%,#0003 4%,#ffffff2e 5.4%,#0000 8%),linear-gradient(112deg,#ffffff4d 0%,#ffffff0f 30%,#fff0 48%,#0000 70%,#00000024 100%);position:absolute;inset:0;box-shadow:inset -.4cqw 0 .6cqw #ffffff40,inset 0 -.4cqw .8cqw #0000001f}.hc-back{transform:translateZ(calc(var(--hc-t) / -2));background:var(--hc-board)}.hc-pages{top:1.2%;bottom:1.2%;left:calc(100% - .6cqw - var(--hc-t) / 2);width:var(--hc-t);background:linear-gradient(to bottom, #0000 60%, #00000024), linear-gradient(90deg, var(--hc-board) 0 7%, #0000 7% 93%, var(--hc-board) 93%), repeating-linear-gradient(90deg, #fffdf6 0 1.5px, #e3d9c4 1.5px 2.2px);position:absolute;transform:rotateY(90deg)}@media (hover:hover){.hc-hover:hover .hc-book{--hc-ry:-12deg}}@media (prefers-reduced-motion:reduce){.hc-book{transition:none}}.adventure-book{width:86%;margin:.4rem auto 1.1rem;display:block}.adventures[data-filtering] .adventure[data-match] .adventure-book .hc-cover{box-shadow:inset 0 0 0 1px #0000001f, 0 0 0 4px var(--sun)}@media (hover:hover){.adventure:hover .adventure-book .hc-book{--hc-ry:-6deg;translate:0 -6px}}.hc-names{pointer-events:none;width:100%;height:100%;position:absolute;inset:0}