*{box-sizing:border-box}body{color:#453a2f;background:#f8f3eb;margin:0;font-family:Georgia,serif}button,input,select,textarea{font:inherit}button{cursor:pointer}a{color:#54715a}header{background:#e9dfcf;border-bottom:1px solid #d6c7ad;justify-content:space-between;align-items:center;gap:15px;padding:19px 4%;display:flex}header strong{color:#45664e;font-size:23px}header div{align-items:center;gap:18px;display:flex}.welcome{flex-direction:column;justify-content:center;align-items:center;gap:15px;min-height:100vh;display:flex}.library-layout{grid-template-columns:245px minmax(0,1fr);min-height:calc(100vh - 70px);display:grid}.index{background:#f0e7d8;border-right:1px solid #dfceb4;align-self:start;min-height:100vh;padding:35px 19px;position:sticky;top:0}.index-title{color:#526b54;letter-spacing:2px;font-size:15px;font-weight:700}.index-sub{color:#93816b;margin:12px 0 28px;font:12px Arial,sans-serif}.index-nav{flex-direction:column;gap:5px;display:flex}.index-nav button{text-align:left;color:#625544;background:0 0;border:0;border-radius:8px;justify-content:space-between;align-items:center;width:100%;padding:13px 12px;font-size:14px;display:flex}.index-nav button.selected{color:#fff;background:#536d56;box-shadow:0 4px 8px #3b523523}.index-nav button em{opacity:.65;font:11px Arial,sans-serif}.index-divider{border-top:1px solid #d5c6b0;margin:26px 0}.index-add,.mainbutton,.form button,.result button{color:#fff;background:#526d56;border:0;border-radius:7px;padding:12px 16px}.index-add{width:100%}.index-foot{text-align:center;color:#a48a6b;margin-top:40px;display:block}.library-main{min-width:0;padding:33px clamp(18px,4vw,60px) 70px}.library-heading small{letter-spacing:3px;color:#a1815e;font:11px Arial,sans-serif}.library-heading h1{margin:14px 0;font-size:clamp(32px,4vw,49px);font-weight:400}.library-heading p{color:#958471}.shelf-hint{color:#8e7d68;margin:27px 0 15px;font:12px Arial,sans-serif}.bookcase{background:#ba9470;border:18px solid #815637;border-top:20px solid #946744;border-bottom:26px solid #69402a;border-radius:4px;padding:5px 0 0;overflow:hidden;box-shadow:inset 0 0 23px #4e2c1d82,0 17px 30px #5a3c2a26}.bookcase-level{background:linear-gradient(90deg,#ac825f 0%,#cba781 12%,#ddba91 48%,#ba916c 92%,#a77b58 100%);flex-direction:column;justify-content:flex-end;height:252px;display:flex;position:relative;box-shadow:inset 0 8px 18px #6644298a}.shelf-books{z-index:1;align-items:flex-end;gap:3px;min-height:206px;max-height:206px;padding:0 18px;display:flex;position:relative;overflow:visible}.wood-plank{z-index:2;background:linear-gradient(#d5a77a 0%,#a97448 30%,#7e4e2f 76%,#5e3526 100%);border-top:2px solid #e7c298;height:25px;min-height:25px;position:relative;box-shadow:0 8px 12px #42271d9c}.book{width:115px;min-width:0;height:180px;box-shadow:none;outline-offset:3px;background:0 0;border:0;flex:0 0 115px;justify-content:center;align-items:flex-end;padding:0;transition:flex-basis .2s,width .2s;display:flex;position:relative}.book--spine{flex-basis:35px;width:35px}.book[draggable=true]{cursor:grab}.book:focus-visible{outline:2px dashed #fff}.cover{color:#fff;background:#556e5c;justify-content:center;align-items:center;width:100%;height:174px;display:flex;position:relative;overflow:hidden;box-shadow:3px 1px 6px #3e281e70}.cover img{object-fit:cover;width:100%;height:100%}.cover span{text-align:center;padding:8px;font-size:12px}.cover.spine{background:#66543f;width:100%}.cover.spine img{opacity:1;filter:brightness(.63)saturate(.9);object-fit:cover;position:absolute;inset:0}.cover.spine:after{content:"";pointer-events:none;background:linear-gradient(90deg,#0007,#0000 38%,#0005);position:absolute;inset:0}.cover.spine span{writing-mode:vertical-rl;z-index:1;letter-spacing:.1px;color:#fffaf0;text-shadow:0 1px 1px #000c;max-width:100%;max-height:159px;padding:6px 2px;font-family:Georgia,Times New Roman,serif;font-size:13px;font-weight:800;line-height:1.1;position:relative;overflow:hidden;transform:rotate(180deg)}.book-actions{opacity:0;visibility:hidden;pointer-events:none;z-index:10;background:#1f2a25e8;border-radius:24px;gap:5px;padding:5px;transition:opacity .15s,transform .15s;display:flex;position:absolute;bottom:9px;left:50%;transform:translate(-50%,5px);box-shadow:0 3px 12px #0005}.book:hover .book-actions,.book:focus-within .book-actions{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%)}.book-actions button{color:#466047;background:#fff8ed;border:0;border-radius:50%;place-items:center;width:30px;height:30px;font:19px Arial,sans-serif;display:grid}.book-actions button.isfav{color:#ae4c63}.cover.spine .book-actions{flex-direction:column;bottom:4px}.empty{color:#6d4933;padding:38px}.add{background:#fffcf6;border:1px solid #e0d0ba;border-radius:10px;margin:22px 0;padding:20px}.form{flex-wrap:wrap;gap:10px;display:flex}.form input{border:1px solid #d3c0aa;border-radius:6px;flex:1;min-width:150px;padding:12px}.results{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:10px;margin:15px 0;display:grid}.result{background:#fff;border:1px solid #e0d5c5;border-radius:8px;align-items:center;gap:10px;padding:12px;display:flex}.result img{object-fit:cover;width:50px;height:70px}.result div{flex:1}.result b{font-size:13px}.result p{font-size:12px}.error{color:#873728;background:#ffe6da;padding:14px}.overlay{z-index:20;background:#1d1712a3;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.modal{background:#fffaf3;border-radius:12px;width:min(520px,100%);max-height:90vh;padding:24px;overflow:auto}.modalhead,.bottom{justify-content:space-between;align-items:center;display:flex}.modalhead h2{font-weight:400}.modalhead button{background:0 0;border:0}.modal label{margin:12px 0;font:13px Arial,sans-serif;display:block}.modal input,.modal select,.modal textarea{border:1px solid #d1c1aa;border-radius:5px;width:100%;margin-top:5px;padding:10px;display:block}.two{grid-template-columns:1fr 1fr;gap:10px;display:grid}.danger{color:#883b31;background:#f8e2dc;border:1px solid #cda39d;border-radius:7px;padding:10px}@media (max-width:750px){.library-layout{grid-template-columns:1fr}.index{border-right:0;min-height:auto;padding:18px;position:relative}.index-nav{flex-direction:row;gap:6px;overflow-x:auto}.index-nav button{white-space:nowrap;gap:12px;width:auto;min-width:max-content}.index-sub,.index-divider,.index-foot{display:none}.index-add{margin-top:12px}.library-main{padding:25px 15px}.bookcase-level{height:245px}.shelf-books{padding:0 10px}.book--front{flex-basis:100px;width:100px}.book--spine{flex-basis:32px;width:32px}.two{grid-template-columns:1fr}}