/* 每日英语 · redesign tokens — see DESIGN-SPEC.md */
:root{
  --paper:#F7F3EC; --surface:#FFFDF8; --surface-2:#EFE9DF;
  --ink:#1F1B16; --ink-2:#5A5249; --ink-3:#6F665C; --line:#E3DBCF;
  --accent:#9A4A2B; --accent-soft:#F1E2D8; --on-accent:#FFFDF8;
  --chat:#3F6A55; --chat-soft:#E3EDE6; --read:#4A5A85; --read-soft:#E4E8F2;
  --serif:"Source Serif 4","Source Serif Pro","Iowan Old Style","Charter",Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Noto Sans CJK SC","Microsoft YaHei",system-ui,sans-serif;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;--s8:32px;--s10:40px;--s12:48px;
  --r-sm:8px;--r-md:12px;--r-lg:16px;--r-pill:999px;
  --shadow:0 1px 0 rgba(31,27,22,.04),0 1px 3px rgba(31,27,22,.06);
  --measure:640px; color-scheme:light;
}
:root[data-theme=dark]{
  --paper:#16140F; --surface:#1E1B16; --surface-2:#27231D;
  --ink:#ECE6DC; --ink-2:#B9B0A3; --ink-3:#9A9184; --line:#332E27;
  --accent:#E09A76; --accent-soft:#3A271D; --on-accent:#1A120D;
  --chat:#8FC2A6; --chat-soft:#1F2D25; --read:#A3B2DD; --read-soft:#232A3C;
  --shadow:none; color-scheme:dark;
}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  --paper:#16140F; --surface:#1E1B16; --surface-2:#27231D;
  --ink:#ECE6DC; --ink-2:#B9B0A3; --ink-3:#9A9184; --line:#332E27;
  --accent:#E09A76; --accent-soft:#3A271D; --on-accent:#1A120D;
  --chat:#8FC2A6; --chat-soft:#1F2D25; --read:#A3B2DD; --read-soft:#232A3C;
  --shadow:none; color-scheme:dark;}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.7 var(--sans);-webkit-font-smoothing:antialiased;padding-bottom:calc(72px + env(safe-area-inset-bottom))}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.en{font-family:var(--serif)}
.wrap{max-width:var(--measure);margin:0 auto;padding:0 var(--s5)}

/* top bar */
.top{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:var(--s3);height:56px}
.brand{font-weight:600;font-size:17px;letter-spacing:.02em;text-decoration:none;display:flex;align-items:baseline;gap:8px}
.brand i{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--accent);font-size:15px}
.top .back{text-decoration:none;font-size:15px;color:var(--ink-2);display:flex;align-items:center;gap:4px;min-height:44px}
.top nav.desk{display:none;margin-left:auto;gap:var(--s5)}
.top nav.desk a{text-decoration:none;color:var(--ink-2);font-size:15px}
.top nav.desk a[aria-current]{color:var(--ink);font-weight:600}
.iconbtn{margin-left:auto;width:44px;height:44px;border:0;background:none;border-radius:var(--r-pill);display:grid;place-items:center;cursor:pointer;color:var(--ink-2)}
.iconbtn:hover{background:var(--surface-2)}
.iconbtn svg{width:20px;height:20px}

/* bottom nav */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:10;background:var(--surface);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
.tabbar .in{display:flex;max-width:var(--measure);margin:0 auto}
.tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 0 10px;font-size:12px;text-decoration:none;color:var(--ink-3);min-height:56px}
.tabbar a svg{width:22px;height:22px}
.tabbar a[aria-current]{color:var(--accent);font-weight:600}
@media (min-width:900px){
  body{padding-bottom:0}.tabbar{display:none}.top nav.desk{display:flex}.top .iconbtn{margin-left:var(--s2)}
  :root{--measure:720px}
}

/* type */
.eyebrow{font-size:13px;color:var(--ink-3);letter-spacing:.04em}
h1{font-size:28px;line-height:1.3;font-weight:600;margin:var(--s2) 0 var(--s3);letter-spacing:.01em}
h2{font-size:20px;line-height:1.4;font-weight:600;margin:0}
h3{font-size:15px;font-weight:600;margin:0 0 var(--s2);color:var(--ink-2)}
.lead{color:var(--ink-2);font-size:15px;margin:0}
.section{margin-top:var(--s10)}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:var(--s4)}
.sec-head a{font-size:14px;color:var(--ink-3);text-decoration:none}
.rule{height:1px;background:var(--line);border:0;margin:var(--s10) 0}

/* chips */
.chips{display:flex;gap:var(--s2);overflow-x:auto;padding-bottom:4px;scrollbar-width:none;margin:0 calc(-1*var(--s5));padding-left:var(--s5);padding-right:var(--s5)}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;border:1px solid var(--line);background:var(--surface);border-radius:var(--r-pill);padding:6px 14px;font-size:14px;line-height:1.5;cursor:pointer;color:var(--ink-2);min-height:36px;white-space:nowrap}
.chip[aria-pressed=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.tag{display:inline-block;font-size:12px;line-height:1.6;padding:1px 8px;border-radius:var(--r-pill);background:var(--surface-2);color:var(--ink-2)}
.tag.chat{background:var(--chat-soft);color:var(--chat)}.tag.read{background:var(--read-soft);color:var(--read)}

/* hero (home) */
.hero{margin-top:var(--s8)}
.feature{display:block;text-decoration:none;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s6);box-shadow:var(--shadow);margin-top:var(--s5)}
.feature .q{font-family:var(--serif);font-size:21px;line-height:1.55;margin:var(--s3) 0 var(--s4);color:var(--ink)}
.feature .q::before{content:"“";color:var(--accent);margin-right:2px}
.feature .q::after{content:"”";color:var(--accent)}
.feature .by{font-size:14px;color:var(--ink-3)}
.feature .go{display:flex;justify-content:space-between;align-items:center;margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--line);font-size:15px;color:var(--accent);font-weight:600}

/* carousel (home) */
.carousel{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:var(--s5) calc(-1*var(--s5)) 0;padding:0 var(--s5) 4px;scroll-padding:0 var(--s5);-webkit-overflow-scrolling:touch}
.carousel::-webkit-scrollbar{display:none}
.carousel .slide{flex:0 0 86%;scroll-snap-align:start;margin-top:0;display:flex;flex-direction:column;color:var(--ink)}
.slide .no{display:flex;justify-content:space-between;align-items:center;font-family:var(--serif);font-size:14px;color:var(--accent);letter-spacing:.06em}
.slide .q{font-size:19px;white-space:pre-line;overflow-wrap:anywhere}
.slide .zh-t{margin:0 0 var(--s4);font-size:15px;line-height:1.75;color:var(--ink-2);white-space:pre-line;overflow-wrap:anywhere}
.slide .by{margin-top:auto}.slide .by b{color:var(--ink);font-weight:600}
.dots{display:flex;justify-content:center;gap:4px;margin-top:var(--s2)}
.dot{width:28px;height:28px;border:0;background:none;padding:0;cursor:pointer;display:grid;place-items:center}
.dot::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ink-3);opacity:.45;transition:width .2s}
.dot[aria-current=true]::before{width:20px;border-radius:4px;background:var(--accent);opacity:1}
@media (min-width:900px){.carousel{margin:var(--s5) 0 0;padding:0 0 4px}.carousel .slide{flex:1 1 0;min-width:0}.dots{display:none}}
.item:target .quote{box-shadow:0 0 0 2px var(--accent)}
/* lesson list (home) */
.llist{list-style:none;margin:0;padding:0}
.llist li+li{border-top:1px solid var(--line)}
.llist a{display:block;padding:var(--s4) 0;text-decoration:none}
.llist .d{font-size:13px;color:var(--ink-3)}
.llist .t{font-family:var(--serif);font-size:17px;line-height:1.5;margin:2px 0 6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.llist .tags{display:flex;flex-wrap:wrap;gap:6px}
.empty{text-align:center;color:var(--ink-3);padding:var(--s10) var(--s4);font-size:15px}
.empty b{display:block;color:var(--ink-2);font-weight:600;margin-bottom:4px}

/* lesson */
.zh{margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--line)}
.zh>summary{list-style:none;cursor:pointer;font-size:13px;color:var(--ink-3);display:inline-flex;align-items:center;gap:6px;min-height:32px}
.zh>summary::-webkit-details-marker{display:none}
.zh>summary::after{content:"收起";color:var(--accent)}
.zh:not([open])>summary::after{content:"展开"}
.quote .zh p{font-family:var(--sans);margin:var(--s1) 0 0;font-size:15px;line-height:1.75;color:var(--ink-2);white-space:pre-line;overflow-wrap:anywhere}
.lhead{margin-top:var(--s8)}
.toc{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s4)}
.toc a{font-size:14px;text-decoration:none;color:var(--ink-2);border-bottom:1px solid var(--line)}.toc a[aria-current]{color:var(--accent);font-weight:600;border-bottom-color:var(--accent)}
.item{margin-top:var(--s12);scroll-margin-top:72px}
.item-no{font-family:var(--serif);font-size:14px;color:var(--accent);letter-spacing:.08em;display:flex;align-items:center;gap:var(--s3)}
.item-no::after{content:"";flex:1;height:1px;background:var(--line)}
.quote{margin:var(--s4) 0 0;padding:var(--s6) var(--s5);background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--r-md);box-shadow:var(--shadow)}
.quote p{font-family:var(--serif);font-size:20px;line-height:1.6;margin:0;white-space:pre-line;overflow-wrap:anywhere}
.quote footer{margin-top:var(--s4);display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:14px;color:var(--ink-3)}
.quote footer .who{color:var(--ink);font-weight:600}
.quote footer a{margin-left:auto;color:var(--accent);text-decoration:none;font-size:14px;min-height:32px;display:inline-flex;align-items:center}
.block{margin-top:var(--s6)}
.tip{background:var(--surface-2);border-radius:var(--r-md);padding:var(--s4) var(--s5);font-size:15px;line-height:1.75;color:var(--ink)}
.vgroup+.vgroup{margin-top:var(--s4)}
.vgrid{display:grid;gap:var(--s2)}
.vcard{display:flex;align-items:center;gap:var(--s3);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s3) var(--s2) var(--s3) var(--s4)}
.vcard .txt{flex:1;min-width:0}
.vcard .term{font-family:var(--serif);font-size:18px;line-height:1.4;overflow-wrap:anywhere}
.vcard .mean{font-size:14px;color:var(--ink-2);line-height:1.5}
.star{flex:none;width:44px;height:44px;border:0;background:none;border-radius:var(--r-pill);display:grid;place-items:center;cursor:pointer;color:var(--ink-3)}
.star svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6}
.star[aria-pressed=true]{color:var(--accent)}.star[aria-pressed=true] svg{fill:currentColor}
.star:hover{background:var(--surface-2)}
.say{display:grid;gap:var(--s3)}
.say .row{padding-left:var(--s4);border-left:2px solid var(--line)}
.say .lab{font-size:13px;color:var(--ink-3)}
.say .en{font-size:18px;line-height:1.55;overflow-wrap:anywhere}
.quiz{margin-top:var(--s12);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}
.quiz>summary{list-style:none;cursor:pointer;padding:var(--s4) var(--s5);display:flex;align-items:center;gap:var(--s3);min-height:56px}
.quiz>summary::-webkit-details-marker{display:none}
.quiz>summary b{font-weight:600}.quiz>summary span{color:var(--ink-3);font-size:14px}
.quiz>summary svg{margin-left:auto;width:18px;height:18px;transition:transform .2s;color:var(--ink-3)}
.quiz[open]>summary svg{transform:rotate(180deg)}
.quiz ol{margin:0;padding:0 var(--s5) var(--s5) var(--s5);list-style:none;counter-reset:q}
.quiz li{counter-increment:q;padding:var(--s4) 0;border-top:1px solid var(--line);font-size:15px}
.quiz li::before{content:counter(q) ". ";color:var(--accent);font-family:var(--serif)}
.reveal{margin-top:var(--s2);border:1px solid var(--line);background:none;border-radius:var(--r-pill);padding:4px 14px;font-size:14px;cursor:pointer;color:var(--ink-2);min-height:36px}
.ans{margin-top:var(--s2);font-family:var(--serif);font-size:17px;color:var(--ink)}
.pager{display:flex;justify-content:space-between;gap:var(--s3);margin:var(--s10) 0 var(--s8)}
.pager a{flex:1;text-decoration:none;border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s3) var(--s4);font-size:14px;color:var(--ink-2)}
.pager a.next{text-align:right}
.pager a b{display:block;color:var(--ink);font-weight:600;font-size:15px}

/* words */
.search{position:relative;margin-top:var(--s5)}
.search input{width:100%;height:48px;border:1px solid var(--line);background:var(--surface);border-radius:var(--r-md);padding:0 var(--s4) 0 44px;font:16px var(--sans);color:var(--ink)}
.search input::placeholder{color:var(--ink-3)}
.search input:focus{outline:2px solid var(--accent);outline-offset:-1px}
.search svg{position:absolute;left:14px;top:14px;width:20px;height:20px;color:var(--ink-3)}
.seg{display:flex;background:var(--surface-2);border-radius:var(--r-pill);padding:3px;margin-top:var(--s4)}
.seg button{flex:1;border:0;background:none;border-radius:var(--r-pill);padding:6px 0;font-size:14px;color:var(--ink-2);cursor:pointer;min-height:36px}
.seg button[aria-pressed=true]{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:var(--shadow)}
.filters{margin-top:var(--s4)}
.count{font-size:13px;color:var(--ink-3);margin:var(--s5) 0 var(--s2)}
.wlist{list-style:none;margin:0;padding:0}
.wlist li{display:flex;gap:var(--s2);align-items:flex-start;padding:var(--s4) 0;border-top:1px solid var(--line)}
.wlist .txt{flex:1;min-width:0}
.wlist .term{font-family:var(--serif);font-size:19px;line-height:1.4;overflow-wrap:anywhere}
.wlist .mean{font-size:15px;color:var(--ink-2);margin-top:2px}
.wlist .src{font-family:var(--serif);font-size:14px;color:var(--ink-3);margin-top:6px;line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.wlist .meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:8px;font-size:13px;color:var(--ink-3)}
.wlist .meta a{color:var(--ink-3)}
mark{background:var(--accent-soft);color:inherit;border-radius:3px;padding:0 1px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}