/* 课程页共用版式。跟练习页同一套颜色和字体（base.css），
   但版式不同 —— 练习是「一次一张卡」，课程是要从头读到尾的。 */
body{padding:0}
.top{max-width:640px; margin:0 auto; padding:18px 20px 0;
  display:flex; justify-content:space-between; align-items:center; gap:12px}
.top a{color:var(--act); text-decoration:none; font-weight:700; font-size:14.5px}
.top .brand{color:var(--ink); font-weight:900; letter-spacing:-.01em}
article,.page{max-width:640px; margin:0 auto; padding:26px 20px 72px;
  display:flex; flex-direction:column; gap:30px}
.lede{font-size:19px; color:var(--mute); margin:0; line-height:1.55}
h1{font-size:clamp(30px,7.5vw,42px); line-height:1.13; margin:0 0 14px;
  letter-spacing:-.025em; font-weight:900; text-wrap:balance}
h2{font-size:22px; margin:0 0 8px; font-weight:900; letter-spacing:-.015em}
p{margin:0 0 12px; line-height:1.62}
p:last-child{margin-bottom:0}

/* 一「招」= 一个可折可展的块。序号是有信息的：按「先试哪个」排，
   不是随便编的号 —— 第 1 招对几乎所有东西都管用，第 5 招是兜底。 */
.move{border:1px solid var(--line); border-radius:14px; background:var(--card);
  padding:22px 20px; display:flex; flex-direction:column; gap:14px}
.movehead{display:flex; align-items:baseline; gap:12px}
.num{flex:0 0 auto; font-size:13px; font-weight:900; color:var(--on-brand);
  background:var(--brand); width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; align-self:center;
  font-variant-numeric:tabular-nums}
.move h3{margin:0; font-size:20px; font-weight:900; letter-spacing:-.015em}
.when{margin:0; font-size:14.5px; color:var(--mute)}

/* 产品的核心视觉手势：衬线体 = 那个「体面」的说法，粗黑体 = 朴素的说法。
   课程里沿用同一对，读者在练习里已经认得它了。 */
.eg{display:flex; flex-direction:column; gap:7px; padding:14px 0 0;
  border-top:1px dashed var(--line)}
.eg:first-of-type{border-top:0; padding-top:0}
.hard{font-family:"Source Serif 4",Georgia,serif; font-size:19px; margin:0; color:var(--mute)}
.hard b{color:var(--out); font-weight:400; text-decoration:line-through}
.easy{font-size:18px; font-weight:800; line-height:1.4; margin:0}
.easy::before{content:"→ "; color:var(--in); font-weight:900}

.try{background:var(--sunk); border-radius:12px; padding:16px; display:flex;
  flex-direction:column; gap:10px}
.try label{font-size:13px; letter-spacing:.09em; text-transform:uppercase;
  font-weight:800; color:var(--mute)}
.try textarea{width:100%; font:inherit; font-size:17px; padding:12px; border-radius:8px;
  border:1.5px solid var(--line); background:var(--card); color:var(--ink);
  resize:vertical; min-height:70px}
.try textarea:focus{outline:2px solid var(--act); outline-offset:1px}
.out2{font-size:15.5px; line-height:1.95; margin:0}
.out2:empty{display:none}

.cta{display:inline-block; align-self:flex-start; background:var(--brand);
  color:var(--on-brand); text-decoration:none; font-weight:900; font-size:18px;
  padding:15px 26px; border-radius:12px}
.cta:hover{filter:brightness(1.12)}
.end{background:var(--sunk); border-radius:14px; padding:24px 20px;
  display:flex; flex-direction:column; gap:12px}
.toc{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px}
.toc a{display:flex; justify-content:space-between; align-items:center; gap:14px;
  border:1px solid var(--line); border-radius:12px; padding:17px 18px;
  background:var(--card); text-decoration:none; color:var(--ink)}
.toc a:hover{border-color:var(--act)}
.toc b{font-size:17px; display:block}
.toc small{color:var(--mute); font-weight:600; font-size:14px; display:block; margin-top:2px}
.toc .soon{flex:0 0 auto; font-size:11.5px; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; color:var(--mute)}
.toc li.later a{opacity:.62; pointer-events:none}
footer{max-width:640px; margin:0 auto; padding:0 20px 40px}