/* ===========================================================
   到手 TakeHome — guide / article styles (loaded after site.css)
   Dark VORA idiom, but tuned for long-form reading.
   =========================================================== */

.doc{ max-width:760px; margin:0 auto; padding:5vh 4vw 2vh; }
.doc-wide{ max-width:1000px; }

/* breadcrumb */
.crumb{ font-family:var(--mono); font-size:.62rem; letter-spacing:.06em; color:rgba(255,255,255,.45);
  padding:1.2rem 0; display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; }
.crumb a{ color:rgba(255,255,255,.6); }
.crumb a:hover{ color:var(--accent); }
.crumb span{ opacity:.4; }

/* article header */
.doc__eyebrow{ font-family:var(--mono); font-size:.6rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--accent); margin-bottom:1.4rem; }
.doc h1{ font-family:var(--cn); font-weight:900; line-height:1.08; letter-spacing:-.01em;
  font-size:clamp(2rem,5vw,3.4rem); margin:0; text-wrap:balance; }
.doc h1 small{ display:block; font-family:var(--cn); font-weight:400; line-height:1.5;
  font-size:clamp(.95rem,1.7vw,1.18rem); color:rgba(255,255,255,.6); margin-top:1.1rem; letter-spacing:0; }
.doc__meta{ font-family:var(--mono); font-size:.64rem; letter-spacing:.05em; color:rgba(255,255,255,.45);
  margin-top:1.8rem; padding-bottom:1.8rem; border-bottom:var(--rule); display:flex; gap:1.4rem; flex-wrap:wrap; }
.doc__meta b{ color:rgba(255,255,255,.75); font-weight:500; }

/* lede */
.lede{ font-family:var(--cn); font-weight:400; font-size:clamp(1.1rem,2vw,1.32rem); line-height:1.7;
  color:rgba(255,255,255,.9); margin:2.4rem 0; }
.lede + .toc{ margin-top:2.4rem; }

/* TOC */
.toc{ border:var(--rule-thin); background:rgba(255,255,255,.02); padding:1.2rem 1.4rem; margin:2.4rem 0; }
.toc summary{ font-family:var(--mono); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.6); cursor:pointer; list-style:none; display:flex; justify-content:space-between; }
.toc summary::-webkit-details-marker{ display:none; }
.toc summary::after{ content:'目录'; color:var(--accent); }
.toc ol{ margin:1.1rem 0 0; padding:0; counter-reset:toc; list-style:none;
  columns:2; column-gap:2rem; }
.toc li{ break-inside:avoid; padding:.32rem 0; counter-increment:toc; }
.toc a{ font-family:var(--cn); font-size:.92rem; color:rgba(255,255,255,.74); display:flex; gap:.6rem; }
.toc a::before{ content:counter(toc,decimal-leading-zero); font-family:var(--mono); font-size:.7rem;
  color:rgba(255,255,255,.35); }
.toc a:hover{ color:var(--accent); }
@media(max-width:560px){ .toc ol{ columns:1; } }

/* prose */
.doc h2{ font-family:var(--cn); font-weight:800; font-size:clamp(1.45rem,3vw,2rem); line-height:1.2;
  margin:3.6rem 0 1.2rem; letter-spacing:-.01em; scroll-margin-top:84px; padding-top:.4rem; }
.doc h2 .h2num{ font-family:var(--mono); font-size:.8rem; color:var(--accent); font-weight:400;
  margin-right:.7rem; letter-spacing:.05em; }
.doc h3{ font-family:var(--cn); font-weight:700; font-size:1.18rem; margin:2.2rem 0 .8rem; color:#fff; }
.doc p{ font-family:var(--cn); font-size:1.06rem; line-height:1.85; color:rgba(255,255,255,.82);
  margin:1.1rem 0; }
.doc strong{ color:#fff; font-weight:600; }
.doc em{ font-style:normal; color:var(--accent-soft); }
.doc a{ color:var(--accent-soft); border-bottom:1px solid rgba(255,106,82,.4); }
.doc a:hover{ border-bottom-color:var(--accent-soft); }
.doc ul, .doc ol{ margin:1.1rem 0; padding-left:0; list-style:none; }
.doc ul li, .doc ol li{ font-family:var(--cn); font-size:1.04rem; line-height:1.8; color:rgba(255,255,255,.82);
  padding:.35rem 0 .35rem 1.6rem; position:relative; }
.doc ul li::before{ content:''; position:absolute; left:.2rem; top:1.1rem; width:7px; height:7px;
  background:var(--accent); }
.doc ol{ counter-reset:li; }
.doc ol li{ counter-increment:li; }
.doc ol li::before{ content:counter(li); position:absolute; left:0; top:.45rem; font-family:var(--mono);
  font-size:.8rem; color:var(--accent); font-weight:600; }

/* data table inside article */
.doc-table{ overflow-x:auto; margin:2rem 0; border:var(--rule-thin); }
.doc table{ width:100%; min-width:560px; border-collapse:collapse; }
.doc table th, .doc table td{ padding:.85rem 1rem; text-align:left; vertical-align:top;
  border-bottom:var(--rule-thin); font-family:var(--cn); font-size:.92rem; line-height:1.6; color:rgba(255,255,255,.8); }
.doc table thead th{ background:rgba(255,255,255,.06); color:#fff; font-weight:700; font-size:.86rem;
  font-family:var(--condensed); letter-spacing:.02em; }
.doc table tbody th{ font-weight:600; color:#fff; width:8rem; }
.doc table .num{ font-family:var(--mono); font-variant-numeric:tabular-nums; }
.doc table .hi{ color:var(--accent); font-weight:600; }
.doc table .lo{ color:#7fd1a6; font-weight:600; }

/* call-out boxes (use sparingly, varied) */
.box{ border:var(--rule-thin); padding:1.3rem 1.4rem; margin:2rem 0; background:rgba(255,255,255,.02); }
.box__k{ font-family:var(--mono); font-size:.58rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent); margin-bottom:.7rem; display:block; }
.box p{ margin:.5rem 0; font-size:1rem; }
.box--stop{ border-left:3px solid var(--accent); background:rgba(255,74,46,.05); }

/* hands-on steps */
.diy{ border:var(--rule-thin); margin:2.2rem 0; }
.diy__head{ padding:1rem 1.4rem; border-bottom:var(--rule-thin); font-family:var(--mono); font-size:.62rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--accent); display:flex; align-items:center; gap:.6rem; }
.diy ol{ margin:0; padding:1.2rem 1.4rem; }
.diy ol li{ padding-left:2rem; }
.diy ol li b{ color:#fff; }
.diy code{ font-family:var(--mono); font-size:.86rem; color:var(--accent-soft); background:rgba(255,255,255,.05);
  padding:.05rem .35rem; word-break:break-all; }

/* myths: 传言 / 实际 pairs (NOT the 误区↔真相 red-green card of site 12) */
.myth{ margin:2rem 0; border-top:var(--rule-thin); }
.myth__row{ padding:1.3rem 0; border-bottom:var(--rule-thin); }
.myth__say{ font-family:var(--cn); font-size:1.05rem; color:rgba(255,255,255,.92); font-weight:600; margin:0 0 .6rem; }
.myth__say::before{ content:'传言'; font-family:var(--mono); font-size:.56rem; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(255,255,255,.4); display:inline-block; margin-right:.7rem;
  border:1px solid rgba(255,255,255,.25); padding:.08rem .4rem; vertical-align:middle; }
.myth__real{ font-family:var(--cn); font-size:1rem; line-height:1.8; color:rgba(255,255,255,.74); margin:0; }
.myth__real::before{ content:'实际'; font-family:var(--mono); font-size:.56rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent); display:inline-block; margin-right:.7rem;
  border:1px solid var(--accent); padding:.08rem .4rem; vertical-align:middle; }

/* FAQ */
.faq{ margin:1.6rem 0; }
.faq details{ border-bottom:var(--rule-thin); }
.faq summary{ font-family:var(--cn); font-weight:600; font-size:1.06rem; color:#fff; cursor:pointer;
  padding:1.1rem 2rem 1.1rem 0; position:relative; list-style:none; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:'+'; position:absolute; right:.2rem; top:1rem; font-family:var(--mono);
  color:var(--accent); font-size:1.2rem; }
.faq details[open] summary::after{ content:'–'; }
.faq details p{ padding:0 0 1.2rem; margin:0; font-size:1rem; }

/* outbound soft-bridge inside article */
.out-note{ border:var(--rule-thin); background:rgba(255,255,255,.02); padding:1.4rem 1.5rem; margin:2.4rem 0;
  display:flex; gap:1.2rem 1.6rem; align-items:center; flex-wrap:wrap; }
.out-note p{ margin:0; flex:1; min-width:240px; font-size:.98rem; color:rgba(255,255,255,.78); }
.out-note .btn{ flex:none; }

/* related / next */
.related{ margin:3.4rem 0 1rem; border-top:var(--rule); padding-top:2rem; }
.related h2{ margin:0 0 1.2rem; }
.related a{ display:grid; grid-template-columns:auto 1fr auto; gap:1.2rem; align-items:baseline;
  padding:1.1rem 0; border-bottom:var(--rule-thin); color:inherit; border-bottom-color:rgba(255,255,255,.13);
  transition:padding-left .25s ease; }
.related a:hover{ padding-left:.8rem; }
.related a .n{ font-family:var(--mono); font-size:.7rem; color:rgba(255,255,255,.35); }
.related a .t{ font-family:var(--cn); font-weight:600; font-size:1.05rem; color:#fff; }
.related a:hover .t{ color:var(--accent); }
.related a .go{ font-family:var(--mono); color:rgba(255,255,255,.3); }

/* article foot */
.doc__foot{ margin-top:3rem; }
.doc__update{ font-family:var(--mono); font-size:.66rem; line-height:1.8; color:rgba(255,255,255,.55);
  border:var(--rule-thin); padding:1.1rem 1.3rem; }
.doc__update strong{ color:rgba(255,255,255,.85); font-weight:500; }

@media(max-width:560px){
  .related a{ grid-template-columns:auto 1fr; }
  .related a .go{ display:none; }
}

/* English label overrides for CSS-generated text (auto-applies on <html lang="en">) */
:lang(en) .toc summary::after{ content:'Contents'; }
:lang(en) .myth__say::before{ content:'Claim'; }
:lang(en) .myth__real::before{ content:'Reality'; }

/* sources / official references */
.sources{ border:var(--rule-thin); padding:1.1rem 1.3rem; margin-bottom:1.4rem; background:rgba(255,255,255,.02); }
.sources__k{ font-family:var(--mono); font-size:.58rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent); display:block; margin-bottom:.75rem; }
.sources ul{ margin:0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:.45rem 1.4rem; }
.sources ul li{ padding:0; font-family:var(--cn); font-size:.86rem; line-height:1.5; }
.sources ul li::before{ content:none; display:none; }
.sources a{ color:var(--accent-soft); border-bottom:1px solid rgba(255,106,82,.4); }
.sources p{ font-family:var(--cn); font-size:.78rem; color:rgba(255,255,255,.5); margin:.7rem 0 0; }