.bookshelf{--tdelay-open:calc(var(--dur-open) * var(--turn-delay));--tdelay-close:calc(var(--dur-close) * var(--turn-delay));--depth:320px}.bookshelf-stage{perspective:none;--headroom:calc(var(--row-h) * var(--pull-open) * var(--ortho-approach) + var(--lift-open) * 1px + var(--hover-lift) * 1px);--floor:calc(var(--thick) + 4px);height:calc((var(--row-h) + var(--headroom) + var(--floor)) * var(--shelf-scale,1));padding-bottom:calc(var(--floor) * var(--shelf-scale,1));justify-content:flex-start;align-items:flex-end;display:flex}.bookshelf-world{transform-style:preserve-3d;transform-origin:0 100%;transform:scale(var(--shelf-scale,1));position:relative}.bookshelf-row{align-items:flex-end;gap:calc(var(--gap) * 1px);transform-style:preserve-3d;display:flex}.bookshelf-place{transform-style:preserve-3d;flex:none;display:block}.bookshelf-slot{--dur:var(--dur-close);--ease:var(--ease-close);--tdelay:var(--tdelay-close);--pull:0;--lift:0;--yaw:0;--hint-y:0;--zs:1}.bookshelf-slot[data-on=true]{--dur:var(--dur-open);--ease:var(--ease-open);--tdelay:var(--tdelay-open);--pull:var(--pull-open);--lift:var(--lift-open);--yaw:var(--yaw-open);--zs:calc(1 + var(--pull-open) * var(--ortho-approach))}.bookshelf-slot[data-peek=true],.bookshelf-slot:focus-visible{--hint-y:var(--hover-lift)}.bookshelf-slot{appearance:none;font:inherit;color:inherit;cursor:pointer;width:var(--t);height:var(--h);transform-style:preserve-3d;transform-origin:50% 100%;transform:translate3d(calc(var(--shift) * 1px), calc(var(--lift) * -1px), calc(var(--pull) * 1px)) scale(var(--zs)) rotate(calc(var(--lean,0) * 1deg));transition:transform var(--dur) var(--ease) var(--tdelay);background:0 0;border:0;flex:none;padding:0;display:block;position:relative}.bookshelf-slot[data-on=true]{transition:transform var(--dur) var(--ease) 0s}.bookshelf-slot:focus-visible{outline:var(--focus-w) solid var(--ink);outline-offset:3px}.bookshelf-turn{transform-style:preserve-3d;transform:translateY(calc(var(--hint-y) * -1px)) rotateY(calc(var(--yaw) * -1deg));--tilt-amt:0;transition:transform var(--dur) var(--ease), --tilt-amt var(--dur) var(--ease);transition-delay:0s;position:absolute;inset:0}.bookshelf-slot[data-on=true] .bookshelf-turn{--tilt-amt:1;transition-delay:var(--tdelay)}.bookshelf-slot[data-peek=true] .bookshelf-turn,.bookshelf-slot:focus-visible .bookshelf-turn{transition-duration:.2s}@property --tilt-amt{syntax:"<number>";inherits:true;initial-value:0}.bookshelf-book{transform-style:preserve-3d;transform:rotateY(calc(var(--px,0) * var(--tilt) * var(--tilt-amt) * 1deg)) rotateX(calc(var(--py,0) * var(--tilt) * var(--tilt-amt) * -.6deg));position:absolute;inset:0}.bookshelf-face{transform-origin:50%;backface-visibility:hidden;position:absolute;top:50%;left:50%}.bookshelf-spineface{width:var(--t);height:var(--h);transform:translate(-50%, -50%) translateZ(calc(var(--w) / 2));background:var(--spine);color:var(--ink);flex-direction:column;display:flex;overflow:hidden}.bookshelf-spineface:after{content:"";z-index:2;pointer-events:none;box-shadow:inset 5px 0 11px -6px rgba(0, 0, 0, calc(var(--ao) * .9)), inset -5px 0 11px -6px rgba(0, 0, 0, calc(var(--ao) * .7)), inset 0 -30px 40px -34px rgba(0, 0, 0, calc(var(--ao) * .8));transition:box-shadow var(--dur) var(--ease);position:absolute;inset:0}.bookshelf-slot[data-on=true] .bookshelf-spineface:after{box-shadow:inset 5px 0 11px -6px rgba(0, 0, 0, calc(var(--ao) * .2)), inset -5px 0 11px -6px rgba(0, 0, 0, calc(var(--ao) * .15))}.bookshelf-spine-type{writing-mode:vertical-rl;flex:1;justify-content:space-between;align-items:center;gap:10px;min-height:0;padding:16px 0;font-family:ui-monospace,SF Mono,Menlo,monospace;display:flex}.bookshelf-spine-title{font-size:clamp(8px, calc(var(--t) * .42), 15px);letter-spacing:.04em;white-space:nowrap;text-overflow:ellipsis;font-weight:600;overflow:hidden}.bookshelf-spine-type[data-serif=true] .bookshelf-spine-title{letter-spacing:.01em;font-family:ui-serif,Georgia,Times New Roman,serif;font-weight:500}.bookshelf-spine-author{font-size:clamp(6px, calc(var(--t) * .26), 9px);letter-spacing:.1em;text-transform:uppercase;opacity:.62;white-space:nowrap;flex-shrink:1;overflow:hidden}.bookshelf-band{height:calc(var(--t) * .9);background:var(--accent);opacity:.9;margin:0 22% 12px;display:block}.bookshelf-art{object-fit:cover;z-index:1;width:100%;height:100%;display:block;position:absolute;inset:0}.bookshelf-cover{width:var(--w);height:var(--h);transform:translate(-50%, -50%) rotateY(90deg) translateZ(calc(var(--t) / 2));background:var(--cover);color:var(--ink);overflow:hidden}.bookshelf-cover:after{content:"";opacity:var(--sheen);pointer-events:none;z-index:2;background:linear-gradient(105deg,#ffffff80 0%,#fff0 42%),linear-gradient(90deg,#00000047 0%,#0000 14%);position:absolute;inset:0}.bookshelf-cover-inner{flex-direction:column;padding:9% 9% 8%;font-family:ui-monospace,SF Mono,Menlo,monospace;display:flex;position:absolute;inset:0}.bookshelf-cover-title{font-size:clamp(16px, calc(var(--w) * .115), 40px);letter-spacing:-.02em;font-weight:650;line-height:1.02;display:block}.bookshelf-cover-title[data-serif=true]{letter-spacing:0;font-family:ui-serif,Georgia,Times New Roman,serif;font-weight:500}.bookshelf-cover-author{letter-spacing:.16em;text-transform:uppercase;opacity:.7;margin-top:10px;font-size:10px;display:block}.bookshelf-mark{opacity:.85;border:1.5px solid;border-radius:50%;width:26px;height:26px;margin-top:auto;position:relative}.bookshelf-mark:after{content:"";background:var(--accent);border-radius:50%;position:absolute;inset:42%}.bookshelf-back{width:var(--w);height:var(--h);transform:translate(-50%, -50%) rotateY(-90deg) translateZ(calc(var(--t) / 2));background:var(--spine);filter:brightness(.82)}.bookshelf-pages{width:var(--t);height:var(--h);transform:translate(-50%, -50%) rotateY(180deg) translateZ(calc(var(--w) / 2));filter:brightness(.9);background:repeating-linear-gradient(90deg,#efe8d8 0 1px,#dcd3bf 1px 2px)}.bookshelf-top{width:var(--t);height:var(--w);transform:translate(-50%, -50%) rotateX(90deg) translateZ(calc(var(--h) / 2));background:linear-gradient(90deg, var(--spine) 0 12%, #e9e1cf 12% 88%, var(--spine) 88% 100%);filter:brightness(.94)}.bookshelf-plank{width:112%;height:0;transform-style:preserve-3d;transform:translateZ(var(--front));position:absolute;top:100%;left:-6%}.bookshelf-plank-top{height:var(--depth);transform-origin:50% 0;background:var(--plank);background-image:radial-gradient(120% 90% at 50% 0,#0003,#0000 62%);position:absolute;top:0;left:0;right:0;transform:rotateX(-90deg)}.bookshelf-plank-face{height:var(--thick);background:var(--plank);background-image:linear-gradient(#ffffff8c,#00000024);position:absolute;top:0;left:0;right:0;box-shadow:inset 0 1px #ffffff80}.bookshelf-contact{width:calc(var(--t) + 26px);height:calc(var(--w) * .9);transform-origin:50% 0;transform:translate(-50%, -1px) translateZ(calc(var(--w) / 2)) rotateX(-90deg);filter:blur(6px);pointer-events:none;transition:opacity var(--dur) var(--ease), filter var(--dur) var(--ease);background:radial-gradient(68% 62% at 50% 26%,#0000004d,#0000 74%);position:absolute;top:100%;left:50%}.bookshelf-slot[data-on=true] .bookshelf-contact{opacity:.55;filter:blur(13px)}.bookshelf-caption{flex-direction:column;gap:4px;margin-top:24px;display:flex}.bookshelf-caption>span{opacity:0;min-height:1lh;transition:opacity var(--dur-base) var(--ease-out-soft), translate var(--dur-base) var(--ease-out-soft);display:block;translate:0 3px}.bookshelf-caption[data-on=true]>span{opacity:1;translate:0}.bookshelf-caption[data-on=true]>span:last-child{transition-delay:60ms}