:root { --blue: #0088cc; --text: #333; --muted: #8b8b8b; --line: #e6e6e6; --font-weight-medium: 500; --font-weight-semibold: 600; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 2rem; }
.page { margin: 0; background: white; color: var(--text); font-family: Arial, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; -webkit-font-smoothing: antialiased; }
.sectionShell { width: min(70rem, calc(100% - 3rem)); margin-inline: auto; }
.header { border-bottom: 1px solid var(--line); }
.navShell { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: min(70rem, calc(100% - 3rem)); min-height: 3.25rem; margin-inline: auto; }
.nav, .navActions { display: flex; align-items: center; gap: 1.8rem; }
.navLink, .navWeb, .languageButton { font: inherit; color: var(--blue); font-size: .9rem; text-decoration: none; }
.navLink { position: relative; padding-block: 1rem; white-space: nowrap; }
.navActive::after { content: ""; position: absolute; height: .18rem; background: var(--blue); bottom: -.05rem; left: -.5rem; right: -.5rem; border-radius: .2rem; }
.navLink:hover, .navWeb:hover, .platformLink:hover, .footerLink:hover, .newsLink:hover { text-decoration: underline; text-underline-offset: .2rem; }
.languageButton { border: 0; background: none; padding: .6rem 0; cursor: pointer; }
.intro { position: relative; min-height: 20rem; padding-top: 2.8rem; }
.brandHero { text-align: center; }
.heroLogo { display: block; margin: 0 auto; object-fit: contain; border-radius: 1.5rem; }
.heroTitle { font-size: 2.15rem; line-height: 1.3; margin: 1rem 0 .55rem; font-weight: var(--font-weight-semibold); color: #505050; }
.heroSubtitle { color: #8d8d8d; font-size: 1.18rem; line-height: 1.5; margin: 0; }
.newsAside { position: absolute; top: 2.8rem; right: 0; width: 12rem; padding-left: 1.15rem; border-left: 2px solid var(--blue); }
.newsTitle { font-size: 1rem; color: var(--blue); font-weight: var(--font-weight-semibold); margin: 0 0 1rem; }
.newsEntry { margin-top: .9rem; }
.newsDate { display: block; font-size: .72rem; color: #333; font-weight: var(--font-weight-semibold); margin-bottom: .2rem; }
.newsLink { color: var(--blue); text-decoration: none; font-size: .76rem; line-height: 1.65; }
.devices { padding-top: 1rem; }
.mobileShowcase { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; max-width: 43rem; margin-inline: auto; }
.mobileProduct { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.phone { position: relative; flex-shrink: 0; width: 13.6rem; height: 25.5rem; border: .32rem solid #353b40; border-radius: 1.7rem; overflow: hidden; background: #e9f0f4; box-shadow: 0 .4rem .8rem #00000012; }
.phoneIos { border-color: #d4d9dd; border-radius: 2rem; border-width: .38rem; background: #f0f5fa; }
.phoneStatus { display: flex; justify-content: space-between; padding: .65rem .85rem .5rem; font-size: .55rem; background: white; }
.phoneHeader { display: flex; gap: .45rem; align-items: center; padding: .65rem .5rem; background: #fff; border-bottom: 1px solid #e3e8eb; }
.phoneAndroid .phoneHeader { background: #548fba; color: white; }
.phoneBack { font-size: 1.3rem; }
.chatAvatar { width: 1.8rem; height: 1.8rem; border-radius: 50%; }
.chatHeading { min-width: 0; }
.chatTitle { display: block; font-size: .65rem; font-weight: var(--font-weight-semibold); }
.chatSubtitle { display: block; font-size: .45rem; margin-top: .25rem; opacity: .65; }
.chatMenu { margin-left: auto; font-size: 1.1rem; }
.chatBody { padding: .7rem .5rem; }
.chatDay { display: block; width: fit-content; margin: 0 auto .7rem; font-size: .5rem; padding: .2rem .55rem; background: #b7cad7; border-radius: 1rem; color: white; }
.bubble { padding: .55rem; margin-bottom: .65rem; background: white; border-radius: .5rem; }
.bubbleIncoming { width: 9.8rem; border-bottom-left-radius: .1rem; }
.bubbleName { color: #438bb6; font-size: .55rem; font-weight: var(--font-weight-semibold); }
.bubbleText { margin: .25rem 0 .4rem; font-size: .57rem; line-height: 1.6; }
.postcard { position: relative; height: 5rem; overflow: hidden; background: #cce4f5; border-radius: .2rem; }
.postcardSun { position: absolute; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: #ffd48a; top: .5rem; right: 1rem; }
.postcardHill { position: absolute; border-radius: 50%; width: 11rem; height: 5rem; bottom: -2.5rem; }
.hillBack { left: -3rem; background: #9bc2d0; }
.hillFront { right: -3rem; background: #5f9a99; }
.postcardFlower { position: absolute; font-size: 2.5rem; left: 1rem; bottom: -.3rem; color: #fff2bd; }
.bubbleTime { display: block; font-size: .4rem; text-align: right; color: #91a3ab; }
.bubbleOutgoing { width: 9rem; background: #dff1d9; margin-left: auto; }
.phoneIos .bubbleOutgoing { background: #dbeefa; }
.bubbleFile { display: flex; align-items: center; gap: .5rem; width: 10rem; }
.fileIcon { font-size: 1.2rem; color: white; background: #64a6cc; border-radius: 50%; width: 1.7rem; height: 1.7rem; display: grid; place-items: center; }
.fileName { display: block; font-size: .55rem; font-weight: var(--font-weight-medium); }
.fileMeta { display: block; font-size: .4rem; margin-top: .3rem; color: #8c9aa1; }
.chatComposer { position: absolute; bottom: 0; left: 0; right: 0; display: flex; align-items: center; gap: .4rem; padding: .6rem .6rem .9rem; color: #9ba8b1; background: white; }
.composerHint { font-size: .5rem; }
.sendButton { margin-left: auto; color: #559dc8; font-size: .8rem; }
.platformLink { display: inline-block; margin-top: 1.5rem; font-size: 1.05rem; color: var(--blue); text-decoration: none; text-align: center; line-height: 1.6; }
.platformSubnote { display: block; max-width: 20rem; text-align: center; color: #969696; line-height: 1.6; font-size: .65rem; margin-top: .5rem; }
.illustrationLabel { color: #b3b3b3; font-size: .6rem; text-align: center; margin-top: 1rem; }
.desktopShowcase { padding-block: 4.2rem 3.5rem; text-align: center; }
.laptop { max-width: 43rem; margin-inline: auto; }
.laptopScreen { width: 90%; margin: 0 auto; border: .45rem solid #44484c; border-radius: .65rem .65rem .2rem .2rem; background: white; height: 21.5rem; overflow: hidden; }
.desktopToolbar { display: flex; justify-content: space-between; align-items: center; font-size: .55rem; height: 1.4rem; padding-inline: .7rem; color: #8d969d; background: #f2f4f5; }
.desktopApp { display: grid; grid-template-columns: 36% 64%; height: calc(100% - 1.4rem); }
.desktopSidebar { background: #fff; border-right: 1px solid #dce3e7; text-align: left; }
.desktopSearch { background: #f2f4f5; color: #a0a6ab; padding: .5rem .7rem; font-size: .55rem; margin: .6rem; border-radius: .4rem; }
.desktopContact { display: flex; align-items: center; gap: .5rem; padding: .65rem .5rem; }
.selectedContact { background: #559ac8; color: white; }
.desktopAvatar, .colorAvatar { width: 2.2rem; height: 2.2rem; border-radius: 50%; flex-shrink: 0; }
.colorAvatar { display: grid; place-items: center; font-size: 1.3rem; background: #e7bd80; color: white; }
.alternateAvatar { background: #b39cce; }
.desktopName { display: block; font-size: .62rem; font-weight: var(--font-weight-medium); }
.desktopPreview { display: block; font-size: .46rem; margin-top: .25rem; line-height: 1.5; }
.desktopConversation { position: relative; text-align: left; background: #e5f0f5; }
.desktopChatHeader { padding: .8rem; font-size: .65rem; background: #fff; border-bottom: 1px solid #dde6e9; }
.desktopMessages { padding: .7rem 1rem; }
.desktopBubble { width: 12rem; }
.desktopLandscape { position: relative; height: 5.3rem; overflow: hidden; background: #d1e7f5; border-radius: .2rem; }
.landscapeSun { position: absolute; top: .4rem; right: 1.8rem; width: 2rem; height: 2rem; border-radius: 50%; background: #ffd99d; }
.landscapeHill { position: absolute; bottom: -4.3rem; left: -1rem; width: 16rem; height: 7rem; background: #82b2b6; border-radius: 50%; }
.desktopReply { width: 12rem; }
.desktopComposer { position: absolute; bottom: 0; left: 0; right: 0; padding: .8rem; background: white; font-size: .6rem; color: #a8adb1; }
.laptopBase { position: relative; background: linear-gradient(#d9dfe2, #b5bcc1); height: .7rem; width: 100%; border-radius: 0 0 50% 50%; box-shadow: 0 .15rem .2rem #00000012; }
.laptopBase::after { content: ""; display: block; background: #a9b3ba; width: 14%; height: .22rem; margin: auto; border-radius: 0 0 .3rem .3rem; }
.desktopLinks { display: flex; justify-content: center; gap: 3rem; }
.desktopNote { color: #999; margin-top: .7rem; font-size: .75rem; }
.sectionTitle { font-size: 1.65rem; font-weight: var(--font-weight-medium); color: #333; text-align: center; margin: 0 0 1rem; line-height: 1.5; }
.sectionBody { font-size: .9rem; color: #999; text-align: center; line-height: 1.8; margin: 0; }
.releaseSection { padding-block: 2rem 4rem; max-width: 56rem; }
.releaseDate { color: #999; text-align: center; font-size: .75rem; margin-bottom: 2rem; }
.updateColumns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.updateArticle { text-align: center; }
.updateIcon { display: grid; place-items: center; width: 5rem; height: 5rem; border-radius: 50%; background: #e7f5fd; color: #66b7e8; font-size: 2.6rem; margin-inline: auto; }
.updateBody { color: var(--blue); font-size: .9rem; line-height: 1.85; margin-bottom: .5rem; }
.releaseNote { color: #999; font-size: .7rem; line-height: 1.8; text-align: center; margin-top: 1.5rem; }
.features { padding-block: 2rem 4rem; max-width: 58rem; }
.featureGrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3rem 5rem; margin-top: 2.5rem; }
.feature { text-align: center; }
.featureIcon { display: grid; place-items: center; height: 6rem; width: 6rem; margin-inline: auto; color: #64b5e0; font-size: 4rem; background: #f0f9fe; border-radius: 50%; }
.featureIcon2 { color: #6cb8b0; background: #eff9f4; }
.featureIcon3 { color: #a098d0; background: #f7f4fc; }
.featureIcon4 { color: #e3af68; background: #fff9ef; }
.featureTitle { font-size: 1.25rem; color: var(--blue); font-weight: var(--font-weight-medium); margin: 1.2rem 0 .5rem; }
.featureBody { color: #626262; font-size: .87rem; line-height: 1.9; margin: 0; }
.downloads { max-width: 60rem; padding-block: 2rem 4rem; }
.downloadStatus { color: #9b654a; font-size: .75rem; min-height: 1rem; text-align: center; }
.downloadGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-top: 1rem; }
.downloadCard { padding: 1.25rem .5rem; border-top: 1px solid #e5e5e5; min-width: 0; scroll-margin-top: 2rem; }
.downloadCardTop { display: flex; align-items: center; gap: .75rem; }
.deviceIcon { font-size: 2rem; color: #777; }
.deviceImage { width: 1.6rem; height: 1.9rem; object-fit: contain; opacity: .7; }
.downloadTitle { font-size: 1.15rem; margin: .3rem 0; font-weight: var(--font-weight-medium); }
.downloadNote { color: #888; font-size: .73rem; line-height: 1.8; min-height: 4rem; margin: .8rem 0; }
.packageMeta { display: block; color: #999; font-size: .67rem; line-height: 1.8; min-height: 2.5rem; margin-block: .5rem; }
.downloadButton { display: block; color: white; background: #42a5d8; border-radius: .3rem; padding: .85rem .5rem; text-align: center; font-size: .82rem; cursor: pointer; text-decoration: none; }
.downloadButton:hover { background: #2995ca; }
.downloadButton[aria-disabled="true"] { color: #999; background: #f0f0f0; cursor: not-allowed; }
.checksumDetails { margin-top: .8rem; }
.checksumSummary { font-size: .62rem; color: #999; cursor: pointer; }
.checksum { display: block; font-size: .6rem; line-height: 1.6; overflow-wrap: anywhere; margin-top: .5rem; }
.faqSection { max-width: 48rem; padding-block: 1rem 4rem; }
.faqList { margin-top: 2rem; }
.faqItem { border-bottom: 1px solid #ececec; }
.faqQuestion { padding-block: 1.1rem; display: flex; justify-content: space-between; gap: 1rem; color: var(--blue); font-size: .9rem; cursor: pointer; list-style: none; }
.faqQuestion::-webkit-details-marker { display: none; }
.faqPlus { color: #aaa; transition: transform .2s; }
.faqItem[open] .faqPlus { transform: rotate(45deg); }
.faqAnswer { margin: 0 1rem 1.2rem 0; font-size: .8rem; color: #777; line-height: 1.9; }
.footer { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 3rem; border-top: 1px solid #e8e8e8; padding-block: 2rem 3rem; max-width: 60rem; }
.footerBrand { font-size: 1rem; font-weight: var(--font-weight-semibold); }
.footerTag { color: #999; font-size: .8rem; line-height: 1.8; }
.copyright { color: #aaa; font-size: .65rem; }
.footerGroup { display: flex; flex-direction: column; gap: .9rem; }
.footerLink { font-size: .83rem; text-decoration: none; color: var(--blue); }
:focus-visible { outline: 2px solid #0088cc; outline-offset: .25rem; }
[hidden] { display: none !important; }
@media (max-width: 72rem) { .newsAside { display: none; } }
@media (max-width: 48rem) {
 .sectionShell, .navShell { width: calc(100% - 2rem); }
 .navShell { gap: .8rem; }
 .nav { gap: 1.2rem; }
 .navActions { gap: 1rem; }
 .navLink, .navWeb, .languageButton { font-size: .8rem; }
 .intro { min-height: 18rem; padding-top: 2.3rem; }
 .heroLogo { width: 6.4rem; height: 6.4rem; }
 .heroTitle { font-size: 1.85rem; }
 .heroSubtitle { font-size: 1rem; }
 .mobileShowcase { gap: 2rem; max-width: 38rem; }
 .platformLink { font-size: .94rem; }
 .desktopShowcase { padding-block: 3rem; }
 .laptopScreen { height: 19rem; }
 .desktopMessages { padding: .6rem; }
 .featureGrid { gap: 2.5rem; }
 .updateColumns { gap: 1rem; }
 .updateBody { font-size: .8rem; }
 .downloadGrid { gap: 1.2rem; }
 .downloadNote { min-height: 6rem; }
}
@media (max-width: 35rem) {
 .nav { gap: 1rem; }
 .navActions { gap: .6rem; }
 .navWeb { display: none; }
 .navLink, .languageButton { font-size: .75rem; }
 .intro { min-height: 17rem; }
 .mobileShowcase { gap: .75rem; }
 .phone { width: 10rem; height: 19rem; border-width: .25rem; border-radius: 1.2rem; }
 .phoneStatus { font-size: .42rem; padding: .5rem .6rem .35rem; }
 .phoneHeader { padding: .4rem .35rem; gap: .25rem; }
 .phoneBack { font-size: 1rem; }
 .chatAvatar { width: 1.3rem; height: 1.3rem; }
 .chatTitle { font-size: .47rem; }
 .chatSubtitle { font-size: .32rem; }
 .chatMenu { font-size: .8rem; }
 .chatBody { padding: .5rem .35rem; }
 .chatDay { font-size: .38rem; margin-bottom: .5rem; }
 .bubble { padding: .4rem; margin-bottom: .45rem; }
 .bubbleIncoming { width: 7.3rem; }
 .bubbleText { font-size: .42rem; }
 .bubbleName { font-size: .42rem; }
 .postcard { height: 3.6rem; }
 .postcardSun { width: 1.2rem; height: 1.2rem; }
 .postcardFlower { font-size: 1.8rem; }
 .bubbleTime { font-size: .32rem; }
 .bubbleOutgoing { width: 6.8rem; }
 .bubbleFile { width: 7.4rem; gap: .3rem; }
 .fileIcon { width: 1.2rem; height: 1.2rem; font-size: .85rem; }
 .fileName { font-size: .4rem; }
 .fileMeta { font-size: .3rem; }
 .chatComposer { padding: .4rem .4rem .65rem; font-size: .7rem; gap: .3rem; }
 .composerHint { font-size: .37rem; }
 .sendButton { font-size: .6rem; }
 .platformLink { font-size: .83rem; margin-top: 1rem; }
 .platformSubnote { font-size: .58rem; }
 .desktopShowcase { padding-block: 2.5rem 2rem; }
 .laptopScreen { height: 13.5rem; border-width: .3rem; }
 .desktopToolbar { height: 1rem; font-size: .4rem; }
 .desktopApp { height: calc(100% - 1rem); }
 .desktopSearch { font-size: .4rem; margin: .4rem; padding: .35rem; }
 .desktopContact { padding: .5rem .3rem; gap: .3rem; }
 .desktopAvatar, .colorAvatar { width: 1.3rem; height: 1.3rem; font-size: .8rem; }
 .desktopName { font-size: .4rem; }
 .desktopPreview { font-size: .32rem; }
 .desktopChatHeader { font-size: .45rem; padding: .6rem; }
 .desktopMessages { padding: .4rem; }
 .desktopBubble { width: 7.6rem; }
 .desktopLandscape { height: 3rem; }
 .desktopReply { width: 7rem; }
 .desktopComposer { font-size: .4rem; padding: .45rem; }
 .desktopLinks { gap: 1.5rem; }
 .desktopNote { font-size: .65rem; line-height: 1.7; }
 .sectionTitle { font-size: 1.4rem; }
 .releaseSection, .features, .downloads, .faqSection { padding-block: 1.5rem 2.5rem; }
 .updateColumns { grid-template-columns: 1fr; gap: 1.5rem; }
 .updateArticle { display: grid; grid-template-columns: 3.5rem 1fr; align-items: center; gap: 1rem; text-align: left; }
 .updateIcon { width: 3.5rem; height: 3.5rem; font-size: 1.8rem; }
 .updateBody { margin: 0; }
 .featureGrid { gap: 2rem 1.2rem; margin-top: 2rem; }
 .featureIcon { width: 4.6rem; height: 4.6rem; font-size: 3rem; }
 .featureTitle { font-size: 1rem; }
 .featureBody { font-size: .75rem; line-height: 1.8; }
 .downloadGrid { grid-template-columns: 1fr; gap: .5rem; }
 .downloadCard { padding: 1.3rem .25rem; }
 .downloadNote, .packageMeta { min-height: unset; }
 .downloadButton { max-width: 22rem; }
 .sectionBody { font-size: .8rem; }
 .footer { grid-template-columns: 1fr 1fr; gap: 2rem; }
 .footerAbout { grid-column: 1 / -1; }
}
@media (max-width: 23rem) {
 .nav { gap: .8rem; }
 .phone { width: 8.7rem; height: 17.4rem; }
 .phoneIos { border-width: .25rem; }
 .chatTitle { font-size: .4rem; }
 .chatSubtitle { font-size: .27rem; }
 .chatAvatar { width: 1.1rem; height: 1.1rem; }
 .bubbleIncoming { width: 6.6rem; }
 .bubbleOutgoing { width: 6.3rem; }
 .bubbleFile { width: 6.6rem; }
 .platformLink { font-size: .74rem; }
 .postcard { height: 3rem; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .faqPlus { transition: none; } }