:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}#app{margin:0 auto;padding:0}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.vanilla:hover{filter:drop-shadow(0 0 2em #f7df1eaa)}.card{padding:2em}.read-the-docs{color:#888}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}div.loading{display:flex;place-items:center;place-content:center;animation:blinking 1s infinite;position:absolute;left:0;top:0;right:0;bottom:0;margin:auto}@keyframes blinking{0%{opacity:.2}50%{opacity:1}to{opacity:.2}}#app{position:relative;overflow:hidden;width:100vw;height:100vh;--header-height: 60px;--footer-height: 120px}#app .page{position:relative;overflow:hidden;padding-top:var(--header-height);width:100vw;height:100vh}#app .page-main{display:flex;flex-direction:column;height:calc(100vh - var(--header-height) - var(--footer-height));box-sizing:border-box;overflow-y:auto}.page-main.page-center{place-items:center;place-content:center}#app .page-header{display:flex;flex-direction:row;align-items:center;justify-content:center;position:fixed;top:0;left:0;right:0;height:var(--header-height);background-color:#1a1a1a;z-index:1000}#app .page-footer{display:flex;flex-direction:column;align-items:center;justify-content:center;position:fixed;bottom:0;left:0;right:0;height:var(--footer-height);background-color:#1a1a1a;z-index:1000}.books-list{display:flex;flex-wrap:wrap;grid-gap:4px;height:fit-content;padding:2em;margin:0;justify-content:space-evenly;display:grid;grid-template-columns:repeat(auto-fill,minmax(calc(var(--thumbnail-width) * 1px),1fr))}.books-list-item{display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:8px;background-color:#1a1a1a;box-shadow:0 0 1em #0003;transition:transform .25s}.books-list.tiny .books-list-item,.books-list.micro .books-list-item{width:calc(var(--thumbnail-width) * 1px);height:calc(var(--thumbnail-height) * 1px)}.books-list{--thumbnail-width: 150;--thumbnail-height: 200;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}.books-list.micro{--thumbnail-width: 10;--thumbnail-height: 15;grid-template-columns:repeat(auto-fill,minmax(10px,1fr))}.books-list.tiny{--thumbnail-width: 50;--thumbnail-height: 75;grid-template-columns:repeat(auto-fill,minmax(50px,1fr))}.books-list.medium{--thumbnail-width: 300;--thumbnail-height: 400;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}.books-list.large{--thumbnail-width: 400;--thumbnail-height: 600;grid-template-columns:repeat(auto-fill,minmax(600px,1fr))}.books-list-item .books-item-thumbnail{width:calc(var(--thumbnail-width, 100) * 1px);height:calc(var(--thumbnail-height, 150) * 1px);background-color:#9996;display:flex;justify-content:center;align-items:center;position:relative;transition:transform .25s}.books-list-item .books-item-thumbnail:before{content:"";display:block;position:absolute;width:100%;height:100%;z-index:0;background-size:contain;background-repeat:no-repeat;background-position:center center;background:#636363;background:radial-gradient(circle,#636363,#0009)}.books-list-item:hover .books-item-thumbnail{transform:scale(1.05);z-index:2}.books-list-item .books-item-thumbnail img{width:100%;height:100%;object-fit:contain;z-index:1}.page-main.page-book-details{display:flex;flex-direction:column;align-items:center;justify-content:center}
