.shelf-container{position:relative;overflow:hidden;width:100%;height:500px;margin:0 auto;display:flex;justify-content:center;align-items:flex-end;z-index:1}.shelf{display:block;bottom:150px;max-width:800px;height:15px;background:linear-gradient(180deg,#f0f0f0,#e0e0e0);border-radius:1px;z-index:20;box-shadow:0 -1px 1px rgba(255,255,255,.15),0 2px 3px rgba(0,0,0,.12),0 5px 10px rgba(0,0,0,.08),0 15px 20px rgba(0,0,0,.06),0 25px 30px rgba(0,0,0,.04),0 40px 60px rgba(0,0,0,.2),0 60px 80px rgba(0,0,0,.12)}.shelf,.shelf:after{position:absolute;width:100%}.shelf:after{content:"";bottom:-1px;left:0;height:1px;background-color:rgba(0,0,0,.1)}.shelf:before{content:"";position:absolute;top:-2px;left:0;width:100%;height:2px;background-color:rgba(255,255,255,.01)}@media (prefers-color-scheme:dark){.shelf{background:linear-gradient(180deg,#222,#111);box-shadow:0 -1px 1px rgba(255,255,255,.03),0 2px 3px rgba(0,0,0,.3),0 5px 10px rgba(0,0,0,.18),0 15px 20px rgba(0,0,0,.16),0 25px 30px rgba(0,0,0,.14),0 40px 60px rgba(0,0,0,.4),0 60px 80px rgba(0,0,0,.22)}.shelf:after{background-color:rgba(0,0,0,.3)}.shelf:before{background-color:rgba(255,255,255,.03)}}.book-shadow{position:absolute;bottom:168px;left:50%;transform:translateX(-50%);display:flex;justify-content:center;align-items:flex-end;gap:2rem;z-index:15}.book-shadow__item{width:120px;height:2px;background:radial-gradient(ellipse at center,rgba(0,0,0,.15) 0,rgba(0,0,0,0) 70%);border-radius:50%}.book-shadow__item.side{width:25px}.books-wrapper{position:absolute;bottom:168px;left:50%;transform:translateX(-50%);display:flex;justify-content:center;align-items:flex-end;gap:2rem;z-index:10}.books__item{text-align:center;cursor:default;height:220px}.books__container{position:relative;width:160px;margin:0 auto;height:100%}.books__cover{position:relative;will-change:transform;height:100%}.books__hitbox{position:absolute;width:100%;height:100%;top:0;left:0;z-index:10}.books__back-cover{position:absolute;width:96%;height:96%;top:2%;left:2%;background:#111;border-radius:0 6px 6px 0;box-shadow:2px 2px 5px rgba(0,0,0,.25);z-index:-10}.books__inside{position:absolute;width:90%;height:94%;top:3%;left:5%;z-index:0}.books__page{position:absolute;top:0;right:0;width:98%;height:100%;background:#fff;border:1px solid rgba(0,0,0,.2);border-radius:0 6px 6px 0;box-shadow:0 1px 3px rgba(0,0,0,.15);transform-origin:right center;z-index:-5}.books__image{line-height:0;position:relative;box-shadow:10px -5px 20px rgba(0,0,0,.15),20px 0 30px rgba(0,0,0,.15);transform-origin:left center;cursor:pointer;will-change:transform,box-shadow;z-index:10}.books__image,.books__image img{border-radius:2px 6px 6px 2px;height:100%}.books__image img{width:100%;object-fit:cover}.books__effect{width:24px;margin-left:12px;border-left:2px solid rgba(0,0,0,.08);background-image:linear-gradient(90deg,rgba(255,255,255,.25),rgba(255,255,255,0));z-index:5}.books__effect,.books__light{position:absolute;height:100%;top:0;transform-origin:left center;pointer-events:none}.books__light{width:100%;border-radius:2px 6px 6px 2px;background-image:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.5));left:0;right:0;bottom:0;opacity:.15;z-index:4;mix-blend-mode:overlay}.side-book{height:220px;width:30px;position:relative;cursor:pointer;background:linear-gradient(90deg,#444 0,#666 50%,#444);border-radius:2px;box-shadow:5px -3px 10px rgba(0,0,0,.15),10px 0 15px rgba(0,0,0,.15);transform-origin:bottom center}.side-book__title{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;writing-mode:vertical-rl;text-orientation:mixed;color:#f0f0f0;font-size:12px;padding:5px 0;text-align:center;text-transform:uppercase;letter-spacing:1px}.side-book__decoration{position:absolute;top:20px;left:50%;transform:translateX(-50%);width:80%;height:1px;background-color:rgba(255,255,255,.3)}.side-book__decoration:nth-child(2){top:auto;bottom:20px}.dark .shelf{background:linear-gradient(180deg,#222,#111);box-shadow:0 -1px 1px rgba(255,255,255,.03),0 2px 3px rgba(0,0,0,.3),0 5px 10px rgba(0,0,0,.18),0 15px 20px rgba(0,0,0,.16),0 25px 30px rgba(0,0,0,.14),0 40px 60px rgba(0,0,0,.4),0 60px 80px rgba(0,0,0,.22)}.dark .shelf:after{background-color:rgba(0,0,0,.3)}.dark .shelf:before{background-color:rgba(255,255,255,.03)}