*{margin:0;padding:0;box-sizing:border-box}
body{font-family:"Microsoft YaHei","PingFang SC",sans-serif;background:#f5f1e8;color:#2b2b2b}
header{background:#33475b;color:#fff;padding:18px 24px}
header h1{font-size:20px;font-weight:600}
header p{font-size:12px;opacity:.8;margin-top:4px}
.wrap{max-width:1100px;margin:0 auto;padding:20px 16px 60px}
.nav{display:flex;justify-content:space-between;margin:18px 0;font-size:13px}
.nav a{color:#33475b;text-decoration:none;background:#fff;padding:6px 14px;border-radius:6px;border:1px solid #d8d0c0}
.nav a:hover{background:#33475b;color:#fff}
.desc{background:#fff;border-left:4px solid #c08552;padding:14px 18px;border-radius:0 8px 8px 0;font-size:14px;line-height:1.9;margin-bottom:14px}
.desc b{color:#c08552}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.card{background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.08);cursor:pointer;transition:transform .15s}
.card:hover{transform:translateY(-3px)}
.card img{width:100%;height:180px;object-fit:contain;background:#fff;border-bottom:1px solid #eee}
.card .cap{padding:10px 12px;font-size:12.5px;line-height:1.7}
.card .cap b{color:#33475b;display:block;font-size:13.5px;margin-bottom:4px}
.card .cap .q{color:#c08552;font-weight:600}
.card .cap span{color:#555;display:block}
.card details.code{margin-top:6px;border-top:1px dashed #ddd;padding-top:6px}
.card details.code summary{font-size:11.5px;color:#8a8378;cursor:pointer}
.card pre{font-size:11px;background:#f8f5ee;padding:8px;border-radius:6px;overflow-x:auto;line-height:1.5;margin-top:6px}
#lb{position:fixed;inset:0;background:rgba(0,0,0,.92);display:none;align-items:center;justify-content:center;z-index:99}
#lb img{max-width:92vw;max-height:92vh}
#lb .close{position:absolute;top:16px;right:24px;color:#fff;font-size:30px;cursor:pointer}
footer{color:#a89f90;font-size:12px;text-align:center;padding:24px}
.idx{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;margin-top:18px}
.idx a{background:#fff;border-radius:10px;padding:18px;text-decoration:none;color:#2b2b2b;border:1px solid #e3dccb;display:block}
.idx a:hover{border-color:#c08552}
.idx .t{font-size:16px;font-weight:600;color:#33475b;margin-bottom:6px}
.idx .d{font-size:13px;color:#6b6459;line-height:1.7}

.content{background:#fff;border-radius:10px;padding:24px 28px;margin-bottom:20px;line-height:1.95;font-size:14.5px}
.content h2{color:#33475b;font-size:18px;margin:26px 0 10px;padding-bottom:6px;border-bottom:2px solid #e3dccb}
.content h2:first-child{margin-top:0}
.content h3{color:#c08552;font-size:15.5px;margin:20px 0 8px}
.content h4{color:#33475b;font-size:14.5px;margin:16px 0 6px}
.content p{margin:8px 0;text-align:justify}
.content p.sum{background:#f4f7f6;border-left:3px solid #7fa99b;padding:7px 12px;margin:6px 0 10px;font-size:13.5px;color:#3d5a50;text-align:left}
.content .key{background:#fdf6ec;border-left:3px solid #c08552;padding:8px 12px;margin:10px 0;font-size:13.5px}
.content figure{margin:12px 0;text-align:center}
.content figure img{max-width:100%;max-height:340px;cursor:pointer;border:1px solid #eee;border-radius:6px}
.content figcaption{font-size:12px;color:#8a8378;margin-top:4px}
.content pre{background:#f8f5ee;padding:10px 14px;border-radius:6px;overflow-x:auto;font-size:12.5px;line-height:1.6;margin:10px 0}
.content table{border-collapse:collapse;margin:12px 0;font-size:13.5px}
.content td,.content th{border:1px solid #ddd;padding:6px 12px}
.content th{background:#f5f1e8}