*{margin:0;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}body{height:100svh;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif}.container{display:flex;justify-content:center;align-items:center;margin-top:50px}dialog{border:1px solid #000}dialog .item{display:flex;gap:5px;margin-bottom:10px}dialog:focus{outline:none}.addBookContainer{position:relative;display:flex;justify-content:center;margin:0 auto;top:20px}#addBookForm{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:15px 30px;margin:0 auto;padding:10px 10px;border:1px solid #000;border-radius:10px;background-color:#e2f3ff}#addBookForm label{font-size:.85rem;color:#333;margin-right:.3rem}#addBookForm input[type=text],#addBookForm input[type=number]{padding:.4rem .6rem;border:1px solid #ccc;border-radius:4px;width:140px}#addBookForm input[type=checkbox]{transform:scale(1.2);margin-left:.25rem}button{padding:.45rem 1rem;border:none;border-radius:4px;background-color:#0078d4;color:#fff;font-weight:500;cursor:pointer;transition:background-color .2s ease}button:hover{background-color:#005fa3}.bookshelf{width:min(80vw,64svh);aspect-ratio:2/2.5;background-color:#b15b1d;border-radius:20px;padding:20px;position:relative;perspective:800px;transform-style:preserve-3d}.innerBookshelf{width:100%;height:100%;border-radius:20px;background-color:#86522d;position:relative;overflow-x:hidden}.innerBookshelf::before{content:"";position:absolute;box-sizing:border-box;top:0;left:0;width:100%;height:100%;border-left:clamp(24px,8vw,62px) solid #8f5329;border-right:clamp(24px,8vw,62px) solid #8f5329;border-radius:inherit;pointer-events:none}.shelfs{position:absolute;display:flex;flex-direction:column;width:100%;height:100%;justify-content:space-evenly}.shelf{width:100%;height:50px;display:flex;position:relative}.shelf::before{content:"";position:absolute;bottom:-20px;left:0;width:100%;height:20px;background-color:#cc6821}.shelf .left{position:absolute;left:20px;width:70%;height:50px;transform:skewX(-60deg);background-color:#cf7a3c}.shelf .right{position:absolute;right:20px;width:70%;height:50px;transform:skewX(60deg);background-color:#cf7a3c}.innerBookshelf>.shelf{position:absolute;bottom:0}.innerBookshelf>.shelf::before{height:0px;bottom:0}.grid{position:relative;display:grid;width:100%;height:100%;grid-template:25% 27% 27% 20%/1fr;padding:0 10px;box-sizing:border-box;z-index:1}.grid .row{display:flex;height:100%;align-items:end;perspective:800px;transform-style:preserve-3d;pointer-events:none}.book{height:80%;background-color:#7979ac;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:10px;box-sizing:border-box;transform:translateZ(0);position:relative;transform-style:preserve-3d;box-shadow:inset 0 0 5px rgba(0,0,0,.3);cursor:pointer;pointer-events:auto}.book:hover,.book:hover .left,.book:hover .right{box-shadow:0 0 3px 3px var(--outline-color)}.book .title{writing-mode:vertical-rl;text-orientation:mixed}.book div{position:absolute}.book .left{width:200px;height:150px;left:-100px;transform:translateZ(-100px) rotateY(270deg);background:#7979ac;box-shadow:inset 0 0 5px rgba(0,0,0,.3);cursor:pointer}.book .right{width:200px;height:150px;right:-100px;transform:translateZ(-100px) rotateY(270deg);background:#7979ac;box-shadow:inset 0 0 5px rgba(0,0,0,.3);cursor:pointer}@media screen and (max-width: 520px){.container{margin-top:30px}#addBookForm .item{width:100%}#addBookForm input[type=text],#addBookForm input[type=number]{box-sizing:border-box;width:100%}}