:root { color-scheme: dark; --bg:#050a0f; --panel:#0c141b; --ink:#f5f7f6; --muted:#aeb7b4; --line:#28343b; --accent:#ffb400; }
* { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: "PingFang SC", "Noto Sans CJK SC", sans-serif; line-height: 1.75; }
a { color: inherit; }
.shell { width: min(100% - 40px, 980px); margin: 0 auto; }
header { border-bottom: 1px solid var(--line); }
.nav { min-height: 76px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; font-weight:800; letter-spacing:.04em; }
.brand-mark { display:grid; place-items:center; width:42px; height:42px; border-radius:12px; background:var(--accent); color:#111; font-size:20px; }
nav { display:flex; flex-wrap:wrap; gap:18px; }
nav a { color:var(--muted); text-decoration:none; font-size:14px; }
.hero { padding:88px 0 66px; border-bottom:1px solid var(--line); }
.eyebrow { color:var(--accent); font-size:13px; font-weight:800; letter-spacing:.16em; }
h1 { margin:12px 0 18px; max-width:820px; font-size:clamp(44px,8vw,82px); letter-spacing:-.06em; line-height:1.03; }
.lead { max-width:760px; margin:0; color:var(--muted); font-size:18px; }
main > .shell { padding:60px 0 90px; }
section + section { margin-top:52px; padding-top:52px; border-top:1px solid var(--line); }
h2 { margin:0 0 16px; font-size:clamp(27px,4vw,40px); letter-spacing:-.035em; line-height:1.2; }
h3 { margin:28px 0 8px; font-size:18px; }
p, li { color:var(--muted); }
ul, ol { display:grid; gap:10px; padding-left:22px; }
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; padding:1px; background:var(--line); }
.steps article { background:var(--panel); padding:28px; }
.steps b { display:block; margin-bottom:10px; color:var(--accent); }
.callout { padding:22px 24px; border-left:3px solid var(--accent); background:var(--panel); }
.actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.button { display:inline-flex; align-items:center; min-height:44px; padding:0 18px; border-radius:999px; background:var(--accent); color:#111; text-decoration:none; font-weight:800; }
.button.secondary { border:1px solid var(--line); background:transparent; color:var(--ink); }
footer { border-top:1px solid var(--line); }
.footer { min-height:86px; display:flex; align-items:center; justify-content:space-between; gap:20px; color:var(--muted); font-size:14px; }
code { color:#ffd36b; }
@media (max-width:700px) { .nav,.footer { align-items:flex-start; flex-direction:column; padding:18px 0; } .hero { padding:62px 0 46px; } .steps { grid-template-columns:1fr; } }