@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500;1,600&display=swap');
:root{--ink:#27362e;--muted:#7d847c;--paper:#f7f5ef;--green:#47634e;--line:#e8e5dd;--serif:'Playfair Display',Georgia,serif;--sans:'DM Sans',Arial,sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:15px}.top{height:82px;max-width:1200px;margin:auto;padding:0 36px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink);font-family:var(--serif);font-weight:700;font-size:21px;letter-spacing:-.5px}.brand-icon{display:grid;place-items:center;background:var(--green);color:#fff;width:34px;height:38px;border-radius:3px 8px 8px 3px;font-size:20px}.brand-dot{color:#b27846}.brand small{display:block;font-family:var(--sans);font-size:9px;font-weight:500;letter-spacing:1.7px;color:#85897f;text-transform:uppercase;margin-top:1px}.top-note{font-size:12px;color:#888}.text-button{border:0;background:transparent;color:var(--green);font:600 13px var(--sans);cursor:pointer;padding:10px}main{max-width:1200px;margin:auto;padding:0 36px}footer{max-width:1128px;margin:70px auto 0;border-top:1px solid var(--line);padding:22px 0 36px;color:#96978f;font-size:11px;letter-spacing:.3px}.login-layout{min-height:calc(100vh - 170px);display:grid;grid-template-columns:1fr 440px;align-items:center;gap:90px;padding:55px 8%}.welcome{position:relative;min-height:430px;padding-top:42px}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:700;color:#9a7652}.welcome h1,.hero h1{font:500 54px/1.12 var(--serif);letter-spacing:-1.2px;margin:21px 0 15px}.welcome h1 em,.hero h1 em{color:#71806b;font-weight:500}.welcome p,.hero p{color:#81867e;line-height:1.8;font-size:14px}.book-stack{position:absolute;bottom:0;left:10px;height:132px;display:flex;align-items:flex-end;gap:7px}.book-stack i{display:block;width:43px;border-radius:3px 5px 0 0;background:#bd8460;height:112px;box-shadow:inset 4px 0 #0000000e}.book-stack i:nth-child(2){height:88px;background:#798b72;width:50px}.book-stack i:nth-child(3){height:124px;background:#e2cda9;width:39px}.book-stack i:nth-child(4){height:98px;background:#84959a;width:48px}.book-stack span{font-size:40px;color:#ab835b;margin:0 0 28px 18px}.login-card{background:#fffefa;border:1px solid #efede6;padding:41px 40px;border-radius:6px;box-shadow:0 12px 40px #3934220a}.login-card h2{font:500 30px var(--serif);margin:11px 0 7px}.muted{color:var(--muted);font-size:12px;margin:0 0 28px}.login-card label,.add-form label{display:block;font-size:11px;font-weight:600;color:#5d655c;margin:18px 0}.login-card input,.add-form input,.add-form textarea{display:block;width:100%;margin-top:8px;background:#fff;border:1px solid #e7e5dc;border-radius:3px;padding:13px 12px;font:13px var(--sans);color:var(--ink);outline:none}.login-card input:focus,.add-form input:focus,.add-form textarea:focus{border-color:#8a9a80}.primary{border:0;background:var(--green);color:white;padding:13px 17px;border-radius:3px;font:600 12px var(--sans);letter-spacing:.2px;cursor:pointer;transition:background .15s}.primary:hover{background:#354d3b}.primary span{font-size:17px;margin-left:10px;vertical-align:-1px}.wide{width:100%;margin-top:7px}.lock-note{border-top:1px solid var(--line);margin-top:23px;padding-top:19px;color:#9a9c94;font-size:10px;text-align:center}.error{background:#fff0ed;color:#a54234;padding:10px 12px;margin:0 0 18px;font-size:12px;border-radius:3px}.hero{min-height:330px;margin-top:36px;background:#e9eee5;border-radius:5px;position:relative;overflow:hidden;padding:57px 65px}.hero h1{font-size:47px;margin:14px 0 12px}.hero p{margin:0}.hero-art{position:absolute;right:9%;bottom:-15px;width:280px;height:280px;border-radius:50%;background:#e0e7d9}.sun{position:absolute;width:92px;height:92px;border-radius:50%;background:#ddc59f;top:32px;right:66px}.leaf{position:absolute;width:54px;height:94px;border-radius:100% 0 100% 0;background:#99a88f;transform:rotate(28deg);top:96px;left:83px}.leaf-b{background:#768d78;transform:rotate(61deg);left:133px;top:112px}.vase{position:absolute;width:68px;height:82px;border-radius:15px 15px 26px 26px;background:#bd9877;left:85px;bottom:22px}.art-book{position:absolute;bottom:40px;width:27px;height:73px;background:#e3d3b8;border-radius:2px;transform:rotate(-13deg);left:173px}.b2{height:86px;left:196px;bottom:39px;background:#6d8371;transform:rotate(6deg)}.b3{height:65px;left:220px;bottom:40px;background:#d7a479;transform:rotate(15deg)}.library{padding-top:54px}.section-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:22px}.section-heading h2{font:500 30px var(--serif);margin:8px 0 0}.count{font:500 12px var(--sans);color:#9b9d93;vertical-align:middle;margin-left:8px}.book-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:27px 22px}.book-card{min-width:0}.cover{height:215px;background:var(--cover);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:25px 23px 20px;color:#35483c;text-decoration:none;position:relative;overflow:hidden;border-radius:3px;box-shadow:inset 4px 0 #0000000b,0 5px 15px #40382b0b}.cover:before,.cover:after{content:"";position:absolute;width:145px;height:145px;border:1px solid #334a3a1c;border-radius:50%;left:-80px;top:-55px}.cover:after{width:165px;height:165px;left:auto;top:auto;right:-100px;bottom:-90px}.cover-mark{font-size:20px;color:#8c795a;margin-bottom:10px}.cover strong{font:600 20px/1.2 var(--serif);max-width:190px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.cover small{font:600 8px var(--sans);letter-spacing:1.1px;margin-top:10px;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cover-rule{width:24px;border-top:1px solid #475e4b55;margin-top:14px}.read-pill{position:absolute;bottom:10px;right:12px;font-size:9px;color:#51644e;opacity:0;transition:opacity .15s}.cover:hover .read-pill{opacity:1}.book-meta{display:flex;justify-content:space-between;padding-top:13px;gap:8px}.book-meta .tag{font-size:8px;letter-spacing:1.2px;color:#9a7652;font-weight:700}.book-meta h3{font:600 15px/1.35 var(--serif);margin:5px 0 3px;overflow-wrap:anywhere}.book-meta p{font-size:11px;color:#81867e;margin:0}.book-meta .description{margin-top:8px;line-height:1.55;color:#999}.delete{background:none;border:0;color:#b1b1a9;font:22px var(--sans);cursor:pointer;padding:0 5px;height:24px}.delete:hover{color:#9b473c}.empty{grid-column:1/-1;text-align:center;background:#fffefa;border:1px dashed #dedbd1;padding:46px 20px;margin:5px 0 15px}.empty-icon{font:28px var(--serif);color:#ab835b}.empty h3{font:500 22px var(--serif);margin:9px 0 5px}.empty p{font-size:12px;color:#888;margin:0 0 15px}.add-form{display:none;background:#fffefa;border:1px solid var(--line);padding:20px 24px;margin:0 0 24px;border-radius:4px}.add-form.open{display:block}.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0 20px}.add-form label{margin:7px 0 12px}.add-form textarea{resize:vertical}.add-form input[type=file]{font-size:11px;padding:10px}.add-form>button{margin-top:5px}
@media(max-width:850px){.book-grid{grid-template-columns:repeat(3,1fr)}.hero-art{right:-8%}.login-layout{grid-template-columns:1fr 380px;gap:35px;padding:45px 2%}.welcome h1{font-size:44px}}@media(max-width:650px){.top{height:68px;padding:0 20px}main{padding:0 20px}.login-layout{min-height:auto;display:block;padding:40px 0}.welcome{min-height:210px;padding-top:0}.welcome h1{font-size:39px;margin:12px 0}.welcome p{max-width:280px}.book-stack{display:none}.login-card{padding:29px 25px}.hero{min-height:270px;margin-top:20px;padding:36px 26px}.hero h1{font-size:36px}.hero-art{opacity:.38;right:-110px;bottom:-74px;transform:scale(.8)}.library{padding-top:38px}.section-heading h2{font-size:25px}.section-heading{align-items:center;gap:10px}.section-heading .primary{padding:12px;font-size:10px}.book-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 14px}.cover{height:190px;padding:20px 12px}.cover strong{font-size:17px}.book-meta h3{font-size:13px}.form-grid{grid-template-columns:1fr}.add-form{padding:14px 17px}footer{margin:48px 20px 0}.top-note{font-size:10px}}