:root { --navy:#10233f; --white:#fff; --cloud:#f1f5f6; --coral:#ff5c4d; --aqua:#21c7c7; --lime:#b8e84d; --ink:#17202b; --muted:#607080; --line:#c6d2d7; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--white); font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,Helvetica,sans-serif; line-height:1.7; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
.shell { width:min(1170px,calc(100% - 40px)); margin:0 auto; }
.site-header { position:sticky; top:0; z-index:30; color:var(--white); background:rgba(16,35,63,.97); border-bottom:4px solid var(--coral); }
.header-inner { width:min(1170px,calc(100% - 40px)); min-height:70px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:28px; }
.brand { display:flex; align-items:center; gap:11px; font-size:18px; font-weight:900; }
.brand img { width:42px; height:42px; border:1px solid var(--white); }
.site-nav { display:flex; align-items:center; gap:28px; font-size:14px; font-weight:800; }
.site-nav a { padding:10px 0; border-bottom:2px solid transparent; }
.site-nav a.active { border-color:var(--aqua); }
.site-nav .download-link { padding:8px 17px; color:var(--navy); background:var(--lime); border:1px solid var(--white); }
.menu-toggle { display:none; width:42px; height:42px; background:var(--coral); border:1px solid var(--white); }
.menu-toggle span { display:block; width:20px; height:2px; margin:4px auto; background:var(--white); }

.map-hero { background:linear-gradient(90deg,var(--white) 0 59%,var(--cloud) 59% 100%); border-bottom:1px solid var(--line); }
.map-hero-grid { min-height:610px; padding:46px 0 50px; display:grid; grid-template-columns:minmax(0,1.02fr) minmax(430px,.98fr); gap:62px; align-items:center; }
.map-code { display:flex; gap:12px; align-items:center; color:var(--navy); font-size:11px; }
.map-code span { padding:5px 9px; color:var(--white); background:var(--coral); font-weight:900; }
.hero-copy h1 { margin:20px 0 16px; color:var(--navy); font-size:57px; line-height:1.06; letter-spacing:0; }
.hero-copy h1 span { display:block; }
.hero-copy h1 span:last-child { color:var(--coral); }
.hero-copy > p { max-width:610px; margin:0; color:#465769; font-size:16px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
.button { display:inline-flex; min-height:46px; align-items:center; justify-content:center; padding:9px 20px; border:1px solid var(--navy); font-weight:900; }
.button.primary { color:var(--white); background:var(--coral); box-shadow:5px 5px 0 var(--navy); }
.button.outline,.button.white { color:var(--navy); background:var(--white); }
.legend { display:flex; flex-wrap:wrap; gap:18px; margin-top:34px; padding-top:14px; border-top:1px solid var(--line); font-size:11px; font-weight:800; }
.legend span { display:flex; align-items:center; gap:6px; }
.legend i { width:9px; height:9px; }
.legend .coral { background:var(--coral); }.legend .aqua { background:var(--aqua); }.legend .lime { background:var(--lime); }
.relation-map { position:relative; min-height:500px; padding:18px; background:var(--white); border:2px solid var(--navy); box-shadow:12px 12px 0 var(--aqua); overflow:hidden; }
.map-title { display:flex; justify-content:space-between; padding-bottom:9px; border-bottom:1px solid var(--navy); font-size:11px; font-weight:900; }
.map-title b { color:var(--coral); }
.map-screen { position:absolute; left:50%; top:54%; width:205px; height:390px; display:grid; place-items:center; transform:translate(-50%,-50%); border:1px solid var(--navy); background:var(--cloud); }
.map-screen img { width:178px; max-width:400px; max-height:352px; object-fit:contain; }
.map-node { position:absolute; width:112px; padding:9px; border:1px solid var(--navy); background:var(--white); }
.map-node::after { content:""; position:absolute; height:1px; background:var(--navy); }
.map-node b { display:block; color:var(--navy); font-size:13px; }
.map-node span { color:var(--muted); font-size:9px; }
.node-a { left:18px; top:88px; border-left:8px solid var(--coral); }.node-a::after { width:58px; right:-58px; top:50%; }
.node-b { right:18px; top:145px; border-right:8px solid var(--aqua); }.node-b::after { width:56px; left:-56px; top:50%; }
.node-c { right:18px; bottom:62px; border-right:8px solid var(--lime); }.node-c::after { width:56px; left:-56px; top:50%; }
.map-axis { position:absolute; left:18px; right:18px; bottom:18px; display:grid; grid-template-columns:repeat(4,1fr); gap:5px; }
.map-axis i { height:8px; background:var(--navy); }.map-axis i:nth-child(2){background:var(--coral)}.map-axis i:nth-child(3){background:var(--aqua)}.map-axis i:nth-child(4){background:var(--lime)}

.section { padding:82px 0; }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:22px; margin-bottom:34px; border-bottom:2px solid var(--navy); }
.section-heading span { padding-bottom:9px; color:var(--coral); font-size:11px; font-weight:900; }
.section-heading h2 { margin:0; padding-bottom:7px; color:var(--navy); font-size:34px; }
.section-heading.light { border-color:#7990a8; }.section-heading.light h2 { color:var(--white); }.section-heading.light span { color:var(--lime); }
.clue-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.clue-grid article { min-width:0; padding:26px; border:1px solid var(--navy); border-top:8px solid var(--coral); }
.clue-grid article:nth-child(2){border-top-color:var(--aqua)}.clue-grid article:nth-child(3){border-top-color:var(--lime)}
.clue-grid article > b { color:var(--muted); font-size:11px; }
.clue-grid h3 { margin:28px 0 7px; font-size:20px; }.clue-grid p { margin:0; color:var(--muted); font-size:14px; }
.preview-section { color:var(--white); background:var(--navy); }
.preview-grid { display:grid; grid-template-columns:1.12fr 1fr 1fr; gap:18px; }
.preview-grid figure { margin:0; color:var(--ink); background:var(--white); border:1px solid #7890a6; }
.preview-grid figure > div { height:420px; display:grid; place-items:center; padding:20px; background:linear-gradient(90deg,transparent 49%,rgba(33,199,199,.12) 49% 51%,transparent 51%); }
.preview-grid img { width:auto; max-width:400px; max-height:380px; object-fit:contain; border:1px solid var(--line); }
.preview-grid figcaption { display:grid; gap:4px; padding:17px; border-top:1px solid var(--navy); }.preview-grid figcaption span { color:var(--muted); font-size:13px; }
.route-section { background:var(--cloud); }
.route-layout { display:grid; grid-template-columns:260px 1fr; gap:56px; }.route-layout .section-heading { display:block; border:0; }.route-layout .section-heading h2 { margin-top:12px; font-size:42px; }
.route-layout ol { margin:0; padding:0; list-style:none; border-top:1px solid var(--navy); }
.route-layout li { display:grid; grid-template-columns:48px 1fr; gap:18px; padding:16px 0; border-bottom:1px solid var(--navy); }.route-layout li > b { color:var(--coral); font-size:22px; }.route-layout h3 { margin:0; font-size:17px; }.route-layout p { margin:3px 0 0; color:var(--muted); font-size:13px; }
.advantage-section { color:var(--white); background:var(--aqua); }
.advantage-grid { display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--navy); }.advantage-grid > div { min-width:0; padding:24px; color:var(--navy); background:var(--white); border-right:1px solid var(--navy); }.advantage-grid > div:last-child{border-right:0}.advantage-grid span { color:var(--coral); font-weight:900; }.advantage-grid b { display:block; margin:25px 0 6px; font-size:19px; }.advantage-grid p { margin:0; color:var(--muted); font-size:13px; }
.faq-layout { display:grid; grid-template-columns:270px 1fr; gap:56px; }.faq-layout .section-heading { display:block; border:0; }.faq-layout .section-heading h2 { margin-top:12px; font-size:42px; }.faq-links { border-top:1px solid var(--navy); }.faq-links a { display:flex; justify-content:space-between; gap:20px; padding:18px 0; border-bottom:1px solid var(--navy); }.faq-links a:hover span { color:var(--coral); }.faq-links b { color:var(--aqua); }
.download-band { padding:50px 0; color:var(--white); background:var(--coral); }.download-inner { display:flex; align-items:center; justify-content:space-between; gap:30px; }.download-inner span { font-size:11px; font-weight:900; }.download-inner h2 { margin:4px 0 2px; font-size:29px; }.download-inner .button { flex:0 0 auto; background:var(--navy); box-shadow:5px 5px 0 var(--aqua); }

.inner-hero { padding:68px 0; color:var(--white); background:var(--navy); border-bottom:10px solid var(--aqua); }.faq-hero { border-bottom-color:var(--coral); }
.inner-grid { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(280px,.7fr); align-items:center; gap:64px; }.inner-code { color:var(--lime); font-size:11px; font-weight:900; }.inner-hero h1 { margin:12px 0; font-size:45px; line-height:1.16; }.inner-hero h1 span { display:block; }.inner-hero p { max-width:700px; margin:0; color:#d4dde7; }
.mini-map { display:grid; grid-template-columns:auto 1fr auto 1fr auto 1fr auto; align-items:center; gap:7px; padding:24px; color:var(--navy); background:var(--white); border:1px solid var(--coral); box-shadow:10px 10px 0 var(--aqua); font-size:11px; font-weight:900; }.mini-map i { height:4px; background:var(--coral); }
.support-map { padding:25px; color:var(--navy); background:var(--white); border:1px solid var(--coral); box-shadow:10px 10px 0 var(--aqua); }.support-map b { display:block; color:var(--coral); font-size:68px; line-height:1; }.support-map span { font-size:11px; font-weight:900; }.support-map div { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; margin-top:24px; }.support-map i { height:8px; background:var(--navy); }.support-map i:nth-child(2){background:var(--coral)}.support-map i:nth-child(3){background:var(--aqua)}.support-map i:nth-child(4){background:var(--lime)}
.article-zone,.questions { padding:76px 0 88px; }.article-grid { display:grid; grid-template-columns:190px minmax(0,1fr); gap:70px; align-items:start; }.article-grid aside { position:sticky; top:96px; display:grid; border-top:4px solid var(--coral); }.article-grid aside b,.article-grid aside a { padding:10px 2px; border-bottom:1px solid var(--line); }.article-grid aside a { color:var(--muted); font-size:13px; }
.article-grid article section { scroll-margin-top:96px; padding-bottom:34px; margin-bottom:38px; border-bottom:1px solid var(--line); }.article-grid article section > span { color:var(--aqua); font-size:11px; font-weight:900; }.article-grid h2 { margin:5px 0 14px; color:var(--navy); font-size:27px; }.article-grid p { margin:0 0 13px; color:#405062; }.article-grid article a { color:var(--coral); font-weight:900; border-bottom:1px solid currentColor; }
.question-list { border-top:2px solid var(--navy); }.question-list details { border-bottom:1px solid var(--navy); }.question-list summary { list-style:none; display:grid; grid-template-columns:54px minmax(0,1fr); gap:14px; align-items:center; padding:18px 0; cursor:pointer; font-weight:900; }.question-list summary::-webkit-details-marker{display:none}.question-list summary::after{content:"+";grid-column:3;font-size:22px}.question-list details[open] summary::after{content:"−"}.question-list summary b{color:var(--coral)}.question-list details>div{padding:0 70px 21px;color:#465667}
.support-end { margin-top:48px; padding:28px; display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:14px; align-items:center; color:var(--white); background:var(--navy); }.support-end h2 { margin:0; font-size:25px; }.support-end p { margin:4px 0 0; color:#ccd7e1; }
.site-footer { padding:28px 0; color:#c6d2dd; background:#08172b; text-align:center; }.site-footer .shell { display:grid; gap:5px; justify-items:center; }.site-footer p { margin:0; text-align:center; font-size:12px; }.site-footer span { font-size:11px; }

@media(max-width:900px){.site-nav{position:absolute;top:70px;left:20px;right:20px;display:none;padding:13px;color:var(--navy);background:var(--white);border:2px solid var(--navy);box-shadow:6px 6px 0 var(--aqua)}.site-nav.open{display:grid;gap:3px}.site-nav a,.site-nav .download-link{padding:10px;border:0}.menu-toggle{display:block}.map-hero-grid{grid-template-columns:1fr;gap:28px}.clue-grid,.preview-grid{grid-template-columns:1fr}.route-layout,.faq-layout{grid-template-columns:1fr;gap:22px}.inner-grid,.article-grid{grid-template-columns:1fr;gap:34px}.article-grid aside{position:static;grid-template-columns:1fr 1fr}.article-grid aside b{grid-column:1/-1}.support-end{grid-template-columns:1fr 1fr}.support-end>div{grid-column:1/-1}}
@media(max-width:620px){.shell,.header-inner{width:min(100% - 28px,1170px)}.header-inner{min-height:64px}.site-nav{top:64px;left:14px;right:14px}.map-hero{background:var(--white)}.map-hero-grid{min-height:0;padding:20px 0 28px;gap:17px}.hero-copy h1{margin:12px 0 9px;font-size:36px}.hero-copy>p{font-size:14px;line-height:1.55}.hero-actions{margin-top:14px}.hero-actions .button{flex:1 1 145px}.legend{margin-top:14px}.relation-map{min-height:270px;padding:10px;box-shadow:7px 7px 0 var(--aqua)}.map-screen{width:140px;height:216px}.map-screen img{width:116px;max-height:200px}.map-node{width:82px;padding:5px}.map-node b{font-size:11px}.map-node span{font-size:8px}.node-a{left:10px;top:64px}.node-a::after{width:34px;right:-34px}.node-b{right:10px;top:90px}.node-b::after{width:34px;left:-34px}.node-c{right:10px;bottom:44px}.node-c::after{width:34px;left:-34px}.map-axis{left:10px;right:10px;bottom:10px}.section{padding:56px 0}.section-heading{align-items:start;flex-direction:column;gap:0}.section-heading h2{font-size:29px}.clue-grid article{padding:21px}.clue-grid h3{margin-top:15px}.preview-grid figure>div{height:360px}.preview-grid img{max-height:324px}.advantage-grid{grid-template-columns:1fr}.advantage-grid>div{border-right:0;border-bottom:1px solid var(--navy)}.advantage-grid>div:last-child{border-bottom:0}.download-inner{align-items:stretch;flex-direction:column}.inner-hero{padding:48px 0}.inner-hero h1{font-size:33px}.mini-map{padding:18px}.article-zone,.questions{padding:54px 0 64px}.article-grid h2{font-size:24px}.question-list summary{grid-template-columns:38px minmax(0,1fr) auto;gap:8px;font-size:15px}.question-list details>div{padding:0 8px 20px 46px}.support-end{grid-template-columns:1fr}.support-end>div{grid-column:auto}}