:root { --ink:#19233f; --muted:#68718a; --navy:#17224c; --blue:#4b63d8; --violet:#7458d9; --cyan:#4bd4e8; --paper:#f6f8ff; --line:rgba(25,35,63,.13); --yellow:#ffdc72; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif; line-height:1.8; }
a { color:inherit; }
.skip-link { position:fixed; left:1rem; top:-4rem; z-index:10; padding:.6rem 1rem; border-radius:9px; color:var(--navy); background:var(--yellow); font-weight:800; }
.skip-link:focus { top:1rem; }
.article-header { position:sticky; top:0; z-index:5; border-bottom:1px solid rgba(255,255,255,.12); background:rgba(23,34,76,.95); backdrop-filter:blur(14px); }
.header-inner { width:min(1120px,calc(100% - 36px)); min-height:70px; margin:auto; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.brand { display:inline-flex; align-items:center; gap:.65rem; color:#fff; text-decoration:none; font-weight:900; }
.brand-mark { display:grid; place-items:center; width:38px; height:38px; border-radius:11px; color:var(--navy); background:var(--yellow); font-size:1.05rem; }
.header-nav { display:flex; align-items:center; gap:.25rem; }
.header-nav a { padding:.45rem .7rem; border-radius:9px; color:rgba(255,255,255,.78); font-size:.9rem; text-decoration:none; }
.header-nav a:hover,.header-nav a:focus-visible { color:#fff; background:rgba(255,255,255,.12); }
.header-nav .download-link { color:var(--navy); background:var(--yellow); font-weight:900; }
a:focus-visible { outline:3px solid var(--cyan); outline-offset:3px; }
.article-hero { padding:clamp(3.5rem,8vw,6.5rem) 0 3.8rem; color:#fff; background:linear-gradient(135deg,#17224c,#5142a8 65%,#2e98bf); }
.article-wrap { width:min(1120px,calc(100% - 36px)); margin:auto; }
.article-hero .article-wrap { max-width:860px; }
.eyebrow { margin:0 0 .8rem; color:#a7f0f6; font-size:.78rem; font-weight:900; letter-spacing:.14em; text-transform:uppercase; }
h1,h2,h3 { line-height:1.22; letter-spacing:-.035em; }
h1 { max-width:800px; margin:0 0 1rem; font-size:clamp(2.2rem,5vw,4.4rem); }
.hero-summary { max-width:720px; margin:0; color:rgba(255,255,255,.8); font-size:1.06rem; }
.breadcrumb { padding:1.1rem 0; color:var(--muted); font-size:.85rem; }
.breadcrumb a { color:var(--blue); text-decoration:none; }
.article-layout { display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:clamp(2rem,6vw,5rem); align-items:start; padding-bottom:5rem; }
.article-content { min-width:0; padding:clamp(1.4rem,4vw,2.5rem); border:1px solid var(--line); border-radius:18px; background:#fff; box-shadow:0 18px 50px rgba(41,53,112,.07); }
.article-content h2 { margin:2.2rem 0 .7rem; font-size:clamp(1.5rem,3vw,2.1rem); }
.article-content h2:first-child { margin-top:0; }
.article-content h3 { margin:1.5rem 0 .45rem; font-size:1.2rem; }
.article-content p { margin:0 0 1rem; color:#3d4966; }
.article-content ul,.article-content ol { margin:.4rem 0 1.3rem; padding-left:1.35rem; color:#3d4966; }
.article-content li { margin:.35rem 0; }
.article-content blockquote { margin:1.4rem 0; padding:1rem 1.2rem; border-left:4px solid var(--cyan); border-radius:0 10px 10px 0; background:#eefaff; color:#37546a; }
.notice { margin:1.4rem 0; padding:1rem 1.15rem; border:1px solid #b3cdf5; border-radius:12px; background:#eff5ff; color:#334a74; }
.article-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.article-card { display:flex; flex-direction:column; min-height:220px; padding:1.25rem; border:1px solid var(--line); border-radius:15px; background:#fff; }
.article-tag { display:inline-flex; align-self:flex-start; margin-bottom:.85rem; padding:.2rem .5rem; border-radius:99px; color:#3d4ea6; background:#e5e9ff; font-size:.74rem; font-weight:800; }
.article-card h3 { margin:0 0 .45rem; font-size:1.08rem; }
.article-card p { margin:0 0 1rem; color:var(--muted); font-size:.9rem; }
.article-card a { margin-top:auto; color:var(--blue); font-weight:900; text-decoration:none; }
.article-card a:hover { text-decoration:underline; }
.article-aside { position:sticky; top:100px; }
.aside-card { padding:1.2rem; border:1px solid var(--line); border-radius:15px; background:#edf0ff; }
.aside-card + .aside-card { margin-top:1rem; }
.aside-card h2 { margin:0 0 .7rem; font-size:1.08rem; }
.aside-card p { margin:0; color:var(--muted); font-size:.9rem; }
.aside-card ul { margin:0; padding:0; list-style:none; }
.aside-card li + li { margin-top:.35rem; }
.aside-card a { color:#3d4ea6; font-size:.9rem; font-weight:800; text-decoration:none; }
.article-footer { padding:2rem 0; color:rgba(255,255,255,.7); background:#111b42; font-size:.82rem; }
.article-footer .article-wrap { display:flex; justify-content:space-between; gap:1rem; }
.article-footer a { color:#fff; }
@media (max-width:820px) { .article-layout { grid-template-columns:1fr; } .article-aside { position:static; display:grid; grid-template-columns:1fr 1fr; gap:1rem; } .aside-card + .aside-card { margin-top:0; } }
@media (max-width:560px) { .header-inner { width:min(100% - 28px,1120px); } .brand span:last-child { display:none; } .header-nav a:not(.download-link) { display:none; } .article-wrap { width:min(100% - 28px,1120px); } .article-layout { padding-bottom:3rem; } .article-aside { display:block; } .aside-card + .aside-card { margin-top:1rem; } .article-footer .article-wrap { display:block; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }