:root{color-scheme:dark;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;background:#111317;color:#f6f4fa}
*{box-sizing:border-box}
body{margin:0;min-width:320px}
a{color:inherit;text-decoration:none}
a:hover{color:#d9c7ff}
.site-header{height:80px;padding:0 max(24px,calc((100vw - 1120px)/2));display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #303038;background:#1a1b20}
.brand{display:flex;align-items:center;gap:12px}.brand span{display:grid;gap:2px}.brand strong{font-size:22px}.brand small{font-size:12px;color:#aaa4b6}
.header-link{font-size:14px;color:#d0c9da}
main{max-width:1120px;margin:auto;padding:28px 24px 76px}
.breadcrumb{display:flex;gap:10px;color:#ada7b6;font-size:13px;margin-bottom:32px}
.hero{display:grid;grid-template-columns:1fr 45%;min-height:360px;border:1px solid #45404f;border-radius:18px;overflow:hidden;background:#202029}
.hero-copy{padding:58px 52px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
.eyebrow{font-size:12px;letter-spacing:.12em;color:#bba4e8}h1{font-size:clamp(34px,4vw,55px);margin:20px 0 18px}h2{font-size:22px;margin:0 0 20px}h3{font-size:17px;margin:0 0 12px}
.hero p{color:#d5d0df;line-height:1.9;font-size:17px;max-width:34em;margin:0 0 30px}
.hero img{width:100%;height:100%;max-height:440px;object-fit:cover}
.primary{display:inline-flex;align-items:center;gap:15px;border-radius:9px;padding:13px 20px;background:#8661db;color:white;font-weight:600}
.primary:hover{background:#9875e8;color:white}
.content{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:32px}
.content>div,.note,.faq{background:#1b1d24;border:1px solid #34353f;border-radius:14px;padding:32px}
ul,ol{padding-left:1.4em;margin:0;color:#c6c3ce;line-height:1.9}li+li{margin-top:10px}
.note,.faq{margin-top:22px}.note p,.faq p{margin:0;color:#c6c3ce;line-height:1.9}
.related{margin-top:50px}.related>div{display:flex;flex-wrap:wrap;gap:12px}.related a{padding:12px 16px;border:1px solid #46404e;border-radius:8px;color:#d5cbdf}.related a:hover{border-color:#a98be4;color:#fff}
footer{border-top:1px solid #303038;padding:28px 24px;display:flex;justify-content:center;gap:24px;flex-wrap:wrap;color:#aaa4b6;font-size:12px}
@media(max-width:760px){.site-header{height:68px;padding:0 18px}.brand strong{font-size:18px}main{padding:22px 16px 54px}.hero{display:flex;flex-direction:column-reverse}.hero img{height:220px}.hero-copy{padding:28px 24px 32px}.hero p{font-size:15px}.content{grid-template-columns:1fr}.content>div,.note,.faq{padding:24px}}