*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;background:linear-gradient(135deg,#eef4fb,#e6eef8);color:#1e293b;line-height:1.7;padding-bottom:60px}
.hero{text-align:center;padding:56px 24px 28px}
.tag{display:inline-block;font-size:12px;letter-spacing:3px;color:#6366f1;background:rgba(99,102,241,.1);padding:5px 14px;border-radius:20px;font-weight:600}
.hero h1{font-size:44px;margin:18px 0 12px;letter-spacing:1px;color:#0f172a}
.hero .sub{font-size:16px;color:#475569;max-width:820px;margin:0 auto}
.hero .meta{margin-top:16px;font-size:14px;color:#64748b}
.layout{display:flex;gap:26px;align-items:flex-start;max-width:1280px;margin:18px auto 30px;padding:0 24px}
.method-nav{position:sticky;top:16px;z-index:50;flex:0 0 228px;display:flex;flex-direction:column;gap:5px;padding:12px;background:rgba(255,255,255,.78);backdrop-filter:blur(12px);border-radius:16px;box-shadow:0 4px 18px rgba(15,23,42,.06);max-height:calc(100vh - 32px);overflow-y:auto}
.nav-title{font-size:12px;letter-spacing:1.5px;color:#94a3b8;font-weight:600;padding:2px 8px 8px}
.chip{display:flex;align-items:center;gap:9px;font-size:13.5px;padding:8px 10px;border-radius:10px;text-decoration:none;color:#334155;background:#fff;border:1px solid #eef2f7;border-left:3px solid var(--c);transition:.18s}
.chip b{font-weight:700;color:var(--c);font-variant-numeric:tabular-nums;min-width:16px}
.chip:hover{border-color:var(--c);color:var(--c);background:#f8fafc;transform:translateX(2px)}
main{flex:1;min-width:0;margin:0;padding:0}
.method{margin-bottom:52px;scroll-margin-top:20px}
@media (max-width:900px){
.layout{flex-direction:column;padding:0 16px}
.method-nav{position:static;flex:none;width:100%;flex-direction:row;flex-wrap:wrap;max-height:none}
.chip{flex:0 0 auto}
}
.method-head{display:flex;align-items:center;gap:16px;padding-bottom:12px;border-bottom:2px solid #e2e8f0}
.method-num{font-size:30px;font-weight:800;color:#cbd5e1;font-variant-numeric:tabular-nums}
.method-head h2{font-size:25px;color:#0f172a}
.method-en{font-size:13px;color:#94a3b8;letter-spacing:.5px}
.method-count{margin-left:auto;font-size:13px;color:#64748b;background:#f1f5f9;padding:4px 12px;border-radius:12px}
.method-desc{margin:16px 0 22px;font-size:15px;color:#475569;background:rgba(255,255,255,.6);padding:14px 18px;border-radius:12px;border-left:4px solid #cbd5e1}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:18px}
.card{background:#fff;border-radius:14px;padding:0;box-shadow:0 3px 14px rgba(15,23,42,.06);border:1px solid #eef2f7;display:flex;flex-direction:column;transition:.22s;position:relative;overflow:hidden}
.card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#6366f1,#8b5cf6)}
.card:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(15,23,42,.12)}
.card-body{padding:20px 20px 14px;flex:1}
.card-body h4{font-size:18px;color:#0f172a;margin-bottom:4px}
.card-en{font-size:12.5px;color:#94a3b8;margin-bottom:12px;letter-spacing:.3px}
.card-lead{font-size:14px;color:#475569;line-height:1.75}
.card-foot{display:flex;gap:10px;align-items:center;padding:12px 20px 16px;border-top:1px solid #f1f5f9}
.card-link{font-size:13px;text-decoration:none;padding:6px 12px;border-radius:8px;font-weight:500;transition:.2s}
.card-link.go{background:#eef2ff;color:#4338ca}
.card-link.go:hover{background:#e0e7ff}
.card-link.ext{background:#ecfdf5;color:#047857;margin-left:auto}
.card-link.ext:hover{background:#d1fae5}
.card-link.none{color:#94a3b8;font-size:12.5px;margin-left:auto}
.footer{text-align:center;margin-top:40px;font-size:13.5px;color:#64748b}
.footer a{color:#4338ca;text-decoration:none}
.course{margin:16px auto 6px;font-size:14px;color:#475569;line-height:1.95;max-width:860px}
.course .l1{font-weight:600;color:#334155}
.course .l2{color:#64748b;margin-top:2px}
.course a{color:#4338ca;text-decoration:none}
.course a:hover{text-decoration:underline}
.credit{margin-top:8px;font-size:12.5px;color:#94a3b8;line-height:1.9}
.credit a{color:#4338ca;text-decoration:none}
.credit a:hover{text-decoration:underline}

[data-cat="m1"] .method-head{border-bottom-color:#6366f122}
[data-cat="m1"] .method-num{color:#6366f1}
[data-cat="m1"] .method-desc{border-left-color:#6366f1}
[data-cat="m1"] .card::before{background:linear-gradient(90deg,#6366f1,#6366f1bb)}
[data-cat="m1"] .card-link.go{background:#6366f115;color:#6366f1}
[data-cat="m2"] .method-head{border-bottom-color:#ec489922}
[data-cat="m2"] .method-num{color:#ec4899}
[data-cat="m2"] .method-desc{border-left-color:#ec4899}
[data-cat="m2"] .card::before{background:linear-gradient(90deg,#ec4899,#ec4899bb)}
[data-cat="m2"] .card-link.go{background:#ec489915;color:#ec4899}
[data-cat="m3"] .method-head{border-bottom-color:#06b6d422}
[data-cat="m3"] .method-num{color:#06b6d4}
[data-cat="m3"] .method-desc{border-left-color:#06b6d4}
[data-cat="m3"] .card::before{background:linear-gradient(90deg,#06b6d4,#06b6d4bb)}
[data-cat="m3"] .card-link.go{background:#06b6d415;color:#06b6d4}
[data-cat="m4"] .method-head{border-bottom-color:#f59e0b22}
[data-cat="m4"] .method-num{color:#f59e0b}
[data-cat="m4"] .method-desc{border-left-color:#f59e0b}
[data-cat="m4"] .card::before{background:linear-gradient(90deg,#f59e0b,#f59e0bbb)}
[data-cat="m4"] .card-link.go{background:#f59e0b15;color:#f59e0b}
[data-cat="m5"] .method-head{border-bottom-color:#10b98122}
[data-cat="m5"] .method-num{color:#10b981}
[data-cat="m5"] .method-desc{border-left-color:#10b981}
[data-cat="m5"] .card::before{background:linear-gradient(90deg,#10b981,#10b981bb)}
[data-cat="m5"] .card-link.go{background:#10b98115;color:#10b981}
[data-cat="m6"] .method-head{border-bottom-color:#8b5cf622}
[data-cat="m6"] .method-num{color:#8b5cf6}
[data-cat="m6"] .method-desc{border-left-color:#8b5cf6}
[data-cat="m6"] .card::before{background:linear-gradient(90deg,#8b5cf6,#8b5cf6bb)}
[data-cat="m6"] .card-link.go{background:#8b5cf615;color:#8b5cf6}
[data-cat="m7"] .method-head{border-bottom-color:#0ea5e922}
[data-cat="m7"] .method-num{color:#0ea5e9}
[data-cat="m7"] .method-desc{border-left-color:#0ea5e9}
[data-cat="m7"] .card::before{background:linear-gradient(90deg,#0ea5e9,#0ea5e9bb)}
[data-cat="m7"] .card-link.go{background:#0ea5e915;color:#0ea5e9}
[data-cat="m8"] .method-head{border-bottom-color:#f9731622}
[data-cat="m8"] .method-num{color:#f97316}
[data-cat="m8"] .method-desc{border-left-color:#f97316}
[data-cat="m8"] .card::before{background:linear-gradient(90deg,#f97316,#f97316bb)}
[data-cat="m8"] .card-link.go{background:#f9731615;color:#f97316}
[data-cat="m9"] .method-head{border-bottom-color:#14b8a622}
[data-cat="m9"] .method-num{color:#14b8a6}
[data-cat="m9"] .method-desc{border-left-color:#14b8a6}
[data-cat="m9"] .card::before{background:linear-gradient(90deg,#14b8a6,#14b8a6bb)}
[data-cat="m9"] .card-link.go{background:#14b8a615;color:#14b8a6}
[data-cat="m10"] .method-head{border-bottom-color:#a855f722}
[data-cat="m10"] .method-num{color:#a855f7}
[data-cat="m10"] .method-desc{border-left-color:#a855f7}
[data-cat="m10"] .card::before{background:linear-gradient(90deg,#a855f7,#a855f7bb)}
[data-cat="m10"] .card-link.go{background:#a855f715;color:#a855f7}
[data-cat="m11"] .method-head{border-bottom-color:#84cc1622}
[data-cat="m11"] .method-num{color:#84cc16}
[data-cat="m11"] .method-desc{border-left-color:#84cc16}
[data-cat="m11"] .card::before{background:linear-gradient(90deg,#84cc16,#84cc16bb)}
[data-cat="m11"] .card-link.go{background:#84cc1615;color:#84cc16}