:root{color-scheme:light;--bg: #f6f8f7;--surface: #ffffff;--surface-soft: #edf3f0;--ink: #102033;--muted: #5c6c78;--line: #d7e0dd;--brand: #2a6fdb;--brand-dark: #194f9e;--mint: #45b58f;--gold: #c98916;--coral: #d65c4a;--shadow: 0 18px 45px rgba(16, 32, 51, .08);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Microsoft YaHei,sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);line-height:1.7}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}.container{width:min(1120px,calc(100% - 32px));margin:0 auto}.site-header{position:sticky;top:0;z-index:20;border-bottom:1px solid rgba(215,224,221,.82);background:#f6f8f7eb;backdrop-filter:blur(16px)}.nav{display:flex;align-items:center;justify-content:space-between;min-height:72px;gap:20px}.brand{display:inline-flex;align-items:center;gap:10px;font-weight:800}.brand-mark{display:grid;width:36px;height:36px;place-items:center;border-radius:8px;background:var(--ink);color:#75dfb8;font-size:17px}.nav-links{display:flex;align-items:center;gap:18px;color:var(--muted);font-size:15px}.nav-links a:hover{color:var(--ink)}.button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border:1px solid transparent;border-radius:8px;background:var(--brand);color:#fff;font-weight:750;line-height:1.2;transition:transform .18s ease,background .18s ease,border-color .18s ease}.button:hover{background:var(--brand-dark);transform:translateY(-1px)}.button.secondary{background:#fff;border-color:var(--line);color:var(--ink)}.button.secondary:hover{background:var(--surface-soft)}.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.86fr);align-items:center;gap:56px;padding:72px 0 48px}.eyebrow{display:inline-flex;align-items:center;gap:8px;margin-bottom:18px;color:var(--brand-dark);font-weight:800;font-size:14px}h1,h2,h3{margin:0;line-height:1.15}h1{max-width:760px;font-size:clamp(38px,7vw,72px)}h2{font-size:clamp(28px,4vw,42px)}h3{font-size:21px}.lead{max-width:720px;margin:22px 0 0;color:var(--muted);font-size:19px}.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}.hero-media{min-width:0}.hero-media img{border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow)}.section{padding:52px 0}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:24px}.section-heading p{max-width:620px;margin:8px 0 0;color:var(--muted)}.grid{display:grid;gap:18px}.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.grid.auto{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}.card{min-width:0;border:1px solid var(--line);border-radius:8px;background:var(--surface);padding:22px;box-shadow:0 8px 26px #1020330a}.card p{color:var(--muted)}.card-note{margin:0;font-size:14px;font-weight:750}.tag-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}.tag{display:inline-flex;align-items:center;min-height:28px;border-radius:8px;background:var(--surface-soft);padding:0 10px;color:var(--muted);font-size:13px;font-weight:700}.protocol-tag{background:#e9f0ff;color:#1b4f9c}.download-buttons{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}.info-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:28px 0}.info-strip .card{padding:18px}.check-list{display:grid;gap:10px;margin:16px 0 0;padding:0;list-style:none}.check-list li{border-left:3px solid var(--mint);background:#f2faf6;padding:10px 12px}.soft-cta{margin:28px 0;border:1px solid #b8d3ff;border-radius:8px;background:#f0f6ff;padding:20px}.soft-cta p{color:#27435f}.comparison-table{display:grid;gap:10px}.comparison-row{display:grid;grid-template-columns:1.25fr .8fr 1fr 1.2fr 80px;align-items:center;gap:14px;border:1px solid var(--line);border-radius:8px;background:var(--surface);padding:16px}.comparison-head{background:var(--ink);color:#fff;font-weight:800}.comparison-row p{margin:6px 0 0;color:var(--muted);font-size:14px}.score{display:inline-grid;width:48px;height:48px;place-items:center;border-radius:50%;background:#eaf8f2;color:#166248;font-weight:900}.picker-result{display:grid;gap:12px}.platform-band{border-top:1px solid var(--line);padding:34px 0}.tutorial-card{display:grid;height:100%;gap:14px}.tutorial-meta{display:flex;flex-wrap:wrap;gap:8px;color:var(--muted);font-size:14px}.article{width:min(860px,calc(100% - 32px));margin:0 auto;padding:56px 0}.article-header{margin-bottom:34px}.article-content{border-top:1px solid var(--line);padding-top:30px}.article-content h2{margin-top:36px;font-size:29px}.article-content h3{margin-top:26px}.article-content p,.article-content li{color:#314150}.article-content code{border-radius:6px;background:var(--surface-soft);padding:2px 6px;color:var(--coral)}.article-content blockquote{margin:24px 0;border-left:4px solid var(--mint);background:#eef8f4;padding:16px 18px;color:#23443a}.tool-panel{display:grid;gap:16px}.field{display:grid;gap:8px}.field label{font-weight:800}textarea,input,select{width:100%;border:1px solid var(--line);border-radius:8px;background:#fff;padding:12px 14px;color:var(--ink);font:inherit}textarea{min-height:140px;resize:vertical}.tool-output{min-height:120px;border:1px solid var(--line);border-radius:8px;background:#fff;padding:16px;overflow-wrap:anywhere}.cta-band{margin:56px 0;background:var(--ink);color:#fff}.cta-band .container{display:flex;align-items:center;justify-content:space-between;gap:28px;padding-top:34px;padding-bottom:34px}.cta-band p{max-width:680px;color:#cdd7dd}.footer{border-top:1px solid var(--line);padding:32px 0;color:var(--muted);font-size:14px}.footer .container{display:flex;justify-content:space-between;gap:18px}@media (max-width: 820px){.nav{align-items:flex-start;flex-direction:column;padding:14px 0}.nav-links{width:100%;overflow-x:auto;padding-bottom:4px}.hero{grid-template-columns:1fr;gap:32px;padding-top:44px}.grid.three,.grid.four,.grid.two,.info-strip,.comparison-row{grid-template-columns:1fr}.section-heading,.cta-band .container,.footer .container{align-items:flex-start;flex-direction:column}}