/* weimanshibasuibuyikan.cn — 跟做课版式：衬线标题 + 左侧课时数字栏 + 深梅色工具区 */
:root{
  --paper:#fbf9f6;
  --panel:#ffffff;
  --ink:#211d1c;
  --muted:#5c5350;
  --faint:#6f6762;
  --line:#e3dcd3;
  --plum:#6b2d5b;
  --plum-deep:#46203c;
  --plum-soft:#f4e9f0;
  --brick:#a8431f;
  --brick-soft:#fbefe8;
  --onplum:#f7eef3;
  --onplum-dim:#d9bfd0;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:400 16.5px/1.95 "PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--plum)}
a:hover{color:var(--plum-deep)}
h1,h2,h3,.ser{font-family:"Songti SC","Noto Serif SC","Source Han Serif SC",Georgia,serif;font-weight:600}

.skip{position:absolute;left:-9999px;top:0;background:#fff;color:var(--plum);padding:10px 14px;z-index:9}
.skip:focus{left:8px;top:8px}

/* ─── 顶栏：细线条 + 下划线式导航，不用胶囊 ─── */
.bar{border-bottom:1px solid var(--line);background:var(--paper)}
.bar .in{max-width:62em;margin:0 auto;padding:18px 22px 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px}
.bar .brand{font-family:"Songti SC","Noto Serif SC",Georgia,serif;font-size:21px;font-weight:600;color:var(--ink);text-decoration:none;letter-spacing:.06em;display:inline-block;min-height:26px}
.bar .note{margin:0;font-size:13.5px;line-height:1.7;color:var(--faint)}
.bar nav{max-width:62em;margin:0 auto;padding:10px 22px 0}
.bar nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 22px}
.bar nav a{display:inline-block;padding:8px 0 10px;font-size:15px;line-height:1.6;text-decoration:none;color:var(--muted);border-bottom:2px solid transparent;min-height:26px}
.bar nav a:hover{color:var(--plum);border-bottom-color:var(--line)}
.bar nav a[aria-current="page"]{color:var(--plum);border-bottom-color:var(--plum)}

.wrap{max-width:62em;margin:0 auto;padding:0 22px 72px}

/* ─── 开篇 ─── */
.open{padding:40px 0 4px;max-width:34em}
.kick{display:block;font-size:13px;letter-spacing:.2em;color:var(--brick);margin:0 0 14px}
h1{font-size:27px;line-height:1.52;margin:0 0 16px}
@media (min-width:720px){h1{font-size:33px;line-height:1.46}}
.lead{font-size:17.5px;line-height:1.95;color:var(--muted);margin:0}

/* ─── 课时块：左数字栏 ─── */
.step{display:grid;grid-template-columns:3.4rem 1fr;gap:0 1.5rem;padding:38px 0 2px;border-top:1px solid var(--line);margin-top:36px}
.step:first-of-type{border-top:0;margin-top:0}
.step .no{font-family:"Songti SC","Noto Serif SC",Georgia,serif;font-size:30px;line-height:1.3;color:#8c5a7d;padding-top:2px}
.step .bd{min-width:0;max-width:36em}
@media (max-width:719px){
  .step{grid-template-columns:1fr;gap:0}
  .step .no{font-size:20px;padding-top:0;margin-bottom:2px}
}
h2{font-size:22px;line-height:1.55;margin:0 0 10px}
@media (min-width:720px){h2{font-size:24px}}
h3{font-family:inherit;font-weight:600;font-size:17px;line-height:1.7;margin:28px 0 6px}
p{margin:0 0 15px}
.bd>p:last-child{margin-bottom:0}

ul.dot,ol.num{margin:0 0 16px;padding-left:1.35em}
ul.dot li,ol.num li{margin:0 0 9px;line-height:1.9}
ul.dot li:last-child,ol.num li:last-child{margin-bottom:0}
ul.dot li::marker{color:var(--plum)}
ol.num li::marker{color:var(--plum);font-weight:600}
.tight li{margin-bottom:4px}

/* ─── 两种提示盒 ─── */
.card{background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:20px 22px;margin:22px 0}
.card h3{margin-top:0}
.card>:last-child{margin-bottom:0}
.warn{background:var(--brick-soft);border-left:3px solid var(--brick);padding:18px 20px;margin:22px 0}
.warn p{margin:0 0 10px}
.warn>:last-child{margin-bottom:0}
.warn strong{color:var(--brick)}

/* ─── 目录卡列表 ─── */
.toc{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:12px}
@media (min-width:860px){.toc{grid-template-columns:1fr 1fr}}
.toc li{margin:0}
.toc a{display:block;background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:16px 18px;text-decoration:none;color:var(--ink)}
.toc a:hover{border-color:var(--plum);background:var(--plum-soft)}
.toc b{display:block;font-family:"Songti SC","Noto Serif SC",Georgia,serif;font-size:17.5px;font-weight:600;color:var(--plum);margin-bottom:4px}
.toc span{display:block;font-size:14.5px;line-height:1.75;color:var(--muted)}

/* ─── 图 ─── */
figure{margin:26px 0;max-width:34em}
figure img{border:1px solid var(--line);border-radius:4px;background:#fff;width:100%}
figcaption{font-size:14px;line-height:1.8;color:var(--faint);margin-top:9px}

/* ─── 表 ─── */
.tbl{width:100%;border-collapse:collapse;margin:22px 0;font-size:15.5px}
.tbl caption{text-align:left;font-size:14px;color:var(--faint);padding-bottom:8px;line-height:1.75}
.tbl th,.tbl td{border:1px solid var(--line);padding:10px 12px;text-align:left;line-height:1.75;vertical-align:top}
.tbl thead th{background:var(--plum-soft);color:var(--plum);font-weight:600;font-size:14.5px}
.tbl tbody th{background:#fff;font-weight:600;white-space:nowrap}

/* ─── 深色工具区：节拍器 ─── */
.tool{background:var(--plum-deep);color:var(--onplum);border-radius:4px;padding:26px 22px 24px;margin:32px 0}
@media (min-width:720px){.tool{padding:30px 32px 28px}}
.tool h2{color:var(--onplum);margin:0 0 8px;font-size:21px}
.tool a{color:var(--onplum);text-decoration:underline}
.tool a:hover{color:#ffffff}
.tool .say{color:var(--onplum-dim);font-size:15px;line-height:1.85;margin:0 0 18px;max-width:34em}
.modes{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}
.modes button{font:inherit;font-size:14.5px;line-height:1.5;padding:9px 14px;min-height:26px;border-radius:3px;cursor:pointer;background:rgba(255,255,255,.07);color:var(--onplum);border:1px solid rgba(247,238,243,.4)}
.modes button:hover{background:rgba(255,255,255,.16)}
.modes button[aria-pressed="true"]{background:var(--onplum);color:var(--plum-deep);border-color:var(--onplum);font-weight:600}
.dial{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.dial .ring{width:132px;height:132px;flex:0 0 auto}
.dial .ring circle{fill:none;stroke-width:9}
.dial .ring .bg{stroke:rgba(247,238,243,.22)}
.dial .ring .fg{stroke:var(--onplum);stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%;transition:stroke-dashoffset .1s linear}
.read{min-width:9em}
.read .ph{display:block;font-family:"Songti SC","Noto Serif SC",Georgia,serif;font-size:29px;line-height:1.4;font-weight:600}
.read .sec{display:block;font-size:15px;line-height:1.8;color:var(--onplum-dim)}
.ctrl{display:flex;gap:10px;margin:22px 0 0;flex-wrap:wrap}
.ctrl button{font:inherit;font-size:15.5px;line-height:1.5;padding:11px 22px;min-height:26px;border-radius:3px;cursor:pointer;border:1px solid var(--onplum);background:var(--onplum);color:var(--plum-deep);font-weight:600}
.ctrl button.ghost{background:transparent;color:var(--onplum)}
.ctrl button.ghost:hover{background:rgba(255,255,255,.14)}
.tool .fine{color:var(--onplum-dim);font-size:13.5px;line-height:1.8;margin:18px 0 0;max-width:34em}

/* ─── 打卡表 ─── */
.punch{width:100%;border-collapse:collapse;margin:18px 0 10px;font-size:15px}
.punch caption{text-align:left;font-size:14px;color:var(--faint);padding-bottom:8px;line-height:1.75}
.punch th,.punch td{border:1px solid var(--line);padding:7px 8px;text-align:center;line-height:1.7}
.punch thead th{background:var(--plum-soft);color:var(--plum);font-size:14px;font-weight:600}
.punch tbody th{background:#fff;font-weight:600;text-align:left;white-space:nowrap;font-size:14.5px}
.punch tbody tr.done th{color:var(--plum)}
.punch input{width:22px;height:22px;margin:0;accent-color:var(--plum);cursor:pointer;vertical-align:middle}
.punch-edge tbody th{border-left:3px solid var(--plum)}
.tally{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0 0 6px}
.tally strong{font-family:"Songti SC","Noto Serif SC",Georgia,serif;font-size:21px;color:var(--plum);font-weight:600}
.tally span{font-size:14.5px;color:var(--faint)}
.tally button{font:inherit;font-size:14.5px;line-height:1.5;padding:8px 14px;min-height:26px;border-radius:3px;cursor:pointer;background:#fff;color:var(--muted);border:1px solid var(--line)}
.tally button:hover{border-color:var(--plum);color:var(--plum)}

/* ─── 章末导航 ─── */
.jump{display:flex;flex-wrap:wrap;gap:12px;border-top:1px solid var(--line);margin-top:46px;padding-top:24px}
.jump a{display:inline-block;padding:11px 18px;border:1px solid var(--line);border-radius:3px;background:var(--panel);text-decoration:none;font-size:15px;line-height:1.6;min-height:26px}
.jump a:hover{border-color:var(--plum);background:var(--plum-soft)}

/* ─── 页脚 ─── */
.foot{border-top:1px solid var(--line);background:#f5f1ec}
.foot .in{max-width:62em;margin:0 auto;padding:26px 22px 34px;font-size:14px;line-height:1.85;color:var(--faint)}
.foot a{color:var(--plum)}
.foot ul{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-wrap:wrap;gap:4px 18px}
.foot ul a{display:inline-block;min-height:24px;padding:2px 0}
.foot p{margin:0 0 8px}
.foot p:last-child{margin-bottom:0}