:root{
  --bg:#f3ede2;
  --text:#292722;
  --muted:#746e64;
  --accent:#72503c;
  --line:rgba(41,39,34,.13);
  --size:20px;
  --lh:1.9;
  --width:760px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
}
button,input,select{font:inherit}
button{color:inherit}
button,input,select,article{outline-color:color-mix(in srgb,var(--accent) 55%,transparent)}
.hidden{display:none!important}
.page{display:none;min-height:100vh}
.page.active{display:block}
.eyebrow{
  margin:0 0 8px;
  color:var(--muted);
  font-size:11px;
  font-weight:800;
  letter-spacing:.18em;
}
.hero{
  max-width:1180px;
  margin:auto;
  padding:calc(52px + var(--safe-top)) 28px 24px;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:18px;
}
.hero h1{
  margin:0;
  font:700 clamp(36px,6vw,62px)/1.1 Georgia,"Songti SC",serif;
}
.hero .sub{margin:12px 0 0;color:var(--muted)}
.tools{
  position:sticky;
  top:0;
  z-index:8;
  max-width:1180px;
  margin:auto;
  padding:14px 28px;
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  background:color-mix(in srgb,var(--bg) 90%,transparent);
  backdrop-filter:blur(18px);
}
.search{
  min-width:0;
  height:48px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 16px;
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(255,255,255,.45);
}
.search span{font-size:24px;color:var(--muted)}
.search input{
  width:100%;
  border:0;
  outline:0;
  background:transparent;
  color:inherit;
}
.primary,.outline,.chapter-nav button,.speech-row button{
  min-height:44px;
  border-radius:14px;
  padding:0 18px;
  cursor:pointer;
}
.primary{
  border:0;
  background:var(--text);
  color:var(--bg);
  font-weight:750;
}
.outline{
  border:1px solid var(--line);
  background:transparent;
}
.book-grid{
  max-width:1180px;
  margin:auto;
  padding:22px 28px 72px;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:30px 22px;
}
.book-card{
  min-width:0;
  padding:0;
  border:0;
  background:transparent;
  text-align:left;
  cursor:pointer;
}
.cover{
  position:relative;
  aspect-ratio:3/4.25;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 18px 60px rgba(44,35,26,.12);
  transition:.22s ease;
}
.book-card:hover .cover{transform:translateY(-5px);box-shadow:0 25px 70px rgba(44,35,26,.18)}

.cover-image{
  position:absolute;
  inset:0;
  z-index:1;
  width:100%;
  height:100%;
  object-fit:cover;
}
.cover.has-image::before{display:none}
.cover::before{
  content:"";
  position:absolute;
  width:80%;
  height:60%;
  left:-25%;
  top:-14%;
  border-radius:50%;
  background:rgba(255,255,255,.25);
}
.cover-inner{
  position:relative;
  z-index:1;
  height:100%;
  padding:22px 19px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  color:#fff;
}
.cover-mark{font:700 12px Georgia,serif;letter-spacing:.16em;opacity:.78}
.cover-title{font:800 clamp(22px,3vw,31px)/1.2 "Songti SC","STSong",serif;max-width:7em}
.cover-author{font-size:12px;opacity:.85}
.read-badge{
  position:absolute;
  z-index:2;
  top:12px;
  right:12px;
  padding:5px 8px;
  border-radius:999px;
  background:rgba(255,255,255,.86);
  color:#2c2925;
  font-size:11px;
  font-weight:800;
}
.book-meta{padding:13px 4px 0}
.book-meta h2{
  margin:0;
  font-size:17px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.book-meta p{
  margin:7px 0 0;
  color:var(--muted);
  font-size:13px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.book-progress{
  height:3px;
  margin-top:11px;
  border-radius:99px;
  background:var(--line);
  overflow:hidden;
}
.book-progress span{display:block;height:100%;background:var(--accent)}
.empty{text-align:center;padding:80px 20px;color:var(--muted)}
.empty h2{color:var(--text)}
.empty-icon{font-size:48px}

/* Reader */
.topbar{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:30;
  height:calc(62px + var(--safe-top));
  padding:var(--safe-top) 12px 0;
  display:grid;
  grid-template-columns:48px minmax(0,1fr) auto;
  align-items:center;
  border-bottom:1px solid var(--line);
  background:color-mix(in srgb,var(--bg) 91%,transparent);
  backdrop-filter:blur(20px);
  transition:transform .24s ease;
}
.reader-hidden .topbar{transform:translateY(-110%)}
.titlebox{
  min-width:0;
  display:flex;
  flex-direction:column;
  text-align:center;
}
.titlebox strong,.titlebox small{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.titlebox small{margin-top:2px;color:var(--muted)}
.top-actions{display:flex}
.icon{
  width:44px;
  height:44px;
  padding:0;
  display:inline-grid;
  place-items:center;
  border:0;
  border-radius:50%;
  background:transparent;
  cursor:pointer;
  font-size:19px;
}
.icon:hover{background:color-mix(in srgb,var(--text) 7%,transparent)}
.progress{
  position:fixed;
  top:calc(61px + var(--safe-top));
  left:0;
  right:0;
  z-index:31;
  height:2px;
  transition:top .24s ease;
}
.reader-hidden .progress{top:0}
.progress span{
  display:block;
  width:0;
  height:100%;
  background:var(--accent);
}
article{
  width:min(calc(100% - 38px),var(--width));
  margin:auto;
  padding:calc(108px + var(--safe-top)) 0 calc(116px + var(--safe-bottom));
  font-family:var(--font);
}
article h2{
  margin:0 0 2.1em;
  text-align:center;
  font:750 clamp(25px,4vw,34px)/1.35 var(--font);
}
#content{
  font-size:var(--size);
  line-height:var(--lh);
  letter-spacing:.035em;
  overflow-wrap:anywhere;
}
#content p{
  margin:0 0 1.42em;
  text-indent:2em;
}
#content p.speaking{
  border-radius:8px;
  background:color-mix(in srgb,var(--accent) 13%,transparent);
}
.chapter-nav{
  margin-top:70px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.chapter-nav button{
  border:1px solid var(--line);
  background:transparent;
}
.chapter-nav button:disabled{opacity:.35;cursor:not-allowed}
.bottom-bar{
  position:fixed;
  z-index:30;
  left:50%;
  bottom:calc(16px + var(--safe-bottom));
  transform:translateX(-50%) translateY(0);
  width:min(420px,calc(100% - 30px));
  height:58px;
  padding:5px;
  display:grid;
  grid-template-columns:1fr 1.35fr 1fr;
  align-items:center;
  border:1px solid var(--line);
  border-radius:20px;
  background:color-mix(in srgb,var(--bg) 91%,transparent);
  box-shadow:0 18px 60px rgba(44,35,26,.14);
  backdrop-filter:blur(20px);
  transition:.24s ease;
}
.reader-hidden .bottom-bar{
  transform:translateX(-50%) translateY(135%);
  opacity:0;
}
.bottom-bar button{
  height:46px;
  border:0;
  border-radius:15px;
  background:transparent;
  cursor:pointer;
}
.bottom-bar .primary{background:var(--text);color:var(--bg)}
.backdrop{
  position:fixed;
  inset:0;
  z-index:39;
  background:rgba(0,0,0,.25);
  backdrop-filter:blur(2px);
}
.panel{
  position:fixed;
  z-index:40;
  top:0;
  bottom:0;
  width:min(430px,92vw);
  padding:calc(24px + var(--safe-top)) 22px calc(24px + var(--safe-bottom));
  background:color-mix(in srgb,var(--bg) 96%,white 4%);
  box-shadow:0 0 60px rgba(0,0,0,.18);
  overflow:auto;
  transition:transform .26s ease;
}
.panel.left{left:0;transform:translateX(-105%)}
.panel.right{right:0;transform:translateX(105%)}
.panel.open{transform:translateX(0)}
.panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:22px;
}
.panel-head h2{margin:0}
.catalog{display:grid;gap:7px}
.catalog button{
  padding:13px 14px;
  border:0;
  border-radius:12px;
  background:transparent;
  text-align:left;
  cursor:pointer;
}
.catalog button:hover{background:color-mix(in srgb,var(--text) 6%,transparent)}
.catalog button.active{background:var(--text);color:var(--bg)}
.setting{
  padding:18px 0;
  border-top:1px solid var(--line);
}
.setting>label,.setting-title{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:14px;
  font-weight:700;
}
.setting output{color:var(--muted);font-weight:500}
input[type="range"]{
  width:100%;
  margin-top:14px;
  accent-color:var(--accent);
}
.segments{
  margin-top:12px;
  padding:4px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-radius:13px;
  background:color-mix(in srgb,var(--text) 7%,transparent);
}
.segments button{
  padding:10px 5px;
  border:0;
  border-radius:10px;
  background:transparent;
  cursor:pointer;
}
.segments button.active{
  background:var(--bg);
  box-shadow:0 3px 10px rgba(0,0,0,.08);
}
.themes{display:flex;gap:15px;margin-top:14px}
.themes button{
  width:42px;
  height:42px;
  padding:0;
  border:2px solid transparent;
  border-radius:50%;
  cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);
}
.themes button.active{outline:3px solid var(--accent);outline-offset:3px}
.paper{background:#f3ede2}.white{background:#fff}.green{background:#e8f0e5}.gray{background:#dde0e3}.night{background:#17191d}
.color-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.color-grid label{
  display:flex!important;
  flex-direction:column;
  align-items:stretch!important;
  gap:10px;
}
input[type="color"]{
  width:100%;
  height:42px;
  padding:4px;
  border:1px solid var(--line);
  border-radius:10px;
  background:transparent;
}
.voice-label{
  margin:14px 0;
  display:grid!important;
  gap:10px;
  align-items:stretch!important;
}
select{
  width:100%;
  padding:11px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--bg);
  color:var(--text);
}
.speech-row{
  margin-top:14px;
  display:grid;
  grid-template-columns:1fr 1.35fr 1fr;
  gap:8px;
}
.speech-row button{
  padding:7px 8px;
  border:1px solid var(--line);
  background:transparent;
}
.speech-row .primary{
  border-color:transparent;
  background:var(--text);
  color:var(--bg);
}
.hint{color:var(--muted);font-size:12px;line-height:1.55}
.wide{width:100%}
.toast{
  position:fixed;
  left:50%;
  bottom:calc(90px + var(--safe-bottom));
  z-index:100;
  transform:translate(-50%,20px);
  opacity:0;
  pointer-events:none;
  padding:11px 16px;
  border-radius:999px;
  background:#222;
  color:#fff;
  font-size:13px;
  white-space:nowrap;
  transition:.22s ease;
}
.toast.show{transform:translate(-50%,0);opacity:1}
@media(max-width:640px){
  .hero,.tools{padding-left:18px;padding-right:18px}
  .book-grid{
    padding:14px 18px 55px;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:25px 14px;
  }
  .cover{border-radius:13px}
  .cover-inner{padding:18px 15px}
  article{width:min(calc(100% - 34px),var(--width))}
  #content{letter-spacing:.02em}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition-duration:.001ms!important}
}