/* 字体（@font-face 声明）见 fonts.css。
   此处只定义字族变量与回退链 —— 回退链必须保留，因为 font-display:swap
   生效期间以及字体加载失败时，页面要靠它落到系统字体上。 */

:root{
  --paper:#fbf8f2;
  --paper-2:#f4eee2;
  --card:#fffdf8;
  --ink:#221f1b;
  --ink-2:#5f574d;
  --ink-3:#8a8172;
  --line:#e7dfcd;
  --red:#b02a30;
  --gold:#a67c2e;
  --gold-2:#c9a557;
  --display:"Source Serif 4","Source Serif Pro","Charter","Iowan Old Style",Georgia,"Noto Serif CJK SC","Songti SC","STSong",SimSun,"宋体",serif;
  --serif:"Source Serif 4","Source Serif Pro","Charter","Iowan Old Style",Georgia,"Noto Serif CJK SC","Songti SC","STSong",SimSun,"宋体",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"PingFang SC","Microsoft YaHei",sans-serif;
  --zh:"Noto Serif CJK SC","Songti SC","STSong","Source Han Serif SC","Noto Serif SC",SimSun,"宋体",serif;
  /* 楷体：只给中文大字用。小字注释仍走 --zh（楷体在 1rem 以下易糊） */
  --kai:"LXGW WenKai","Noto Serif CJK SC","Songti SC","STSong",KaiTi,"楷体",serif;
  --festival:#b02a30;
  --social:#7a5c9e;
  --kinship:#96543a;
  --work:#4a6fa5;
  --philosophy:#5c6b73;
  --food:#b07d2b;
  --health:#3f7d6a;
  --net:#2f7f8f;
  --art:#8c5a7d;
  /* 梗百科的分类色。沿用同一套低饱和调子，不另起一套 ——
     两个板块并排出现在导航里时，配色体系一致才不会显得是两张皮。 */
  --meme-slang:#4a6fa5;
  --meme-reaction:#b02a30;
  --meme-society:#5c6b73;
  --meme-speech:#7a5c9e;
  --meme-fandom:#8c5a7d;
  --meme-commerce:#b07d2b;
  --meme-variety:#2f7f8f;
  --meme-game:#3f7d6a;
  --meme-anime:#96543a;
  --meme-classic:#8a8172;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:var(--sans);background:var(--paper);color:var(--ink);line-height:1.65;-webkit-font-smoothing:antialiased;}

/* ---------- 标题统一走衬线 ----------
   body 用 --sans（界面字体）。标题如果不出手，就会一路继承 sans ——
   这正是之前页脚「About this glossary」与前几屏标题不同字体的原因：
   页脚写的是 <h2>，而样式表里只有 .foot-inner h4，选择器根本没命中。
   这里给裸标题一个兜底，避免以后再加标题时又悄悄掉回 sans。
   具体组件（.door h2 / .sec-title / .hero h1 …）的规则在后面，
   优先级更高，仍然各自生效。 */
h1,h2,h3,h4,h5,h6{font-family:var(--display);}
button{font-family:inherit;}
::selection{background:rgba(176,42,48,.16);}
mark{background:rgba(201,165,87,.42);color:inherit;border-radius:3px;padding:0 1px;}
a{color:inherit;}

/* ---------- 无障碍：仅供屏幕阅读器 ----------
   首页与生肖页的视觉设计里没有大标题（首页直接是两扇门），
   但页面必须有一个 h1 —— 否则屏幕阅读器和搜索引擎都认为这页没有主标题。
   所以补一个视觉上不可见、但对辅助技术可见的 h1。
   用 clip 而不是 display:none —— 后者会让它从无障碍树里消失，等于没写。 */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;}

/* 跳到主内容：键盘用户不必每页都 Tab 过整个导航 */
.skip-link{position:absolute;left:50%;top:-100px;transform:translateX(-50%);z-index:200;
  background:var(--ink);color:#fdf6e9;padding:11px 22px;border-radius:0 0 10px 10px;
  font-size:.9rem;text-decoration:none;transition:top .18s;}
.skip-link:focus{top:0;}

/* ---------- shared ---------- */
.container{max-width:1220px;margin:0 auto;padding:0 24px;}
.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--card);
  color:var(--ink);border-radius:999px;padding:10px 20px;font-size:.9rem;cursor:pointer;
  transition:border-color .2s,color .2s,transform .15s,box-shadow .2s;text-decoration:none;}
.btn:hover{border-color:var(--red);color:var(--red);transform:translateY(-1px);}
.btn-solid{background:var(--ink);border-color:var(--ink);color:#fdf6e9;}
.btn-solid:hover{background:var(--red);border-color:var(--red);color:#fff;}
.btn-sm{padding:7px 15px;font-size:.82rem;}

/* ---------- nav ---------- */
#nav{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:14px 24px;background:rgba(251,248,242,.9);backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;transition:border-color .3s,background .3s;}
#nav.stuck{border-bottom-color:var(--line);}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;}
.seal{width:36px;height:36px;flex:0 0 36px;border-radius:8px;background:var(--red);color:#fdf6e9;
  font-family:var(--kai);font-size:1.35rem;display:grid;place-items:center;line-height:1;}
.brand-txt{font-family:var(--serif);font-size:1.02rem;letter-spacing:.2px;}
.brand-sub{font-size:.7rem;color:var(--ink-3);letter-spacing:.4px;text-transform:uppercase;}
.nav-links{display:flex;align-items:center;gap:26px;list-style:none;}
.nav-links a{text-decoration:none;font-size:.88rem;color:var(--ink-2);transition:color .2s;}
.nav-links a:hover{color:var(--red);}
/* 右侧一组：导航链接 + 语言切换器并排，语言在最右边 */
.nav-right{display:flex;align-items:center;gap:22px;}
/* 汉堡按钮：默认隐藏，只在 <=640px 出现。三条杠用 span，靠 :checked 变成叉 */
.nav-tog{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;}
.nav-burger{display:none;width:42px;height:42px;flex:0 0 42px;border:1px solid var(--line);
  border-radius:11px;background:var(--card);cursor:pointer;padding:0;place-items:center;
  transition:border-color .18s,background .18s;}
.nav-burger:hover{border-color:rgba(176,42,48,.4);}
.nav-burger span{display:block;width:18px;height:1.6px;background:var(--ink);border-radius:2px;
  transition:transform .2s cubic-bezier(.4,0,.2,1),opacity .16s;}
.nav-burger span+span{margin-top:4.5px;}

/* ---------- hero ---------- */
.hero{position:relative;padding:92px 24px 0;text-align:center;overflow:hidden;}
.hero-inner{position:relative;z-index:2;max-width:900px;margin:0 auto;}
.wm{position:absolute;font-family:var(--kai);font-size:14rem;color:rgba(176,42,48,.04);
  line-height:1;pointer-events:none;user-select:none;}
.eyebrow{font-size:.7rem;letter-spacing:2.6px;text-transform:uppercase;color:var(--red);margin-bottom:12px;}
.hero h1{font-family:var(--serif);font-size:clamp(1.75rem,3.6vw,2.7rem);line-height:1.14;font-weight:400;letter-spacing:-.4px;}
.hero h1 em{font-style:italic;color:var(--red);}
.hero-zh{font-family:var(--zh);font-size:.95rem;color:var(--ink-3);margin-top:10px;letter-spacing:3px;}

/* ---------- about (bottom blurb) ---------- */
.about{background:var(--paper-2);}
.about-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:44px;align-items:start;}
.about p{font-size:.95rem;color:var(--ink-2);line-height:1.8;}
.about .stats{display:grid;grid-template-columns:1fr 1fr;gap:20px 28px;margin:0;}
.about .stats div{font-size:.74rem;color:var(--ink-3);letter-spacing:.6px;}
.about .stats b{display:block;font-family:var(--serif);font-size:1.6rem;color:var(--ink);font-weight:400;}

/* ---------- sections ---------- */
section{padding:78px 0;}
#dict{padding:20px 0 78px;}
.sec-head{max-width:700px;margin-bottom:34px;}
/* 半区一（词汇解释）现在排在每日一词之后，区块头需要自己的节奏 */
.dict-head{max-width:660px;margin-bottom:30px;padding-top:34px;}
#dict .vocab-head{margin-top:2px;}
.sec-tag{font-size:.7rem;letter-spacing:2.4px;text-transform:uppercase;color:var(--red);margin-bottom:12px;}
.sec-title{font-family:var(--serif);font-size:clamp(1.7rem,3vw,2.3rem);font-weight:400;line-height:1.2;}
.sec-desc{margin-top:12px;color:var(--ink-2);font-size:.95rem;}

/* ---------- toolbar ---------- */
.toolbar{position:sticky;top:64px;z-index:40;background:rgba(251,248,242,.955);
  backdrop-filter:blur(12px);padding:16px 0 14px;border-bottom:1px solid var(--line);margin-bottom:0;}
.search-row{display:flex;gap:10px;align-items:center;}
.search-box{flex:1;display:flex;align-items:center;gap:13px;background:var(--card);
  border:1px solid rgba(34,31,27,.16);border-radius:13px;padding:16px 20px;
  box-shadow:0 1px 2px rgba(90,70,40,.05);
  transition:border-color .2s,box-shadow .2s,background .2s;}
.search-box:focus-within{border-color:var(--gold);box-shadow:0 0 0 3px rgba(166,124,46,.1);background:#fffefb;}
.search-box svg{width:18px;height:18px;color:var(--ink-2);flex:0 0 18px;transition:color .2s;}
.search-box:focus-within svg{color:var(--gold);}
.search-box input{flex:1;border:0;outline:0;background:transparent;font-size:1.02rem;
  font-family:var(--serif);color:var(--ink);letter-spacing:.1px;}
.search-box input::placeholder{color:var(--ink-3);opacity:.85;}
.kbd{font-family:var(--sans);font-size:.72rem;font-weight:500;color:var(--ink-3);white-space:nowrap;line-height:1;
  background:linear-gradient(180deg,#fff,var(--paper-2));border:1px solid var(--line);
  border-radius:6px;padding:6px 10px;min-width:26px;text-align:center;
  box-shadow:0 1px 0 rgba(34,31,27,.06);transition:opacity .18s;}
.search-box:focus-within .kbd{opacity:0;}
/* 搜索区的从属说明行：讲清「本地索引 + AI」两级能力 */
.search-hint{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin-top:10px;padding:0 4px;font-size:.76rem;color:var(--ink-3);}
.search-hint .two-tier{display:inline-flex;align-items:center;gap:9px;flex-wrap:wrap;}
.search-hint .tier{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;}
.search-hint .tier i{width:5px;height:5px;border-radius:50%;background:var(--ink-3);flex:0 0 5px;}
.search-hint .tier.ai i{background:var(--work);}
/* 示例词：可点击，中文用汉字字体、拼音用拉丁衬线，一眼能看出「中英都能搜」 */
.search-hint .tier.try{color:var(--ink-3);}
.search-hint .tier.try b{font-weight:400;color:var(--ink-2);cursor:pointer;border-bottom:1px solid transparent;
  transition:color .15s,border-color .15s;padding-bottom:1px;}
.search-hint .tier.try b:hover{color:var(--red);border-bottom-color:rgba(176,42,48,.45);}
.search-hint .tier.try b[data-zh]{font-family:var(--zh);font-size:.82rem;letter-spacing:.5px;}
.search-hint .sep{color:var(--line);}
.search-hint kbd{border:1px solid var(--line);border-radius:4px;padding:1px 5px;
  font-family:var(--sans);font-size:.7rem;background:var(--paper-2);color:var(--ink-2);}
.search-hint .toggle{display:inline-flex;align-items:center;gap:7px;cursor:default;white-space:nowrap;}
.search-hint .toggle .sw{position:relative;width:26px;height:15px;border-radius:99px;
  background:var(--work);flex:0 0 26px;transition:background .2s;}
.search-hint .toggle .sw::after{content:'';position:absolute;top:2px;right:2px;width:11px;height:11px;
  border-radius:50%;background:#fff;transition:transform .2s;}
.search-hint .toggle.off .sw{background:rgba(34,31,27,.2);}
.search-hint .toggle.off .sw::after{transform:translateX(-11px);}
/* 词汇表自己的小区块头，与上方搜索区视觉上分开 */
.vocab-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  margin:0 0 13px;padding-top:2px;flex-wrap:wrap;}
.vocab-head .vh-l{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap;}
.vocab-head .vh-t{font-family:var(--display);font-weight:700;font-size:1.08rem;letter-spacing:-.1px;}
.vocab-head .vh-s{font-size:.76rem;color:var(--ink-3);}
.chips{display:flex;gap:7px;flex-wrap:wrap;}
.chip{border:1px solid transparent;background:rgba(231,223,205,.34);border-radius:8px;padding:6px 12px;font-size:.82rem;
  color:var(--ink-2);cursor:pointer;display:inline-flex;align-items:center;gap:7px;
  transition:background .16s,border-color .16s,color .16s,transform .12s;white-space:nowrap;}
.chip:hover{background:var(--card);border-color:var(--line);color:var(--ink);}
.chip .dotc{width:7px;height:7px;border-radius:50%;background:var(--line);flex:0 0 7px;transition:transform .16s;}
.chip:hover .dotc{transform:scale(1.25);}
.chip .cz{font-size:.74rem;color:var(--ink-3);margin-left:1px;}
.chip.on{background:var(--ink);border-color:var(--ink);color:#fdf6e9;box-shadow:0 2px 8px rgba(34,31,27,.18);}
.chip.on .cz{color:rgba(253,246,233,.6);}
.chip.on .dotc{box-shadow:0 0 0 2px rgba(255,255,255,.22);}
/* 搜索区与词汇表之间的分隔 —— 明确这是两个层级 */
.zone-split{height:1px;background:var(--line);margin:26px 0 22px;border:0;}
.count{font-size:.76rem;color:var(--ink-3);white-space:nowrap;font-variant-numeric:tabular-nums;}
.count b{color:var(--ink-2);font-weight:500;}

/* ---------- grid & cards ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:16px;}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px 20px 16px;
  cursor:pointer;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s,border-color .2s;
  outline:none;animation:rise .34s ease both;animation-delay:calc(var(--n) * 12ms);}
@keyframes rise{from{opacity:0;transform:translateY(9px);}to{opacity:1;transform:none;}}
.card:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(90,70,40,.1);border-color:rgba(176,42,48,.34);}
.card:focus-visible{border-color:var(--red);box-shadow:0 0 0 3px rgba(176,42,48,.14);}
.card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;flex-wrap:wrap;}
/* 分类标签既不肯缩又不肯断，空间不够时会把中文词挤成一列一个字。
   让标签整块折到下一行，词名就能拿到整行宽度。 */
.card-top .zh{order:1;}
.card-top > :not(.zh):not(.py){order:2;}
.zh{font-family:var(--kai);font-size:1.85rem;line-height:1.15;letter-spacing:1px;}
.py{font-size:.78rem;color:var(--ink-3);letter-spacing:.4px;margin-top:3px;}
.cat{font-size:.66rem;letter-spacing:.5px;text-transform:uppercase;padding:3px 9px;border-radius:999px;white-space:nowrap;flex:0 0 auto;}
.cat-festival{background:rgba(176,42,48,.1);color:var(--festival);}
.cat-social{background:rgba(122,92,158,.12);color:var(--social);}
.cat-kinship{background:rgba(150,84,58,.12);color:var(--kinship);}
.cat-work{background:rgba(74,111,165,.12);color:var(--work);}
.cat-philosophy{background:rgba(92,107,115,.13);color:var(--philosophy);}
.cat-food{background:rgba(176,125,43,.14);color:var(--food);}
.cat-health{background:rgba(63,125,106,.13);color:var(--health);}
.cat-net{background:rgba(47,127,143,.13);color:var(--net);}
.cat-art{background:rgba(140,90,125,.13);color:var(--art);}
/* 梗百科分类徽章。复用 .cat 的排版，只换颜色 */
.cat-slang{background:rgba(74,111,165,.13);color:var(--meme-slang);}
.cat-reaction{background:rgba(176,42,48,.12);color:var(--meme-reaction);}
.cat-society{background:rgba(92,107,115,.14);color:var(--meme-society);}
.cat-speech{background:rgba(122,92,158,.13);color:var(--meme-speech);}
.cat-fandom{background:rgba(140,90,125,.14);color:var(--meme-fandom);}
.cat-commerce{background:rgba(176,125,43,.15);color:var(--meme-commerce);}
.cat-variety{background:rgba(47,127,143,.14);color:var(--meme-variety);}
.cat-game{background:rgba(63,125,106,.14);color:var(--meme-game);}
.cat-anime{background:rgba(150,84,58,.13);color:var(--meme-anime);}
.cat-classic{background:rgba(138,129,114,.15);color:var(--meme-classic);}
.lit{font-size:.76rem;color:var(--ink-3);font-style:italic;margin-top:11px;}
.def{font-size:.9rem;color:var(--ink-2);margin-top:8px;flex:1;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px;}
.tag{font-size:.68rem;color:var(--ink-3);background:var(--paper-2);border-radius:5px;padding:2px 7px;}
/* 底部「Read the full entry →」。原来是 space-between 把箭头推到最右边缘，
   卡片一窄文字就换行，箭头孤零零掉到第二行（实测 44px 高）。
   这里让文字和箭头始终在同一行：主文案 nowrap，箭头不压缩。
   文案最长的是「Open the meme encyclopedia」，卡片再窄也只在极端情况下截断，
   不会把箭头甩下去。 */
.more{display:flex;justify-content:space-between;align-items:center;font-size:.74rem;color:var(--red);
  margin-top:12px;padding-top:11px;border-top:1px solid var(--line);opacity:.62;transition:opacity .2s;}
.more span:first-child{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.more span:last-child{flex:0 0 auto;margin-left:6px;}
.card:hover .more{opacity:1;}
.empty{grid-column:1/-1;text-align:center;padding:48px 20px 60px;color:var(--ink-2);max-width:620px;margin:0 auto;}
.empty-icon{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:var(--card);
  display:grid;place-items:center;margin:0 auto 16px;font-family:var(--serif);font-size:1.4rem;color:var(--gold);}
.empty-h{font-family:var(--serif);font-size:1.3rem;color:var(--ink);}
.empty-sub{font-size:.92rem;color:var(--ink-2);margin-top:10px;line-height:1.75;}
.ai-cta{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:22px;}
.ai-note{font-size:.74rem;color:var(--ink-3);}
.suggest-label{font-size:.72rem;letter-spacing:1.6px;text-transform:uppercase;color:var(--ink-3);margin-top:28px;}
.suggest{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:12px;}

/* ---------- ai panel ---------- */
#aiPanel{position:fixed;inset:0;z-index:110;display:flex;align-items:flex-start;justify-content:center;
  padding:5vh 18px;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s;overflow-y:auto;}
#aiPanel.open{opacity:1;visibility:visible;}
.ai-card{background:var(--paper);border-radius:18px;max-width:700px;width:100%;padding:34px 36px 30px;
  position:relative;transform:translateY(14px);transition:transform .3s;box-shadow:0 30px 70px rgba(0,0,0,.28);}
#aiPanel.open .ai-card{transform:none;}
.ai-head{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding-bottom:16px;border-bottom:1px solid var(--line);}
.ai-title{font-family:var(--serif);font-size:1.15rem;}
.ai-badge{font-size:.66rem;letter-spacing:1.4px;text-transform:uppercase;color:#fff;
  background:var(--work);border-radius:999px;padding:3px 10px;}
.ai-q{margin-top:18px;font-family:var(--zh);font-size:1.35rem;line-height:1.5;}
.ai-q-py{font-size:.8rem;color:var(--ink-3);letter-spacing:.5px;margin-top:2px;}
.ai-status{display:flex;align-items:center;gap:9px;font-size:.78rem;color:var(--ink-3);margin-top:14px;}
.ai-dot{width:7px;height:7px;border-radius:50%;background:var(--gold);animation:pulse 1.4s ease-in-out infinite;}
/* 等待秒数用等宽数字 —— 比例字体下数字宽度不一，
   每秒跳动一次会造成整行左右抖动，读起来很烦。 */
.ai-status #aiWait{font-variant-numeric:tabular-nums;}
@keyframes pulse{0%,100%{opacity:.35;}50%{opacity:1;}}
.ai-body{margin-top:20px;}
.ai-sec{margin-top:20px;}
.ai-sec:first-child{margin-top:0;}
.ai-h{font-size:.68rem;letter-spacing:2px;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px;
  display:flex;align-items:center;gap:8px;}
.ai-h::before{content:'';width:14px;height:1px;background:var(--gold);flex:0 0 14px;}
.ai-text{font-size:.95rem;color:var(--ink-2);line-height:1.78;}
.ai-text.lead{font-family:var(--serif);font-size:1.08rem;color:var(--ink);line-height:1.62;}
.ai-ana{background:linear-gradient(90deg,rgba(201,165,87,.14),rgba(201,165,87,.03));
  border-left:3px solid var(--gold);border-radius:0 10px 10px 0;padding:14px 17px;
  font-size:.94rem;line-height:1.68;font-style:italic;}
.ai-warn{background:rgba(176,42,48,.06);border:1px solid rgba(176,42,48,.2);border-radius:10px;
  padding:13px 16px;font-size:.86rem;color:var(--ink-2);margin-top:22px;line-height:1.7;}
.ai-key{margin-top:16px;display:flex;gap:9px;align-items:center;flex-wrap:wrap;}
.ai-key input{flex:1;min-width:220px;border:1px solid var(--line);background:var(--card);border-radius:999px;
  padding:10px 18px;font-size:.86rem;font-family:inherit;color:var(--ink);outline:none;}
.ai-key input:focus{border-color:var(--red);}
.ai-foot{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);
  display:flex;gap:10px;justify-content:space-between;align-items:center;flex-wrap:wrap;}
.ai-foot .who{font-size:.74rem;color:var(--ink-3);}

/* 来源标注：第二层读了萌娘百科才出现。
   视觉上刻意做得比正文轻 —— 它是「依据出处」，不是答案本身；
   但链接必须显眼可点，CC BY-NC-SA 的署名要求得落到实处。 */
.ai-src{margin-top:20px;padding:12px 15px;border:1px solid var(--line);
  border-left:3px solid var(--gold);border-radius:0 10px 10px 0;
  background:rgba(201,165,87,.06);font-size:.8rem;line-height:1.6;}
.ai-src-lb{color:var(--ink-3);letter-spacing:1px;text-transform:uppercase;
  font-size:.66rem;display:block;margin-bottom:5px;}
.ai-src a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--gold);
  padding-bottom:1px;word-break:break-word;}
.ai-src a:hover{color:var(--red);border-bottom-color:var(--red);}
.ai-src-note{display:block;margin-top:5px;font-size:.72rem;color:var(--ink-3);}

/* 来源是搜索摘要时（第三层的联网兜底）：逐条列出，而不是只给一个链接。
   左侧竖条从金色换成灰色，是一个**刻意的视觉降级** ——
   让读者一眼看出「这份依据不如百科词条硬」，而不是把两者混为一谈。 */
.ai-src-weblist{border-left-color:var(--ink-3);background:rgba(0,0,0,.025);}
.ai-src-ls{display:flex;flex-direction:column;gap:6px;margin:2px 0 6px;}
.ai-src-i{display:flex;gap:7px;align-items:baseline;
  border-bottom:none !important;padding-bottom:0 !important;
  font-size:.8rem;line-height:1.5;text-align:left;justify-content:flex-start;}
.ai-src-i .n{flex:0 0 auto;min-width:15px;height:15px;line-height:15px;text-align:center;
  border-radius:50%;background:var(--line);color:var(--ink-3);
  font-size:.6rem;font-variant-numeric:tabular-nums;}
.ai-src-i:hover .n{background:var(--red);color:#fff;}
/* 标题占满剩余宽度并左对齐。
   注意选择器要用 `.t` 而不是 `:last-child` —— 标题和序号都是元素节点时
   `:last-child` 恰好也对，但一旦标题漏了包裹（裸文本节点），
   它就会命中序号，把序号撑满整行。写死类名不受结构变化影响。 */
.ai-src-i .t{flex:1 1 auto;min-width:0;text-align:left;}

/* AI 面板徽章两态：ok=实时回答（蓝），warn=降级（赭红）。
   颜色不是为了装饰 —— 它让读者一眼分清「这是模型答的」还是「这里出问题了」。 */
.ai-badge.ok{background:var(--work);}
.ai-badge.warn{background:#a8603a;}
.suggest button{border:1px solid var(--line);background:var(--card);border-radius:999px;
  padding:6px 14px;font-size:.82rem;cursor:pointer;font-family:var(--zh);}
.suggest button:hover{border-color:var(--red);color:var(--red);}
.loadmore{grid-column:1/-1;display:flex;justify-content:center;padding-top:26px;}
.loadmore-n{font-size:.78rem;color:var(--ink-3);text-align:center;margin-top:12px;grid-column:1/-1;}

/* ---------- theme overview ---------- */
.theme-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:12px;}
.theme{border:1px solid var(--line);background:var(--card);border-radius:12px;padding:16px 18px;cursor:pointer;
  text-align:left;transition:transform .2s,box-shadow .2s,border-color .2s;}
.theme:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(90,70,40,.09);}
.theme .t-n{font-family:var(--serif);font-size:1.02rem;display:flex;align-items:center;gap:8px;}
.theme .t-zh{font-family:var(--zh);font-size:.84rem;color:var(--ink-3);margin-top:3px;}
.theme .t-c{font-size:.72rem;color:var(--ink-3);margin-top:8px;}

/* ---------- the two real categories ---------- */
#parts{padding:0 0 78px;}
.part-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.part{display:block;text-decoration:none;color:inherit;position:relative;overflow:hidden;
  background:var(--card);border:1px solid var(--line);border-radius:18px;padding:30px 30px 26px;
  transition:transform .2s,box-shadow .2s,border-color .2s;}
.part:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(90,70,40,.10);border-color:rgba(34,31,27,.22);}
.part::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--pc,#b02a30);}
.part .p-tag{font-size:.68rem;letter-spacing:2.2px;text-transform:uppercase;color:var(--pc,#b02a30);
  font-variant-caps:small-caps;margin-bottom:12px;}
.part .p-t{font-family:var(--display);font-weight:700;font-size:1.42rem;line-height:1.25;}
.part .p-zh{font-family:var(--zh);font-size:.95rem;color:var(--ink-2);margin-top:6px;letter-spacing:1px;}
.part .p-d{font-size:.92rem;color:var(--ink-2);margin-top:14px;max-width:36ch;line-height:1.6;}
.part .p-f{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:20px;
  padding-top:16px;border-top:1px solid var(--line);font-size:.78rem;color:var(--ink-3);}
.part .p-go{color:var(--pc,#b02a30);font-weight:600;}
.part .p-go::after{content:' →';}

/* ---------- zodiac ---------- */
.zodiac-wrap{display:grid;grid-template-columns:1.15fr 1fr;gap:18px;align-items:start;}
.z-form{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:28px;}
.z-form-label{font-size:.68rem;letter-spacing:2px;text-transform:uppercase;color:var(--red);
  font-variant-caps:small-caps;margin-bottom:18px;}
.z-inputs{display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:12px;}
.z-f{display:block;}
.z-f span{display:block;font-size:.72rem;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--ink-3);font-variant-caps:small-caps;margin-bottom:7px;}
.z-f input{width:100%;box-sizing:border-box;font-family:var(--serif);font-size:1.12rem;
  padding:11px 14px;border:1px solid var(--line);border-radius:9px;background:var(--paper);
  color:var(--ink);transition:border-color .18s;}
.z-f input:focus{outline:none;border-color:var(--red);background:var(--card);}
.z-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px;}
.z-err{font-size:.84rem;color:var(--red);margin-top:12px;min-height:1.2em;}
.z-hint-side{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:28px;}
.z-note{font-family:var(--serif);font-size:.9rem;color:var(--ink-2);line-height:1.7;margin:0 0 14px;}
.z-note:last-child{margin-bottom:0;}

.z-out{margin-top:22px;}
.z-out:empty{display:none;}
.z-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:32px;
  animation:zfade .45s ease both;}
@keyframes zfade{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
/* 换行后的 iOS 圆角：右栏卡片按钮会甩到下一行、左栏因为按钮够长而不换行，
   高度不一（实测 640px 下 677 vs 546），两张卡底边对不齐。
   改成只让左下角变圆，右栏按钮就会「先缩到装得下」——装不下才换行。
   这样既保住了「并在右侧」的设计，两张卡高度也一致。 */
.door-form{flex-wrap:nowrap;}
.door-form input{flex:1 1 auto;}
.door-form button{border-radius:0 10px 10px 0;
  padding-left:clamp(11px,2.2vw,22px);padding-right:clamp(11px,2.2vw,22px);}
.z-head{display:flex;align-items:center;gap:22px;padding-bottom:22px;border-bottom:1px solid var(--line);}
.z-sign{width:96px;height:96px;flex:0 0 96px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--kai);font-size:2.9rem;line-height:1;background:var(--paper-2);border:1px solid var(--line);}
.z-head-txt .z-animal{font-family:var(--display);font-weight:700;font-size:1.9rem;line-height:1.2;}
.z-head-txt .z-zh{font-family:var(--zh);font-size:1.05rem;color:var(--ink-2);letter-spacing:1.5px;margin-top:4px;}
.z-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;}
.z-pill{font-size:.74rem;letter-spacing:.6px;padding:4px 11px;border-radius:999px;
  border:1px solid var(--line);background:var(--paper);color:var(--ink-2);}
.z-pill b{font-weight:600;color:var(--ink);}
.z-badges{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:24px;}
.z-badge{border:1px solid var(--line);border-radius:12px;padding:16px 18px;background:var(--paper);}
.z-badge .b-k{font-size:.68rem;letter-spacing:1.8px;text-transform:uppercase;color:var(--ink-3);
  font-variant-caps:small-caps;}
.z-badge .b-v{font-family:var(--display);font-weight:700;font-size:1.15rem;margin-top:7px;}
.z-badge .b-s{font-size:.76rem;color:var(--ink-3);margin-top:3px;font-family:var(--zh);}
.z-traits{margin-top:26px;}
.z-trait{margin-bottom:16px;}
.z-trait:last-child{margin-bottom:0;}
.z-bar{height:6px;border-radius:3px;background:var(--paper-2);overflow:hidden;margin-top:8px;}
.z-bar i{display:block;height:100%;border-radius:3px;background:var(--pc,#b02a30);width:0;
  transition:width .7s cubic-bezier(.2,.8,.3,1);}
.z-trait .tr-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:.88rem;}
.z-trait .tr-h b{font-weight:600;}
.z-trait .tr-h span{font-size:.76rem;color:var(--ink-3);font-variant-caps:small-caps;letter-spacing:1px;}
.z-trait .tr-p{font-family:var(--serif);font-size:.88rem;color:var(--ink-2);margin-top:6px;line-height:1.6;}
.z-sec{margin-top:26px;padding-top:24px;border-top:1px solid var(--line);}
.z-sec-h{font-size:.68rem;letter-spacing:1.8px;text-transform:uppercase;color:var(--red);
  font-variant-caps:small-caps;margin-bottom:12px;}
.z-sec-p{font-family:var(--serif);font-size:.92rem;color:var(--ink-2);line-height:1.75;}
.z-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.z-pair .z-badge{padding:18px;}
.z-pair .s-t{font-family:var(--display);font-weight:700;font-size:1rem;}
.z-pair .s-d{font-family:var(--serif);font-size:.84rem;color:var(--ink-2);margin-top:6px;line-height:1.6;}
.z-months{margin-top:14px;}
.z-months .m-t{font-size:.8rem;color:var(--ink-3);margin-bottom:8px;}
.z-mrow{display:flex;gap:6px;}
.z-mrow b{flex:1;text-align:center;font-size:.74rem;font-weight:500;padding:5px 0;border-radius:6px;
  border:1px solid var(--line);background:var(--paper);color:var(--ink-2);}
.z-mrow b.on{background:var(--pc,#b02a30);border-color:var(--pc,#b02a30);color:#fff;font-weight:600;}
.z-foot{margin-top:26px;padding-top:18px;border-top:1px solid var(--line);font-size:.78rem;
  color:var(--ink-3);font-family:var(--serif);}
.z-again{margin-top:18px;}

/* ---------- daily ---------- */
.daily-wrap{display:grid;grid-template-columns:1.35fr 1fr;gap:18px;}
.panel,.fact{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:28px;}
.panel-label{font-size:.68rem;letter-spacing:2px;text-transform:uppercase;color:var(--red);margin-bottom:14px;}
.daily-zh{font-family:var(--kai);font-size:3.1rem;line-height:1.1;}
.daily-py{font-size:.9rem;color:var(--ink-3);letter-spacing:.6px;margin-top:4px;}
.daily-meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:12px;}
.m-lit{font-size:.8rem;color:var(--ink-3);font-style:italic;}
.daily-def{font-size:.95rem;color:var(--ink-2);margin-top:14px;}
.daily-ex{margin-top:16px;padding:14px 16px;background:var(--paper-2);border-radius:10px;border-left:3px solid var(--gold);}
.ex-zh{font-family:var(--zh);font-size:1.02rem;}
.ex-py{font-size:.76rem;color:var(--ink-3);margin-top:4px;}
.ex-en{font-size:.86rem;color:var(--ink-2);margin-top:6px;}
.panel-actions,.fact-actions{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap;}
.fact-body{font-size:.93rem;color:var(--ink-2);}

/* ---------- audience ---------- */
.aud-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;}
.aud{border:1px solid var(--line);background:var(--card);border-radius:14px;padding:24px;cursor:pointer;
  transition:transform .2s,box-shadow .2s,border-color .2s;text-align:left;}
.aud:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(90,70,40,.1);border-color:rgba(176,42,48,.35);}
.aud-k{font-size:.68rem;letter-spacing:2px;text-transform:uppercase;color:var(--red);margin-bottom:10px;}
.aud h3{font-family:var(--serif);font-size:1.15rem;font-weight:400;margin-bottom:8px;}
.aud p{font-size:.88rem;color:var(--ink-2);}

/* ---------- footer ---------- */
footer{background:var(--ink);color:#d9d0be;padding:56px 0 34px;margin-top:20px;}
.foot-inner{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;}
/* 页脚标题：老规则只写了 h4，但模板里用的是 h2（见 index/zodiac/words 的
   foot.about.h、foot.pinyin.h）。选择器失配 → 标题掉回 body 的 sans。
   这里把 h2–h4 都收进来，跟模板实际用的标签对齐。 */
.foot-inner h2,.foot-inner h3,.foot-inner h4{font-family:var(--display);font-size:1.05rem;font-weight:500;color:#fdf6e9;margin-bottom:12px;}
.foot-inner p,.foot-inner li{font-size:.85rem;color:#a89e8c;line-height:1.8;}
.foot-inner ul{list-style:none;}
.foot-zh{font-family:var(--kai);font-size:1.5rem;color:var(--gold-2);margin-bottom:10px;}
.foot-bot{margin-top:34px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);
  font-size:.76rem;color:#8a8172;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;}

/* ---------- modal ---------- */
#backdrop{position:fixed;inset:0;background:rgba(34,31,27,.5);backdrop-filter:blur(3px);
  z-index:90;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s;}
#backdrop.open{opacity:1;visibility:visible;}
#modal{position:fixed;inset:0;z-index:100;display:flex;align-items:flex-start;justify-content:center;
  padding:5vh 18px;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s;overflow-y:auto;}
#modal.open{opacity:1;visibility:visible;}
.modal{background:var(--paper);border-radius:18px;max-width:720px;width:100%;padding:38px 40px 34px;
  position:relative;transform:translateY(14px);transition:transform .3s;box-shadow:0 30px 70px rgba(0,0,0,.28);}
#modal.open .modal{transform:none;}
.m-close{position:absolute;top:16px;right:18px;border:0;background:transparent;font-size:1.6rem;
  color:var(--ink-3);cursor:pointer;line-height:1;padding:4px 8px;border-radius:8px;}
.m-close:hover{color:var(--red);background:var(--paper-2);}
.m-zh{font-family:var(--kai);font-size:3rem;line-height:1.1;}
.m-py{font-size:.95rem;color:var(--ink-3);letter-spacing:.6px;margin-top:5px;}
.m-meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:14px;
  padding-bottom:20px;border-bottom:1px solid var(--line);}
.m-sec{margin-top:22px;}
.m-h{font-size:.68rem;letter-spacing:2px;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px;
  display:flex;align-items:center;gap:8px;}
.m-h::before{content:'';width:14px;height:1px;background:var(--gold);flex:0 0 14px;}
.m-def{font-family:var(--serif);font-size:1.12rem;line-height:1.6;color:var(--ink);}
.m-ana{background:linear-gradient(90deg,rgba(201,165,87,.14),rgba(201,165,87,.03));
  border-left:3px solid var(--gold);border-radius:0 10px 10px 0;padding:15px 18px;
  font-size:.96rem;color:var(--ink);line-height:1.68;font-style:italic;}
.m-body{font-size:.94rem;color:var(--ink-2);line-height:1.78;}
.m-use{background:var(--paper-2);border-radius:10px;padding:14px 17px;font-size:.92rem;color:var(--ink-2);line-height:1.72;}
.m-ex{margin-top:12px;}
.m-ex-i{background:var(--card);border:1px solid var(--line);border-radius:11px;padding:15px 17px;margin-bottom:10px;}
.m-tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:20px;padding-top:18px;border-top:1px solid var(--line);}
.m-rel{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);}
.rel-btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px;}
.rel-btns button{border:1px solid var(--line);background:var(--card);border-radius:999px;
  padding:7px 14px;font-size:.86rem;cursor:pointer;font-family:var(--zh);transition:all .18s;}
.rel-btns button:hover{border-color:var(--red);color:var(--red);}
body.no-scroll{overflow:hidden;}

/* ---------- 字体系统 ----------
   英文：Source Serif 4 单字族（标题 600 字重撑气势，正文 400 字重保可读）。
   为何不混搭：本站拼音含大量声调元音，试过的 Cormorant/EB Garamond/Playfair 都有字形缺陷，详见文件头内嵌字体注释
   中文：小字用思源宋体 Noto Serif CJK SC（书卷气）；大字（词条/每日一词/生肖/水印/页脚题词）
        换成霞鹜文楷 LXGW WenKai（--kai），更有毛笔味。楷体在 1rem 以下会发虚，所以小字保持宋体
   UI 控件（按钮/标签/计数/快捷键）保持无衬线 —— 古典不等于把控件也变成衬线
   ---------- */
.brand-txt{font-family:var(--display);font-weight:700;}
.hero h1{font-family:var(--display);font-weight:700;letter-spacing:-.3px;}
.about .stats b{font-family:var(--display);font-weight:500;}
.sec-title{font-family:var(--display);font-weight:700;}
.empty-icon{font-family:var(--display);}
.empty-h{font-family:var(--display);font-weight:500;}
.ai-title{font-family:var(--display);font-weight:500;}
.theme .t-n{font-family:var(--display);font-weight:500;font-size:1.06rem;}
.aud h3{font-family:var(--display);font-weight:500;}
.foot-inner h4{font-family:var(--display);font-weight:500;}

/* 小型大写：维多利亚标题页的标签处理，比整串大写字更耐看 */
.eyebrow,.sec-tag,.panel-label,.aud-k,.m-h,.ai-h,.suggest-label,.brand-sub{
  font-family:var(--display);font-weight:700;text-transform:none;
  font-variant-caps:small-caps;font-feature-settings:'smcp','c2sc';letter-spacing:1.5px;}

/* 正文英文改衬线。Source Serif 4 的 x-height 略小，同号会显小，故整体微抬 */
.def{font-family:var(--serif);font-size:.94rem;line-height:1.7;}
.lit,.m-lit{font-family:var(--serif);font-size:.8rem;}
.py,.m-py,.daily-py,.ex-py,.ai-q-py{font-family:var(--serif);letter-spacing:.5px;}
.ex-en{font-family:var(--serif);font-size:.9rem;line-height:1.6;}
.sec-desc,.about p,.fact-body,.aud p,.empty-sub{font-family:var(--serif);font-size:.98rem;line-height:1.78;}
.daily-def{font-family:var(--serif);font-size:.98rem;line-height:1.75;}
.m-def{font-size:1.16rem;}
.m-ana{font-family:var(--serif);font-size:1rem;}
.m-body{font-family:var(--serif);font-size:.97rem;}
.m-use{font-family:var(--serif);font-size:.95rem;}
.ai-text{font-family:var(--serif);font-size:.98rem;}
.ai-text.lead{font-size:1.1rem;}
.ai-ana{font-family:var(--serif);font-size:.97rem;}
/* 中文小字号加一点字距，宋体在 12–13px 才不糊 */
.chip .cz{letter-spacing:.6px;}
.theme .t-zh{letter-spacing:1px;}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .daily-wrap{grid-template-columns:1fr;}
  .foot-inner{grid-template-columns:1fr;}
  .about-grid{grid-template-columns:1fr;gap:28px;}
  .about .stats{grid-template-columns:1fr 1fr;}
  .part-grid{grid-template-columns:1fr;}
  .zodiac-wrap{grid-template-columns:1fr;}
  .z-badges{grid-template-columns:1fr 1fr;}
  /* 平板竖屏（768–900px）两栏还剩不到 350px，说明文字一行只放得下几个词 */
  .daily-wrap,.about-grid{grid-template-columns:1fr;gap:26px;}
}
/* 900px 起门口就改单列 —— 640px 才改的话，641–880px 这一段每张卡只剩
   200–360px 宽，标题会被挤成三行、表单换行、说明文字一行两三个字，等于没法看。
   两栏只在真正放得下（≥901px，每张 ≥400px）时才出现。 */
@media (max-width:640px){
  .hero{padding:84px 18px 22px;}
  /* 96px 圆形生肖字 + 文字块在窄屏并排，文字只剩不到 200px */
  .z-head{flex-direction:column;align-items:flex-start;gap:14px;}
  .card{padding:17px 16px 14px;}
  /* 分类标签不缩、词条名又不可断，窄卡里词会被压成一列一个字。
     让标签整块折到下一行，中文词拿到整行宽度就正常了。 */
  .card-top{flex-wrap:wrap;gap:6px;}
  .card-top .cat{order:2;}
  /* 320–414px 上双列布局会横向撑破视口（实测溢出 108/68/39/14px，
     整页可以左右拖），因为输入框有 min-width 且 .kbd 不肯让位。 */
  .search-row{flex-wrap:wrap;}
  .search-row .kbd{display:none;}
  section{padding:60px 0;}
  #parts{padding:0 0 60px;}
  .container{padding:0 16px;}
  /* 移动端导航：汉堡 + 下拉面板。原来那句 li:not(:last-child){display:none}
     会把两个分类入口整个藏掉，手机上等于没法切页，已改为下拉 */
  .nav-burger{display:grid;}
  /* 右侧分组改成整块下拉：链接在上，语言切换器在下，
     用一条细分隔线隔开。选择器要跟 .nav-tog 同级才生效 */
  .nav-right{position:absolute;top:calc(100% - 4px);right:16px;left:16px;
    flex-direction:column;align-items:stretch;gap:8px;
    background:var(--card);border:1px solid var(--line);border-radius:14px;padding:8px;
    box-shadow:0 16px 36px rgba(34,31,27,.15);display:none;z-index:61;}
  .nav-tog:checked ~ .nav-right{display:flex;}
  .nav-links{flex-direction:column;align-items:stretch;gap:2px;}
  .nav-links li{margin:0;}
  .nav-links li a,.nav-links li .btn{display:flex;width:100%;box-sizing:border-box;
    padding:12px 13px;border-radius:9px;font-size:.96rem;}
  .nav-links li a:hover,.nav-links li .btn:hover{background:var(--paper-2);}
  /* 下拉里不要当前页下划线，会跟 hover 底色打架 */
  .nav-links a.on::after{display:none;}
  .nav-links a.on{color:var(--red);background:rgba(176,42,48,.07);}
  /* 语言切换器在下拉里：占满整行，面板内嵌 */
  .lang-wrap{width:100%;box-sizing:border-box;justify-content:flex-start;margin-top:2px;}
  .lang-btn{width:100%;box-sizing:border-box;justify-content:flex-start;}
  .lang-menu{left:0;right:0;min-width:0;top:calc(100% + 4px);}
  .nav-tog:checked ~ .nav-burger{border-color:rgba(176,42,48,.45);}
  .nav-tog:checked ~ .nav-burger span:nth-child(1){transform:translateY(6.1px) rotate(45deg);}
  .nav-tog:checked ~ .nav-burger span:nth-child(2){opacity:0;}
  .nav-tog:checked ~ .nav-burger span:nth-child(3){transform:translateY(-6.1px) rotate(-45deg);}
  .modal{padding:30px 22px 26px;}
  .m-zh{font-size:2.4rem;}
  .panel,.fact{padding:22px 18px;}
  .toolbar{top:64px;}
  .part{padding:24px 20px 22px;}
  .z-form,.z-hint-side{padding:22px 18px;}
  .z-inputs{grid-template-columns:1fr 1fr;}
  .z-f.z-y{grid-column:1 / -1;}
  .z-card{padding:22px 18px;}
  .z-badges{grid-template-columns:1fr;}
  .z-pair{grid-template-columns:1fr;}
  .z-head{gap:16px;}
  .z-sign{width:72px;height:72px;flex:0 0 72px;font-size:2.2rem;}
  .z-head-txt .z-animal{font-size:1.5rem;}
  .door{padding:26px 20px 22px;}
}

/* ---------- 导航当前页高亮（多页面后需要） ---------- */
.nav-links a.on{color:var(--red);}
.nav-links a.on::after{content:'';display:block;height:2px;border-radius:1px;
  background:var(--red);margin-top:3px;}

/* ---------- 首页：两个功能并排 ---------- */
/* 首页没有 hero 了，顶部直接是两个入口 —— 留出固定导航栏的高度 */
#choose{padding:104px 0 84px;}
/* 三扇门。用 auto-fit + minmax 而不是写死列数：
   卡片数量以后可能再变，写死 1fr 1fr 1fr 就得跟着改断点；
   auto-fit 会在装不下时自动折行。
   300px 这个下限是按最挤的视口推的：
   视口 320 − .container 左右各 16 = 288 可用；列宽必须 ≤ 288 才不溢出。
   卡内还要减掉 .door 自己的左右 padding（窄屏 18），所以下限取 300 时
   288 的列宽仍然装得下内容。下限写到 320 会在 320px 视口溢出 16px。 */
.two-doors{display:grid;gap:22px;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));}
/* 窄屏强制单列。
   断点不是"什么时候放得下两列"，而是"两列什么时候才不憋屈"。
   auto-fit 在可用宽 ≥ 2×300+22 = 622px 时就排出两列，
   实测 700px 视口下两列各只有 315px，比单列时的 602px 还窄，
   正文从 5 行涨到 6 行 —— 排了两列反而更难读。
   把单列区间拉到 800px 后两列各 365px，与 1280px 三列时的 376px 相当。

   注意选择器：.two-doors 是 <section id="choose"> 内部的 div，
   不是 #choose 本身，必须单独写 .two-doors。
   写成 #choose.two-doors 一个元素都不匹配 —— 规则会静默失效，
   只剩上面的 auto-fit 生效，而且在 320px 也不折列。 */
@media (max-width:800px){.two-doors{grid-template-columns:1fr;}}
/* 900–1180px 之间 auto-fit 会排出三列，每列只剩 300–340px，
   正文涨到 6–7 行（比 1280px 的 5 行还长），三列反而更难读。
   这段保持两列 —— 与其硬塞第三列，不如让每张卡保持能舒服阅读的宽度。 */
@media (min-width:801px) and (max-width:1180px){.two-doors{grid-template-columns:repeat(2,1fr);}}
.door{position:relative;overflow:hidden;background:var(--card);border:1px solid var(--line);
  border-radius:20px;padding:34px 32px 30px;display:flex;flex-direction:column;
  transition:transform .2s,box-shadow .2s,border-color .2s;}
.door:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(90,70,40,.10);}
.door::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--dc,#b02a30);}
.door-tag{font-size:.68rem;letter-spacing:2.2px;text-transform:uppercase;color:var(--dc,#b02a30);
  font-variant-caps:small-caps;margin-bottom:14px;}
.door h2{font-family:var(--display);font-weight:700;font-size:1.72rem;line-height:1.22;margin:0;}
.door .d-sub{font-family:var(--zh);font-size:.95rem;color:var(--ink-2);letter-spacing:1.5px;margin-top:8px;}
.door .d-desc{font-family:var(--serif);font-size:.94rem;color:var(--ink-2);line-height:1.72;
  margin:16px 0 0;max-width:40ch;}
.door-form{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap;}
.door-form input{flex:1 1 150px;min-width:0;font-family:var(--serif);font-size:1rem;
  padding:12px 16px;border:1px solid var(--line);border-radius:10px;background:var(--paper);
  color:var(--ink);transition:border-color .18s;}
.door-form input:focus{outline:none;border-color:var(--dc,#b02a30);background:var(--card);}
.door-form input.num{flex:0 0 84px;text-align:center;}
.door-form button{flex:0 0 auto;border:1px solid var(--dc,#b02a30);background:var(--dc,#b02a30);
  color:#fff;border-radius:10px;padding:12px 22px;font-size:.95rem;cursor:pointer;
  transition:opacity .18s,transform .18s;font-family:var(--sans);}
.door-form button:hover{opacity:.88;transform:translateY(-1px);}

/* 窄屏两个表单都改成竖排：输入框独占一行，按钮占下一行。
   之前只改了生日那个，搜索框在 320–435px 这段被压到约 200px，
   两个表单的断点还差 5px（430 / 435），同一屏里并排卡片的表单长得不一样。
   这里统一到 650px，和上面 .two-doors 切单列的断点对齐。
   圆角也要还原成四角 —— 基础规则是 0 10px 10px 0 的"贴在输入框右侧"造型，
   竖排以后贴着的是上方的输入框，只有右下角圆角会很怪。 */
@media (max-width:800px){
  .door-form input{flex:1 1 100%;}
  .door-form input.num{flex:1 1 calc(33.333% - 7px);}
  .door-form button{flex:1 1 auto;border-radius:10px;
    padding-left:16px;padding-right:16px;}
}
/* 16px 是 iOS Safari 自动放大输入框的下限，低一档就会在聚焦时整页跳一下 */
@media (max-width:640px){
  .door-form input,.z-f input,.search-box input{font-size:16px;}
}
@media (max-width:640px){
  .hero{padding:84px 18px 22px;}
  .two-doors{gap:16px;}
  .door{padding:24px 18px 22px;}
}
.door-err{font-size:.82rem;color:var(--red);margin-top:10px;min-height:1.2em;}
.door-hint{font-size:.82rem;color:var(--ink-3);margin-top:14px;line-height:1.6;}
.door-hint b{font-weight:400;color:var(--ink-2);cursor:pointer;border-bottom:1px solid transparent;
  transition:color .15s,border-color .15s;}
.door-hint b:hover{color:var(--red);border-bottom-color:rgba(176,42,48,.45);}
.door-more{margin-top:auto;padding-top:22px;font-size:.86rem;color:var(--dc,#b02a30);
  text-decoration:none;font-weight:600;
  /* 箭头跟在文字后面，不要让它单独换行 ——
     否则窄屏下「查看全部词条」+ 换行的箭头会把这一行撑成 2 行高（实测 45px），
     卡片底部多出一块空白，三张卡还会因此高度不齐。 */
  white-space:nowrap;}
.door-more::after{content:' →';}

/* 首页：两个功能为什么在一起 */
.why-two{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:26px;}
.why-two .w{border:1px solid var(--line);border-radius:14px;padding:20px 22px;background:var(--paper);}
.why-two .w-k{font-size:.68rem;letter-spacing:1.8px;text-transform:uppercase;color:var(--ink-3);
  font-variant-caps:small-caps;}
.why-two .w-v{font-family:var(--serif);font-size:.9rem;color:var(--ink-2);line-height:1.7;margin-top:8px;}

/* ---------- 语言切换器 ----------
   原生 <button> 触发 + 自绘下拉面板。
   这里刻意不用 <select>：它被点击时浏览器会「顺便」弹出系统原生列表，
   那是浏览器自己绘制的图层，opacity / z-index 都盖不住它，
   结果自绘面板旁边会多出一个白框。改用 button 后这个图层彻底消失。 */
.lang-wrap{position:relative;display:flex;align-items:center;flex:0 0 auto;}
.lang-btn{display:flex;align-items:center;gap:7px;
  height:38px;padding:0 12px 0 11px;border:1px solid var(--line);border-radius:999px;
  background:var(--card);cursor:pointer;font:inherit;
  transition:border-color .2s,box-shadow .2s,background .2s;}
.lang-btn:hover{border-color:rgba(166,124,46,.55);box-shadow:0 1px 3px rgba(90,70,40,.07);}
.lang-wrap.open .lang-btn{border-color:rgba(166,124,46,.7);background:var(--card);
  box-shadow:0 2px 8px rgba(90,70,40,.12);}
.lang-btn:focus-visible{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(166,124,46,.16);}
.lang-globe{display:flex;flex:0 0 15px;color:var(--ink-3);transition:color .2s;}
.lang-btn:hover .lang-globe,.lang-wrap.open .lang-globe{color:var(--gold);}
.lang-globe svg{width:15px;height:15px;}
.lang-cur{font-family:var(--sans);font-size:.76rem;font-weight:600;letter-spacing:.9px;
  color:var(--ink-2);line-height:1;}
.lang-caret{width:0;height:0;flex:0 0 0;border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid var(--ink-3);transition:border-top-color .2s,transform .2s;}
.lang-btn:hover .lang-caret{border-top-color:var(--gold);}
.lang-wrap.open .lang-caret{border-top-color:var(--gold);transform:rotate(180deg);}

/* 下拉面板：米黄卡纸风格，跟页面同一套配色 */
.lang-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:172px;z-index:70;
  padding:6px;margin:0;list-style:none;
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 12px 28px rgba(74,58,32,.16),0 2px 6px rgba(74,58,32,.08);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s ease,transform .16s ease,visibility .16s;}
.lang-wrap.open .lang-menu{opacity:1;visibility:visible;transform:translateY(0);}
.lang-menu li{margin:0;}
.lang-menu button{display:flex;align-items:center;justify-content:space-between;gap:14px;
  width:100%;box-sizing:border-box;padding:9px 12px;border:0;border-radius:9px;
  background:transparent;cursor:pointer;text-align:left;
  font-family:var(--sans);font-size:.86rem;color:var(--ink-2);line-height:1.25;
  transition:background .15s,color .15s;}
.lang-menu button:hover,.lang-menu button:focus-visible{background:var(--paper-2);color:var(--ink);outline:none;}
/* 当前语言：勾选标记 + 金色强调，不用整块蓝底 */
.lang-menu button.on{background:rgba(166,124,46,.1);color:var(--ink);font-weight:600;}
.lang-menu button .lm-tick{flex:0 0 12px;color:var(--gold);font-size:.8rem;opacity:0;}
.lang-menu button.on .lm-tick{opacity:1;}

@media (max-width:640px){
  /* 手机上语言名放不下，只留代码；面板里仍是完整语言名 */
  .lang-btn{height:34px;padding:0 9px;gap:5px;}
  .lang-cur{font-size:.72rem;}
}
@media (max-width:430px){
  /* 320px 上下门口内边距只剩 98px，标题和标签还差 11px。
     收到 360px 以内再缩一档字号，比压内边距更不伤可读性。 */
  .door h2{font-size:1.5rem;}
  .door-tag{font-size:.62rem;letter-spacing:1.6px;}
}
@media (max-width:400px){
  /* 极窄屏：只剩地球图标 */
  .lang-cur,.lang-caret{display:none;}
  .lang-btn{padding:0 9px;}
}

/* ---------- 非英语界面的字体兜底 ----------
   内嵌字体是按「拉丁 204 字 / 汉字 1337 字」子集化的，
   日文假名、韩文谚文、西里尔字母都不在里面，会落到系统字体。
   这里给三类文字各配一条像样的回退链，避免出现方框或极丑的默认字形。 */
html[lang="ja"]{--sans:-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Kaku Gothic ProN","Yu Gothic",
  "Meiryo","Noto Sans JP","PingFang SC","Microsoft YaHei",sans-serif;}
html[lang="ja"] body{font-family:var(--sans);}
html[lang="ko"]{--sans:-apple-system,BlinkMacSystemFont,"Segoe UI","Malgun Gothic","Apple SD Gothic Neo",
  "Noto Sans KR","PingFang SC","Microsoft YaHei",sans-serif;}
html[lang="ko"] body{font-family:var(--sans);}
html[lang="ru"]{--sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PT Sans","Noto Sans",
  "Helvetica Neue",Arial,sans-serif;}
html[lang="ru"] body{font-family:var(--sans);}
/* 日文的衬线正文：Source Serif 4 没有假名，声调也帮不上，交给系统明朝体 */
html[lang="ja"] .sec-desc,html[lang="ja"] .about p,html[lang="ja"] .def,
html[lang="ja"] .m-body,html[lang="ja"] .m-use,html[lang="ja"] .fact-body{
  font-family:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",var(--zh);}
html[lang="ko"] .sec-desc,html[lang="ko"] .about p,html[lang="ko"] .def,
html[lang="ko"] .m-body,html[lang="ko"] .m-use,html[lang="ko"] .fact-body{
  font-family:"Apple SD Gothic Neo","Malgun Gothic","Noto Serif KR",var(--sans);}

/* 词条缺失该语言翻译时，页面上给一条低调的说明 */
.lang-note{grid-column:1/-1;display:flex;align-items:flex-start;gap:9px;
  background:rgba(166,124,46,.09);border:1px solid rgba(166,124,46,.28);
  border-radius:10px;padding:11px 15px;font-size:.82rem;color:var(--ink-2);line-height:1.6;
  margin-bottom:2px;}
.lang-note .ln-i{flex:0 0 auto;font-family:var(--display);font-weight:700;color:var(--gold);}
/* 词条正文右上角：当前语言尚未翻译的角标 */
.m-badge{display:inline-block;font-size:.62rem;letter-spacing:.6px;text-transform:uppercase;
  color:var(--gold);background:rgba(166,124,46,.12);border-radius:999px;padding:2px 8px;margin-left:8px;}