/* 求职自习室 · Offer Camp
   纸感 + 账本排版：宋体做标题，黑体做正文，朱红只留给「钩」与「印」 */

:root{
  --paper:#F2EDE1;
  --paper-2:#EAE3D2;
  --paper-3:#E3DAC6;
  --ink:#17150F;
  --ink-soft:#4C4638;
  --ink-faint:#7A7261;
  --rule:#C8BEA4;
  --rule-soft:#D9D0B8;
  --red:#A93226;
  --moss:#2E463A;
  --serif:"Iowan Old Style","Palatino Linotype",Georgia,"Noto Serif SC","Songti SC",serif;
  --sans:"Noto Sans SC","PingFang SC","Microsoft YaHei","Helvetica Neue",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"Cascadia Code",Consolas,monospace;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.75;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
}

/* 纸的颗粒：极淡的一层噪点，避免大面积纯色发假 */
.grain{
  position:fixed; inset:0; z-index:99; pointer-events:none;
  opacity:.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

a{color:inherit}

/* ---------- 报头 ---------- */
.masthead{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  max-width:1120px; margin:0 auto; padding:22px 28px 18px;
  border-bottom:1px solid var(--rule);
}
.mh-left{display:flex; align-items:baseline; gap:14px}
.mh-mark{
  font-family:var(--serif); font-weight:700; font-size:20px; letter-spacing:.18em;
}
.mh-en{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.28em; color:var(--ink-faint);
}
.mh-right{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; color:var(--ink-faint);
  white-space:nowrap;
}
.mh-right b{color:var(--ink); font-weight:600}
.sep{color:var(--rule); margin:0 6px}

/* ---------- 主容器 ---------- */
main{max-width:1120px; margin:0 auto; padding:0 28px 40px}

/* ---------- 首屏 ---------- */
.hero{
  position:relative;
  padding:clamp(48px,9vh,104px) 0 clamp(36px,6vh,72px);
  border-bottom:1px solid var(--rule);
}
.kicker{
  margin:0 0 26px; font-size:12px; letter-spacing:.22em; color:var(--ink-faint);
}
.hero h1{
  margin:0; font-family:var(--serif); font-weight:700;
  font-size:clamp(2.1rem,5.2vw,4.1rem);
  line-height:1.16; letter-spacing:.01em;
}
.hero h1 em{
  font-style:normal; position:relative; white-space:nowrap;
}
.hero h1 em::after{
  content:""; position:absolute; left:0; right:0; bottom:.06em; height:.34em;
  background:var(--red); opacity:.16; z-index:-1;
}
.lede{
  margin:34px 0 0; max-width:36em; font-size:15.5px; line-height:1.95; color:var(--ink-soft);
}

/* 朱印 */
.seal{
  position:absolute; right:0; bottom:clamp(40px,7vh,80px);
  width:92px; height:112px; padding:10px 0;
  border:2.5px solid var(--red); border-radius:3px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  color:var(--red); transform:rotate(-5deg);
  font-family:var(--serif); font-weight:700; font-size:26px; line-height:1.25;
  opacity:.88;
}
.seal i{
  font-family:var(--mono); font-style:normal; font-size:9px; letter-spacing:.18em;
  border-top:1px solid currentColor; padding-top:3px; margin-top:4px;
}

/* ---------- 区块 ---------- */
.block{padding:clamp(40px,7vh,64px) 0; border-bottom:1px solid var(--rule)}
.block h2{
  display:flex; align-items:baseline; gap:14px;
  margin:0 0 28px; font-family:var(--serif); font-size:19px; font-weight:700; letter-spacing:.04em;
}
.num{
  font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.1em;
  color:var(--red); border:1px solid currentColor; border-radius:2px; padding:1px 5px;
}
.hint{margin-left:auto; font-family:var(--sans); font-size:11.5px; font-weight:400; color:var(--ink-faint); letter-spacing:.04em}

/* ---------- 今日三件事 ---------- */
.tri{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  border-top:1px solid var(--rule-soft)}
.tri li{border-bottom:1px solid var(--rule-soft); border-right:1px solid var(--rule-soft)}
.tri li:last-child{border-right:none}
.tri label{
  display:grid; grid-template-columns:auto 1fr; grid-template-areas:"tick body" "tick min";
  gap:4px 14px; padding:20px 22px 18px; cursor:pointer; position:relative;
  transition:background .25s ease;
}
.tri label:hover{background:var(--paper-2)}
.tri input{position:absolute; opacity:0; width:1px; height:1px}
.tick{
  grid-area:tick; width:18px; height:18px; margin-top:4px;
  border:1.5px solid var(--ink-faint); border-radius:2px; position:relative;
  transition:border-color .2s ease, background .2s ease;
}
.tick::after{
  content:""; position:absolute; left:5px; top:1px; width:4px; height:9px;
  border-right:2px solid var(--paper); border-bottom:2px solid var(--paper);
  transform:rotate(42deg) scale(.4); opacity:0; transition:all .2s ease;
}
input:checked + .tick{background:var(--red); border-color:var(--red)}
input:checked + .tick::after{opacity:1; transform:rotate(42deg) scale(1)}
input:focus-visible + .tick{outline:2px solid var(--moss); outline-offset:2px}
.t-body{grid-area:body; display:flex; flex-direction:column; gap:3px}
.t-name{font-family:var(--serif); font-size:17px; font-weight:700; letter-spacing:.02em}
input:checked ~ .t-body .t-name{color:var(--ink-faint); text-decoration:line-through; text-decoration-color:var(--rule)}
.t-note{font-size:12.5px; color:var(--ink-faint); line-height:1.6}
.t-min{grid-area:min; font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; color:var(--ink-faint)}

.stamp-line{
  margin:20px 0 0; font-size:12.5px; letter-spacing:.06em; color:var(--ink-faint);
  display:flex; align-items:center; gap:10px;
}
.stamp-line::before{content:""; width:26px; height:1px; background:var(--rule)}
.stamp-line.done{color:var(--red)}
.stamp-line.done::before{background:var(--red)}

/* ---------- 学习地图 ---------- */
.cards{display:grid; grid-template-columns:repeat(2,1fr); gap:0;
  border-top:1px solid var(--rule-soft)}
.card{
  position:relative; display:flex; flex-direction:column; gap:8px;
  padding:26px 28px 24px; text-decoration:none;
  border-bottom:1px solid var(--rule-soft); border-right:1px solid var(--rule-soft);
  transition:background .25s ease, transform .25s ease;
}
.card:nth-child(2n){border-right:none}
.card:hover{background:var(--paper-2)}
.card:hover .c-title{transform:translateX(4px)}
.card:hover .c-no{background:var(--red); color:var(--paper)}
.c-no{
  position:absolute; top:24px; right:28px;
  width:22px; height:22px; display:grid; place-items:center;
  font-family:var(--mono); font-size:10.5px; color:var(--red);
  border:1px solid currentColor; border-radius:2px; transition:.25s ease;
}
.c-title{font-family:var(--serif); font-size:20px; font-weight:700; letter-spacing:.03em; transition:transform .25s ease}
.c-desc{font-size:13px; line-height:1.85; color:var(--ink-soft); max-width:34em}
.c-meta{margin-top:6px; font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; color:var(--ink-faint)}

/* ---------- 台账 ---------- */
.ledger{width:100%; border-collapse:collapse; font-size:13.5px}
.ledger th{
  text-align:left; font-weight:400; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.14em; color:var(--ink-faint);
  padding:0 14px 10px 0; border-bottom:1px solid var(--rule);
}
.ledger td{
  padding:13px 14px 13px 0; border-bottom:1px solid var(--rule-soft);
  vertical-align:baseline;
}
.ledger td:nth-child(1){font-family:var(--serif); font-size:15px; font-weight:700; white-space:nowrap}
.ledger td:nth-child(2){font-family:var(--mono); font-size:12.5px; letter-spacing:.02em; white-space:nowrap}
.ledger td:last-child{color:var(--ink-soft); font-size:12.5px}
.ledger tbody tr:hover td{background:var(--paper-2)}

/* ---------- 日志 ---------- */
.log{list-style:none; counter-reset:l; margin:0; padding:0; border-top:1px solid var(--rule-soft)}
.log li{
  counter-increment:l; display:grid; grid-template-columns:56px 1fr; gap:18px;
  padding:16px 0; border-bottom:1px solid var(--rule-soft);
}
.log li::before{
  content:counter(l,decimal-leading-zero);
  font-family:var(--mono); font-size:11px; color:var(--ink-faint); letter-spacing:.08em; padding-top:2px;
}
.log .l-meta{
  display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.12em;
  color:var(--red); margin-bottom:3px;
}
.log .l-text{margin:0; font-size:14px; line-height:1.85; color:var(--ink-soft)}
.log-tip{margin:18px 0 0; font-size:12px; color:var(--ink-faint)}
.log-tip code{font-family:var(--mono); font-size:11.5px; background:var(--paper-3); padding:1px 5px; border-radius:2px}

/* ---------- 页脚 ---------- */
footer{
  max-width:1120px; margin:0 auto; padding:26px 28px 40px;
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; color:var(--ink-faint);
}
footer a{text-decoration:none; border-bottom:1px solid var(--rule); padding-bottom:1px}
footer a:hover{color:var(--red); border-color:var(--red)}

/* ---------- 入场动效 ---------- */
.hero > *{opacity:0; transform:translateY(14px); animation:rise .9s cubic-bezier(.2,.7,.2,1) forwards}
.hero .kicker{animation-delay:.05s}
.hero h1{animation-delay:.14s}
.hero .lede{animation-delay:.26s}
.hero .seal{animation-delay:.4s}

.block{opacity:0; transform:translateY(18px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1)}
.block.in{opacity:1; transform:none}

@keyframes rise{to{opacity:1; transform:none}}

@media (prefers-reduced-motion:reduce){
  .hero > *, .block{animation:none; transition:none; opacity:1; transform:none}
}

/* ---------- 移动端 ---------- */
@media (max-width:820px){
  .masthead{padding:18px 20px 14px; flex-wrap:wrap; gap:6px}
  main{padding:0 20px 32px}
  .mh-en{display:none}
  .mh-right{white-space:normal; font-size:10.5px}
  .hero{padding:40px 0 36px}
  .hero h1{font-size:clamp(1.7rem,7.4vw,2.1rem); line-height:1.24}
  .hero h1 em{white-space:normal}
  .lede{margin-top:24px; font-size:14.5px}
  .seal{position:static; margin:28px 0 0; transform:rotate(-4deg); width:76px; height:94px; font-size:21px}
  .tri{grid-template-columns:1fr}
  .tri li{border-right:none}
  .cards{grid-template-columns:1fr}
  .card{border-right:none; padding:22px 0}
  .c-no{right:0; top:22px}
  .hint{display:none}
  .ledger th:nth-child(3), .ledger td:nth-child(3){display:none}
  .log li{grid-template-columns:44px 1fr; gap:10px}
  footer{padding:22px 20px 36px}
}

@media (max-width:430px){
  .mh-mark{letter-spacing:.12em; font-size:18px}
  .hero h1{font-size:1.72rem}
  .seal{width:68px; height:84px; font-size:19px}
}

/* ============================================================
   面试题本：题目页专用组件
   ============================================================ */

/* 导航 */
.mh-nav{display:flex; gap:18px; margin-left:26px}
.mh-nav a{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em;
  text-decoration:none; color:var(--ink-faint); padding-bottom:2px; border-bottom:1px solid transparent;
}
.mh-nav a:hover, .mh-nav a.on{color:var(--ink); border-color:var(--red)}

/* 面包屑 */
.crumb{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; color:var(--ink-faint);
  padding:18px 0 0;
}
.crumb a{text-decoration:none; border-bottom:1px solid var(--rule)}
.crumb a:hover{color:var(--red); border-color:var(--red)}

/* 题目头 */
.qhead{padding:22px 0 30px; border-bottom:1px solid var(--rule)}
.qhead h1{
  margin:14px 0 0; font-family:var(--serif); font-weight:700;
  font-size:clamp(1.6rem,3.6vw,2.5rem); line-height:1.35; letter-spacing:.01em;
}
.qmeta{display:flex; flex-wrap:wrap; gap:8px; margin-top:18px}
.tag{
  font-family:var(--mono); font-size:10px; letter-spacing:.12em;
  border:1px solid var(--rule); border-radius:2px; padding:3px 8px; color:var(--ink-soft);
}
.tag.hot{color:var(--red); border-color:var(--red)}
.tag.done{color:var(--moss); border-color:var(--moss)}

/* 小节 */
.sec{padding:clamp(28px,4.5vh,44px) 0; border-bottom:1px solid var(--rule-soft)}
.sec:last-of-type{border-bottom:none}
.sec h2{
  margin:0 0 18px; font-family:var(--serif); font-size:18px; font-weight:700; letter-spacing:.03em;
  display:flex; align-items:baseline; gap:12px;
}
.sec h2 .num{
  font-family:var(--mono); font-size:10.5px; color:var(--red);
  border:1px solid currentColor; border-radius:2px; padding:1px 5px;
}
.sec h3{
  margin:26px 0 10px; font-family:var(--serif); font-size:15.5px; font-weight:700; letter-spacing:.02em;
}
.sec p{margin:12px 0; font-size:14.5px; line-height:1.95; color:var(--ink-soft)}
.sec ul, .sec ol{margin:12px 0; padding-left:1.35em; font-size:14.5px; line-height:1.95; color:var(--ink-soft)}
.sec li{margin:7px 0}
.sec li::marker{color:var(--red)}
.sec strong{color:var(--ink); font-weight:700}
code{
  font-family:var(--mono); font-size:.86em; background:var(--paper-3);
  padding:1px 5px; border-radius:2px; color:var(--ink);
}
pre{
  margin:16px 0; padding:16px 18px; background:var(--paper-2);
  border-left:2px solid var(--rule); overflow-x:auto;
  font-family:var(--mono); font-size:12.5px; line-height:1.85; color:var(--ink);
}
pre code{background:none; padding:0; font-size:inherit}

/* 30 秒版 */
.short{
  margin:0; padding:20px 24px; background:var(--paper-2);
  border-left:3px solid var(--red); font-family:var(--serif);
  font-size:16.5px; line-height:1.95; color:var(--ink);
}
.short .lbl{
  display:block; margin-bottom:8px; font-family:var(--mono); font-size:10px;
  letter-spacing:.18em; color:var(--red);
}

/* 结构图 */
.figure{margin:20px 0 8px; padding:22px 20px 18px; border:1px solid var(--rule-soft); background:var(--paper-2)}
.figure figcaption{
  margin-top:14px; font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; color:var(--ink-faint);
}
.arr{display:grid; grid-template-columns:repeat(8,1fr); gap:4px}
.arr .cell{
  position:relative; height:38px; display:grid; place-items:center;
  border:1px solid var(--rule); font-family:var(--mono); font-size:10px; color:var(--ink-faint);
  background:var(--paper);
}
.arr .cell.on{border-color:var(--red); color:var(--red); background:#F7E9E4}
.arr .cell.on::after{content:""; position:absolute; left:50%; bottom:-5px; width:1px; height:5px; background:var(--red)}
.chainrow{display:flex; flex-wrap:wrap; gap:10px; margin-top:16px}
.chain{
  display:flex; align-items:center; gap:6px; font-family:var(--mono); font-size:11px; color:var(--ink-soft);
}
.node{
  border:1px solid var(--rule); background:var(--paper); padding:3px 7px; border-radius:2px;
}
.node.tree{border-color:var(--moss); color:var(--moss)}
.arrow{color:var(--red)}
.nil{color:var(--ink-faint)}

/* 步骤 */
.steps{counter-reset:s; list-style:none; padding:0; margin:16px 0}
.steps li{
  counter-increment:s; position:relative; padding-left:38px; margin:14px 0;
  font-size:14.5px; line-height:1.9; color:var(--ink-soft);
}
.steps li::before{
  content:counter(s); position:absolute; left:0; top:2px;
  width:22px; height:22px; display:grid; place-items:center;
  font-family:var(--mono); font-size:10.5px; color:var(--red);
  border:1px solid currentColor; border-radius:50%;
}

/* 提示框 / 坑 */
.box{margin:18px 0; padding:16px 18px; border:1px solid var(--rule-soft); background:var(--paper-2); font-size:13.5px; line-height:1.9; color:var(--ink-soft)}
.box b{color:var(--ink)}
.box.warn{border-left:3px solid var(--red); background:#F8EDE9}
.box.tip{border-left:3px solid var(--moss)}

/* 追问 */
.ask{margin:12px 0; border:1px solid var(--rule-soft); background:var(--paper)}
.ask summary{
  cursor:pointer; padding:13px 16px; font-family:var(--serif); font-size:14.5px; font-weight:700;
  list-style:none; display:flex; gap:10px; align-items:baseline;
}
.ask summary::-webkit-details-marker{display:none}
.ask summary::before{content:"＋"; font-family:var(--mono); font-size:12px; color:var(--red)}
.ask[open] summary::before{content:"－"}
.ask[open] summary{border-bottom:1px solid var(--rule-soft)}
.ask .a{padding:14px 18px; font-size:14px; line-height:1.95; color:var(--ink-soft)}
.ask .a p{margin:8px 0}
.ask .a p:first-child{margin-top:0}
.ask .a p:last-child{margin-bottom:0}

/* 照念稿 */
.script{
  margin:0; padding:22px 24px; border:1px solid var(--rule); background:var(--paper-2);
  font-size:15px; line-height:2.1; color:var(--ink); position:relative;
}
.script .lbl{
  display:block; margin-bottom:10px; font-family:var(--mono); font-size:10px;
  letter-spacing:.18em; color:var(--red);
}
.script p{margin:12px 0; font-size:inherit; color:inherit; line-height:inherit}
.script em{font-style:normal; background:#F3DFD8; padding:0 3px}

/* 常见答错 */
.wrong{list-style:none; padding:0; margin:14px 0}
.wrong li{
  position:relative; padding-left:26px; margin:12px 0; font-size:14px; line-height:1.9; color:var(--ink-soft);
}
.wrong li::before{
  content:"✕"; position:absolute; left:0; top:0; color:var(--red); font-size:12px;
}
.wrong li b{color:var(--ink)}

/* 题目列表（首页） */
.qlist{list-style:none; margin:0; padding:0; border-top:1px solid var(--rule)}
.qlist li{border-bottom:1px solid var(--rule-soft)}
.qlist a{
  display:grid; grid-template-columns:44px 1fr auto; gap:16px; align-items:baseline;
  padding:20px 4px; text-decoration:none; transition:background .2s ease;
}
.qlist a:hover{background:var(--paper-2)}
.qlist .no{font-family:var(--mono); font-size:11px; color:var(--ink-faint); letter-spacing:.08em}
.qlist .t{font-family:var(--serif); font-size:17px; font-weight:700; letter-spacing:.01em}
.qlist .t small{display:block; margin-top:4px; font-family:var(--sans); font-size:12px; font-weight:400; color:var(--ink-faint); letter-spacing:0}
.qlist .m{font-family:var(--mono); font-size:10px; letter-spacing:.1em; color:var(--ink-faint); white-space:nowrap}

@media (max-width:820px){
  .mh-nav{margin-left:0; width:100%; gap:14px; padding-top:6px}
  .qhead h1{font-size:1.45rem}
  .arr{grid-template-columns:repeat(4,1fr)}
  .arr .cell{height:32px}
  .short{font-size:15px; padding:16px 18px}
  .script{font-size:14px; line-height:1.95; padding:18px}
  .qlist a{grid-template-columns:32px 1fr; gap:10px}
  .qlist .m{grid-column:2; margin-top:-4px}
  pre{font-size:11.5px; padding:13px}
}

/* 手机上报头不要把站名挤成两行 */
.mh-mark{white-space:nowrap}
@media (max-width:820px){
  .mh-left{flex-wrap:wrap; row-gap:4px}
  .mh-nav{flex-basis:100%}
}

/* ============================================================
   English edition：单词卡 + 朗读按钮 + 类比框
   ============================================================ */
.listen{
  display:inline-flex; align-items:center; gap:8px; margin-top:20px;
  padding:9px 16px; border:1px solid var(--ink); background:transparent;
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--ink);
  cursor:pointer; border-radius:2px; transition:.2s ease;
}
.listen:hover{background:var(--ink); color:var(--paper)}
.listen.on{background:var(--red); border-color:var(--red); color:var(--paper)}

.analogy{
  margin:20px 0; padding:18px 20px; border-left:3px solid var(--moss);
  background:var(--paper-2); font-size:14.5px; line-height:1.9; color:var(--ink-soft);
}
.analogy b{display:block; margin-bottom:6px; font-family:var(--mono); font-size:10px; letter-spacing:.16em; color:var(--moss)}

.wordlist{display:block; border-top:1px solid var(--rule-soft)}
.word{
  display:grid; grid-template-columns:190px 96px 1fr auto; align-items:baseline; gap:4px 14px;
  padding:13px 0; border-bottom:1px solid var(--rule-soft);
}
.word .w{font-family:var(--mono); font-size:14px; font-weight:600; letter-spacing:.01em}
.word .ipa{font-family:var(--mono); font-size:11.5px; color:var(--ink-faint)}
.word .mean{font-size:13px; line-height:1.7; color:var(--ink-soft)}
.word .links{display:flex; gap:8px; align-items:center; white-space:nowrap}
.word .say, .word .spk{
  font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-decoration:none;
  border:1px solid var(--rule); border-radius:2px; padding:3px 7px; cursor:pointer;
  background:transparent; color:var(--ink-soft); transition:.2s ease;
}
.word .say:hover, .word .spk:hover{background:var(--red); border-color:var(--red); color:var(--paper)}

.checks{list-style:none; counter-reset:ck; padding:0; margin:0}
.checks li{
  counter-increment:ck; position:relative; padding:12px 0 12px 34px;
  border-bottom:1px solid var(--rule-soft); font-size:14.5px; line-height:1.9; color:var(--ink-soft);
}
.checks li::before{
  content:counter(ck); position:absolute; left:0; top:12px;
  width:20px; height:20px; display:grid; place-items:center;
  font-family:var(--mono); font-size:10px; color:var(--red); border:1px solid currentColor; border-radius:50%;
}
.checks li small{display:block; margin-top:4px; font-size:12px; color:var(--ink-faint)}

.note{margin:16px 0; font-size:13px; color:var(--ink-faint); line-height:1.8}
.note b{color:var(--ink)}

@media (max-width:820px){
  .word{grid-template-columns:1fr; gap:2px}
  .word .links{margin-top:2px}
  .word .mean{margin-bottom:4px}
}

/* ===== 语言切换 ===== */
html[data-lang="zh"] .bi-en, html[data-lang="zh"] .in-en { display: none !important; }
html[data-lang="en"] .bi-zh, html[data-lang="en"] .in-zh { display: none !important; }
.bi-en { display: block; }
.bi-zh { display: block; }
.in-en, .in-zh { display: inline; }
html[data-lang="both"] .bi-zh { color: var(--ink-2); font-size: .94em; }
html[data-lang="both"] p.bi-zh, html[data-lang="both"] li > .bi-zh,
html[data-lang="both"] blockquote .bi-zh { border-left: 2px solid var(--line); padding-left: 12px; margin-top: 6px; }
html[data-lang="both"] .in-zh { color: var(--ink-3); font-size: .9em; margin-left: .35em; }
html[data-lang="both"] .in-zh::before { content: " " }
html[data-lang="both"] .word .bi-en, html[data-lang="both"] .word .bi-zh { display: inline; }
html[data-lang="both"] .word .bi-zh { color: var(--ink-3); margin-left: .4em; font-size: .92em; }
/* 表格里中英并排，不要上下堆 */
html[data-lang="both"] .ledger .bi-en, html[data-lang="both"] .ledger .in-en { display: inline; }
html[data-lang="both"] .ledger .bi-zh, html[data-lang="both"] .ledger .in-zh {
  display: inline; font-size: .9em; color: var(--ink-3); margin-left: .4em;
}
/* ===== 答案 ===== */
.answerbox{
  border: 1px solid var(--line-strong); border-left: 4px solid var(--seal);
  background: var(--paper-2); padding: 14px 18px; margin: 22px 0 0;
}
.answerbox b{ display:block; font-family:var(--sans); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--seal); margin-bottom:6px; }
.answerbox .bi-en, .answerbox .bi-zh{ font-size:15.5px; line-height:1.7; }
details.answers{ border-top:1px solid var(--line); padding-top:10px; }
details.answers summary{
  cursor:pointer; font-family:var(--sans); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--seal); padding:6px 0; list-style:none;
}
details.answers summary::-webkit-details-marker{ display:none }
details.answers summary::before{ content:"＋ " }
details.answers[open] summary::before{ content:"－ " }
.ans{ display:grid; grid-template-columns:34px 1fr; gap:10px; padding:10px 0; border-bottom:1px dotted var(--line); }
.ans .an{ font-family:var(--mono); font-size:11px; color:var(--seal); padding-top:3px; }
/* 首页九问表：控制列宽 */
.ledger.qa{ table-layout: fixed }
.ledger.qa th:nth-child(1){ width: 26% }
.ledger.qa th:nth-child(2){ width: 64% }
.ledger.qa th:nth-child(3){ width: 10%; white-space: nowrap }
.ledger.qa td:nth-child(2){ white-space: normal; font-family: var(--serif); letter-spacing: 0; font-size: 14.5px }
.ledger.qa td:nth-child(3){ white-space: nowrap; font-family: var(--mono); font-size: 12px }
/* ===== 表格：长文字一律允许换行（首页九问表需要） ===== */
.ledger{ table-layout: auto; }
.ledger th, .ledger td{ white-space: normal; word-break: break-word; }
.ledger td:nth-child(1){ white-space: normal; }
/* ===== 手机端表格：不隐藏列，改成能读的小字 ===== */
@media (max-width:820px){
  .ledger th:nth-child(3), .ledger td:nth-child(3){ display: table-cell; }
  .ledger{ font-size: 11.5px; width: 100%; }
  .ledger th, .ledger td{ padding: .8mm 1.1mm; white-space: normal; }
  .ledger td:nth-child(1){ font-size: 13px; white-space: normal; }
  .ledger td:nth-child(2){ white-space: normal; }
  .wordlist{ grid-template-columns: 1fr; gap: 3px; }
  .wordlist .word{ grid-template-columns: 1fr; }
  .wordlist .links{ margin-top: 2px; }
}
.mh-nav a.nav-game span{color:#A33}
.mh-nav a.nav-game{border:1px solid #d9b7ae;border-radius:2px;padding:1px 6px;margin-left:2px}
.mh-nav a.nav-game:hover{border-color:#A33}

/* 首页“玩装桶小游戏”按钮 */
.playbtn{display:inline-block;font-family:var(--sans);font-size:14px;letter-spacing:.04em;
         padding:10px 18px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);
         text-decoration:none;border-radius:2px}
.playbtn:hover{background:#3a342c;border-color:#3a342c;color:#fff}

/* 导航与标签里的中文用细体 */
.in-zh { font-family: var(--serif); }
.langswitch { display: inline-flex; border: 1px solid var(--line-strong); }
.langswitch button {
  font: inherit; font-size: 11px; letter-spacing: .04em; padding: 4px 9px;
  background: transparent; color: var(--ink-3); border: 0; cursor: pointer;
}
.langswitch button + button { border-left: 1px solid var(--line); }
.langswitch button.on { background: var(--ink); color: var(--paper); }
.mh-right { display: flex; align-items: center; gap: 14px; }