*{box-sizing:border-box}body{margin:0;background:#f7f5ef;color:#253d37;font:16px/1.6 system-ui,sans-serif}a{color:inherit;text-underline-offset:4px}header{padding:22px max(5vw,20px);display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #d9dfd6;gap:20px}.brand{font-size:21px;font-weight:750;text-decoration:none}nav{display:flex;align-items:center;gap:22px}nav form{margin:0}main{max-width:1240px;margin:55px auto;padding:0 28px;min-height:65vh}h1{font-family:Georgia,serif;font-size:clamp(34px,5vw,58px);line-height:1.14;letter-spacing:-1.5px;margin:12px 0 20px}.eyebrow{font-size:12px;letter-spacing:2px;font-weight:750;color:#6d7760}.intro{color:#68756e;font-size:18px}.search{display:flex;align-items:end;gap:16px;padding:24px;background:#fff;border:1px solid #dce1d7;border-radius:12px;margin:36px 0}label{display:block;font-size:13px;font-weight:650}.search label:first-child{flex:1}input,select{display:block;font:inherit;padding:12px;border:1px solid #b8c6ba;border-radius:6px;width:100%;margin-top:7px;background:#fff;color:#253d37}button,.button{display:inline-block;font:inherit;cursor:pointer;background:#275e4c;color:white;padding:12px 22px;border:0;border-radius:6px;text-decoration:none}button:hover,.button:hover{background:#193f33}.quiet{padding:7px 12px;background:transparent;color:#253d37;border:1px solid #b8c6ba}.count,.hint{color:#68756e;font-size:14px}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:25px}.card{background:#fff;border-radius:10px;border:1px solid #dce1d7;overflow:hidden}.book-art{min-height:245px;margin:18px 28px 0;padding:28px 20px;display:flex;flex-direction:column;justify-content:space-between;gap:18px;text-decoration:none;color:#f4eee0;background:#355e55;border-left:8px solid #274940;border-radius:2px 7px 7px 2px}.card:nth-child(3n+2) .book-art{background:#795842;border-color:#634733}.card:nth-child(3n+3) .book-art{background:#505d77;border-color:#39465f}.book-art span{font-size:11px;letter-spacing:3px}.book-art strong{font:26px/1.2 Georgia,serif}.book-art small{font-size:12px}.card-body{padding:22px}.card h2{font-size:17px;line-height:1.35;margin:0}.card h2 a{text-decoration:none}.card p{color:#68756e;font-size:14px}.tags{display:flex;flex-wrap:wrap;gap:6px}.tags span{background:#edf0e8;font-size:11px;padding:3px 9px;border-radius:4px}.download{display:block;margin-top:20px;font-size:13px;font-weight:700}.empty{grid-column:1/-1;padding:40px;border:1px dashed #b8c6ba;border-radius:12px}.pagination{justify-content:center;margin:40px 0}.login{max-width:460px;margin:60px auto}.login h1{font-size:44px}.login form{margin:30px 0}.login button{width:100%}.errorlist{color:#a32b23}.detail{max-width:780px;margin:50px 0}.description{margin:30px 0;overflow-wrap:anywhere}footer{padding:25px 5vw;color:#68756e;border-top:1px solid #d9dfd6;font-size:13px}:focus-visible{outline:3px solid #ce8c38;outline-offset:3px}@media(max-width:650px){header{flex-wrap:wrap}nav{gap:12px;flex-wrap:wrap}.search{align-items:stretch;flex-direction:column}.search label{width:100%}main{padding:0 20px;margin-top:35px}}

/* Keep long category names from shrinking the search field. */
.search {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto auto;
  align-items: end;
}
.search label { min-width: 0; }
.search input, .search select {
  min-width: 0;
  width: 100%;
  height: 48px;
  font-size: 15px;
  font-weight: 400;
}
.search select { text-overflow: ellipsis; }
.search button { height: 48px; white-space: nowrap; }
.search > a { align-self: center; margin-top: 28px; font-size: 14px; }
@media (max-width: 900px) {
  .search { grid-template-columns: minmax(0, 1fr) auto; }
  .search label:first-child { grid-column: 1 / -1; }
  .search > a { grid-column: 1 / -1; margin-top: 0; justify-self: start; }
}
@media (max-width: 480px) {
  .search { grid-template-columns: minmax(0, 1fr); padding: 18px; }
  .search > a { justify-self: center; }
}

.stats-eyebrow { margin-top: 32px; }
.stat-row { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin:32px 0; }
.stat { background:#fff; border:1px solid #dce1d7; border-radius:12px; padding:24px; display:flex; flex-direction:column; }
.stat strong { font-size:36px; line-height:1.3; color:#275e4c; }
.stat span { color:#68756e; font-size:14px; }
.stats-panel { min-width:0; background:#fff; border:1px solid #dce1d7; border-radius:12px; padding:24px; margin-bottom:24px; }
.stats-panel h2 { margin:0 0 12px; font-size:20px; }
.stats-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 24px; }
.week-chart { display:flex; gap:12px; margin:24px 0; }
.week-column { flex:1; min-width:0; text-align:center; font-size:12px; }
.week-column strong { display:block; font-size:14px; }
.week-track { height:150px; display:flex; align-items:end; border-bottom:1px solid #dce1d7; margin:8px 0; }
.week-bar { width:100%; background:#39765f; border-radius:6px 6px 0 0; }
.rank-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 16px; padding:12px 0; border-bottom:1px solid #edf0e8; }
.rank-row a,.rank-row span { overflow-wrap:anywhere; }
.rank-row a { text-decoration:none; }
.rank-row a:hover { text-decoration:underline; }
.rank-track { grid-column:1/-1; height:6px; border-radius:3px; background:#edf0e8; }
.rank-track span { display:block; height:100%; background:#39765f; border-radius:3px; }
@media(max-width:700px) { .stat-row { grid-template-columns:repeat(2,minmax(0,1fr)); } .stats-grid { grid-template-columns:minmax(0,1fr); } .stats-panel { padding:18px; } .week-chart { gap:5px; } .stat { padding:18px; } }

.app-footer { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.release-panel { max-width:850px; }
.release-panel li { margin:10px 0; }
.release-current { display:inline-block; vertical-align:middle; background:#edf0e8; color:#275e4c; font-size:12px; padding:3px 10px; border-radius:20px; margin-left:8px; }

.profile-panel input { max-width:100%; }
.profile-panel .helptext { display:block; color:#68756e; font-size:13px; margin-top:6px; }
.profile-messages { padding:4px 20px; background:#e2efe5; border:1px solid #aec8b6; border-radius:8px; margin-bottom:24px; }
.login .helptext { color:#68756e; font-size:13px; }

/* Warm reading-room theme; the illustration is supplied by the owner. */
body { background:#f5f0e7; color:#293c34; }
header { background:#fcfaf5; border-bottom-color:#e2d8c8; }
.brand { font-family:Georgia,serif; font-size:25px; }
main { margin-top:32px; }
.library-hero { position:relative; isolation:isolate; overflow:hidden; border-radius:18px; min-height:350px; display:flex; align-items:center; background:#3e3226 url('bookshelf.png') center 48% / cover; box-shadow:0 14px 32px #49331b18; }
.library-hero::before { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(24,35,29,.96),rgba(24,35,29,.85) 38%,rgba(24,35,29,.12) 78%); }
.hero-copy { padding:42px 46px; max-width:700px; color:#fff8e9; }
.hero-copy h1 { font-size:clamp(32px,4vw,48px); font-weight:400; line-height:1.14; letter-spacing:-1px; }
.hero-copy .eyebrow { color:#e2cba2; font-size:11px; }
.hero-copy .intro { color:#eee3cf; font-size:16px; }
.hero-link { display:inline-block; color:#f3d9a7; font-size:14px; margin-top:8px; font-weight:650; }
.search { box-shadow:0 8px 24px #49331b08; border-color:#e2d8c8; scroll-margin-top:20px; }
.card { background:#fffdf8; border-color:#e2d8c8; box-shadow:0 4px 14px #49331b0a; transition:box-shadow .18s,transform .18s; }
.card:hover { transform:translateY(-3px); box-shadow:0 12px 26px #49331b18; }
.book-art { position:relative; min-height:265px; box-shadow:4px 6px 9px #24190f24,inset -4px 0 #ffffff18; background-image:linear-gradient(110deg,#ffffff0d,transparent 45%,#00000016); }
.book-art::after { content:''; position:absolute; inset:12px; border:1px solid #f4deaa55; pointer-events:none; }
.book-art strong { font-size:26px; line-height:1.25; font-weight:400; }
.book-art span { color:#ead3a1; }
.book-art small { color:#fff5dc; }
.card-body h2 { font-family:Georgia,serif; font-size:20px; font-weight:500; }
.tags span { background:#eee8da; color:#61533e; }
.download { border-top:1px solid #ebe4d7; padding-top:15px; color:#275e4c; }
.stat,.stats-panel { background:#fffdf8; border-color:#e2d8c8; }
footer { border-color:#e2d8c8; }
@media(max-width:650px) { .library-hero { min-height:310px; } .hero-copy { padding:28px 24px; } .library-hero::before { background:linear-gradient(90deg,#18231df0,#18231d99); } .brand { font-size:22px; } }
@media(prefers-reduced-motion:reduce) { .card { transition:none; } .card:hover { transform:none; } }
@media(max-width:900px) { header { flex-wrap:wrap; } header nav { flex-wrap:wrap; gap:12px 18px; min-width:0; } }

.search { grid-template-columns:minmax(240px,2fr) minmax(170px,1fr) minmax(150px,.8fr) auto auto; }
@media(max-width:1050px) { .search { grid-template-columns:minmax(0,1fr) minmax(160px,.7fr); } .search label:first-child { grid-column:1/-1; } .search button { align-self:end; } .search > a { grid-column:1/-1; margin-top:0; justify-self:start; } }
@media(max-width:650px) { .search { grid-template-columns:minmax(0,1fr); } .search label:first-child { grid-column:auto; } .search > a { grid-column:auto; justify-self:center; } }

header { display:grid; grid-template-columns:minmax(max-content,1fr) auto minmax(max-content,1fr); }
header nav { justify-self:end; }
.header-greeting { margin:0; font-family:Georgia,serif; font-size:18px; color:#78654d; white-space:nowrap; }
@media(max-width:1050px) { header { grid-template-columns:1fr auto; } .header-greeting { grid-column:1/-1; grid-row:2; justify-self:center; padding-top:4px; } }
@media(max-width:650px) { header { display:flex; } .header-greeting { width:100%; order:3; text-align:center; padding-top:3px; } }

.profile-link { display:flex; align-items:center; gap:8px; text-decoration:none; }
.profile-avatar-small,.profile-avatar-large { display:inline-flex; flex:0 0 auto; align-items:center; justify-content:center; object-fit:cover; border-radius:50%; background:#275e4c; color:#fff8e9; }
.profile-avatar-small { width:34px; height:34px; font-size:14px; }
.profile-avatar-large { width:112px; height:112px; font:44px Georgia,serif; box-shadow:0 5px 18px #49331b24; }
.profile-heading { display:flex; align-items:center; gap:22px; margin-bottom:22px; }
.profile-heading h2 { margin-bottom:3px; }
.profile-heading p { margin:0; }
.profile-panel input[type=file] { padding:9px; background:#fcfaf5; }
.profile-panel input[type=checkbox] { display:inline-block; width:auto; margin:0 7px 0 0; }
@media(max-width:480px) { .profile-heading { align-items:flex-start; flex-direction:column; } .profile-avatar-large { width:92px; height:92px; } }