:root {
    --page-ink:#17204d;
    --page-muted:#69728f;
    --page-soft:#f4f6fb;
    --page-line:#e3e7f2;
    --page-purple:#3927c8;
    --page-cyan:#35b7d0;
    --page-deep:#101b4c
}
.page-main {
    /*padding-top:104px;*/
    background:#fff;
    color:var(--page-ink);
    overflow:hidden
}
.page-container {
    width:1100px;
    max-width:calc(100% - 40px);
    margin:0 auto
}
.page-header {
    background:var(--white-back);
    border-bottom:1px solid var(--nav-border)
}
.page-header .logo-top {
    display:none!important
}
.page-header .logo-scrolled {
    display:block!important
}
.page-header .menu {
    color:var(--blue-text)
}
.page-header .lang-btn {
    color:var(--blue-text)
}
.content-hero {
    color:#fff;
    background:linear-gradient(118deg,#151c5d 0%,#3720b5 58%,#2b8dc9 100%);
    position:relative;
    overflow:hidden
}
.content-hero:after {
    content:"";
    background:linear-gradient(135deg,#ffffff14 25%,transparent 25%) 0 0/28px 28px;
    width:330px;
    height:330px;
    opacity:.35;
    position:absolute;
    right:-55px;
    bottom:-155px;
    transform:rotate(25deg)
}
.hero-inner {
    min-height:530px;
    align-items:center;
    display:flex;
    justify-content:space-between;
    position:relative;
    z-index:1
}
.eyebrow {
    color:#aebdff;
    letter-spacing:.16em;
    font-size:11px;
    font-weight:700;
    line-height:1.8
}
.eyebrow.blue {
    color:#3e57d2
}
.hero-inner h1 {
    letter-spacing:-.04em;
    margin:17px 0 22px;
    font-size:54px;
    font-weight:500;
    line-height:1.17
}
.hero-inner h1 em {
    color:#85e6ee;
    font-style:normal
}
.hero-inner p {
    color:#d8dcf4;
    max-width:570px;
    margin:0;
    font-size:17px;
    line-height:1.9
}
.hero-link,.solid-link {
    color:#fff;
    border:1px solid #ffffff80;
    border-radius:30px;
    align-items:center;
    margin-top:32px;
    padding:12px 21px;
    font-size:14px;
    text-decoration:none;
    display:inline-flex;
    transition:all .25s
}
.hero-link span,.solid-link span,.text-link span {
    margin-left:14px;
    font-size:18px
}
.hero-link:hover {
    background:#fff;
    color:var(--page-purple)
}
.hero-orbit {
    width:310px;
    height:310px;
    margin-right:75px;
    position:relative
}
.hero-orbit-ring {
    border:1px solid #ffffff4d;
    border-radius:50%;
    position:absolute
}
.ring-one {
    inset:12px;
    transform:rotate(22deg) scaleX(.72)
}
.ring-two {
    inset:36px;
    transform:rotate(-40deg) scaleX(.72)
}
.hero-orbit-core {
    background:linear-gradient(145deg,#84edf0,#4b63e4);
    box-shadow:0 18px 50px #10154f99;
    border:7px solid #ffffff24;
    border-radius:50%;
    align-items:center;
    justify-content:center;
    width:116px;
    height:116px;
    color:#fff;
    font-size:31px;
    font-weight:700;
    display:flex;
    position:absolute;
    top:97px;
    left:97px
}
.orbit-dot {
    background:#8df0ee;
    border:5px solid #ffffff33;
    border-radius:50%;
    width:21px;
    height:21px;
    position:absolute;
    box-shadow:0 0 20px #81edf0
}
.dot-one {
    top:24px;
    right:47px
}
.dot-two {
    bottom:37px;
    left:35px
}
.blog-list-section,.download-section {
    padding:78px 0 94px
}
.section-heading {
    align-items:end;
    justify-content:space-between;
    margin-bottom:30px;
    display:flex
}
.section-heading h2 {
    color:var(--page-ink);
    letter-spacing:-.03em;
    margin:9px 0 0;
    font-size:34px;
    font-weight:500
}
.section-heading>p {
    color:var(--page-muted);
    margin:0 0 4px;
    font-size:14px
}
.blog-grid {
    grid-template-columns:repeat(3,1fr);
    gap:24px;
    display:grid
}
.article-card {
    background:#fff;
    border:1px solid #e8eaf3;
    box-shadow:0 12px 30px #1c28600d;
    color:inherit;
    text-decoration:none;
    transition:transform .25s,box-shadow .25s;
    display:block
}
.article-card:hover {
    box-shadow:0 18px 36px #1c28601f;
    transform:translateY(-6px)
}
.article-card-media {
    height:174px;
    overflow:hidden;
    position:relative
}
.article-card-media:after {
    content:"";
    background:linear-gradient(180deg,transparent,#131c5073);
    position:absolute;
    inset:0
}
.article-card-media img {
    object-fit:cover;
    width:100%;
    height:100%;
    transition:transform .45s
}
.article-card:hover .article-card-media img {
    transform:scale(1.045)
}
.article-card-media>span {
    z-index:1;
    color:#fff;
    background:#1e2ac0cc;
    border-radius:20px;
    padding:6px 11px;
    font-size:11px;
    position:absolute;
    bottom:14px;
    left:16px
}
.article-card-body {
    padding:22px 22px 25px
}
.article-card-meta {
    color:#8a92ad;
    align-items:center;
    gap:9px;
    font-size:11px;
    display:flex
}
.article-card-meta i {
    background:#bdc4d6;
    border-radius:50%;
    width:3px;
    height:3px;
    display:inline-block
}
.article-card h3 {
    color:var(--page-ink);
    margin:13px 0 10px;
    font-size:21px;
    font-weight:500;
    line-height:1.4
}
.article-card p {
    color:var(--page-muted);
    min-height:48px;
    margin:0;
    font-size:13px;
    line-height:1.75
}
.read-more {
    color:#354ad0;
    margin-top:19px;
    font-size:13px;
    font-weight:700;
    display:block
}
.read-more b {
    margin-left:8px;
    font-size:17px;
    font-weight:400
}
.topic-strip {
    background:#f4f6ff;
    padding:46px 0
}
.topic-inner {
    align-items:center;
    justify-content:space-between;
    display:flex
}
.topic-inner h2 {
    color:var(--page-ink);
    margin:8px 0 0;
    font-size:28px;
    font-weight:500
}
.solid-link {
    background:var(--page-purple);
    border-color:var(--page-purple);
    margin-top:0
}
.solid-link:hover {
    background:#2b1aa0;
    border-color:#2b1aa0
}
.download-hero .hero-inner {
    min-height:465px
}
.download-visual {
    width:360px;
    height:355px;
    position:relative
}
.download-visual .visual-glow {
    background:#84edf04d;
    border-radius:50%;
    filter:blur(5px);
    width:250px;
    height:250px;
    position:absolute;
    top:48px;
    left:28px
}
.download-visual img {
    z-index:1;
    object-fit:contain;
    height:360px;
    position:absolute;
    bottom:-11px;
    left:7px;
    filter:drop-shadow(14px 20px 22px #080b364d)
}
.download-grid {
    grid-template-columns:repeat(2,1fr);
    gap:24px;
    display:grid
}
.download-card {
    border:1px solid var(--page-line);
    border-radius:3px;
    min-height:270px;
    padding:37px 38px;
    align-items:flex-start;
    gap:27px;
    display:flex;
    transition:box-shadow .25s,transform .25s
}
.download-card:hover {
    box-shadow:0 16px 36px #1c28601a;
    transform:translateY(-4px)
}
.ios-card {
    background:linear-gradient(135deg,#f7f8ff,#fff)
}
.android-card {
    background:linear-gradient(135deg,#f4ffff,#fff)
}
.platform-icon {
    border-radius:25px;
    flex:0 0 56px;
    align-items:center;
    justify-content:center;
    width:56px;
    height:56px;
    color:#fff;
    font-size:15px;
    font-weight:700;
    letter-spacing:.03em;
    display:flex
}
.icon-apple {
    background:#1b234e
}
.icon-android {
    background:#55b993;
    font-size:12px
}
.platform-label {
    color:#7680a1;
    letter-spacing:.15em;
    font-size:10px;
    font-weight:700
}
.platform-copy h3 {
    color:var(--page-ink);
    margin:11px 0 10px;
    font-size:27px;
    font-weight:500
}
.platform-copy p {
    color:var(--page-muted);
    max-width:345px;
    margin:0;
    font-size:14px;
    line-height:1.8
}
.platform-link {
    color:#3d53d4;
    margin-top:23px;
    font-size:17px;
    font-weight:700;
    text-decoration:none;
    display:inline-block
}
.platform-link span {
    margin-left:10px;
    font-size:17px
}
.download-notice {
    background:#fff9ed;
    border:1px solid #f1dfb2;
    margin-top:26px;
    padding:20px 24px;
    align-items:flex-start;
    gap:14px;
    display:flex
}
.notice-mark {
    background:#f0aa35;
    border-radius:50%;
    flex:0 0 22px;
    width:22px;
    height:22px;
    color:#fff;
    text-align:center;
    font-size:14px;
    font-weight:700;
    line-height:22px
}
.download-notice strong {
    color:#7e5c1c;
    font-size:14px
}
.download-notice p {
    color:#8e7443;
    margin:5px 0 0;
    font-size:13px;
    line-height:1.7
}
.article-page {
    padding:33px 0 90px
}
.breadcrumb {
    color:#8992af;
    align-items:center;
    gap:10px;
    margin-bottom:27px;
    font-size:13px;
    display:flex
}
.breadcrumb a {
    color:#4e61ce;
    text-decoration:none
}
.breadcrumb b {
    color:#8992af;
    font-weight:400
}
.article-shell {
    background:#fff;
    border:1px solid #e5e8f2;
    max-width:880px;
    margin:50px auto;
    padding:53px 78px 70px;
    box-shadow:0 15px 50px #1c28600d
}
.article-kicker {
    color:#3d51cf;
    letter-spacing:.12em;
    font-size:11px;
    font-weight:700
}
.article-kicker i {
    background:#bbc3dd;
    border-radius:50%;
    vertical-align:middle;
    width:3px;
    height:3px;
    margin:0 9px;
    display:inline-block
}
.article-shell h1 {
    color:var(--page-ink);
    letter-spacing:-.04em;
    margin:17px 0 19px;
    font-size:43px;
    font-weight:500;
    line-height:1.23;
    text-align: center;
}
.article-lead {
    color:#68728e;
    border-left:3px solid #51cbd0;
    margin:0 0 31px;
    padding-left:16px;
    font-size:17px;
    line-height:1.8
}
.article-cover {
    object-fit:cover;
    background:#edf0fc;
    width:100%;
    height:280px;
    margin-bottom:36px
}
.article-body {
    color:#4e5873;
    font-size:16px;
    line-height:2
}
.article-body h2 {
    color:var(--page-ink);
    margin:34px 0 11px;
    font-size:25px;
    font-weight:500;
    line-height:1.4
}
.article-body p {
    margin:0 0 16px
}
.article-body ul,.article-body ol {
    margin:7px 0 22px;
    padding-left:24px
}
.article-body li {
    margin:5px 0;
    padding-left:4px
}
.article-body blockquote {
    background:#f4f6ff;
    border-left:3px solid #495dd9;
    color:#3b4a93;
    margin:27px 0;
    padding:17px 20px;
    font-size:16px;
    line-height:1.8
}
.article-note {
    border-top:1px solid #e3e7f2;
    color:#9aa2b8!important;
    margin-top:38px!important;
    padding-top:17px;
    font-size:13px
}
.check-list {
    border:1px solid #e1e5f2;
    margin:16px 0 27px
}
.check-list>div {
    border-bottom:1px solid #e1e5f2;
    align-items:center;
    gap:16px;
    padding:14px 18px;
    display:flex
}
.check-list>div:last-child {
    border-bottom:0
}
.check-list b {
    color:#465cda;
    letter-spacing:.08em;
    font-size:12px
}
.check-list span {
    color:#606b86;
    font-size:14px
}
.related-section {
    margin: 74px auto;
    width: 1100px;
}
.related-grid {
    grid-template-columns:repeat(3,1fr)
}
.related-grid .article-card-media {
    height:135px
}
.related-grid .article-card h3 {
    font-size:18px
}
.related-grid .article-card p {
    min-height:0
}
.text-link {
    color:#4359d2;
    font-size:13px;
    font-weight:700;
    text-decoration:none
}
.page-site-footer {
    background:#000e2e
}
.page-site-footer .down-btns .btn {
    cursor:pointer
}
.page-site-footer .down-btns .btn:hover {
    background:#fff;
    color:#1d2b71
}
.page-site-footer .down-btns .btn:hover .btn-icon {
    color:#1d2b71
}
@media (width<=768px) {
    .page-main {
        padding-top:0px
    }
    .page-container {
        max-width:calc(100% - 32px)
    }
    .hero-inner {
        min-height:500px;
        padding:56px 0 48px
    }
    .hero-inner h1 {
        font-size:38px
    }
    .hero-inner p {
        font-size:15px
    }
    .hero-orbit {
        display:none
    }
    .download-visual {
        display:none
    }
    .blog-list-section,.download-section {
        padding:54px 0 64px
    }
    .section-heading {
        align-items:flex-start;
        gap:14px;
        flex-direction:column
    }
    .section-heading h2 {
        font-size:29px
    }
    .blog-grid,.download-grid {
        grid-template-columns:1fr
    }
    .article-card-media {
        height:185px
    }
    .topic-inner {
        align-items:flex-start;
        gap:22px;
        flex-direction:column
    }
    .topic-inner h2 {
        font-size:24px
    }
    .article-page {
        padding-top:23px
    }
    .article-shell {
        padding:31px 20px 42px
    }
    .article-shell h1 {
        font-size:32px
    }
    .article-lead {
        font-size:15px
    }
    .article-cover {
        height:190px;
        margin-bottom:24px
    }
    .article-body {
        font-size:15px;
        line-height:1.9
    }
    .article-body h2 {
        font-size:22px
    }
    .related-section {
        margin-top:48px
    }
    .related-grid {
        grid-template-columns:1fr
    }
    .download-card {
        padding:28px 22px;
        gap:18px
    }
    .platform-copy h3 {
        font-size:24px
    }
    .platform-copy p {
        font-size:13px
    }
    .download-notice {
        padding:17px
    }
    .page-site-footer .content {
        flex-direction:column
    }
    .page-site-footer .col {
        margin-top:24px
    }
    .page-site-footer .down {
        width:100%
    }
}
.download-hero-v2 .hero-inner {
    min-height:530px
}
.hero-chips {
    gap:8px;
    margin-top:27px;
    display:flex;
    flex-wrap:wrap
}
.hero-chips span {
    color:#dffcff;
    background:#ffffff1c;
    border:1px solid #ffffff42;
    border-radius:18px;
    padding:7px 12px;
    font-size:12px
}
.platform-card-v2 {
    min-height:292px
}
.platform-meta {
    color:#687497;
    background:#f1f3fb;
    border-radius:4px;
    margin:0 0 13px;
    padding:7px 9px;
    font-size:11px;
    line-height:1.5
}
.platform-actions {
    gap:17px;
    display:flex;
    align-items:center
}
.secondary-platform-link {
    color:#6b7594!important;
    border:1px solid #cfd5e7;
    border-radius:18px;
    margin-top:23px!important;
    padding:7px 12px;
    font-size:12px!important
}
.official-notice {
    align-items:flex-start
}
.official-notice img {
    margin-top:1px
}
.official-notice b {
    color:#70551b
}
.install-guides-section {
    padding:10px 0 88px
}
.guide-grid {
    grid-template-columns:1fr 1fr;
    gap:24px;
    display:grid
}
.guide-panel {
    background:#fff;
    border:1px solid #e1e5f2;
    border-radius:3px;
    padding:29px 29px 27px;
    box-shadow:0 12px 30px #1c286008
}
.guide-panel-heading {
    align-items:center;
    gap:14px;
    padding-bottom:21px;
    border-bottom:1px solid #e6e9f2;
    display:flex
}
.guide-number {
    background:#1e295b;
    border-radius:14px;
    width:39px;
    height:39px;
    color:#fff;
    text-align:center;
    font-size:12px;
    font-weight:700;
    line-height:39px
}
.guide-number.green {
    background:#4aa982
}
.guide-panel-heading h3 {
    color:var(--page-ink);
    margin:0;
    font-size:22px;
    font-weight:500
}
.guide-panel-heading p {
    color:#8b93aa;
    margin:4px 0 0;
    font-size:12px
}
.guide-alert {
    background:#fff7e9;
    border:1px solid #f2dfb0;
    margin:20px 0 22px;
    padding:12px 14px;
    display:flex;
    flex-direction:column;
    gap:4px
}
.guide-alert b {
    color:#805e1e;
    font-size:13px
}
.guide-alert span {
    color:#967a43;
    font-size:12px;
    line-height:1.65
}
.ios-step-grid {
    grid-template-columns:1fr 1fr;
    gap:18px 14px;
    display:grid
}
.ios-step {
    min-width:0
}
.step-title {
    min-height:47px;
    align-items:flex-start;
    gap:7px;
    display:flex
}
.step-title b {
    background:#3f54d0;
    border-radius:10px;
    flex:0 0 20px;
    width:20px;
    height:20px;
    color:#fff;
    text-align:center;
    font-size:11px;
    line-height:20px
}
.step-title span {
    color:#535e78;
    font-size:12px;
    line-height:1.55
}
.ios-step img {
    object-fit:contain;
    background:#f4f6fc;
    border:1px solid #e1e5f1;
    border-radius:2px;
    width:100%;
    height:138px;
    display:block
}
.guide-footer-note {
    color:#68728c;
    border-left:3px solid #51cbd0;
    background:#f6f8ff;
    margin-top:21px;
    padding:11px 13px;
    font-size:12px;
    line-height:1.7
}
.android-step-list>div {
    border-bottom:1px solid #e7eaf2;
    gap:13px;
    padding:14px 0;
    display:flex
}
.android-step-list>div:last-child {
    border-bottom:0
}
.android-step-list b {
    color:#4a5ed5;
    letter-spacing:.08em;
    flex:0 0 23px;
    font-size:11px
}
.android-step-list p {
    color:#5b6681;
    margin:0;
    font-size:13px;
    line-height:1.7
}
.android-step-list strong {
    color:#3549c3
}
.android-download-box {
    background:#f4f7ff;
    border:1px solid #e0e5f4;
    border-radius:3px;
    align-items:center;
    gap:20px;
    margin-top:19px;
    padding:17px;
    display:flex
}
.qr-caption {
    color:#596582;
    text-align:center;
    margin-bottom:7px;
    font-size:11px
}
.android-qr {
    background:#fff;
    border:5px solid #fff;
    width:132px;
    height:132px;
    display:block
}
.android-links {
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:flex-start
}
.android-links .platform-link {
    margin-top:0;
    margin-bottom:10px
}
.android-links .secondary-platform-link {
    margin-top:0!important
}
.text-platform-link {
    color:#5364bd!important;
    font-size:12px!important
}
.first-use-section {
    border-top:1px solid #e6e9f2;
    padding:65px 0 78px
}
.use-check-grid {
    grid-template-columns:repeat(4,1fr);
    gap:15px;
    display:grid
}
.use-check {
    background:#f7f8fd;
    border:1px solid #e5e8f1;
    min-height:178px;
    padding:22px 19px
}
.use-check>span {
    color:#4458d1;
    letter-spacing:.1em;
    font-size:11px;
    font-weight:700
}
.use-check h3 {
    color:var(--page-ink);
    margin:13px 0 8px;
    font-size:17px;
    font-weight:500
}
.use-check p {
    color:#727b95;
    margin:0;
    font-size:12px;
    line-height:1.75
}
.download-troubleshooting {
    padding:0 0 84px
}
.troubleshooting-inner {
    background:#f4f6ff;
    border:1px solid #e0e5f5;
    align-items:center;
    justify-content:space-between;
    gap:30px;
    padding:31px 35px;
    display:flex
}
.troubleshooting-inner h2 {
    color:var(--page-ink);
    margin:7px 0 8px;
    font-size:25px;
    font-weight:500
}
.troubleshooting-inner p {
    color:#68728e;
    max-width:650px;
    margin:0;
    font-size:13px;
    line-height:1.75
}
.troubleshooting-inner .solid-link {
    flex:0 0 auto
}
.home-blog-preview {
    background:#fff;
    padding:78px 0 84px
}
.home-blog-preview .home-blog-more {
    text-align:right;
    margin-top:25px;
    margin-bottom:15px;
}
.home-blog-preview .article-card p {
    min-height:48px
}
@media (width<=768px) {
    .hero-chips {
        margin-top:21px
    }
    .platform-card-v2 {
        min-height:0
    }
    .platform-actions {
        align-items:flex-start;
        flex-direction:column;
        gap:0
    }
    .platform-actions .secondary-platform-link {
        margin-top:10px!important
    }
    .install-guides-section {
        padding-bottom:58px
    }
    .guide-grid {
        grid-template-columns:1fr
    }
    .guide-panel {
        padding:23px 18px
    }
    .ios-step-grid {
        gap:15px 10px
    }
    .ios-step img {
        height:112px
    }
    .android-download-box {
        align-items:flex-start;
        flex-direction:column
    }
    .android-links {
        width:100%
    }
    .android-links .platform-link {
        margin-bottom:11px
    }
    .use-check-grid {
        grid-template-columns:1fr 1fr
    }
    .use-check {
        min-height:0
    }
    .troubleshooting-inner {
        align-items:flex-start;
        flex-direction:column;
        padding:25px 21px
    }
    .troubleshooting-inner .solid-link {
        margin-top:0
    }
    .home-blog-preview {
        padding:53px 0 62px
    }
}

@media screen and (max-width: 768px) {
  /* 主容器按屏幕宽度收缩，左右各保留 16px */
  .page-container.article-page {
    width: 100%;
    max-width: calc(100% - 32px);
    padding-top: 76px; /* 避开固定在顶部的移动端导航栏 */
    padding-bottom: 48px;
  }

  /* 文章卡片不要保留桌面版固定宽度和大内边距 */
  .page-container.article-page .article-shell {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 24px 16px 32px;
    overflow-wrap: anywhere;
  }

  .page-container.article-page .article-shell h1 {
    font-size: clamp(24px, 6vw, 32px);
    line-height: 1.35;
  }

  /* 正文图片带有固定 width 属性时，限制在文章内容宽度内 */
  .page-container.article-page .article-shell img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    margin-right: auto;
    margin-left: auto;
  }

  .page-container.article-page .article-shell p,
  .page-container.article-page .article-shell li {
    overflow-wrap: anywhere;
  }

  .page-container.article-page .breadcrumb {
    min-width: 0;
    flex-wrap: wrap;
    gap: 6px;
  }

  .page-container.article-page .breadcrumb b {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  /* 相关阅读区是 .page-main 的同级子元素，原样式固定为 1100px */
  .page-main > .related-section {
    width: calc(100% - 32px);
    max-width: 1100px;
    margin: 48px auto 0;
  }

  .page-main > .related-section .related-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .page-main > .related-section .article-card {
    min-width: 0;
  }

  .page-main > .related-section .article-card h3,
  .page-main > .related-section .article-card p {
    overflow-wrap: anywhere;
  }
}