@font-face { font-family: TideDisplay; src: url('/skin/webfonts/woff2/AlimamaShuHeiTi-Bold.woff2') format('woff2'); font-display: swap; }
:root { --ink:#17142c; --tide:#29206a; --tide-deep:#17133d; --lilac:#a99bf0; --foam:#f5f6fb; --line:#dfdfeb; --muted:#6f7081; --gold:#f0b229; --white:#fff; --max:1180px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--white); font-family:"Microsoft YaHei","PingFang SC",Arial,sans-serif; font-size:15px; line-height:1.75; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
button { border:0; font:inherit; cursor:pointer; }
.container { width:min(var(--max),calc(100% - 40px)); margin:0 auto; }
.site-header { position:sticky; top:0; z-index:30; height:76px; background:rgba(255,255,255,.98); border-bottom:1px solid var(--line); }
.nav-shell { display:flex; height:100%; align-items:center; gap:28px; }
.brand,.footer-brand { display:flex; align-items:center; gap:10px; }
.brand { min-width:178px; }
.brand img { width:48px; height:48px; border-radius:50%; object-fit:cover; }
.brand b,.brand small { display:block; }
.brand b { color:var(--tide-deep); font-family:TideDisplay,"Microsoft YaHei",sans-serif; font-size:19px; line-height:1.15; }
.brand small { margin-top:2px; color:#77729b; font-size:10px; font-weight:700; letter-spacing:.08em; }
.main-nav { display:flex; height:100%; align-items:stretch; flex:1; gap:4px; }
.main-nav a { position:relative; display:flex; padding:0 12px; align-items:center; color:#505064; font-size:14px; font-weight:700; white-space:nowrap; }
.main-nav a:hover,.main-nav a.active { color:var(--tide); }
.main-nav a.active::after { position:absolute; right:12px; bottom:13px; left:12px; height:3px; background:var(--gold); content:""; }
.nav-actions { display:flex; align-items:center; gap:14px; }
.nav-search { color:var(--muted); border-bottom:1px solid #aaa9b8; font-size:12px; }
.nav-listen,.button { display:inline-flex; min-height:42px; padding:10px 17px; align-items:center; justify-content:center; color:var(--white); background:var(--tide); border:1px solid var(--tide); border-radius:3px; font-size:14px; font-weight:700; }
.nav-listen span { margin-left:9px; color:var(--gold); }
.nav-listen:hover,.button:hover { color:var(--white); background:var(--tide-deep); }
.nav-toggle,.nav-overlay { display:none; }
.section-tag { margin:0 0 10px; color:#746cc2; font-size:12px; font-weight:800; letter-spacing:.08em; }
.page-hero { padding:70px 20px 58px; color:var(--white); background:var(--tide-deep); text-align:center; }
.page-hero h1 { margin:0; font-family:TideDisplay,"Microsoft YaHei",sans-serif; font-size:38px; line-height:1.3; }
.show-hero-label { margin:0; font-family:TideDisplay,"Microsoft YaHei",sans-serif; font-size:30px; line-height:1.3; }
.page-hero p:not(.section-tag) { max-width:640px; margin:11px auto 0; color:#d3d1eb; }
.breadcrumb { display:flex; width:min(var(--max),calc(100% - 40px)); margin:0 auto; padding:14px 0; align-items:center; flex-wrap:wrap; gap:7px; color:#777789; border-bottom:1px solid var(--line); font-size:13px; }
.breadcrumb a:hover { color:var(--tide); }
.content-section { padding:62px 0 82px; }
.content-grid { display:grid; grid-template-columns:minmax(0,1fr) 290px; gap:50px; }
.article-list { border-top:2px solid var(--tide); }
.list-item { border-bottom:1px solid var(--line); }
.list-item > a { display:grid; padding:23px 0; grid-template-columns:200px minmax(0,1fr); gap:24px; align-items:stretch; }
.list-thumb { display:flex; width:200px; height:126px; align-items:flex-end; justify-content:flex-start; padding:12px; color:var(--white); background:var(--tide); font-family:TideDisplay,"Microsoft YaHei",sans-serif; font-size:17px; }
.list-thumb img { width:100%; height:100%; object-fit:cover; }
.list-copy { min-width:0; }
.list-item h2 { display:-webkit-box; min-height:2.9em; margin:3px 0 7px; overflow:hidden; font-size:19px; line-height:1.45; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.list-item p { margin:0; color:var(--muted); }
.list-summary { display:-webkit-box; min-height:3em; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.meta { margin:0; color:#858398; font-size:12px; }
.sidebar { padding-left:28px; border-left:1px solid var(--line); }
.sidebar h2 { margin:0 0 12px; font-family:TideDisplay,"Microsoft YaHei",sans-serif; font-size:20px; }
.side-item { display:block; padding:13px 0; border-bottom:1px solid var(--line); font-size:13px; font-weight:700; line-height:1.6; }
.side-item span { display:block; margin-top:4px; color:#878493; font-size:12px; font-weight:400; }
.article header { padding-bottom:24px; border-bottom:1px solid var(--line); }
.article h1 { margin:7px 0 10px; font-family:TideDisplay,"Microsoft YaHei",sans-serif; font-size:33px; line-height:1.4; }
.article-lead { color:var(--muted); font-size:17px; }
.article-body { color:#353543; font-size:16px; }
.article-body img { height:auto; margin:24px auto; }
.article-body h2,.article-body h3 { margin-top:30px; }
.article-pager { display:flex; margin-top:46px; border-top:2px solid var(--tide); border-bottom:1px solid var(--line); }
.article-pager a { display:flex; width:50%; min-height:92px; padding:17px 20px; flex-direction:column; justify-content:center; gap:4px; }
.article-pager a + a { border-left:1px solid var(--line); text-align:right; }
.article-pager small { color:#77729b; font-size:12px; }.article-pager span { overflow:hidden; font-size:14px; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }.article-pager a:hover span{color:var(--tide)}
.faq-item { border-bottom:1px solid var(--line); }
.faq-question { display:flex; width:100%; padding:19px 0; align-items:center; justify-content:space-between; color:var(--ink); background:transparent; text-align:left; font-weight:700; }
.faq-question b { color:var(--tide); font-size:20px; font-weight:400; }
.faq-answer { max-height:0; overflow:hidden; color:var(--muted); transition:max-height .2s,padding .2s; }
.faq-answer a { color:var(--tide); font-weight:700; }
.faq-item.active .faq-answer { max-height:340px; padding:0 0 19px; }
.tabs { display:flex; padding:22px 0; align-items:center; flex-wrap:wrap; gap:9px; border-bottom:1px solid var(--line); }
.tabs a { padding:7px 12px; color:var(--muted); background:var(--foam); border:1px solid var(--line); border-radius:3px; font-size:13px; }
.tabs a.active,.tabs a:hover { color:var(--white); background:var(--tide); border-color:var(--tide); }
.download-box,.about-copy { max-width:850px; margin:0 auto; }
.long-page { max-width:960px; margin:0 auto; }.long-lead { max-width:790px; margin:0 0 48px; }.long-lead h2 { margin:0; font-family:TideDisplay,"Microsoft YaHei",sans-serif; font-size:35px; line-height:1.35; }.long-lead>p:not(.section-tag) { color:var(--muted); font-size:16px; line-height:2; }
.feature-rail { border-top:2px solid var(--tide); }.feature-rail article { display:flex; padding:27px 0; gap:28px; border-bottom:1px solid var(--line); }.feature-rail article>b { width:42px; flex:0 0 42px; color:var(--tide); font-size:13px; }.feature-rail h3 { margin:0 0 8px; font-size:20px; }.feature-rail p { margin:0; color:var(--muted); line-height:1.95; }
.feature-band { display:flex; margin:62px 0; padding:43px 46px; align-items:flex-start; gap:60px; color:var(--white); background:var(--tide); }.feature-band>div { flex:1; }.feature-band .section-tag { color:#d8d5fc; }.feature-band h2 { margin:0; font-family:TideDisplay,"Microsoft YaHei",sans-serif; font-size:31px; line-height:1.35; }.feature-band p:not(.section-tag) { margin:0; color:#dedcf0; line-height:1.9; }.feature-band .button { margin-top:20px; color:var(--tide-deep); background:var(--gold); border-color:var(--gold); }
.long-grid { display:flex; gap:1px; background:var(--line); }.long-grid article { padding:23px; flex:1; background:#f7f7fa; }.long-grid h3 { margin:0 0 8px; color:var(--tide); font-size:18px; }.long-grid p { margin:0; color:var(--muted); font-size:14px; line-height:1.85; }.download-guide { margin-top:55px; }.legal { max-width:960px; }.legal-intro { padding:24px 28px; color:#4a4760; background:#f1f0f8; border-left:4px solid var(--gold); font-size:16px; line-height:1.95; }
.download-box { display:grid; padding:40px; grid-template-columns:1fr 180px; align-items:center; gap:45px; background:var(--foam); border-left:5px solid var(--gold); }
.download-box h2,.about-copy h2 { margin:0; font-family:TideDisplay,"Microsoft YaHei",sans-serif; font-size:30px; }
.search-row { display:flex; margin-top:18px; gap:8px; }.search-row input { min-width:0; height:42px; padding:0 12px; flex:1; color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:3px; font:inherit; }
.download-box p,.about-copy p { color:var(--muted); }
.download-box img { width:160px; background:#fff; }
.legal { max-width:850px; margin:0 auto; color:#4d4c5b; }
.legal h2 { margin-top:32px; color:var(--ink); font-size:21px; }
.pagebar,.xrpagination { margin-top:34px; }
.pagination,.xrpagination { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:6px; }
.page-item,.xrpagination a,.xrpagination span { display:inline-flex; min-width:36px; height:36px; padding:0 10px; align-items:center; justify-content:center; color:var(--muted); border:1px solid var(--line); border-radius:3px; font-size:12px; }
.page-num-current,.xrpagination .active { color:var(--white); background:var(--tide); border-color:var(--tide); }
.site-footer { color:#cbc9dc; background:#16132e; }
.footer-horizon { color:var(--white); background:var(--tide); border-bottom:1px solid #5e59a2; }
.horizon-grid { display:flex; min-height:250px; padding:44px 0; align-items:center; justify-content:space-between; gap:30px; }
.footer-horizon .section-tag { color:#dedcff; }
.footer-horizon h2 { margin:0; font-family:TideDisplay,"Microsoft YaHei",sans-serif; font-size:34px; line-height:1.3; }
.footer-horizon p:not(.section-tag) { color:#d9d7ef; }
.horizon-button { display:inline-flex; min-height:46px; padding:11px 17px; align-items:center; color:var(--tide-deep); background:var(--gold); border-radius:3px; font-weight:800; white-space:nowrap; }
.horizon-button span { margin-left:13px; }
.footer-grid { display:grid; padding:48px 0 38px; grid-template-columns:2fr repeat(3,1fr); gap:36px; }
.footer-brand img { width:46px; height:46px; border-radius:50%; }
.footer-brand span { color:var(--white); font-family:TideDisplay,"Microsoft YaHei",sans-serif; font-size:18px; }
.footer-intro p { max-width:310px; color:#a6a2bb; font-size:13px; }
.footer-grid > div > b { display:block; margin:4px 0 12px; color:var(--white); font-size:14px; }
.footer-grid > div > a:not(.footer-brand) { display:block; margin:7px 0; color:#aaa6bf; font-size:12px; }
.footer-grid a:hover { color:var(--gold); }
.footer-bottom { display:flex; padding:17px 0; justify-content:space-between; gap:18px; color:#8e8aa2; border-top:1px solid #36324c; font-size:11px; }
.back-top { position:fixed; right:20px; bottom:20px; z-index:22; display:none; width:40px; height:40px; color:var(--white); background:var(--tide); border-radius:50%; }
.back-top.visible { display:block; }
.mobile-listen { display:none; }
@media (max-width:900px) { .brand{min-width:150px}.main-nav a{padding:0 7px;font-size:13px}.nav-actions{gap:9px}.content-grid{grid-template-columns:1fr}.sidebar{padding:28px 0 0;border-top:1px solid var(--line);border-left:0}.footer-grid{grid-template-columns:2fr 1fr 1fr}.footer-grid>div:last-child{display:none} }
@media (max-width:720px) { body{padding-bottom:68px}.site-header{height:66px}.brand img{width:42px;height:42px}.brand b{font-size:17px}.brand small,.nav-search,.nav-listen{display:none}.nav-actions{margin-left:auto}.nav-toggle{display:block;width:38px;height:38px;padding:7px;background:transparent}.nav-toggle i{display:block;width:22px;height:2px;margin:5px auto;background:var(--ink)}.main-nav{position:fixed;top:66px;right:0;left:0;z-index:31;display:none;height:auto;max-height:calc(100vh - 66px);padding:10px 20px 20px;overflow:auto;background:var(--white);border-bottom:3px solid var(--gold)}.main-nav.open{display:block}.main-nav a{display:block;padding:12px 2px;border-bottom:1px solid var(--line);font-size:15px}.main-nav a.active::after{display:none}.nav-overlay.active{position:fixed;inset:66px 0 0;z-index:29;display:block;background:rgba(13,10,30,.4)}.page-hero{padding:48px 20px 42px}.page-hero h1{font-size:29px}.content-section{padding:48px 0 60px}.list-item>a{grid-template-columns:1fr;gap:16px}.list-thumb{width:100%;height:170px}.list-summary{min-height:0;-webkit-line-clamp:2}.footer-grid{grid-template-columns:1fr 1fr;gap:28px}.footer-intro{grid-column:1/-1}.footer-bottom,.horizon-grid,.feature-band{align-items:flex-start;flex-direction:column}.feature-band{gap:22px;padding:30px}.long-grid{flex-direction:column}.article-pager{flex-direction:column}.article-pager a{width:100%;min-height:74px}.article-pager a + a{border-top:1px solid var(--line);border-left:0;text-align:left}.mobile-listen{position:fixed;right:0;bottom:0;left:0;z-index:25;display:block;padding:9px 14px calc(9px + env(safe-area-inset-bottom));background:var(--white);border-top:1px solid var(--line)}.mobile-listen a{display:block;padding:10px;color:var(--white);background:var(--tide);border-radius:3px;font-size:15px;font-weight:700;text-align:center}.back-top{bottom:86px} }
@media (max-width:500px) { .container,.breadcrumb{width:calc(100% - 28px)}.download-box{padding:25px;grid-template-columns:1fr}.download-box img{display:none}.article h1{font-size:26px}.footer-grid{grid-template-columns:1fr}.footer-intro{grid-column:auto}.footer-grid>div:last-child{display:block} }