#books-grid{display:block!important;margin-bottom:64px!important;min-height:480px}.library-heading{display:flex;justify-content:space-between;align-items:center;gap:20px}.library-heading h1{font-size:26px;letter-spacing:-.04em;line-height:1.2;margin:0 0 8px}.library-heading p{font-size:13px;color:#81817b;margin:0}.shelf-controls{display:flex;gap:8px}.shelf-controls button{border:1px solid #ddd;border-radius:50%;background:none;color:#666;width:34px;height:34px;cursor:pointer}.shelf-controls button:disabled{opacity:.3;cursor:default}.current-reading{font-size:11px;color:#81817b;border-top:1px solid #e6e6e2;padding-top:18px;margin:24px 0 0}.current-reading span{color:#3b3b3b;margin-left:12px}.shelf-scroll{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;padding:0 6px}.book-shelf{display:flex;align-items:flex-end;gap:10px;min-width:max-content;height:392px;padding:65px 8px 4px;border-bottom:2px solid #e4e4df;perspective:none}.shelf-book{position:relative;flex:0 0 var(--book-width);width:var(--book-width);--cover-width:206px;height:calc(var(--cover-width) * var(--cover-ratio,1.5));border:0;padding:0;background:none;cursor:pointer;text-align:left;transition:width .65s cubic-bezier(.45,0,.2,1),flex-basis .65s cubic-bezier(.45,0,.2,1);transform-style:preserve-3d;color:var(--book-ink);font:inherit}.book-spine{position:absolute;inset:0;background:linear-gradient(90deg,#0003,transparent 12%,#ffffff15 24%,transparent 70%,#0002),var(--book-colour);border:0;box-shadow:3px 2px 3px #3b3b3b22;display:flex;align-items:center;padding:15px 0;transition:width .65s cubic-bezier(.45,0,.2,1),opacity .65s cubic-bezier(.45,0,.2,1);width:var(--book-width)}.book-spine>span{writing-mode:vertical-rl;font-family:Georgia,serif;font-size:16px;line-height:1.2;position:absolute;left:50%;transform:translateX(-50%);top:16px;max-height:220px}.book-spine small{position:absolute;bottom:12px;width:100%;text-align:center;font-size:8px;letter-spacing:.05em}.book-cover{position:absolute;inset:0 auto 0 var(--book-width);width:var(--cover-width);transform-origin:left center;transform:scaleX(0);opacity:1;transition:transform .65s cubic-bezier(.45,0,.2,1),left .65s cubic-bezier(.45,0,.2,1);box-shadow:none;background:var(--book-colour);border:0}.book-cover:before{content:none}#books-grid .book-cover img{width:100%;height:100%;object-fit:contain;border-radius:3px;transform:none!important;box-shadow:none;margin:0}.shelf-book.is-selected{flex-basis:calc(var(--cover-width) + 10px);width:calc(var(--cover-width) + 10px)}.is-selected .book-cover{left:10px;transform:scaleX(1)}.is-selected .book-spine{width:16px}.is-selected .book-spine>span,.is-selected .book-spine small{opacity:0}.shelf-book:focus-visible{outline:2px solid #777;outline-offset:6px}.book-detail{min-height:90px;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px 18px;padding:24px 8px;font-size:12px;color:#777}.book-detail strong{font-family:Inter,system-ui,sans-serif;font-size:20px;color:#3b3b3b;font-weight:400}.book-rating{letter-spacing:2px;color:#77734c}.book-detail button{font:inherit;border:0;border-left:1px solid #ddd;padding:2px 0 2px 16px;background:none;color:#666;cursor:pointer}.detail-hint{color:#92928c}.detail-number{font-size:11px}.book-detail button:hover{text-decoration:underline}@media(max-width:640px){.book-shelf{height:365px}.current-reading span{display:block;margin:6px 0 0}.shelf-book{--cover-width:185px}.book-detail{justify-content:flex-start}.book-detail strong{font-size:18px}.library-heading h1{font-size:24px}}@media(prefers-reduced-motion:reduce){.shelf-book,.book-spine,.book-cover,.book-spine>span,.book-spine small{transition:none!important}}
#books-grid .book-cover img{filter:none!important;opacity:1}

/* A small pull on hover; revealing the cover requires activation. */
.shelf-book{transform-origin:50% 100%;transition:width .65s cubic-bezier(.45,0,.2,1),flex-basis .65s cubic-bezier(.45,0,.2,1),transform .65s cubic-bezier(.45,0,.2,1)}
@media(hover:hover){.shelf-book:not(.is-selected):hover{transform:perspective(1400px) rotateX(-4deg)}}
.shelf-book:not(.is-selected):focus-visible{transform:perspective(1400px) rotateX(-4deg)}
@media(prefers-reduced-motion:reduce){.shelf-book:not(.is-selected):hover,.shelf-book:not(.is-selected):focus-visible{transform:none}}

.book-spine>span,.book-spine small{transition:opacity .65s cubic-bezier(.45,0,.2,1)}.book-cover{overflow:hidden;backface-visibility:hidden}#books-grid .book-cover img{border:0;outline:0;display:block}

/* Keep the spine at the full cover height before, during and after opening. */


/* Lift the selected book without changing its cover or spine dimensions. */
.shelf-book.is-selected{transform:translateY(-18px);transition:width .65s cubic-bezier(.45,0,.2,1),flex-basis .65s cubic-bezier(.45,0,.2,1),transform .65s cubic-bezier(.45,0,.2,1)}
@media(prefers-reduced-motion:reduce){.shelf-book.is-selected{transform:none}}

/* Quick hover feedback; opening and closing retain their full easing. */
@media(hover:hover){.shelf-book:not(.is-selected):hover{transition:width .65s cubic-bezier(.45,0,.2,1),flex-basis .65s cubic-bezier(.45,0,.2,1),transform .18s ease-out}}
.shelf-book:not(.is-selected):focus-visible{transition:width .65s cubic-bezier(.45,0,.2,1),flex-basis .65s cubic-bezier(.45,0,.2,1),transform .18s ease-out}

/* Cover turn, shelf spacing and lift share one clock in both directions. */
.shelf-book.is-returning,.shelf-book.is-returning:hover,.shelf-book.is-returning:focus-visible{transition:width .65s cubic-bezier(.45,0,.2,1),flex-basis .65s cubic-bezier(.45,0,.2,1),transform .65s cubic-bezier(.45,0,.2,1)}

.book-spine,.book-cover{border-radius:3px}