:root{--bg:#faf7f2;--card:#fff;--ink:#2d2a26;--sub:#8a8378;--acc:#e07a3f;--acc2:#4a7c59;--line:#eee5d8}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;background:var(--bg);color:var(--ink);line-height:1.75}
header{position:sticky;top:0;z-index:10;background:rgba(250,247,242,.96);backdrop-filter:blur(8px);border-bottom:2px solid var(--line);padding:14px 0 10px}
header .wrap{max-width:1100px;margin:0 auto;padding:0 18px}
h1{font-size:22px;margin-bottom:2px}
.sub{font-size:13px;color:var(--sub);margin-bottom:10px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.tag{display:inline-block;padding:1px 10px;border-radius:999px;background:#eef3ee;color:var(--acc2);font-size:12.5px;font-weight:600}
#search{width:100%;max-width:560px;padding:10px 14px;font-size:16px;border:2px solid var(--line);border-radius:12px;background:#fff;outline:none}
#search:focus{border-color:var(--acc)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;padding:18px;max-width:1100px;margin:0 auto}
.card{background:var(--card);border:1.5px solid var(--line);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:6px;transition:box-shadow .15s}
.card:hover{box-shadow:0 4px 16px rgba(0,0,0,.08)}
.card-top{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--sub)}
.card-top .date{margin-left:auto}
.card h3{font-size:17px}
.excerpt{font-size:13px;color:var(--sub);flex:1}
.open{align-self:flex-start;background:none;border:none;color:var(--acc);font-size:14px;cursor:pointer;padding:4px 0;font-weight:600}
.hidden{display:none!important}
.empty{text-align:center;color:var(--sub);padding:40px 0}
#overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;z-index:20;overflow-y:auto}
#overlay.show{display:block}
.detail{max-width:760px;margin:24px auto;background:#fff;border-radius:16px;padding:26px 30px 40px}
.detail-head{border-bottom:2px solid var(--line);padding-bottom:14px;margin-bottom:18px}
.detail-head h2{font-size:22px;margin-left:8px;display:inline}
.meta{font-size:12.5px;color:var(--sub);margin-top:8px}
.q{font-size:14px;background:#fdf3ea;border-left:3px solid var(--acc);padding:8px 12px;border-radius:0 8px 8px 0;margin-top:10px}
#close{position:sticky;top:12px;float:right;z-index:2;width:38px;height:38px;border-radius:50%;border:none;background:var(--ink);color:#fff;font-size:18px;cursor:pointer}
.content{font-size:16px}
.content h2,.content h3,.content h4{margin:18px 0 8px;line-height:1.4}
.content h2{font-size:20px}.content h3{font-size:18px}.content h4{font-size:16px}
.content p{margin:8px 0}
.content ul,.content ol{margin:8px 0 8px 1.4em}
.content li{margin:5px 0}
.content hr{border:none;border-top:1.5px dashed var(--line);margin:18px 0}
.content table{border-collapse:collapse;margin:10px 0;font-size:14.5px}
.content td,.content th{border:1px solid var(--line);padding:6px 10px}
.content strong{color:#b4531f}
.content blockquote{border-left:3px solid var(--acc2);padding-left:12px;color:var(--sub);margin:8px 0}
.step{display:flex;gap:10px;align-items:flex-start;margin:5px 0}
.step input{margin-top:7px;width:17px;height:17px;accent-color:var(--acc2);flex:none}
.step.done label{text-decoration:line-through;color:var(--sub)}
footer{max-width:1100px;margin:0 auto;padding:8px 18px 40px;font-size:12.5px;color:var(--sub)}
@media (max-width:640px){.detail{margin:0;border-radius:0;padding:18px 16px 32px}}
@media print{header,#close,.open,#search{display:none}.grid{display:block}.card{page-break-inside:avoid;border:none}}