*{margin:0;padding:0;box-sizing:border-box}
:root{--font-cn:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;--font-mono:"SF Mono","JetBrains Mono","Fira Code",monospace}
[data-theme="dark"]{--bg:#1a1a2e;--surface:#222240;--surface2:#2a2a4a;--border:rgba(255,255,255,.06);--border2:rgba(255,255,255,.1);--text:#d8dae5;--text2:#7a7d8e;--accent:#5b7fc7;--accent2:#4a6ab0;--accent-bg:rgba(91,127,199,.15);--yellow:#d4a94e}
[data-theme="light"]{--bg:#f5f6fa;--surface:#ffffff;--surface2:#eef0f6;--border:rgba(0,0,0,.06);--border2:rgba(0,0,0,.12);--text:#1f2937;--text2:#6b7280;--accent:#3b6fd4;--accent2:#2d5ab8;--accent-bg:rgba(59,111,212,.1);--yellow:#ca8a04}
body{font-family:var(--font-cn);background:var(--bg);color:var(--text);min-height:100vh;font-size:14px;line-height:1.65}
a{color:var(--accent);text-decoration:none}
code{font-family:var(--font-mono);font-size:.9em}
.header{display:flex;align-items:center;gap:16px;padding:0 20px;height:46px;border-bottom:1px solid var(--border2);background:var(--surface);position:sticky;top:0;z-index:100}
.header h1{font-size:14px;font-weight:500;cursor:pointer;letter-spacing:.5px;color:var(--text2)}
.header h1 span{color:var(--accent);font-weight:600}
.theme-btn{margin-left:auto;background:var(--surface2);border:1px solid var(--border2);color:var(--text);border-radius:8px;width:32px;height:28px;cursor:pointer;font-size:14px}
.banner{padding:24px 28px 18px;background:linear-gradient(120deg,var(--accent-bg),transparent 65%);border-bottom:1px solid var(--border)}
.btitle{font-size:21px;font-weight:700;letter-spacing:.5px;display:flex;align-items:center;gap:10px}
.btitle .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--accent-bg)}
.bsub{font-size:13px;color:var(--text2);margin-top:8px;max-width:760px}
.wrap{max-width:900px;margin:0 auto;padding:24px 20px 64px}
.card{background:var(--surface);border:1px solid var(--border2);border-radius:12px;padding:20px 22px;margin-bottom:18px}
.card h2{font-size:16px;font-weight:600;margin-bottom:12px;display:flex;align-items:center;gap:10px}
.card h2 .num{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:6px;background:var(--accent);color:#fff;font-size:12px;font-weight:700}
.card p{margin-bottom:8px}
.muted{color:var(--text2);font-size:13px}
.note{margin-top:12px}
.kv{margin-top:12px}
.kv label{display:block;font-size:12px;color:var(--text2);margin-bottom:5px;font-weight:600}
.copyrow{display:flex;align-items:stretch;gap:8px}
.copyrow code{flex:1;min-width:0;background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:9px 12px;overflow-x:auto;white-space:pre;display:block}
.copy{background:var(--accent);color:#fff;border:none;border-radius:8px;padding:0 16px;cursor:pointer;font-size:13px;font-weight:600;white-space:nowrap}
.copy:hover{background:var(--accent2)}
.steps{margin:14px 0 0 20px;color:var(--text);font-size:13px}
.steps li{margin-bottom:6px}
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.tab{background:var(--surface2);border:1px solid var(--border2);color:var(--text2);border-radius:20px;padding:6px 14px;cursor:pointer;font-size:13px;font-family:var(--font-cn)}
.tab.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.tools{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.tool{background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:14px 16px}
.tool .tname{font-size:14px;font-weight:600;display:flex;align-items:center;gap:8px}
.tool .tname code{color:var(--accent);font-size:13px}
.tool .tdesc{color:var(--text2);font-size:12.5px;margin-top:6px;line-height:1.6}
.tool .tuse{color:var(--text);font-size:12px;margin-top:8px;padding:6px 8px;background:var(--accent-bg);border-radius:6px}
.tool .params{margin-top:8px;font-size:12px}
.tool .params .prow{display:flex;gap:6px;padding:3px 0;border-top:1px dashed var(--border);flex-wrap:wrap}
.tool .params .pname{color:var(--accent);font-family:var(--font-mono);font-weight:600}
.tool .params .ptype{color:var(--yellow);font-family:var(--font-mono)}
.tool .params .pdesc{color:var(--text2);flex:1;min-width:120px}
.footer{text-align:center;padding:24px;color:var(--text2);font-size:12px;border-top:1px solid var(--border)}
.toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--accent);color:#fff;padding:10px 20px;border-radius:8px;font-size:13px;opacity:0;pointer-events:none;transition:.25s}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media(max-width:640px){.tools{grid-template-columns:1fr}.banner{padding:18px 18px 14px}.btitle{font-size:18px}.wrap{padding:18px 14px 48px}}