:root{--ink:#402744;--pink:#ec279b;--muted:#926b86;--width:1180px}*{box-sizing:border-box}html{height:100%}body{margin:0;min-height:100%;color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;-webkit-font-smoothing:antialiased;background:#ffe2f1;background-image:radial-gradient(ellipse at 92% 18%,#ff9fd68a 0,transparent 52%),radial-gradient(ellipse at 2% 93%,#c8d9ff85 0,transparent 48%),linear-gradient(115deg,#fff0f8 0%,#ffe0f1 48%,#ffcbe9 100%);background-attachment:fixed}button{font:inherit;cursor:pointer;border:0}a{color:inherit;text-decoration:none}p,h1{margin:0}img{display:block;max-width:100%}svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}a,button{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline:3px solid #d51794;outline-offset:4px}.skip{position:fixed;top:-80px;left:20px;padding:12px;background:white;z-index:30}.skip:focus{top:12px}.page-shell{min-height:100svh;height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr) auto;position:relative}.wrap{width:min(var(--width),calc(100% - 96px));margin:auto}.site-header{position:relative;z-index:2}.nav-inner{height:100px;display:flex;justify-content:space-between;align-items:center}.brand{display:flex;gap:13px;align-items:center}.brand img{width:48px;height:48px;border-radius:14px;box-shadow:0 5px 18px #d867aa16}.brand strong{display:block;font-size:28px;letter-spacing:2px;line-height:1.25;font-weight:700}.brand small{display:block;color:#9a718c;font-size:10px;letter-spacing:2px;margin-top:5px}.nav-links a{font-size:13px;display:flex;align-items:center;gap:12px;color:#7b4d6e}.nav-links svg{width:17px;height:17px}.nav-links a:hover{color:var(--pink)}.hero{position:relative;display:grid;grid-template-columns:1.05fr 1fr;gap:20px;align-items:center;min-height:0;height:100%;padding:10px 0 28px}.hero-copy{position:relative;z-index:2}.eyebrow{font-size:13px;letter-spacing:2.5px;color:#966184;margin-bottom:25px}.hero h1{font-size:clamp(60px,5.8vw,84px);font-weight:750;letter-spacing:-1px;line-height:1.22}.hero h1 span{color:var(--pink)}.hero-description{font-size:17px;letter-spacing:2px;color:#895373;margin-top:24px}.download-area{display:flex;align-items:center;gap:21px;margin-top:34px}.qr-block{flex:none;text-align:center}.home-qr{width:122px;height:122px;padding:9px;background:#fff;border-radius:4px}.home-qr img,.home-qr canvas{width:104px!important;height:104px!important;display:block}.qr-block>span{display:block;font-size:10px;color:#9a6b8b;margin-top:9px;letter-spacing:1px}.download-buttons{display:flex;flex-direction:column;gap:12px;align-self:flex-start}.store-button{height:55px;width:209px;padding:0 18px;border-radius:9px;display:flex;align-items:center;justify-content:flex-start;gap:12px;font-size:14px;letter-spacing:.2px;font-weight:600;transition:background .15s,transform .15s}.store-button>svg:first-child{width:23px;height:23px}.store-button>svg:last-child{width:17px;height:17px;margin-left:auto}.store-button.android{color:#fff;background:#e72a98;box-shadow:0 6px 18px #ea41942a}.store-button.android:hover{background:#d81687;transform:translateY(-1px)}.store-button.ios{color:#75496b;background:#ffffff70;border:1px solid #fff9}.store-button.ios:hover{background:#ffffffb5}.store-button small{font-size:9px;font-weight:400;margin-left:auto;color:#b57b9b}.age-note{font-size:10px;letter-spacing:.4px;color:#a387a0;margin-top:13px}.hero-art{position:relative;margin-left:-40px;display:flex;flex-direction:column;justify-content:center;align-items:center;pointer-events:none}.conversation-art{width:115%;height:auto;overflow:visible;fill:none;stroke:none}.hero-art>p{font-size:12px;color:#b677a0;letter-spacing:5px;margin-top:-25px;padding-left:75px}.hero-art>p span{font-family:Georgia,serif;font-size:20px;font-style:italic;letter-spacing:0}footer{position:relative;z-index:2;padding:13px 0 18px;color:#99718c;font-size:10px;line-height:1.85;background:#fff3;border-top:1px solid #ffffff45}footer .inner{width:min(1360px,calc(100% - 64px));margin:auto;text-align:center}.footer-brand{font-size:15px;font-weight:600;letter-spacing:1px;color:#8d5d7d;margin-bottom:7px}.footer-brand span{font-size:10px!important}footer .row{display:flex;align-items:center;justify-content:center;gap:0 5px;flex-wrap:wrap;margin:3px 0}footer a:hover,footer button:hover{color:#c52b8c}footer .sep{color:#c8a8c0;margin:0 3px}.beian-icon{display:inline-block;width:12px;height:12px;vertical-align:middle;margin-right:3px}.license-link{font:inherit;padding:0;color:inherit;background:none}dialog{border:0;border-radius:16px;max-width:calc(100% - 32px);padding:35px;color:var(--ink);background:#fff8fc;box-shadow:0 30px 100px #8d2b7626}dialog::backdrop{background:#5d244e44;backdrop-filter:blur(8px)}.modal-close{position:absolute;right:12px;top:10px;font-size:25px;line-height:1;padding:8px;background:none;color:#a58098}.download-dialog{text-align:center;width:370px}.download-dialog h2{font-size:24px;margin:8px 0 0}.download-dialog p{font-size:13px;color:#9a718c;line-height:1.8;margin:12px 0 20px}.qr-code{width:168px;height:168px;padding:10px;background:white;margin:0 auto 20px}.qr-code img,.qr-code canvas{width:148px!important;height:148px!important}.download-main{display:flex;justify-content:center;align-items:center;gap:10px;padding:16px 12px;border-radius:8px;background:var(--pink);color:white;font-size:13px}.download-dialog small{display:block;font-size:11px;color:#a08199;line-height:1.9;margin-top:16px}.download-dialog small a{color:#cc378f}.license-dialog{width:780px;padding:42px 15px 15px}.license-dialog img{max-height:78svh;margin:auto;object-fit:contain}
@media(min-width:1500px){.hero-art{margin-left:-45px}.hero h1{font-size:88px}.eyebrow{margin-bottom:28px}.hero-description{margin-top:28px}.download-area{margin-top:40px}}@media(max-width:1100px){.wrap{width:calc(100% - 64px)}.hero h1{font-size:64px}.hero-art{margin-left:-25px}.conversation-art{width:118%}.hero-description{font-size:15px;letter-spacing:1px}.eyebrow{font-size:12px}.nav-inner{height:86px}.hero{padding-bottom:22px}.hero-art>p{padding-left:40px}.store-button{width:190px}.download-area{gap:17px}.home-qr{width:112px;height:112px}.home-qr img,.home-qr canvas{width:94px!important;height:94px!important}.store-button{height:50px}.download-buttons{gap:12px}footer{font-size:9px;line-height:1.8}}@media(min-width:761px) and (max-height:760px){.nav-inner{height:78px}.hero h1{font-size:58px}.eyebrow{margin-bottom:17px}.hero-description{margin-top:17px;font-size:15px}.download-area{margin-top:23px}.hero-art{max-height:100%;overflow:visible}.conversation-art{max-height:390px}.home-qr{width:100px;height:100px;padding:7px}.home-qr img,.home-qr canvas{width:86px!important;height:86px!important}.store-button{height:44px}.download-buttons{gap:12px}.hero{padding-bottom:14px}.age-note{margin-top:8px}.hero-art>p{margin-top:-20px}footer{padding:9px 0 12px}}@media(max-width:760px){.page-shell{grid-template-rows:66px minmax(0,1fr) auto}.wrap{width:calc(100% - 40px)}.nav-inner{height:66px}.brand img{width:36px;height:36px;border-radius:11px}.brand{gap:10px}.brand strong{font-size:23px}.brand small{font-size:8px;letter-spacing:1.5px;margin-top:3px}.nav-links a{font-size:11px;gap:6px}.nav-links svg{width:14px;height:14px}.hero{display:flex;justify-content:center;align-items:center;text-align:center;padding:10px 0 18px;isolation:isolate}.hero-copy{width:100%}.eyebrow{font-size:10px;letter-spacing:2px;margin-bottom:20px}.hero h1{font-size:58px;line-height:1.18;font-weight:750;letter-spacing:-1px}.hero-description{font-size:14px;letter-spacing:1px;margin-top:19px}.download-area{justify-content:center;gap:17px;margin-top:27px;text-align:left}.home-qr{width:103px;height:103px;padding:8px}.home-qr img,.home-qr canvas{width:87px!important;height:87px!important}.qr-block>span{font-size:9px;margin-top:7px;letter-spacing:.3px}.store-button{width:176px;height:46px;padding:0 14px;font-size:12px;gap:9px}.store-button small{font-size:8px}.store-button>svg:first-child{width:20px;height:20px}.store-button>svg:last-child{width:14px;height:14px}.download-buttons{gap:11px}.age-note{font-size:9px;margin-top:13px}.hero-art{position:absolute;inset:0;margin:0;opacity:.09;z-index:-1;justify-content:start;overflow:hidden}.conversation-art{width:470px;max-width:none;position:absolute;top:0;left:calc(50% - 200px);transform:rotate(-6deg)}.hero-art>p{display:none}footer{font-size:9px;line-height:1.5;padding:11px 0 calc(12px + env(safe-area-inset-bottom));background:#ffffff38}footer .inner{width:calc(100% - 28px)}.footer-brand{font-size:11px;margin-bottom:7px;line-height:1.5}.footer-brand span{font-size:8px!important;letter-spacing:.3px!important}footer .row{gap:3px 4px;margin:7px 0}footer .sep{margin:0 1px}.beian-icon{width:10px;height:10px}.download-dialog{padding:28px 23px}.download-dialog h2{font-size:22px}.download-dialog p{font-size:12px}.license-dialog{padding-top:40px}}@media(max-width:380px){.hero h1{font-size:53px}.hero-description{font-size:13px}.eyebrow{font-size:9px;letter-spacing:1.5px;margin-bottom:17px}.download-area{gap:14px;margin-top:24px}.store-button{width:164px;font-size:11px;padding:0 12px}.age-note{font-size:8px}.hero-art{opacity:.07}footer{font-size:8.5px}.footer-brand span{font-size:7.5px!important}}@media(max-width:760px) and (max-height:720px){.page-shell{grid-template-rows:56px minmax(0,1fr) auto}.nav-inner{height:56px}.brand img{width:32px;height:32px}.brand strong{font-size:21px}.brand small{font-size:7px}.hero h1{font-size:44px}.eyebrow{margin-bottom:12px}.hero-description{margin-top:13px;font-size:12px}.hero{padding:5px 0 10px}.download-area{margin-top:18px}.home-qr{width:89px;height:89px;padding:7px}.home-qr img,.home-qr canvas{width:75px!important;height:75px!important}.store-button{height:39px}.download-buttons{gap:10px}.qr-block>span{font-size:8px;margin-top:6px}.age-note{margin-top:8px}footer{padding-top:8px;padding-bottom:8px;font-size:8px}.footer-brand{margin-bottom:3px;font-size:10px}footer .row{margin:5px 0;gap:2px 3px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important}}

/* Keep the retained footer readable without taking it out of the viewport. */
footer{font-size:11.5px;line-height:1.75}.footer-brand span{font-size:11px!important}
@media(max-width:1100px){footer{font-size:11px}}
@media(max-width:760px){footer{font-size:11px;line-height:1.55;padding:10px 0 calc(11px + env(safe-area-inset-bottom))}footer .row{margin:6px 0;gap:3px 4px}.footer-brand{font-size:13px;margin-bottom:6px}.footer-brand span{font-size:10px!important}}
@media(max-width:380px){footer{font-size:10.5px}.footer-brand span{font-size:9.5px!important}}
@media(max-width:760px) and (max-height:720px){footer{font-size:10px;line-height:1.5;padding:8px 0 calc(8px + env(safe-area-inset-bottom))}footer .row{margin:4px 0;gap:2px 3px}.footer-brand{font-size:12px;margin-bottom:4px}}
@media(min-width:761px) and (max-height:500px){.nav-inner{height:44px}.brand img{width:32px;height:32px}.brand strong{font-size:21px}.brand small{font-size:8px}.hero{padding:5px 0 10px}.hero h1{font-size:38px}.eyebrow{font-size:10px;margin-bottom:9px}.hero-description{font-size:11px;margin-top:9px}.download-area{margin-top:14px;gap:14px}.home-qr{width:75px;height:75px;padding:6px}.home-qr img,.home-qr canvas{width:63px!important;height:63px!important}.store-button{height:32px;width:175px;font-size:11px}.download-buttons{gap:9px}.qr-block>span{font-size:8px;margin-top:4px}.age-note{font-size:8px;margin-top:6px}.conversation-art{max-height:230px}.hero-art>p{display:none}footer{font-size:9px;padding:6px 0;line-height:1.4}.footer-brand{font-size:11px;margin-bottom:3px}.footer-brand span{font-size:9px!important}footer .row{margin:2px 0}}
@media(min-width:761px) and (max-width:1100px){.conversation-art{width:108%}}

/* Download buttons: a soft highlight, with light pointer and press feedback. */
.store-button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: background .22s ease, transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.store-button > * { position: relative; z-index: 1; }
.store-button.android {
  animation: download-glow 4.8s ease-in-out infinite, download-wiggle 2s ease-in-out infinite;
  transform-origin: center;
}
.store-button.android::before {
  content: "";
  position: absolute;
  inset: -40% auto -40% -60%;
  width: 45%;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.24), transparent);
  transform: translateX(0) skewX(-18deg);
  opacity: 0;
  animation: download-sheen 4.8s ease-in-out infinite;
}
.store-button.android > svg:last-child {
  transition: transform .22s ease;
}
@keyframes download-glow {
  0%, 100% { box-shadow: 0 5px 15px rgba(231,42,152,.17); }
  50% { box-shadow: 0 7px 23px rgba(231,42,152,.31); }
}
@keyframes download-sheen {
  0%, 48% { opacity: 0; transform: translateX(0) skewX(-18deg); }
  53% { opacity: 1; }
  76% { opacity: 1; transform: translateX(380%) skewX(-18deg); }
  82%, 100% { opacity: 0; transform: translateX(380%) skewX(-18deg); }
}
@keyframes download-wiggle {
  0%, 68%, 92%, 100% { transform: translateX(0) rotate(0); }
  72% { transform: translateX(-3px) rotate(-1.5deg); }
  76% { transform: translateX(3px) rotate(1.5deg); }
  80% { transform: translateX(-3px) rotate(-1deg); }
  84% { transform: translateX(2px) rotate(1deg); }
  88% { transform: translateX(-1px) rotate(-.5deg); }
}
@media (hover: hover) and (pointer: fine) {
  .store-button:hover { transform: translateY(-3px); }
  .store-button.android:hover { animation-name: download-glow; transform: translateY(-3px); }
  .store-button.android:hover > svg:last-child { transform: translateX(3px); }
  .store-button.ios:hover { box-shadow: 0 5px 15px rgba(162,80,140,.1); border-color: #ecbbd9; }
}
.store-button.android:focus-visible { animation-name: download-glow; }
.store-button.android:active { animation-name: download-glow; }
.store-button:active, .store-button.android:active {
  transform: translateY(0) scale(.98);
  transition-duration: .1s;
}
@media (prefers-reduced-motion: reduce) {
  .store-button, .store-button::before { animation: none !important; transition: none !important; }
  .store-button.android::before { display: none; }
  .store-button:hover, .store-button.android:hover, .store-button:active, .store-button.android:active,
  .store-button.android:hover > svg:last-child { transform: none; }
}


/* The app name gets its own gentle, readable brand animation. */
.hero h1 .brand-motion {
  display: inline-block;
  white-space: nowrap;
  color: var(--pink);
  background-image: linear-gradient(110deg, #ec279b 12%, #a947c9 38%, #f04da9 58%, #ec279b 82%);
  background-size: 240% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: brand-color-flow 4.8s ease-in-out infinite, brand-soft-float 3s ease-in-out infinite;
}
@keyframes brand-color-flow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@keyframes brand-soft-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero h1 .brand-motion {
    animation: none;
    background: none;
    -webkit-text-fill-color: currentColor;
    transform: none;
  }
}

/* Translucent glass download controls. */
.store-button {
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.7);
  -webkit-backdrop-filter: blur(20px) saturate(165%);
  backdrop-filter: blur(20px) saturate(165%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.85), inset 0 -1px 2px rgba(116,49,99,.12), 0 8px 20px rgba(143,55,111,.12);
}
.store-button.android {
  background: linear-gradient(145deg, rgba(250,103,188,.9), rgba(230,35,148,.84) 52%, rgba(205,34,148,.88));
  border-color: rgba(255,255,255,.55);
}
.store-button.ios {
  background: linear-gradient(145deg, rgba(255,255,255,.65), rgba(255,246,253,.24) 58%, rgba(255,255,255,.44));
  color: #75496b;
}
.store-button::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(ellipse at 18% 0%, rgba(255,255,255,.48), transparent 62%), linear-gradient(180deg, rgba(255,255,255,.18), transparent 45%, rgba(255,255,255,.08));
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.55), inset -1px -1px 0 rgba(255,255,255,.22);
}
.store-button.android:hover { background: linear-gradient(145deg, rgba(253,123,199,.94), rgba(230,35,148,.9) 52%, rgba(205,34,148,.92)); }
.store-button.ios:hover { background: linear-gradient(145deg, rgba(255,255,255,.8), rgba(255,246,253,.42), rgba(255,255,255,.6)); }
.store-button.ios small { color: #99617f; }
@keyframes download-glow {
  0%, 100% { box-shadow: inset 0 1px 1px rgba(255,255,255,.75), inset 0 -1px 2px rgba(116,49,99,.15), 0 6px 18px rgba(231,42,152,.19); }
  50% { box-shadow: inset 0 1px 1px rgba(255,255,255,.85), inset 0 -1px 2px rgba(116,49,99,.15), 0 9px 25px rgba(231,42,152,.29); }
}

.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-links a { white-space: nowrap; }
@media (max-width: 760px) { .nav-links { gap: 16px; } }
@media (max-width: 380px) { .nav-links { gap: 12px; } }

/* Contact QR dialogs keep a white, high-contrast scanning area. */
.nav-links button {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0;
  background: none;
  color: #7b4d6e;
  font-size: 13px;
  white-space: nowrap;
}
.nav-links button svg { width: 17px; height: 17px; }
.nav-links button:hover { color: var(--pink); }
.contact-dialog {
  width: 380px;
  padding: 28px 24px 26px;
  max-height: calc(100svh - 32px);
  text-align: center;
  background: #fff8fc;
}
.contact-brand { margin: 0 auto 13px; border-radius: 13px; }
.contact-dialog h2 { margin: 0; font-size: 24px; }
.contact-dialog p { margin: 10px 0 16px; font-size: 13px; line-height: 1.6; color: #895373; }
.contact-qr {
  display: block;
  width: 280px;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  background: white;
  image-rendering: pixelated;
}
.contact-dialog small { display: block; margin-top: 16px; color: #895373; font-size: 12px; }
@media (max-width: 760px) {
  .nav-links button { font-size: 11px; gap: 6px; }
  .nav-links button svg { width: 14px; height: 14px; }
}
@media (max-height: 550px) {
  .contact-dialog { padding: 18px 24px; }
  .contact-brand { width: 32px; height: 32px; margin-bottom: 8px; border-radius: 9px; }
  .contact-dialog h2 { font-size: 21px; }
  .contact-dialog p { margin: 8px 0; }
  .contact-qr { width: 210px; }
  .contact-dialog small { margin-top: 8px; }
}

#wechatDialog .contact-qr { width: 294px; }
#qqDialog .contact-qr { width: 287px; }
@media (max-width: 380px) {
  #wechatDialog .contact-qr { width: 245px; }
  #qqDialog .contact-qr { width: 246px; }
}
@media (max-width: 350px), (max-height: 550px) {
  #wechatDialog .contact-qr { width: 196px; }
  #qqDialog .contact-qr { width: 205px; }
}
@media (max-height: 550px) {
  .contact-dialog { padding: 14px 24px; }
  .contact-dialog p { margin: 6px 0; font-size: 12px; line-height: 1.5; }
  .contact-dialog small { margin-top: 6px; }
}

/* Keep the brand tagline and download caption typographically identical. */
.brand small,
.qr-block > span {
  font-family: inherit;
  font-size: 10px;
  font-weight: 400;
  font-style: normal;
  line-height: normal;
  letter-spacing: 1px;
  color: #9a6b8b;
}
@media (max-width: 760px) {
  .brand small, .qr-block > span { font-size: 9px; letter-spacing: .3px; }
}
@media (max-width: 760px) and (max-height: 720px) {
  .brand small, .qr-block > span { font-size: 8px; }
}
@media (min-width: 761px) and (max-height: 500px) {
  .brand small, .qr-block > span { font-size: 8px; }
}