:root{--bg:#fafaf7;--card:#fff;--fg:#252520;--muted:#6f7068;--line:#e5e5de;--soft:#f1f1ed;--primary:#292a24;--ok:#27815f;--warn:#a5640a;--warnbg:#fff7e8;--red:#b4232a}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:17px/1.75 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif}
main{max-width:760px;margin:0 auto;padding:20px 16px 80px}
header.hero{padding:8px 0 16px}
.kicker{font-size:14px;color:var(--muted);margin:0}
h1{font-size:26px;line-height:1.35;margin:4px 0 10px}
.lead{margin:0;color:#3d3e37}
.meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.meta span{font-size:14px;background:var(--soft);border-radius:4px;padding:2px 10px;color:#3d3e37}
.progress{position:sticky;top:0;z-index:5;background:var(--bg);padding:10px 0;border-bottom:1px solid var(--line);margin-bottom:16px;display:flex;align-items:center;gap:12px;font-size:15px}
.bar{flex:1;height:8px;border-radius:4px;background:var(--line);overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--ok);transition:width .2s}
.part{font-size:15px;color:var(--muted);margin:28px 0 8px;font-weight:600}
.step{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:16px 16px 14px;margin:12px 0;display:grid;grid-template-columns:40px 1fr;gap:4px 12px}
.step.done{border-color:#b9dccb;background:#f6fbf8}
.num{width:36px;height:36px;border-radius:50%;background:var(--primary);color:#fff;display:grid;place-items:center;font-weight:700;font-size:17px}
.step.done .num{background:var(--ok)}
.step h2{font-size:19px;line-height:1.45;margin:4px 0 6px}
.step .body{grid-column:2}
.step p{margin:6px 0}
.step ol,.step ul{margin:6px 0;padding-left:22px}
.step li{margin:4px 0}
.ui{display:inline-block;border:1px solid #c9cabf;background:#fff;border-radius:4px;padding:0 7px;font-size:15px;line-height:1.6;white-space:nowrap;box-shadow:0 1px 0 #d8d8cf}
.see{margin-top:10px;font-size:15px;color:#2f5c48;background:#eef6f1;border-radius:6px;padding:8px 12px}
.see::before{content:"✓ 做对了会看到：";font-weight:600}
.note{margin-top:10px;font-size:15px;color:var(--warn);background:var(--warnbg);border-radius:6px;padding:8px 12px}
.check{grid-column:2;display:flex;align-items:center;gap:8px;margin-top:10px;font-size:15px;color:var(--muted);cursor:pointer;user-select:none}
.check input{width:20px;height:20px;accent-color:var(--ok);margin:0}
.copy{display:flex;align-items:center;gap:8px;margin:8px 0;flex-wrap:wrap}
.copy code{flex:1;min-width:0;overflow-wrap:anywhere;font:15px/1.5 ui-monospace,Menlo,Consolas,monospace;background:var(--soft);border:1px solid var(--line);border-radius:6px;padding:8px 10px}
.copy button{border:1px solid var(--line);background:#fff;border-radius:6px;padding:7px 14px;font-size:15px;cursor:pointer;color:var(--fg)}
.copy button.ok{border-color:var(--ok);color:var(--ok)}
table{border-collapse:collapse;width:100%;font-size:15px;margin:8px 0}
th,td{border:1px solid var(--line);padding:6px 8px;text-align:left;vertical-align:top}
th{background:var(--soft);font-weight:600}
.stack{margin:10px 0;border:1px solid var(--line);border-radius:8px;overflow:hidden;font-size:15px}
.stack div{padding:9px 12px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:10px}
.stack div:first-child{border-top:0}
.stack b{font-weight:600}
.stack small{color:var(--muted);font-size:13px}
.l4{background:#fff}.l3{background:#eef6f1}.l2{background:#f4f4f0}.l1{background:#f7ecec}
details{background:var(--card);border:1px solid var(--line);border-radius:8px;margin:10px 0;padding:0 16px}
summary{cursor:pointer;padding:12px 0;font-weight:600;font-size:17px}
details[open] summary{border-bottom:1px solid var(--line);margin-bottom:8px}
details>div{padding-bottom:12px}
.btn{display:inline-block;background:var(--primary);color:#fff;text-decoration:none;border-radius:6px;padding:8px 16px;font-size:16px;margin:4px 8px 4px 0}
.btn.ghost{background:#fff;color:var(--fg);border:1px solid var(--line)}
.next{margin-top:28px;padding:16px;border-radius:8px;background:var(--card);border:1px solid var(--line)}
.next h2{font-size:18px;margin:0 0 6px}
a{color:#1f5fa8}