@font-face{font-family:Qute;src:local('Aptos'),local('Segoe UI')}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:95px}body{margin:0;background:#FAFAFF;color:#19182B;font:16px/1.6 Qute,'Segoe UI','Microsoft YaHei',sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #5754FF;outline-offset:5px}::selection{background:#5754FF;color:white}:root{--brand:#5754FF;--muted:#666575;--line:#e5e4ef}.wrap{width:min(1280px,calc(100% - 96px));margin:auto}.nav{position:sticky;top:0;z-index:20;background:rgba(250,250,255,.9);backdrop-filter:blur(20px);border-bottom:1px solid var(--line)}.navin{height:82px;display:flex;align-items:center;gap:36px}.logo{display:flex;align-items:center;margin-right:auto}.logo svg{width:155px;height:40px}.links{display:flex;gap:30px;font-size:14px}.links a:hover{color:var(--brand)}.navtools{display:flex;align-items:center;gap:18px}.lang{border:1px solid var(--line);background:white;border-radius:30px;padding:9px 15px;font-size:14px;min-height:44px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;border:0;border-radius:40px;background:var(--brand);color:white;padding:15px 27px;min-height:50px;font-weight:600;transition:transform .2s,background .2s}.btn:hover{background:#4643DB;transform:translateY(-3px)}.btn.small{min-height:42px;padding:9px 22px;font-size:14px}.btn.secondary{background:transparent;border:1px solid #d1cfde;color:#19182B}.btn.secondary:hover{background:white}.hero{position:relative;overflow:hidden;min-height:880px;text-align:center;padding-top:58px;background:radial-gradient(ellipse at 50% 75%,#dedcff 0, #f3f2ff 36%,#fafaff 68%)}.hero .intro{font-size:15px;color:var(--muted);margin:0 0 16px}.hero h1{font-size:clamp(54px,6.4vw,91px);letter-spacing:-.06em;line-height:1.02;font-weight:600;margin:0 auto 23px;max-width:1000px}.hero .sub{max-width:540px;margin:0 auto 25px;color:var(--muted);font-size:18px;line-height:1.6}.actions{display:flex;justify-content:center;gap:12px}.hero-product{width:min(780px,78%);position:relative;margin:36px auto 0;z-index:2;transform:translate3d(0,var(--drift,0px),0);will-change:transform}.hero-product img{display:block;width:100%;filter:drop-shadow(0 35px 26px #4a477820)}.hero-ring{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);width:950px;height:260px;border:1px solid #c9c5ff;border-radius:50%;opacity:.7}.hero-ring:after{content:'';position:absolute;inset:30px -90px;border:1px solid #d7d4ff;border-radius:50%}.hero-note{position:absolute;bottom:85px;font-size:14px;text-align:left;z-index:3;color:#59576b}.hero-note.left{left:8%}.hero-note.right{right:7%;text-align:right}.hero-note b{display:block;font-weight:600;color:#19182B}.tiny-dot{width:7px;height:7px;display:inline-block;background:var(--brand);border-radius:50%;margin-right:8px}.marquee{display:flex;align-items:center;justify-content:center;gap:48px;padding:24px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:white;font-size:14px;color:#666575}.marquee span{white-space:nowrap}.marquee strong{font-weight:600;color:#19182B;margin-right:8px}.section{padding:115px 0}.section-head{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:42px}.eyebrow{color:var(--brand);font-size:15px;font-weight:600;margin-bottom:15px}h2{font-size:clamp(36px,4.1vw,58px);line-height:1.12;letter-spacing:-.045em;margin:0;font-weight:600}h3{font-size:26px;letter-spacing:-.025em;line-height:1.25;font-weight:600}.lead{color:var(--muted);max-width:390px;font-size:18px;margin:0}.scene-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:22px}.scene{position:relative;overflow:hidden;border-radius:28px;min-height:510px;background:#e8e6e8}.scene svg{width:100%;height:100%;position:absolute;inset:0}.scene:after{content:'';position:absolute;inset:40% 0 0;background:linear-gradient(transparent,#101320b8);pointer-events:none}.scene-caption{position:absolute;bottom:28px;left:30px;right:30px;z-index:2;color:white}.scene-caption h3{margin:0 0 8px;font-size:30px}.scene-caption p{margin:0;max-width:350px}.scene:hover svg{transform:scale(1.035)}.scene svg{transition:transform .7s}.memory-section{background:#EEEDFF;overflow:hidden}.memory-grid{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center}.memory-copy .lead{margin:25px 0 28px;max-width:420px}.switch{display:inline-flex;gap:5px;background:white;padding:5px;border-radius:35px;margin-bottom:24px}.switch button{border:0;background:none;padding:11px 20px;border-radius:30px;color:#666575;min-height:44px}.switch button[aria-pressed=true]{background:var(--brand);color:white}.compare{position:relative;aspect-ratio:1;overflow:hidden;border-radius:30px;box-shadow:0 25px 70px #33307715;background:white;transform:rotate(2deg)}.compare svg{position:absolute;width:100%;height:100%;transition:opacity .65s,transform .65s}.compare[data-mode=photo] .art{opacity:0;transform:scale(1.035)}.compare[data-mode=comic] .photo{opacity:0}.compare-badge{position:absolute;left:20px;bottom:20px;z-index:3;background:white;padding:8px 16px;border-radius:30px;font-size:14px}.caption{font-size:13px;color:#666575;margin-top:20px}.textlink{display:inline-flex;align-items:center;gap:10px;border-bottom:1px solid #9995ca;padding-bottom:5px;font-weight:600}.textlink:hover{color:var(--brand)}.journey{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center}.phone-stage{height:670px;background:radial-gradient(ellipse,#e5e3ff,transparent 70%);position:relative;display:flex;align-items:center;justify-content:center;gap:20px}.phone{width:245px;padding:7px;border-radius:39px;background:#171625;box-shadow:0 25px 55px #26225224;transform:rotate(-7deg)}.phone img{display:block;width:100%;border-radius:32px}.phone.second{width:214px;transform:rotate(7deg) translateY(45px)}.timeline{margin:35px 0 0;padding:0;list-style:none}.timeline li{position:relative;padding:0 0 28px 33px;border-left:1px solid #d5d2ef}.timeline li:last-child{padding-bottom:0;border-left-color:transparent}.timeline li:before{content:'';position:absolute;top:8px;left:-5px;width:9px;height:9px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 5px #f0efff}.timeline h3{font-size:20px;margin:0 0 6px}.timeline p{margin:0;color:var(--muted)}.work{display:grid;grid-template-columns:1.1fr 1fr;border-radius:32px;overflow:hidden;background:#19182B;color:white}.work-visual{min-height:480px}.work-visual svg{width:100%;height:100%;display:block}.work-copy{padding:60px 50px;align-self:center}.work-copy .eyebrow{color:#a6a4ff}.work-copy h2{font-size:43px}.work-copy p{color:#c6c4d5}.wave{height:44px;display:flex;align-items:center;gap:5px;margin-top:28px}.wave i{width:4px;height:var(--h);border-radius:4px;background:#9390ff;animation:pulse 1.6s ease-in-out infinite alternate;animation-delay:var(--delay)}@keyframes pulse{to{transform:scaleY(.45)}}.spec-section{background:white}.spec-layout{display:grid;grid-template-columns:1.05fr 1fr;gap:80px;align-items:center}.spec-product{width:100%;display:block;transform:rotate(-10deg);filter:drop-shadow(0 25px 28px #29244514)}.specs{display:grid;grid-template-columns:1fr 1fr;gap:0 25px;margin-top:35px}.spec{padding:22px 0;border-top:1px solid var(--line)}.spec strong{font-size:32px;line-height:1.3;display:block;font-weight:500}.spec span{font-size:14px;color:var(--muted)}.fineprint{color:var(--muted);font-size:13px;line-height:1.7}.faq-layout{display:grid;grid-template-columns:.75fr 1.25fr;gap:90px}details{border-bottom:1px solid #dcdbe7;padding:24px 0}summary{font-size:19px;font-weight:500;cursor:pointer;list-style:none;display:flex;gap:24px;justify-content:space-between}summary::-webkit-details-marker{display:none}summary:after{content:'+';color:var(--brand);font-size:26px;line-height:1}details[open] summary:after{content:'−'}details p{color:var(--muted);max-width:660px;margin-bottom:0}.closing{background:var(--brand);color:white;text-align:center;padding:85px 25px;border-radius:32px;margin-bottom:60px;position:relative;overflow:hidden}.closing h2{font-size:clamp(38px,5vw,66px);position:relative}.closing p{color:#e0dfff;position:relative}.closing .btn{background:white;color:var(--brand);margin-top:14px;position:relative}.closing:before{content:'';position:absolute;width:700px;height:700px;border:1px solid #ffffff25;border-radius:50%;left:50%;top:-260px;transform:translateX(-50%)}footer{padding:0 0 30px}.footer-top{display:flex;justify-content:space-between;align-items:center;padding:25px 0}.footer-top svg{width:160px;height:44px}.footer-bottom{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:22px;font-size:13px;color:var(--muted)}.footer-links{display:flex;gap:24px}.reveal{transition:opacity .8s,transform .8s}.js .reveal:not(.visible){opacity:0;transform:translateY(24px)}.progress{height:2px;background:var(--brand);position:absolute;bottom:-1px;left:0;width:var(--progress,0%)}.backtop{border:0;background:transparent;color:var(--brand);padding:12px;font:inherit}.mobilemenu{display:none}.hero-enter{animation:enter .8s both}@keyframes enter{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}html[lang=zh-CN] h1{font-size:clamp(46px,5.5vw,76px);line-height:1.2;letter-spacing:-.04em}html[lang=zh-CN] h2{line-height:1.25;letter-spacing:-.025em}
@media(min-width:1600px){.hero{min-height:940px}.hero-product{width:830px}}@media(max-width:1050px){.wrap{width:calc(100% - 48px)}.links{gap:18px}.navin{gap:20px}.hero{min-height:790px}.hero-note{display:none}.memory-grid,.journey,.spec-layout{gap:40px}.phone{width:210px}.phone.second{width:180px}.work-copy{padding:35px}.work-copy h2{font-size:36px}.faq-layout{gap:45px}.scene{min-height:430px}}
@media(max-width:700px){.wrap{width:calc(100% - 40px)}.navin{height:70px;gap:12px}.logo svg{width:125px;height:35px}.navtools{gap:8px}.navtools .btn{display:none}.links{display:none;position:absolute;top:70px;left:0;right:0;padding:22px;background:#fafaff;border-bottom:1px solid var(--line);flex-direction:column;gap:22px}.links.open{display:flex}.mobilemenu{display:block;background:none;border:0;font-size:23px;min-height:44px;width:40px}.lang{padding:8px 12px}.hero{padding-top:48px;min-height:680px}.hero h1{font-size:56px;padding:0 15px}.hero .sub{padding:0 28px;font-size:16px}.hero .intro{font-size:14px}.hero-product{width:108%;margin:64px 0 0 -4%}.hero-ring{width:600px;height:160px;bottom:0}.actions .btn{padding:12px 21px}.marquee{gap:12px;flex-wrap:wrap;padding:20px;font-size:13px}.marquee span{width:43%;text-align:center}.section{padding:72px 0}.section-head{display:block;margin-bottom:30px}.section-head .lead{margin-top:22px}.scene-grid,.memory-grid,.journey,.spec-layout,.faq-layout{grid-template-columns:1fr;gap:35px}.scene{min-height:400px}.scene-caption{left:24px;bottom:24px}.scene-caption h3{font-size:26px}.memory-grid{gap:35px}.memory-copy .lead{font-size:17px}.compare{max-width:470px;transform:rotate(0);margin:0 auto}.phone-stage{height:490px;gap:10px;order:2}.phone{width:46%;max-width:205px}.phone.second{width:40%;max-width:178px}.journey{gap:10px}.work{grid-template-columns:1fr}.work-visual{height:310px;min-height:0}.work-copy{padding:35px 28px 45px}.work-copy h2{font-size:36px}.spec-product{padding:25px 10px}.spec-layout{gap:10px}.faq-layout{gap:20px}.closing{margin-bottom:30px;border-radius:25px;padding:65px 20px}.footer-top{align-items:start;gap:25px}.footer-links{flex-direction:column;gap:8px;font-size:14px}.footer-bottom{gap:16px;flex-direction:column}.lead{font-size:17px}.spec strong{font-size:29px}html[lang=zh-CN] .hero h1{font-size:44px}.hero-enter{animation-duration:.5s}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.hero-product{transform:none}.js .reveal:not(.visible){opacity:1;transform:none}}

/* Split hero: copy on the left, product on the right. */
.logo img{display:block;width:170px;height:auto}
.hero{min-height:730px;padding:0;text-align:left;background:radial-gradient(ellipse at 78% 62%,#dedcff 0,#f1f0ff 29%,#fafaff 64%)}
.hero-layout{display:grid;grid-template-columns:.95fr 1.15fr;align-items:center;gap:44px;min-height:730px;padding-top:45px;padding-bottom:65px}
.hero .hero-enter{position:relative;z-index:4;min-width:0}
.hero .intro{max-width:420px;margin-bottom:24px}
.hero h1{font-size:clamp(52px,5.4vw,78px);line-height:1.05;letter-spacing:-.055em;margin:0 0 27px;max-width:600px}
.hero .sub{max-width:440px;margin:0 0 32px;font-size:18px}
.hero .actions{justify-content:flex-start;flex-wrap:wrap}
.hero-visual{position:relative;min-width:0;display:flex;align-items:center;justify-content:center;min-height:530px}
.hero-product{width:116%;max-width:none;margin:0 -8%;flex-shrink:0}
.hero-ring{width:108%;height:145px;bottom:44px;left:50%}
.hero-ring:after{inset:20px -30px}
.hero-note{bottom:0;font-size:13px}.hero-note.left{left:0}.hero-note.right{right:0}
html[lang=zh-CN] .hero h1{font-size:clamp(44px,4.5vw,66px);line-height:1.22}
@media(min-width:1600px){.hero,.hero-layout{min-height:790px}.hero-product{width:118%}}
@media(max-width:1050px) and (min-width:701px){.hero-layout{gap:25px;grid-template-columns:1fr 1fr;min-height:640px}.hero{min-height:640px}.hero h1{font-size:52px}.hero-visual{min-height:420px}.hero .intro{font-size:14px}.hero .sub{font-size:17px}}
@media(max-width:700px){.logo img{width:140px}.hero{min-height:0;padding-top:44px;text-align:left}.hero-layout{display:flex;flex-direction:column;gap:0;min-height:0;padding:0 0 40px}.hero .hero-enter{width:100%}.hero h1{font-size:clamp(43px,11.5vw,60px);padding:0;margin-bottom:24px;line-height:1.08}.hero .intro{font-size:13px;margin-bottom:20px}.hero .sub{padding:0;font-size:16px;margin-bottom:26px}.hero .actions{gap:10px}.hero .actions .btn{padding:12px 19px;font-size:14px}.hero-visual{width:100%;min-height:300px;margin-top:22px}.hero-product{width:112%;margin:0 -6%}.hero-ring{width:110%;bottom:16px;height:100px}.hero-note{display:none}html[lang=zh-CN] .hero h1{font-size:44px}}


/* Shared multipage system: indigo, porcelain, ink, lavender and quiet grey. */
:root{--surface:#fff;--lavender:#EEEDFF;--ink:#19182B}body{overflow-x:clip}.links a{position:relative;padding:27px 0;white-space:nowrap}.links a[aria-current=page]{color:var(--brand)}.links a[aria-current=page]:after{content:'';height:2px;background:var(--brand);position:absolute;bottom:15px;left:0;right:0}.navin{gap:25px}.links{gap:25px}.lang{font:inherit;font-size:14px;cursor:pointer;max-width:125px}.lang:focus-visible{outline:3px solid var(--brand);outline-offset:3px}.navtools{gap:12px}.skip{position:fixed;left:20px;top:-100px;z-index:100;background:white;padding:12px}.skip:focus{top:10px}
.story-hero{position:relative;min-height:660px;display:flex;align-items:center;background:#f3f5f4;overflow:hidden}.story-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}.story-hero:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#fafcffc9 0%,#fafcff8c 34%,transparent 62%)}.story-copy{position:relative;z-index:1;padding:90px 0;width:48%;max-width:575px}.story-copy h1,.page-intro h1{font-size:clamp(46px,5.1vw,76px);line-height:1.09;font-weight:600;letter-spacing:-.05em;margin:0 0 28px}.story-copy p{max-width:390px;color:#565565;font-size:18px;margin:0 0 30px}.story-copy .actions{justify-content:flex-start;flex-wrap:wrap}.story-copy .intro{font-size:14px;margin-bottom:25px}.quicklinks{display:grid;grid-template-columns:repeat(4,1fr);background:white;border-bottom:1px solid var(--line)}.quicklinks a{display:flex;gap:10px;justify-content:center;align-items:center;min-height:80px;font-size:14px;padding:16px 8px;border-right:1px solid var(--line);transition:background .2s,color .2s}.quicklinks a:hover{background:var(--lavender);color:var(--brand)}.quicklinks a:last-child{border:0}.quicklinks b{font-size:17px}.quicklinks i{font-style:normal;color:var(--brand)}
.story-open{max-width:840px;margin:auto;text-align:center;padding:110px 24px 85px}.story-open p{font-size:21px;color:var(--muted);max-width:680px;margin:25px auto 0}.story-open h2{font-size:clamp(34px,3.7vw,54px)}.day-flow{display:grid;grid-template-columns:repeat(3,1fr);gap:42px;padding-bottom:100px}.day-flow article{border-top:1px solid #ccc9eb;padding-top:25px}.day-flow time{color:var(--brand);font-size:14px}.day-flow h3{margin:18px 0 12px}.day-flow p{color:var(--muted)}.capture-detail{background:var(--lavender);padding:95px 0}.capture-detail .wrap{display:grid;grid-template-columns:1fr 1fr;gap:85px;align-items:center}.capture-detail img{width:100%;filter:drop-shadow(0 25px 25px #37327b20)}.capture-detail p{color:var(--muted);margin:25px 0}.next-page{display:flex;justify-content:space-between;align-items:center;gap:30px;padding:60px 0;border-bottom:1px solid var(--line);margin-bottom:45px}.next-page h2{font-size:36px}.page-intro{padding:85px 0 20px}.page-intro .lead{max-width:650px;margin-top:20px}.page-intro .eyebrow{font-weight:400}.memory-top{padding-top:75px}.memory-top .section-head h1{font-size:clamp(43px,4.7vw,68px);line-height:1.2;margin:0;letter-spacing:-.04em}.memory-top .section-head{align-items:center}.memory-top .scene{min-height:440px}.recall{display:grid;grid-template-columns:1fr .8fr;gap:90px;align-items:center;padding:100px 0}.recall-phone{background:var(--lavender);border-radius:32px;padding:35px;max-height:600px;overflow:hidden;text-align:center}.recall-phone img{width:235px;border:6px solid var(--ink);border-radius:30px;display:block;margin:auto}.recall p{max-width:440px;color:var(--muted);font-size:18px;margin:25px 0}.app-features{border-top:1px solid var(--line);padding:80px 0}.feature-tabs{display:flex;border-bottom:1px solid var(--line);gap:30px;margin-bottom:42px;overflow-x:auto}.feature-tabs button{background:none;border:0;white-space:nowrap;padding:17px 4px;border-bottom:3px solid transparent;color:var(--muted)}.feature-tabs button[aria-selected=true]{color:var(--brand);border-bottom-color:var(--brand)}.feature-panel{display:grid;grid-template-columns:.75fr 1fr;gap:70px;align-items:center;min-height:245px}.feature-panel[hidden]{display:none}.feature-panel p{font-size:18px;color:var(--muted);max-width:630px}.feature-panel h3{font-size:40px;margin:0}.feature-panel ul{padding-left:20px;color:var(--muted)}.feature-symbol{font-size:90px;font-weight:500;color:var(--brand);line-height:1;letter-spacing:-.06em}.spec-section{margin-top:0!important;padding-top:40px}.spec-table{padding:75px 0}.spec-table h2{margin-bottom:35px}.spec-table table{width:100%;border-collapse:collapse;font-size:17px}.spec-table th,.spec-table td{text-align:left;padding:23px 24px;border-bottom:1px solid var(--line)}.spec-table th{width:35%;font-weight:500;background:#f1f0ff}.spec-table td{background:white}.spec-table tr:first-child th,.spec-table tr:first-child td{border-top:1px solid var(--line)}.reservation{border:0;border-radius:28px;padding:45px;width:min(510px,calc(100% - 36px));color:var(--ink);box-shadow:0 30px 100px #19182b30}.reservation::backdrop{background:#19182b65;backdrop-filter:blur(6px)}.reservation h2{font-size:38px;margin:15px 0 20px}.reservation p{color:var(--muted)}.reservation .close{position:absolute;right:15px;top:10px;border:0;background:none;font-size:28px;width:44px;height:44px}.reservation .btn{margin-top:12px}.footer-top img{width:160px}.footer-links{font-size:14px}.js .reveal:not(.visible){opacity:1;transform:none}.reveal{transition:none}.wave i{animation-play-state:paused}.work:hover .wave i{animation-play-state:running}
@media(max-width:1100px){.links{gap:17px;font-size:13px}.navin{gap:18px}.logo img{width:145px}.navtools{gap:8px}.navtools .btn{padding:10px 16px}.story-copy{width:48%}.story-copy h1{font-size:56px}.story-hero{min-height:620px}.capture-detail .wrap,.recall{gap:45px}.footer-links{gap:16px}}
@media(max-width:850px){.links{display:none;position:absolute;top:82px;left:0;right:0;padding:20px 24px;background:#fafaff;border-bottom:1px solid var(--line);flex-direction:column;gap:0}.links.open{display:flex}.links a{padding:12px}.links a[aria-current=page]:after{bottom:8px;left:12px;right:auto;width:25px}.mobilemenu{display:block;background:none;border:0;font-size:23px;min-height:44px;width:40px}.day-flow{gap:25px}.navtools .btn{display:inline-flex}}
@media(max-width:700px){.story-hero{display:block;min-height:0;background:#f6f8f9}.story-image{position:relative;display:block;height:360px;object-position:72% center}.story-hero:after{display:none}.story-copy{width:100%;max-width:none;padding:36px 0 46px}.story-hero>.wrap{display:contents}.story-copy{width:calc(100% - 40px);margin:auto}.story-copy h1,html[lang=zh-CN] .story-copy h1{font-size:43px}.story-copy .intro{margin-bottom:15px}.story-copy p{font-size:16px}.story-copy .btn{font-size:14px;padding:12px 18px}.quicklinks{grid-template-columns:1fr 1fr}.quicklinks a{font-size:12px;min-height:72px;gap:6px;border-bottom:1px solid var(--line)}.quicklinks a:last-child{border-bottom:1px solid var(--line)}.story-open{padding:65px 20px 45px}.story-open p{font-size:17px}.day-flow{grid-template-columns:1fr;gap:20px;padding-bottom:55px}.day-flow h3{font-size:25px}.capture-detail{padding:60px 0}.capture-detail .wrap,.recall,.feature-panel{grid-template-columns:1fr;gap:35px}.capture-detail img{grid-row:2}.next-page{align-items:flex-start;flex-direction:column;padding:45px 0}.next-page h2{font-size:31px}.page-intro{padding:55px 0 10px}.page-intro h1,html[lang=zh-CN] .page-intro h1{font-size:44px}.memory-top{padding-top:55px}.memory-top .scene{min-height:380px}.recall{padding:65px 0}.feature-tabs{gap:20px}.feature-panel{min-height:360px}.feature-symbol{font-size:65px}.feature-panel h3{font-size:32px}.spec-table{padding:50px 0}.spec-table table{font-size:14px}.spec-table th,.spec-table td{padding:18px 12px}.navin{gap:8px}.logo img{width:125px}.navtools{gap:5px}.lang{font-size:12px;padding:8px;max-width:95px}.navtools .btn{font-size:12px;min-height:40px;padding:8px 12px}.mobilemenu{width:30px;font-size:20px}.links{top:70px}.footer-top{flex-direction:column}.footer-links{flex-wrap:wrap;flex-direction:row}.reservation{padding:30px}.reservation h2{font-size:33px}}
@media(max-width:380px){.navtools .btn{padding:8px}.logo img{width:105px}.lang{max-width:82px}.navtools{gap:2px}}

.company-footer{background:#141320;color:#cccbd7;padding:46px 0 32px;margin-top:20px}.company-main{display:flex;justify-content:space-between;align-items:center;gap:30px}.company-brand{display:flex;flex-direction:column;gap:12px}.company-brand img{width:160px;height:auto;filter:brightness(0) invert(1)}.company-brand span{font-size:13px;color:#aaa8bc}.company-links{display:flex;align-items:center;gap:30px;font-size:14px}.company-links a,.company-filings a{transition:color .2s}.company-links a:hover,.company-filings a:hover{color:white}.company-legal{text-align:center;margin-top:32px;padding-top:24px;border-top:1px solid #ffffff12;font-size:12px;color:#aaa8bc;line-height:1.8}.company-filings{display:flex;justify-content:center;gap:24px;flex-wrap:wrap}.company-copyright{margin:8px 0 0}.floating-top{position:fixed;right:28px;bottom:calc(28px + env(safe-area-inset-bottom,0px));z-index:35;display:grid;place-items:center;width:48px;height:48px;padding:0;border-radius:50%;border:1px solid #e7e5ef;background:#fff;color:#19182b;box-shadow:0 6px 22px #19182b18;cursor:pointer;transition:transform .2s,box-shadow .2s,color .2s}.floating-top:hover{color:#5754ff;transform:translateY(-3px);box-shadow:0 9px 28px #19182b25}.floating-top:focus-visible{outline:3px solid #5754ff;outline-offset:4px}
@media(max-width:700px){.company-footer{padding:36px 0 90px}.company-main{align-items:flex-start;flex-direction:column;gap:26px}.company-links{gap:22px;flex-wrap:wrap;font-size:13px}.company-legal{text-align:left;margin-top:26px}.company-filings{justify-content:flex-start;flex-direction:column;gap:6px}.floating-top{width:46px;height:46px;right:16px;bottom:calc(20px + env(safe-area-inset-bottom,0px))}}
@media(prefers-reduced-motion:reduce){.floating-top{transition:none}.floating-top:hover{transform:none}}

.company-main{align-items:flex-start}.company-resources{display:flex;align-items:flex-start;gap:72px}.company-links{flex-direction:column;align-items:flex-start;gap:18px;padding-top:2px}.company-legal{text-align:left}.company-filings{justify-content:flex-start}.company-wechat{display:flex;flex-direction:column;align-items:flex-start;gap:12px}.company-wechat p{font-size:14px;line-height:1.6;margin:0}.company-wechat a{display:block;background:white;padding:8px;border-radius:9px}.company-wechat img{display:block;width:112px;height:112px;object-fit:contain}.company-wechat span{color:#aaa8bc;font-size:12px}
@media(max-width:700px){.company-resources{width:100%;gap:40px;justify-content:space-between;max-width:360px}.company-links{gap:17px;flex-wrap:nowrap}.company-wechat img{width:104px;height:104px}}

.accordion-story{padding:0 0 90px}.day-toolbar{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:32px}.day-toolbar h2{font-size:32px}.day-toolbar p{font-size:14px;color:var(--muted);margin:10px 0 0}.day-controls{display:flex;align-items:center;gap:10px;flex-shrink:0}.day-controls button{height:48px;width:48px;border:1px solid #d7d4ec;border-radius:50%;background:white;color:var(--brand);font-size:23px;transition:background .25s,color .25s}.day-controls button:hover:not(:disabled){background:var(--brand);color:white}.day-controls button:disabled{opacity:.3;cursor:default}.day-count{font-size:14px;color:var(--muted);margin-right:16px;font-variant-numeric:tabular-nums}.accordion-gallery{display:flex;gap:8px;height:510px;perspective:1400px;width:100%;--ag-media-width:650px}.ag-panel{position:relative;display:block;flex:var(--ag-grow) 1 0;min-width:0;padding:0;border:0;overflow:hidden;border-radius:16px;cursor:pointer;background:#19182b;transform:rotateY(var(--ag-tilt));transform-style:preserve-3d;transition:flex-grow .6s cubic-bezier(.22,.8,.25,1),transform .6s cubic-bezier(.2,.85,.3,1.1);box-shadow:0 10px 30px -18px #19182b70;touch-action:pan-y}.ag-panel:focus-visible{outline:3px solid var(--brand);outline-offset:4px}.ag-media{position:absolute;top:0;left:50%;width:var(--ag-media-width);height:100%;transform:translateX(calc(-50% + var(--ag-shift)));transition:transform .6s cubic-bezier(.22,.8,.25,1);pointer-events:none}.ag-media svg{width:100%;height:100%;display:block}.ag-overlay{position:absolute;inset:0;background:linear-gradient(180deg,#19182b35 0%,transparent 32%,#19182b1a 55%,#19182bd9 100%);pointer-events:none}.ag-overlay:after{content:'';position:absolute;inset:0;background:#19182b;opacity:.35;transition:opacity .6s}.ag-panel[aria-expanded=true] .ag-overlay:after{opacity:0}.ag-time{position:absolute;top:23px;left:50%;transform:translateX(-50%);font-size:13px;writing-mode:vertical-rl;color:white;font-variant-numeric:tabular-nums;letter-spacing:.04em;pointer-events:none;text-shadow:0 1px 9px #000}.ag-panel[aria-expanded=true] .ag-time{writing-mode:horizontal-tb;left:25px;transform:none;font-size:18px;letter-spacing:0}.ag-label{position:absolute;left:25px;right:25px;bottom:30px;display:flex;align-items:center;gap:12px;color:white;text-align:left;pointer-events:none}.ag-label i{height:32px;width:3px;flex-shrink:0;background:#b7b5ff;opacity:0;transform:translateX(-14px);transition:opacity .4s,transform .6s}.ag-label>span{font-size:clamp(19px,2vw,28px);font-weight:600;line-height:1.35;opacity:0;transform:translateX(-14px);transition:opacity .36s,transform .6s;min-width:220px}.ag-panel[aria-expanded=true] .ag-label i,.ag-panel[aria-expanded=true] .ag-label>span{opacity:1;transform:translateX(0)}.ag-panel[aria-expanded=true] .ag-label>span{transition-delay:.06s}.gallery-copy-stage{position:relative;transition:height .4s ease;margin-top:34px;overflow:hidden}.gallery-copy{display:grid;grid-template-columns:1fr 1fr;gap:55px;width:100%;padding:0 2px 5px}.gallery-copy[hidden]{display:none}.gallery-copy-heading time{font-size:18px;color:var(--brand);font-variant-numeric:tabular-nums}.gallery-copy-heading h3{font-size:29px;line-height:1.35;margin:12px 0 0;letter-spacing:-.025em}.gallery-copy-body p{font-size:16px;line-height:1.8;color:var(--muted);margin:0;max-width:570px}.moment-location{margin-top:18px;font-size:13px;color:var(--brand)}.day-bottom{display:flex;align-items:center;justify-content:space-between;gap:25px;margin-top:25px;padding-top:22px;border-top:1px solid var(--line)}.day-bottom p{font-size:13px;color:var(--muted);margin:0}.day-progress{height:3px;width:145px;flex-shrink:0;background:#e5e2f3;overflow:hidden}.day-progress span{display:block;height:100%;width:var(--day-progress,11.1%);background:var(--brand);transition:width .6s}
@media(max-width:1000px){.accordion-gallery{height:450px;gap:6px}.ag-panel{border-radius:13px}.ag-label{left:20px;right:20px;bottom:25px}.gallery-copy{gap:30px}.gallery-copy-heading h3{font-size:25px}}
@media(max-width:600px){.accordion-story{padding-bottom:60px}.day-toolbar{gap:15px;align-items:flex-start}.day-toolbar h2{font-size:25px}.day-toolbar p{font-size:13px;max-width:190px}.day-controls{width:89px;flex-wrap:wrap;justify-content:flex-end;gap:7px}.day-count{width:100%;text-align:right;margin:0;font-size:12px}.day-controls button{height:40px;width:40px;font-size:21px}.accordion-gallery{flex-direction:column;height:740px;perspective:none;gap:7px}.ag-panel{transform:none;min-height:42px;flex-basis:0}.ag-media{width:100%;height:320px;top:50%;left:0;transform:translateY(calc(-50% + var(--ag-shift)))}.ag-time{writing-mode:horizontal-tb;left:18px;top:13px;transform:none;font-size:13px}.ag-panel[aria-expanded=true] .ag-time{left:18px;top:18px;font-size:17px}.ag-label{left:18px;right:18px;bottom:22px}.ag-label>span{font-size:21px;min-width:200px}.gallery-copy{grid-template-columns:1fr;gap:18px}.gallery-copy-stage{margin-top:25px}.gallery-copy-heading h3{font-size:25px;margin-top:10px}.gallery-copy-body p{font-size:15px}.day-bottom{flex-direction:column;align-items:flex-start;gap:16px}.day-progress{width:100%}}
@media(prefers-reduced-motion:reduce){.ag-panel,.ag-media,.ag-overlay:after,.ag-label i,.ag-label>span,.gallery-copy-stage,.day-progress span{transition:none!important}.ag-panel{transform:none}}

/* ==========================================================================
   v2 revision (2026-10) — added on top of the original stylesheet.
   1. homepage video band   2. canvas bands (memories / spec)
   3. app page cards        4. company footer info columns
   ========================================================================== */

/* --- 1. Homepage video band ---------------------------------------------- */
/* --- RETIRED (Oct 14): the .video-band film entry was removed from
   生活体验 at the client's request. Its rules are kept so the module can
   be restored verbatim; nothing in the markup references them any more. --- */
.video-band{position:relative;overflow:hidden;background:#141220;isolation:isolate}
.vb-media{position:absolute;inset:0;z-index:0}
.vb-media img,.vb-media video{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.vb-media img{transition:transform 1.1s cubic-bezier(.22,.8,.25,1),filter .6s}
.video-band:hover .vb-media img{transform:scale(1.035)}
.vb-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,#0c0b16b8 0%,#0c0b1640 38%,#0c0b1640 62%,#0c0b16c4 100%);pointer-events:none}
.vb-inner{position:relative;z-index:2;min-height:clamp(380px,31.6vw,606px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:64px 24px}
.vb-inner h2,.vb-inner .vb-title{color:#fff;font-size:clamp(24px,1.9vw,37px);line-height:1.25;letter-spacing:-.02em;margin:0;font-weight:600}
.vb-inner p{color:#deddef;font-size:clamp(12.5px,.75vw,15px);margin:14px 0 0;max-width:560px}
.watch{display:inline-flex;align-items:center;gap:9px;border:0;border-radius:40px;background:#fff;color:var(--brand);padding:11px 24px;min-height:44px;font-weight:600;font-size:clamp(13px,.78vw,15px);margin-top:44px;box-shadow:0 16px 40px #08070f5c;transition:transform .2s,box-shadow .2s}
.watch:hover{transform:translateY(-3px);box-shadow:0 22px 50px #08070f7a}
.watch svg{width:13px;height:13px;flex-shrink:0}
@media(max-width:700px){.vb-inner{min-height:300px;padding:52px 22px}.vb-inner h2{font-size:23px}.watch{margin-top:26px}}

/* --- film lightbox -------------------------------------------------------- */
.film{border:0;padding:0;background:transparent;max-width:min(1180px,94vw);width:100%;overflow:visible}
.film::backdrop{background:#0b0a13d9;backdrop-filter:blur(8px)}
.film-stage{position:relative;border-radius:18px;overflow:hidden;background:#000;box-shadow:0 40px 120px #000000a6}
.film-stage video{display:block;width:100%;height:auto;max-height:80vh;background:#000}
.film .close{position:absolute;right:12px;top:12px;z-index:3;width:44px;height:44px;border:0;border-radius:50%;background:#ffffff2b;color:#fff;font-size:24px;line-height:1;backdrop-filter:blur(6px);transition:background .2s}
.film .close:hover{background:#ffffff45}
.film-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:14px;color:#deddef;font-size:14px}
.film-bar b{color:#fff;font-weight:600}
@media(max-width:700px){.film-stage{border-radius:12px}.film-bar{font-size:12px;margin-top:10px}}

/* --- 2. Full-bleed canvas bands ------------------------------------------ */
.canvas{position:relative;container-type:inline-size;overflow:hidden}
.canvas>img{display:block;width:100%;height:auto}
.canvas-copy{position:absolute;inset:0 0 0 0;pointer-events:none}
.canvas-copy>*{pointer-events:auto}
.canvas-left{position:absolute;left:16.667%;top:50%;transform:translateY(-50%);width:34%;max-width:560px}
.canvas-right{position:absolute;right:16.667%;top:50%;transform:translateY(-50%);width:34%;max-width:560px}
.canvas-left h1,.canvas-left h2,.canvas-right h1,.canvas-right h2{font-size:2.92cqw;line-height:1.24;letter-spacing:-.035em;margin:0 0 1.5cqw}
.canvas-left p,.canvas-right p{font-size:.92cqw;line-height:1.85;color:var(--muted);margin:0}
.canvas-hero h1,.canvas-hero p{color:#fff}
.canvas-hero p{color:#e7e6f2;max-width:32cqw}
.canvas-hero:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#0b0a14b8 0%,#0b0a146b 38%,#0b0a1400 68%);pointer-events:none}
.canvas-hero .canvas-copy{z-index:2}
.press-bar{width:3.4cqw;height:2px;background:#ffffff9e;margin-top:2.6cqw}
@media(max-width:1000px){
  .canvas{container-type:normal}
  .canvas-copy{position:static;padding:0}
  .canvas-left,.canvas-right{position:static;transform:none;width:auto;max-width:none;padding:52px 0 0}
  .canvas-left h1,.canvas-left h2,.canvas-right h1,.canvas-right h2{font-size:clamp(30px,7vw,42px);margin-bottom:14px}
  .canvas-left p,.canvas-right p{font-size:16px}
  .canvas-hero>img{height:60vw;min-height:320px;object-fit:cover;object-position:62% center}
  .canvas-hero:after{background:linear-gradient(180deg,#0b0a146b 0%,#0b0a14d9 100%)}
  .canvas-hero .canvas-copy{position:absolute;left:0;right:0;bottom:0;padding:0 24px 34px;width:auto;transform:none}
  .canvas-hero .canvas-left{position:static;padding:0}
  .press-bar{display:none}
  .canvas-band>img{height:auto}
}
@media(min-width:1001px) and (max-width:1500px){
  .canvas-left,.canvas-right{width:36%}
}

/* --- memories page -------------------------------------------------------- */
.memories-scenes{padding:70px 0 0}
.memories-scenes .section-head{margin-bottom:42px}
.scene img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .7s}
.scene:hover img{transform:scale(1.035)}
.scene svg{display:none}
.switch-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}

/* --- spec page ------------------------------------------------------------ */
.spec-band{background:#FAFAFF}
.spec-band img{display:block;width:100%;height:auto}
.spec-band .canvas-left{width:38%}
.spec-band .canvas-left h1{font-size:2.6cqw}
.spec-band .canvas-left p{margin-top:1.4cqw}
@media(max-width:1000px){
  .spec-band img{height:auto}
  .spec-band .canvas-left{padding-top:0}
}

/* --- 3. App page --------------------------------------------------------- */
.app-intro{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;padding:70px 0 40px}
.app-intro h1{font-size:clamp(46px,5.1vw,76px);line-height:1.09;font-weight:600;letter-spacing:-.05em;margin:0 0 28px}
.app-intro .lead{max-width:560px;font-size:18px;margin:0}
.app-intro .app-intro-art{align-self:center;justify-self:end;width:min(100%,520px)}
.app-intro .app-intro-art img{display:block;width:100%;height:auto}
.app-journey{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding:40px 0 110px}
.app-journey .app-journey-art{width:min(100%,560px)}
.app-journey .app-journey-art img{display:block;width:100%;height:auto}
.app-journey ul{margin:34px 0 0;padding:0;list-style:none}
.app-journey li{position:relative;padding:0 0 26px 26px}
.app-journey li:last-child{padding-bottom:0}
.app-journey li:before{content:'';position:absolute;left:0;top:9px;width:8px;height:8px;border-radius:50%;background:var(--brand)}
.app-journey h3{font-size:19px;margin:0 0 6px}
.app-journey li p{margin:0;color:var(--muted);font-size:15px}
.app-journey .caption{margin-top:26px}

.feature-head{display:grid;grid-template-columns:.75fr 1fr;gap:70px;align-items:center;min-height:245px}
.feature-card{position:relative;display:grid;grid-template-columns:1.18fr 1fr;border-radius:26px;overflow:hidden;background:#19182b;color:#fff;margin-top:38px}
.fc-media{position:relative;overflow:hidden}
.fc-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.fc-copy{padding:64px 58px;align-self:center}
.fc-copy .eyebrow{color:#a6a4ff;font-size:14px;margin-bottom:14px;font-weight:600}
.fc-copy h3{font-size:clamp(26px,2vw,38px);margin:0 0 18px;color:#fff;line-height:1.3}
.fc-copy p{color:#c6c4d5;font-size:15px;line-height:1.85;margin:0;max-width:420px}
.fc-copy .wave{margin-top:34px}
.feature-card.full{display:block}
.feature-card.full .fc-bg{display:block;width:100%;height:auto}
.feature-card.full .fc-copy{position:absolute;right:0;top:0;bottom:0;width:46%;display:flex;flex-direction:column;justify-content:center}
.fc-icon{margin-top:34px;width:56px;height:56px;opacity:.9}
@media(max-width:1000px){
  .feature-head{grid-template-columns:1fr;gap:26px;min-height:0}
  .feature-card{grid-template-columns:1fr;margin-top:28px;border-radius:20px}
  .fc-media{min-height:280px}
  .fc-media img{height:100%}
  .fc-copy{padding:38px 30px}
  .feature-card.full .fc-bg{height:auto}
  .feature-card.full .fc-copy{position:static;width:auto;padding:38px 30px}
  .app-intro,.app-journey{grid-template-columns:1fr;gap:30px;padding:44px 0}
  .app-intro .app-intro-art{justify-self:center;width:min(100%,420px)}
  .app-journey .app-journey-art{width:min(100%,430px);margin:auto}
}

/* --- 4. Company footer --------------------------------------------------- */
.company-brand span{line-height:1.75}
.company-col{display:flex;flex-direction:column;gap:16px;padding-top:2px;min-width:96px}
.company-col-title{font-size:14px;font-weight:600;color:#fff;margin:0 0 2px;letter-spacing:0;line-height:1.4}
.company-col a{font-size:14px;color:#aaa8bc;transition:color .2s}
.company-col a:hover{color:#fff}
.company-resources{gap:80px}
@media(max-width:700px){
  .company-resources{gap:34px;max-width:none;justify-content:flex-start;flex-wrap:wrap}
  .company-col{min-width:82px}
}

/* compare band stacking (memories page) */
.compare{position:relative;display:grid}
.compare>.canvas{grid-area:1/1;transition:opacity .55s}
.compare[data-mode=comic]>.canvas.photo,.compare[data-mode=photo]>.canvas.comic{opacity:0;pointer-events:none}
@media(prefers-reduced-motion:reduce){.compare>.canvas{transition:none}}

/* --- v2 specificity + compare / scenes fixups ---------------------------- */
.canvas .canvas-left h1,.canvas .canvas-right h1,
.canvas .canvas-left h2,.canvas .canvas-right h2{font-size:2.92cqw;line-height:1.24;letter-spacing:-.035em;margin:0 0 1.5cqw}
.canvas .canvas-left p,.canvas .canvas-right p{font-size:.92cqw;line-height:1.85}
.spec-band .canvas .canvas-left h1{font-size:2.6cqw}

.compare{position:relative;display:grid;container-type:inline-size;background:#EEEDFF}
.compare>.canvas{grid-area:1/1;transition:opacity .55s}
.compare>.canvas>img{display:block;width:100%;height:auto}
.compare>.canvas-overlay{position:absolute;inset:0;z-index:3;pointer-events:none}
.compare>.canvas-overlay .canvas-left{pointer-events:auto}
.compare[data-mode=comic]>.canvas.photo,.compare[data-mode=photo]>.canvas.comic{opacity:0;pointer-events:none}
.compare .switch{margin:2.2cqw 0 0}
.compare .caption{margin-top:1.6cqw;max-width:30cqw}

.memories-scenes{padding:88px 0 0}
.memories-scenes .section-head h1{font-size:clamp(43px,4.7vw,68px);line-height:1.2;margin:0;letter-spacing:-.04em}
.memories-scenes .scene{min-height:440px}
.memories-scenes .scene-caption h3{font-size:26px}

@media(min-width:1001px) and (max-width:1500px){
  .canvas .canvas-left h1,.canvas .canvas-right h1,
  .canvas .canvas-left h2,.canvas .canvas-right h2{font-size:2.9cqw}
}

@media(max-width:1000px){
  .canvas .canvas-left h1,.canvas .canvas-right h1,
  .canvas .canvas-left h2,.canvas .canvas-right h2{font-size:clamp(28px,6.6vw,40px);margin-bottom:14px}
  .canvas .canvas-left p,.canvas .canvas-right p{font-size:16px}
  .canvas-hero .canvas-copy{padding:0 20px 30px}
  .compare{grid-template-columns:1fr;grid-template-rows:auto auto}
  .compare>.canvas{grid-area:2/1}
  .compare>.canvas>img{aspect-ratio:16/11;object-fit:cover;object-position:68% center;height:auto}
  .compare>.canvas-overlay{position:static;grid-area:1/1;padding:0}
  .compare>.canvas-overlay .canvas-left{position:static;transform:none;width:auto;max-width:none;padding:48px 0 0}
  .compare .switch{margin-top:24px}
  .compare .caption{max-width:none;margin-top:18px}
  .memories-scenes{padding:56px 0 0}
  .memories-scenes .scene{min-height:340px}
}
@media(prefers-reduced-motion:reduce){.compare>.canvas{transition:none}}

/* --- v2 metric tuning (values read off the Oct 2026 mockups at 1920px) --- */
.canvas .canvas-left,.canvas .canvas-right{left:16.667%;width:22%;max-width:520px}
.canvas .canvas-right{left:auto;right:16.667%}
.canvas .canvas-left h2,.canvas .canvas-right h2{font-size:2.7cqw;line-height:1.38;margin:0 0 1.4cqw}
.canvas .canvas-left p,.canvas .canvas-right p{font-size:.94cqw;line-height:1.62}
.canvas .eyebrow{font-size:.78cqw;margin-bottom:1.6cqw}
.canvas-hero .canvas-left{width:48%;max-width:960px}
.canvas-hero .canvas-left h1{font-size:3.9cqw;line-height:1.2;letter-spacing:-.03em;margin:0 0 1.9cqw}
.canvas-hero .canvas-left p{font-size:.95cqw;line-height:1.72;max-width:46cqw}
.press-bar{width:32px;height:2px;margin-top:1.9cqw;background:#ffffff8c}
.recall-band .canvas-left{left:11.77%;width:28%;max-width:600px}
.compare .switch{margin-top:2.1cqw}
.compare .caption{margin-top:2.9cqw;max-width:22cqw;font-size:.72cqw}
.spec-band .canvas .canvas-left{width:38%;max-width:760px}
.spec-band .canvas .canvas-left h1{font-size:2.6cqw}

@media(max-width:1000px){
  .canvas .canvas-left,.canvas .canvas-right,.canvas-hero .canvas-left,.recall-band .canvas-left,.spec-band .canvas .canvas-left{left:0;right:auto;width:auto;max-width:none}
  .canvas .eyebrow{font-size:14px;margin-bottom:12px}
  .compare .caption{max-width:none;font-size:13px}
  .canvas-hero .canvas-copy{padding:0 20px 30px}
}

/* --- v2 fix: app feature head must span the panel, card sits below ------- */
.feature-panel{display:block;min-height:0;gap:0}
.feature-head{display:grid;grid-template-columns:.75fr 1fr;gap:70px;align-items:center;min-height:245px}
.feature-symbol{font-size:clamp(44px,4.69vw,90px)}
@media(max-width:1000px){
  .feature-head{grid-template-columns:1fr;gap:26px;min-height:0}
  .feature-symbol{font-size:clamp(40px,11vw,65px)}
}

/* --- v2 fix: app intro headline keeps the mockup's two-line rhythm ------ */
.app-intro{grid-template-columns:1.62fr 1fr;gap:40px}
.app-intro h1{font-size:clamp(44px,4vw,76px)}
@media(max-width:1000px){.app-intro{grid-template-columns:1fr}}

/* --- v2.1 (Oct 9): compare band rebuilt for square collage slices -------- */
.compare{display:block;position:static;container-type:normal;background:#EEEDFF;padding:96px 0}
.compare-inner{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.compare .canvas-left{position:static;transform:none;width:auto;max-width:none;padding:0}
.compare-copy .eyebrow{font-size:14px;margin-bottom:16px}
.compare-copy h2{font-size:clamp(30px,2.9vw,56px);line-height:1.32;letter-spacing:-.03em;margin:0 0 22px}
.compare-copy .lead{font-size:15.5px;line-height:1.8;color:var(--muted);max-width:420px;margin:0}
.compare .switch{margin-top:36px}
.compare .caption{margin-top:30px;font-size:12.5px;color:#908ea4;max-width:340px;line-height:1.7}
.compare-art{position:relative;display:grid;width:min(100%,600px);justify-self:end}
.compare-art img{grid-area:1/1;width:100%;height:auto;transition:opacity .55s}
.compare[data-mode=comic] .compare-art .photo,
.compare[data-mode=photo] .compare-art .comic{opacity:0;pointer-events:none}
@media(prefers-reduced-motion:reduce){.compare-art img{transition:none}}
@media(max-width:1000px){
  .compare{padding:56px 0}
  .compare-inner{grid-template-columns:1fr;gap:36px}
  .compare-art{justify-self:center;width:min(100%,440px)}
  .compare-copy h2{font-size:clamp(30px,6.6vw,40px)}
}

/* --- v2.1: homepage capture module uses the REC card slice --------------- */
.capture-detail img{max-width:680px}


/* --- v2.2 (Oct 12): spec page X-ray product stands straight --------------
   (retired in v3.1: the X-ray render was replaced by the colourway switcher,
   so the .spec-product element — and this override — no longer exist.)       */


/* --- v2.3 (Oct 12): breathing room under the homepage video band --------- */
/* The "从早安，到晚安" toolbar sits flush against the dark film band above;
   the design comp leaves ~39px from the band edge to the heading glyphs. */
.accordion-story{padding-top:32px}
@media(max-width:700px){.accordion-story{padding-top:26px}}

/* ==========================================================================
   v2.4 (Oct 12) — 珍藏回忆 page
   1. compare module: neutralise the legacy "small square card" rule
      (aspect-ratio:1 + overflow:hidden + rotate(2deg) + 470px cap) that made
      the band 1920px tall on desktop and clipped the collage on phones.
   2. memory timeline: rebuilt as a real 3x2 photo grid instead of one flat
      1920x741 image, so it reflows properly on tablet and mobile.
   ========================================================================== */

/* --- 1. compare module --------------------------------------------------- */
.compare{
  aspect-ratio:auto;
  overflow:visible;
  border-radius:0;
  box-shadow:none;
  transform:none;
  max-width:none;
  margin:0;
  position:static;
  background:#EEEDFF;
}
.compare-inner{align-items:center;row-gap:44px}
.compare-art{width:min(100%,620px)}

/* --- 2. memory timeline -------------------------------------------------- */
.recall-section{position:relative;overflow:hidden;background:#FAFAFF;padding:96px 0}
.recall-deco{position:absolute;inset:0;z-index:0;pointer-events:none}
.recall-deco img{position:absolute;left:0;display:block;width:100%;height:auto;opacity:.9}
.recall-deco .g-a{top:0}
.recall-deco .g-b{bottom:0}
.recall-inner{position:relative;z-index:1;display:grid;grid-template-columns:30.8% 53.9%;justify-content:space-between;align-items:center}
.recall-copy h2{font-size:clamp(28px,2.9vw,52px);line-height:1.3;letter-spacing:-.03em;margin:0 0 20px}
.recall-copy p{color:var(--muted);font-size:15.5px;line-height:1.8;margin:0}
.recall-copy .recall-more{margin-top:22px}
.recall-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:46px 34px}
.recall-grid li{display:flex;flex-direction:column;gap:13px;min-width:0}
.rc-time{font-size:13px;font-weight:600;color:#5b5a70;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.recall-shot{display:block;border-radius:16px;overflow:hidden;background:#e9e8f5;box-shadow:0 18px 42px -22px #19182b66}
.recall-shot img{display:block;width:100%;height:auto;aspect-ratio:88/100;object-fit:cover;transition:transform .7s cubic-bezier(.22,.8,.25,1)}
.recall-grid li:hover .recall-shot img{transform:scale(1.04)}
@media(prefers-reduced-motion:reduce){.recall-shot img{transition:none}}

@media(max-width:1000px){
  .compare{padding:64px 0}
  .recall-section{padding:64px 0}
  .recall-inner{grid-template-columns:1fr;row-gap:38px}
  .recall-copy h2{font-size:clamp(28px,6.6vw,40px)}
  .recall-grid{gap:30px 22px}
  .recall-deco img{width:180%}
}
@media(max-width:700px){
  .compare{padding:48px 0}
  .recall-section{padding:52px 0}
  .recall-grid{grid-template-columns:repeat(2,1fr);gap:24px 14px}
  .recall-grid li{gap:9px}
  .recall-shot{border-radius:12px}
  .rc-time{font-size:12px}
  .recall-deco img{width:280%}
}

/* --- v2.4.1 (Oct 12): recall grid shows images only, no time labels ------ */
.recall-grid li{gap:0}
.recall-grid{gap:32px 34px}
@media(max-width:1000px){.recall-grid{gap:24px 22px}}
@media(max-width:700px){.recall-grid{gap:18px 14px}.recall-grid li{gap:0}}

/* --- v2.4.2 (Oct 12): show the supplied slices in full, never crop ------- */
/* The six slices have natural ratios between .787 and .892, so a fixed
   aspect-ratio + object-fit:cover trimmed the slimmer ones. Let each image
   keep its own ratio and align rows to the top instead of stretching. */
.recall-grid{align-items:start}
.recall-shot{background:transparent;box-shadow:none;border-radius:16px}
.recall-shot img{aspect-ratio:auto;height:auto;object-fit:contain;width:100%}
@media(max-width:700px){.recall-shot{border-radius:12px}}

/* --- v2.5 (Oct 12): footer QR codes revealed on hover -------------------- */
.qr-trigger{position:relative;display:inline-flex;align-items:center}
.qr-pop{
  position:absolute;bottom:calc(100% + 14px);right:0;z-index:60;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:10px 10px 12px;border-radius:12px;background:#fff;
  box-shadow:0 22px 52px -14px #000000b8;
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(8px) scale(.96);transform-origin:bottom right;
  transition:opacity .22s ease,transform .26s cubic-bezier(.22,.8,.25,1),visibility .22s;
}
.qr-pop img{display:block;width:128px;height:128px;object-fit:contain}
.qr-pop em{font-style:normal;font-size:12px;color:#19182B;line-height:1.4;white-space:nowrap}
.qr-pop:after{content:'';position:absolute;top:100%;right:22px;width:12px;height:12px;background:#fff;transform:translateY(-50%) rotate(45deg)}
.qr-trigger:hover .qr-pop,
.qr-trigger:focus-within .qr-pop,
.qr-trigger.qr-open .qr-pop{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0) scale(1)}
@media(prefers-reduced-motion:reduce){.qr-pop{transition:none}}
@media(max-width:700px){
  .qr-pop{right:auto;left:0;transform-origin:bottom left}
  .qr-pop:after{right:auto;left:22px}
  .qr-pop img{width:112px;height:112px}
}

/* ==========================================================================
   v2.6 (Oct 12) — 探索 APP page
   1. tighten the gap between a tab panel's heading and its card so head+card
      fit inside one screen (the old 245px head + 38px gap + over-tall card
      pushed the panel past a normal laptop viewport).
   2. give the card the design's 671 : 609 column split and stop cropping the
      671x527 slices, so all four tabs share one card geometry.
   3. the "同步与回顾" tab now uses the same two-column card as the others.
   ========================================================================== */

/* --- 1. panel rhythm ----------------------------------------------------- */
.app-features{padding:64px 0}
.feature-tabs{margin-bottom:34px}
.feature-head{min-height:0;padding:38px 0 34px}
.feature-card{margin-top:32px}

/* --- 2. one card geometry for all four tabs ------------------------------ */
.feature-card{grid-template-columns:671fr 609fr}
.fc-media img{width:100%;height:auto;object-fit:fill}
.fc-copy{padding:56px 54px}

/* --- 3. sync tab icon (supplied calendar slice) -------------------------- */
.fc-icon{width:56px;height:56px;object-fit:contain;margin-top:32px;opacity:1}

@media(max-width:1000px){
  .app-features{padding:48px 0}
  .feature-tabs{margin-bottom:26px}
  .feature-head{padding:30px 0 26px}
  .feature-card{margin-top:26px}
  .fc-copy{padding:34px 28px}
  .fc-icon{width:46px;height:46px;margin-top:24px}
}

/* v2.6 tune: match the design's 55px gap under the panel heading ---------- */
.feature-card{margin-top:22px}
@media(max-width:1000px){.feature-card{margin-top:20px}}

/* v2.6 mobile: stacked card keeps the slice's own ratio (no crop, no 280px void) */
@media(max-width:1000px){
  .feature-card{grid-template-columns:1fr}
  .fc-media{min-height:0}
  .fc-media img{width:100%;height:auto;object-fit:contain}
}

/* --- v2.7 (Oct 12): the two panel icons now use the supplied slices ------ */
/* 纪要整理 = the 4-point star slice, AI 对话 = the waveform slice.
   Transparent export padding was trimmed off the sources; both images keep
   their own aspect ratio (never cropped) and are sized so the visible glyph
   matches the design comps (star glyph ~27px, waveform ~316px wide). */
.fc-icon{display:block;height:auto;object-fit:contain;opacity:1}
.fc-icon-star{width:74px;margin-top:28px}
.fc-icon-wave{width:min(316px,100%);margin-top:30px}
@media(max-width:1000px){
  .fc-icon-star{width:60px;margin-top:22px}
  .fc-icon-wave{width:min(260px,100%);margin-top:24px}
}

/* ==========================================================================
   v2.8 (Oct 12) — immersive transparent header
   Reference model: rayneo.cn sets the header to `position:fixed; background:none`
   with a white wordmark + white nav links over the hero, then swaps to
   `background:#fff` once scrolled (their `.header_on` state).
   Applied here the same way, with one addition: our two photo heroes mix very
   bright (luma 250) and very dark (luma 5) tones inside the header band, so a
   soft top gradient scrim is layered behind the bar to keep the white ink
   legible anywhere on the photo. The two flat-light pages (#FAFAFF) keep dark
   ink with no scrim.
   ========================================================================== */

/* --- 1. the bar itself: fixed + transparent at the top ------------------- */
.nav{
  position:fixed;top:0;left:0;right:0;width:100%;
  z-index:60;                         /* above hero media and floating button */
  background:transparent;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  border-bottom:1px solid transparent;
  transition:background .45s ease,border-color .45s ease,box-shadow .45s ease;
}

/* gradient scrim, painted behind the bar content but still inside the header
   stacking context so it always sits over the hero image */
.nav:before{
  content:'';position:absolute;left:0;right:0;top:0;height:180px;
  background:linear-gradient(180deg,
    rgba(9,9,20,.62) 0%,
    rgba(9,9,20,.48) 42%,
    rgba(9,9,20,.16) 76%,
    rgba(9,9,20,0) 100%);
  opacity:0;transition:opacity .45s ease;pointer-events:none;
}
/* the scrim exists only where the ink is white (photographic heroes); the
   flat-light pages stay completely clean */
body.nav-ink-light .nav:before{opacity:1}
body.nav-ink-light .nav.nav-on:before{opacity:0}
.navin{position:relative;z-index:1}

/* --- 2. scrolled state: frosted solid bar ------------------------------- */
.nav.nav-on{
  background:rgba(250,250,255,.92);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  border-bottom-color:var(--line);
  box-shadow:0 12px 34px -26px #19182b80;
}

/* --- 3. light ink (photographic heroes) --------------------------------- */
body.nav-ink-light .nav .logo img{filter:brightness(0) invert(1);transition:filter .45s ease}
body.nav-ink-light .nav .links a{color:#fff}
body.nav-ink-light .nav .links a[aria-current=page]{color:#fff}
body.nav-ink-light .nav .links a[aria-current=page]:after{background:#fff}
body.nav-ink-light .nav .lang{
  color:#fff;background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.46)
}
body.nav-ink-light .nav .lang option{color:#19182B}
body.nav-ink-light .nav .mobilemenu{color:#fff}
body.nav-ink-light .nav .links a:hover{color:#fff;opacity:.78}

/* once the solid bar is in, everything returns to dark ink */
body.nav-ink-light .nav.nav-on .logo img{filter:none}
body.nav-ink-light .nav.nav-on .links a,
body.nav-ink-light .nav.nav-on .links a[aria-current=page]{color:var(--brand)}
body.nav-ink-light .nav.nav-on .links a:not([aria-current=page]){color:#19182B}
body.nav-ink-light .nav.nav-on .links a[aria-current=page]:after{background:var(--brand)}
body.nav-ink-light .nav.nav-on .lang{color:#19182B;background:white;border-color:var(--line)}
body.nav-ink-light .nav.nav-on .mobilemenu{color:#19182B}

/* the mobile dropdown is an opaque panel, so its links stay dark even while
   the bar above is transparent */
@media(max-width:850px){
  body.nav-ink-light .nav .links.open a,
  body.nav-ink-light .nav .links.open a[aria-current=page]{color:#19182B}
  body.nav-ink-light .nav .links.open a[aria-current=page]{color:var(--brand)}
  body.nav-ink-light .nav .links.open a[aria-current=page]:after{background:var(--brand)}
}

/* --- 4. keep in-page anchor targets clear of the fixed bar -------------- */
main section[id],main [id]{scroll-margin-top:104px}

/* --- 5. booking: hero media now runs the full height behind the bar ----- */
.story-hero,.memories-hero{min-height:700px}

/* ==========================================================================
   v2.9 (Oct 13) — 产品参数：feature switcher (Apple-style)
   Left column is a list of plain-text feature buttons with hairline dividers;
   the active one reveals a one-line description and the right-hand stage
   cross-fades to that feature's visual. Nothing selected = the default visual.
   ========================================================================== */

.sw-band{background:#fff}
.sw-section{padding:96px 0 24px}
.sw-head{max-width:760px;margin:0 0 46px}
.sw-head h2{font-size:clamp(28px,3vw,46px);line-height:1.28;letter-spacing:-.03em;margin:0 0 16px}
.sw-head p{color:var(--muted);font-size:16px;line-height:1.75;margin:0}

.sw-body{display:grid;grid-template-columns:minmax(0,42fr) minmax(0,58fr);gap:72px;align-items:center}

/* --- the button list: Apple-style fully-rounded chips ------------------- */
/* Measured off the reference: each chip is a stadium shape (its fill ratio
   matches radius = height/2 within 0.009), auto-width so it hugs its label,
   left-aligned and stacked; the active chip fills solid and its description
   opens in a rounded card directly beneath it. */
.sw-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;align-items:flex-start;gap:10px;width:100%}
.sw-entry{display:flex;flex-direction:column;align-items:flex-start;width:100%;max-width:520px}
.sw-pill{
  appearance:none;-webkit-appearance:none;
  display:inline-flex;align-items:center;
  min-height:46px;padding:0 24px;border:0;border-radius:999px;
  background:#F2F2F5;color:#19182B;
  font:inherit;font-size:16px;font-weight:500;line-height:1.35;letter-spacing:-.01em;
  cursor:pointer;white-space:nowrap;
  transition:background .25s ease,color .25s ease,transform .25s ease;
}
.sw-pill:hover{background:#E7E7EC}
.sw-pill:active{transform:scale(.985)}
.sw-pill:focus-visible{outline:3px solid var(--brand);outline-offset:3px}
.sw-title{display:block}
.sw-pill[aria-pressed=true]{background:var(--brand);color:#fff}

/* the description: rounded card, revealed under the active chip */
.sw-desc{
  overflow:hidden;
  max-height:0;opacity:0;margin-top:0;
  border-radius:20px;background:#F6F6F9;
  padding:0 22px;
  font-size:14.5px;line-height:1.72;color:var(--muted);
  transition:max-height .45s cubic-bezier(.22,.8,.25,1),opacity .35s ease,
             margin-top .45s cubic-bezier(.22,.8,.25,1),padding .45s cubic-bezier(.22,.8,.25,1);
}
.sw-entry.is-on .sw-desc{
  max-height:220px;opacity:1;margin-top:10px;padding:16px 22px;
}

/* --- the visual stage --------------------------------------------------- */
.sw-stage{
  position:relative;aspect-ratio:3/2;width:100%;
  display:flex;align-items:center;justify-content:center;
}
.sw-view{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;
  transition:opacity .5s ease,visibility .5s ease;
}
.sw-view.is-on{opacity:1;visibility:visible}
.sw-img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.sw-idle{max-height:92%}
.sw-gif{width:100%;max-height:100%}

@media(prefers-reduced-motion:reduce){
  .sw-pill,.sw-desc,.sw-view{transition:none}
}

/* --- tablet / mobile ---------------------------------------------------- */
@media(max-width:1050px){
  .sw-body{grid-template-columns:1fr;gap:38px}
  .sw-section{padding:72px 0 16px}
  .sw-head{margin-bottom:34px}
  .sw-list{gap:9px}
  .sw-pill{min-height:44px;padding:0 21px;font-size:15.5px}
  .sw-desc{font-size:14px}
  .sw-stage{aspect-ratio:16/10}
}
@media(max-width:700px){
  .sw-section{padding:56px 0 8px}
  .sw-head h2{font-size:26px}
  .sw-head p{font-size:14.5px}
  .sw-entry{max-width:100%}
  .sw-list{gap:8px}
  .sw-pill{min-height:42px;padding:0 18px;font-size:15px}
  .sw-desc{border-radius:16px;font-size:13.5px;line-height:1.68}
  .sw-entry.is-on .sw-desc{padding:14px 16px;border-radius:16px}
  .sw-stage{aspect-ratio:4/3}
}

/* visually hidden helper (the switcher announces its active feature here) */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ==========================================================================
   v3.0 (Oct 13) — 产品参数 hero is now an autoplaying banner video
   The film is a real-world lifestyle clip, so it is not tonally flat: sampled
   across ten frames it spans near-black to near-white inside the copy block.
   Measured against the footage, the existing copy ink (dark) fails at 1.0-1.4:1
   and even white ink fails at 1.2:1, so the hero switches to white copy plus a
   left gradient scrim. Solving per-frame the scrim must stay >= 0.52 across the
   whole copy block to guarantee 4.5:1 for the body text; this gradient holds
   0.73 -> 0.57 over x 16.7%-54.7% and reaches 0 by 82%, leaving the right two
   thirds of the film completely untouched. Verified worst-case 5.52:1.
   ========================================================================== */
.spec-band{background:#0b0a14}
.spec-band .spec-video{display:block;width:100%;height:auto}
.spec-band:after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(90deg,
    rgba(11,10,20,.66) 0%,
    rgba(11,10,20,.62) 34%,
    rgba(11,10,20,.58) 56%,
    rgba(11,10,20,0) 80%);
}
.spec-band .canvas-copy{z-index:2}
.spec-band .canvas-left h1,
.spec-band .canvas-left p{color:#fff}
.spec-band .canvas-left p{color:#e7e6f2}

/* a readable floor for the hero copy: the cqw sizing above collapses to
   ~9px at 1100px wide, which is fine as a design curve at 1920 but not usable
   in the middle of the range. max() leaves the full-width design untouched. */
.spec-band .canvas-left p{font-size:max(.92cqw,15px)}
.spec-band .canvas-left h1{font-size:max(2.6cqw,34px)}

@media(max-width:1000px){
  /* The copy stacks UNDER the film here, so it sits on the page background,
     not on the video: light band, dark ink, and no scrim at all. */
  .spec-band{background:#FAFAFF}
  .spec-band:after{content:none}
  .spec-band .spec-video{aspect-ratio:auto;object-fit:fill}
  .spec-band .canvas-left{padding-top:30px}
  .spec-band .canvas-left h1{color:#19182B;font-size:clamp(28px,4.6vw,40px);margin-bottom:14px}
  .spec-band .canvas-left p{color:var(--muted);font-size:16px;line-height:1.75}
  .spec-band .canvas-copy{padding-bottom:48px}
}
@media(max-width:700px){
  .spec-band .canvas-left{padding-top:24px}
  .spec-band .canvas-left h1{font-size:clamp(26px,7vw,34px)}
  .spec-band .canvas-left p{font-size:14.5px}
  .spec-band .canvas-copy{padding-bottom:40px}
}

/* ==========================================================================
   v3.1 (Oct 13) — 产品参数：colourway switcher in the 关键参数 section
   The left slot used to hold a single X-ray render. It now holds two colourway
   renders of the same product (beige / black) with a swatch picker.
   Both sources were normalised before export: each was trimmed to its visible
   bounding box, scaled so the product occupies an identical content height, and
   centred on one shared 1579x948 canvas. So the two files are dimensioned
   identically and the swap cannot shift or resize anything — it only
   cross-fades. Swatch colours are sampled from the product bodies themselves
   (#DCD8D4 warm body tone, #313131 charcoal).
   ========================================================================== */

.cw{display:flex;flex-direction:column;gap:22px}
.cw-stage{
  position:relative;aspect-ratio:1579/948;width:100%;
  border-radius:26px;background:#F4F4F6;overflow:hidden;
}
.cw-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  opacity:0;visibility:hidden;
  transition:opacity .45s ease,visibility .45s ease;
}
.cw-img.is-on{opacity:1;visibility:visible}

.cw-picker{display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap}
.cw-opt{
  appearance:none;-webkit-appearance:none;
  display:inline-flex;align-items:center;gap:10px;
  min-height:44px;padding:0 18px 0 14px;border:0;border-radius:999px;
  background:#F2F2F5;color:#19182B;
  font:inherit;font-size:15px;font-weight:500;line-height:1;
  cursor:pointer;white-space:nowrap;
  transition:background .25s ease,box-shadow .25s ease,color .25s ease;
}
.cw-opt:hover{background:#E7E7EC}
.cw-opt:focus-visible{outline:3px solid var(--brand);outline-offset:3px}
.cw-opt.is-on{background:#fff;box-shadow:inset 0 0 0 2px var(--brand);color:var(--brand)}
.cw-dot{
  width:20px;height:20px;border-radius:50%;flex:0 0 auto;
  background:var(--dot);
  box-shadow:inset 0 0 0 1px rgba(25,24,43,.18);   /* keeps the pale swatch readable */
}
.cw-opt.is-on .cw-dot{box-shadow:inset 0 0 0 1px rgba(25,24,43,.10)}

@media(prefers-reduced-motion:reduce){.cw-img,.cw-opt{transition:none}}

@media(max-width:1000px){
  .cw{gap:18px}
  .cw-stage{border-radius:20px}
  .cw-picker{gap:10px}
  .cw-opt{min-height:42px;padding:0 16px 0 12px;font-size:14.5px}
  .cw-dot{width:18px;height:18px}
}

/* ==========================================================================
   v3.2 (Oct 13) — 生活体验 hero is now an autoplaying banner video
   The film is a light, airy lifestyle clip, so the hero copy keeps its
   existing dark ink and light left-hand scrim: measured against the footage the
   copy area scores 5.49:1 for dark ink WITHOUT any scrim (and 7.45:1 with the
   existing one), while white ink only manages 1.01:1. Nothing changes there.

   The NAV needed a backing of its own. The film's bar band runs from near-white
   (sRGB 254) at the left to near-black (sRGB 5) at the right, so neither ink is
   legible unaided - white ink scores 1.0:1 and dark ink 1.0:1. Solving per
   ink-zone, both need a similar opacity to pass (0.56 for white, 0.44 for dark),
   so the deciding factor is which one LOOKS clean. Compositing each way and
   measuring where the resulting bar lands:

       dark scrim  + white ink   ~0.56 alpha -> bar occupies sRGB  22-120  (muddy)
       light scrim + dark ink    ~0.44 alpha -> bar occupies sRGB 130-253  (airy)

   The light option uses less density AND keeps the whole bar in a light tonal
   range, so the film reads as frosted glass rather than a grey smear. It is
   tinted with the site's own surface colour (#FAFAFF), which also harmonises
   with the hero's existing left-hand light wash instead of fighting it. The bar
   is kept compact - 83px tall plus a 35px feather - rather than a tall vignette.
   ========================================================================== */
body.video-hero .nav:before{
  opacity:1;
  height:118px;
  background:linear-gradient(180deg,
    rgba(250,250,255,.58) 0%,
    rgba(250,250,255,.56) 68%,
    rgba(250,250,255,0) 100%);
}
body.video-hero .nav.nav-on:before{opacity:0}

/* ==========================================================================
   v3.3 (Oct 13) — 生活体验 banner fills exactly one screen
   Reference model (arlite.rokid.com): the banner block is sized to the viewport
   rather than to a fixed pixel height. Theirs is `calc(100vh - 57.25px)` because
   their nav sits above the banner; ours is a transparent bar that OVERLAYS the
   hero, so the hero itself takes the full 100vh and nothing else peeks above the
   fold. A bonus of full-height: the film is 16:9, so at 1920 wide its natural
   height is 1080 — exactly a 1080p viewport — which means the cover crop
   disappears entirely on a standard 16:9 desktop screen.

   - min-height:max(680px, min(100vh, 72vw)) gives one screen on desktop ratios
     and an aspect guard elsewhere (see the note on the rule itself).
   - padding-top equal to the bar height re-centres the copy inside the area you
     can actually see (the top 82px is under the transparent nav).
   - ≤700px keeps the existing stacked layout (360px film, copy below on a light
     panel), so this only affects the desktop/tablet range.
   ========================================================================== */
/* One screen wherever a 16:9 frame can actually fill one screen — i.e. whenever
   the viewport is at least ~1.39:1 (16:9, 16:10, 3:2 laptops and monitors all
   qualify, and at 16:9 the crop is literally zero). On squarer or taller windows
   the bar scales with the width instead: a full-height band on a 768x1024 tablet
   would throw away 58% of the frame's width, whereas 72vw keeps the horizontal
   crop under ~22%. */
@media(min-width:701px){
  .story-hero{min-height:max(680px,min(100vh,72vw));padding-top:82px}
}
@supports(height:100dvh){
  @media(min-width:701px){
    /* dvh avoids the URL-bar rounding that vh suffers from on tablets */
    .story-hero{min-height:max(680px,min(100dvh,72vw))}
  }
}

/* ==========================================================================
   v3.5 (Oct 13) — 生活体验：「走一走」横向滚动图片带
   Sits between 第一视角影像 (.capture-detail) and the closing block.

   Reference model (arlite.rokid.com): the image band is PINNED to the viewport
   and advances sideways as you keep scrolling — their gallery wrapper is
   `h-[calc(100vh+<runway>)]` with a sticky inner track. Same mechanic here:
     .walk          height = 100vh + <runway>, set from JS after measuring the
                    track, so vertical scrolling drives the sideways travel and
                    the band releases exactly when the last image lands.
     .walk-pin      sticky at top, exactly one viewport tall, clips the track.
     .walk-track    flex row, translated on X by the scroll progress.
   All six slices ship at one ratio (812:514) and are drawn at 42vh, which stays
   below their native resolution on every desktop width, so nothing is upscaled.

   Fallbacks: on ≤700px and under prefers-reduced-motion the pinning is dropped
   and the band becomes a native horizontal swipe (overflow-x + scroll-snap),
   which also keeps keyboard/trackpad users in control.
   ========================================================================== */
.walk{position:relative;background:#FAFAFF}
.walk-intro{padding:96px 0 46px}
.walk-intro h2{font-size:clamp(32px,3.4vw,52px);line-height:1.24;letter-spacing:-.035em;margin:10px 0 18px}
.walk-intro p{color:var(--muted);font-size:16px;line-height:1.75;max-width:560px;margin:0}

/* Two stacked rows inside one track. All six slices are now the same ratio
   (812:514), so both rows share a single height and every image lines up; the
   lower row is nudged sideways so the pair reads as a staggered filmstrip
   rather than a plain 3x2 grid — and that offset is also what gives the
   sideways travel its length, since three equal images alone are barely wider
   than the viewport. */
.walk-pin{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden}
.walk-track{display:flex;flex-direction:column;gap:26px;margin:0;padding:0 48px;will-change:transform}
.walk-row{display:flex;gap:22px;height:var(--row-h,42vh)}
.walk-row-b{margin-left:26vw}
.walk-row img{
  display:block;height:100%;width:auto;flex:0 0 auto;
  border-radius:22px;background:#EEEDFF;
  transition:transform .7s cubic-bezier(.22,.8,.25,1);
}
.walk-row img:hover{transform:scale(1.035)}

/* progress hairline so the sideways travel is legible */
.walk-pin:after{
  content:'';position:absolute;left:0;bottom:52px;height:1px;width:100%;
  background:var(--line);transform-origin:0 50%;transform:scaleX(0);
}
.walk-pin.is-live:after{transform:scaleX(var(--walk-p,0))}

/* --- fallback: native horizontal swipe (no pinning) ---------------------- */
@media(max-width:700px),(prefers-reduced-motion:reduce){
  .walk{height:auto!important}
  .walk-intro{padding:56px 0 30px}
  .walk-pin{position:static;height:auto;overflow:visible;display:block;padding:0 0 40px}
  .walk-pin:after{content:none}
  /* each row becomes its own native swipe, so nothing is hidden behind a
     pinned animation and the pair simply stacks */
  .walk-track{transform:none!important;padding:0;gap:14px}
  .walk-row{height:auto;margin-left:0;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;gap:14px;padding:0 20px 8px}
  .walk-row img{height:auto;width:min(74vw,420px);scroll-snap-align:center;border-radius:16px}
}
@media(max-width:700px){
  .walk-row img{width:min(78vw,340px)}
}

/* ==========================================================================
   v3.6 (Oct 14) — 珍藏回忆 hero is now an autoplaying banner video, one screen
   The still was replaced by 珍藏回忆.mp4. Measured off the footage (nine frames),
   the hero copy lands on a band that runs from sRGB 9 to 254, so BOTH inks need
   help: white ink scores 1.01:1 and dark ink 1.0:1 unaided. Solved per region,
   the scrim required is 0.557 (white ink) vs 0.500 (dark ink) — near enough that
   the deciding factor is coherence, not opacity. This page is the dark sibling
   of 生活体验: white copy, dark hero, dark nav ink. So it keeps white ink and
   simply strengthens the two scrims it already had.

   The old copy scrim faded out by 68% of the width, which is inside the copy
   block (16.7%–66.7%) — hence its 1.12:1. The replacement HOLDS across the copy
   and only releases after it:
       rgba(11,10,20,.62) 0% -> .62 at 70% -> 0 at 86%
   Verified worst-case 5.63:1 for the h1 and 5.65:1 for the paragraph.

   The nav's existing top scrim reached .48 at the bar's bottom edge, leaving the
   links at 4.29:1. It now holds .60 past the bar before fading:
       rgba(9,9,20,.66) 0% -> .60 at 46% -> .16 at 78% -> 0 at 100%   (200px tall)
   Verified worst-case: logo 5.06, links 6.02, lang 6.28, buttons 6.32.
   ========================================================================== */
body.memories-video .nav:before{
  height:200px;
  background:linear-gradient(180deg,
    rgba(9,9,20,.66) 0%,
    rgba(9,9,20,.60) 46%,
    rgba(9,9,20,.16) 78%,
    rgba(9,9,20,0) 100%);
}

.memories-hero>video{
  display:block;position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;object-position:50% 50%;
}
.memories-hero:after{
  background:linear-gradient(90deg,
    rgba(11,10,20,.62) 0%,
    rgba(11,10,20,.62) 70%,
    rgba(11,10,20,0) 86%);
}

/* one screen, with the same aspect guard the other video heroes use: full height
   whenever the viewport is at least ~1.39:1 (16:9 / 16:10 / 3:2), otherwise the
   band scales with the width so the 16:9 frame is not heavily side-cropped */
@media(min-width:701px){
  .memories-hero{min-height:max(680px,min(100vh,72vw))}
  /* nudge the copy down by half the bar so it is centred in the area you can
     actually see, not in the full-height band */
  .memories-hero .canvas-left{top:calc(50% + 41px)}
}
@supports(height:100dvh){
  @media(min-width:701px){
    .memories-hero{min-height:max(680px,min(100dvh,72vw))}
  }
}

/* the stacked layout is defined entirely in the v3.6.1 block below, so this
   page has one mobile treatment rather than two competing ones */

/* ==========================================================================
   v3.6.1 (Oct 14) — 珍藏回忆 hero: mobile/tablet layout rebuilt to match 生活体验
   Measured at 390px, the old stacked layout had three faults:
     · .memories-hero kept its base `min-height:700px`, so with the film only
       320px tall the hero left ~380px of dead space under it;
     · .canvas-copy stayed `position:absolute; inset:0` (the ≤1000px rule only
       reset left/right/bottom, leaving `top:0`), so the copy was pinned to the
       TOP of the hero and drew straight over the film;
     · the copy inherited the desktop `cqw` sizing, which collapses on a phone —
       the h1 measured 15.2px and the paragraph 3.7px.
   The 生活体验 hero solves all three by letting the block size to its content:
   film in normal flow on top, copy flowing underneath on the page surface.
   Same treatment here, with dark ink because the copy no longer sits on the film.
   ========================================================================== */
@media(max-width:1000px){
  .memories-hero{display:block;min-height:0;background:#FAFAFF}
  .memories-hero>video{
    position:static;display:block;width:100%;height:auto;
    object-fit:cover;object-position:62% center;
  }
  .memories-hero .canvas-copy{position:static;inset:auto;padding:0}
  .memories-hero .canvas-left{
    position:static;top:auto;transform:none;
    /* the copy is not inside .wrap, so it needs the site gutter explicitly */
    width:auto;max-width:none;padding:36px 20px 52px;
  }
  .memories-hero .canvas-left h1{
    color:#19182B;font-size:clamp(28px,6.6vw,40px);line-height:1.24;margin:0 0 14px;
  }
  .memories-hero .canvas-left p{color:var(--muted);font-size:16px;line-height:1.72;max-width:46ch}
  /* the copy is off the film now, so the dark wash has nothing left to do */
  .memories-hero:after{content:none}
  /* give the film a portrait-friendly band instead of a sliver of 16:9 */
  .memories-hero>video{height:max(300px,56vw)}
}
@media(max-width:700px){
  .memories-hero .canvas-left{padding:30px 20px 44px}
  .memories-hero .canvas-left h1{font-size:clamp(26px,7.2vw,34px)}
  .memories-hero .canvas-left p{font-size:14.5px;line-height:1.7;max-width:none}
}

/* ==========================================================================
   v3.7 (Oct 14) — 生活体验：一键录音模块
   The dark `video-band` (the film entry) was removed from between the
   quicklinks and the day story, and this feature module now sits between the
   day story and 第一视角影像.

   It follows the page's other feature module (.capture-detail) so the two read
   as siblings: same 2-col grid, same heading scale. The video is placed on the
   RIGHT because capture-detail already has its image on the left, so the pair
   alternates instead of stacking two left-media blocks together. Background is
   plain white — the neighbours are #FAFAFF (day story) and #EEEDFF
   (capture-detail), so white separates them without adding a third tint.

   The film ships as 1920x1080 and is drawn inside a 16:9 box, so it is never
   cropped; at the widest layout that box is ~613px wide, well under the file's
   native resolution, so nothing is upscaled either.
   ========================================================================== */
.record-feature{background:#fff;padding:96px 0}
.rec-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:78px;align-items:center}
.rec-copy h2{font-size:clamp(30px,3.3vw,51px);line-height:1.22;letter-spacing:-.035em;margin:12px 0 18px}
.rec-copy p{color:var(--muted);font-size:17px;line-height:1.75;max-width:460px;margin:0}
.rec-media{position:relative}
.rec-video{
  display:block;width:100%;aspect-ratio:16/9;object-fit:cover;
  border-radius:26px;background:#141220;
  box-shadow:0 34px 64px -34px #19182b47;
}

@media(max-width:1000px){
  .record-feature{padding:66px 0}
  .rec-grid{grid-template-columns:1fr;gap:30px}
  /* copy stays above the film, matching .capture-detail's stacked order */
  .rec-copy{order:1}
  .rec-media{order:2}
  .rec-copy p{max-width:560px}
  .rec-video{border-radius:20px}
}
@media(max-width:700px){
  .record-feature{padding:52px 0}
  .rec-copy h2{margin:10px 0 14px}
  .rec-copy p{font-size:15px;line-height:1.72}
  .rec-video{border-radius:16px}
}

/* ==========================================================================
   v3.8 (Oct 14) — 珍藏回忆：scenes 模块改为通栏宽视频
   `.memories-scenes` used to hold two still cards (1.35fr + 1fr). Both are
   replaced by a single full-width card carrying 专注陪伴身边人.mp4, with the
   section head left on top as the module's title.

   The card reuses the existing .scene treatment (rounded, clipped, dark bottom
   gradient, caption pinned bottom-left) so it still reads as part of the same
   family — only the media source changed from <img> to <video>. Height comes
   from a 16:9 aspect ratio instead of the old min-height, so the film is shown
   whole rather than cropped, and the caption block is scaled up to suit the
   wider card. The hover zoom is deliberately NOT applied to the video: a slow
   scale on moving footage reads as a glitch, not as polish.
   ========================================================================== */
.memories-scenes .scene-grid{grid-template-columns:1fr}
.memories-scenes .scene.scene-video{min-height:0;aspect-ratio:16/9}
.memories-scenes .scene>video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;display:block;
}
.memories-scenes .scene-video .scene-caption{bottom:40px;left:46px;right:46px}
.memories-scenes .scene-video .scene-caption h3{
  font-size:clamp(26px,2.75vw,40px);line-height:1.2;margin:0 0 10px;
}
.memories-scenes .scene-video .scene-caption p{font-size:16px;line-height:1.6;max-width:540px}

@media(max-width:1000px){
  .memories-scenes .scene-video .scene-caption{bottom:26px;left:24px;right:24px}
  .memories-scenes .scene-video .scene-caption h3{font-size:clamp(22px,4vw,30px)}
  .memories-scenes .scene-video .scene-caption p{font-size:14.5px;max-width:none}
}
@media(max-width:700px){
  .memories-scenes .scene-video .scene-caption{bottom:20px;left:18px;right:18px}
  .memories-scenes .scene-video .scene-caption h3{font-size:21px;margin-bottom:7px}
  .memories-scenes .scene-video .scene-caption p{font-size:13.5px}
}

/* ==========================================================================
   v3.8.1 (Oct 14) — 珍藏回忆：两张 scene 照片回到视频卡下方
   v3.8 had replaced all of `.memories-scenes`' cards with the one wide video
   card; the two original scene photos were wanted back, so they now sit in a
   `.scene-pair` row directly under it. They keep their original 1.35fr / 1fr
   proportion and their original captions, and reuse the untouched `.scene`
   styling (rounded, clipped, bottom gradient, hover zoom on the still).

   `.scene-grid` stays a single-column stack: row 1 the video, row 2 the pair.
   ========================================================================== */
.memories-scenes .scene-pair{display:grid;grid-template-columns:1.35fr 1fr;gap:22px}
/* the video card is 16:9, so give the pair below it the same rounded family
   and let both stills share one height */
.memories-scenes .scene-pair .scene{min-height:440px}

@media(max-width:1000px){
  .memories-scenes .scene-pair{gap:18px}
  .memories-scenes .scene-pair .scene{min-height:340px}
}
@media(max-width:700px){
  /* stack the pair on phones, matching how they behaved before */
  .memories-scenes .scene-pair{grid-template-columns:1fr;gap:16px}
  .memories-scenes .scene-pair .scene{min-height:300px}
}

/* ==========================================================================
   v3.9 (Oct 14) — 珍藏回忆 recall 模块改版
   --------------------------------------------------------------------------
   设计稿（用户 UI 图）把原来的「左文案 + 3×2 时间线九宫格」改成
   「左文案 + 两张 APP 卡片竖向错落排布 + 一枚悬浮功能标签」。

   几何来自对 UI 图的测量（把 UI 图里的元素换算成舞台内的百分比）：
     舞台           652 × 417   (aspect-ratio)
     card A (Frame 1118)  left   0.0%   top  0.0%   width 51.5%
     card B (Frame 1119)  left  39.1%   top 23.1%   width 60.9%   ← 压在 A 上
     chip   (Group 418)   left  -1.2%   top 63.7%   width 46.0%   ← 最上层
   三张切图都是「白卡 + 内容」的浅色底，所以给它们加 drop-shadow 从
   #FAFAFF 背景里浮起来（drop-shadow 会跟随 alpha 圆角，box-shadow 不会）。

   旧的 .recall-grid / .recall-shot 规则保留（本文件更上方），
   切图文件 timeline-1..6.png 也保留，只是不再被引用，方便随时回退。
   ========================================================================== */
.recall-inner{grid-template-columns:35% 1fr;column-gap:0;align-items:center}
.recall-copy h2{font-size:clamp(28px,2.9vw,48px)}

.recall-stage{position:relative;width:81.5%;aspect-ratio:652/417}
.recall-stage .recall-card{margin:0;position:absolute;filter:drop-shadow(0 30px 54px -26px #19182b5c)}
.recall-stage .recall-card img{display:block;width:100%;height:auto}
.recall-stage .rc-a{left:0;top:0;width:51.5%;z-index:1}
.recall-stage .rc-b{left:39.1%;top:23.1%;width:60.9%;z-index:2}
.recall-stage .recall-chip{position:absolute;left:-1.2%;top:63.7%;width:46%;height:auto;z-index:3;filter:drop-shadow(0 18px 32px -20px #19182b47)}

@media(max-width:1000px){
  .recall-inner{grid-template-columns:1fr;row-gap:40px}
  /* 单列时舞台若铺满整宽，卡片会比桌面端还大，这里压一个上限 */
  .recall-stage{width:100%;max-width:760px}
}
@media(max-width:700px){
  /* 手机上错落排布会挤到看不清，改成三块依次排列 */
  .recall-stage{width:100%;aspect-ratio:auto;display:flex;flex-direction:column;gap:16px}
  .recall-stage .recall-card,
  .recall-stage .recall-chip{position:static;width:100%;filter:none}
  .recall-stage .recall-card{box-shadow:0 16px 34px -20px #19182b52;border-radius:14px}
}

/* ==========================================================================
   v3.11 (Oct 14) — 珍藏回忆 recall 模块：英文版右侧换一张竖图
   --------------------------------------------------------------------------
   中文版右侧是两张 APP 界面卡片（rc-a / rc-b）＋一枚浮标签；
   英文版按用户要求只放一张 476×596 的竖版照片（Frame 1117）。
   用 html[lang] 切换，因为 site.js 的 setLanguage() 会写
   document.documentElement.lang（zh-CN / en）。
   标记里 <html lang> 默认是 zh-CN，所以**没有 JS 时仍然走中文版**，
   与全站 zh-default 约定一致。
   竖图给了 loading="lazy"：中文态下它是 display:none、没有布局盒，
   所以中文访客不会去下载这张英文图。
   ========================================================================== */
.recall-stage .recall-solo{display:none;margin:0}
html[lang=en] .recall-stage .recall-solo{display:block}
html[lang=en] .recall-stage .recall-solo img{display:block;width:100%;height:auto;border-radius:22px;box-shadow:0 30px 54px -26px #19182b5c}
html[lang=en] .recall-stage .recall-card,
html[lang=en] .recall-stage .recall-chip{display:none}
/* 竖版舞台：宽度按列宽的 56% 给，高度由图片自身比例决定 */
html[lang=en] .recall-stage{width:56%;aspect-ratio:476/596}

@media(max-width:1000px){
  /* 单列时舞台回到整宽，但别让竖图比桌面端还大 */
  html[lang=en] .recall-stage{width:100%;max-width:430px}
}
@media(max-width:700px){
  html[lang=en] .recall-stage{width:100%;max-width:100%}
  html[lang=en] .recall-stage .recall-solo img{border-radius:16px}
}

/* ==========================================================================
   v3.12 (Oct 14) — 顶部导航：选中项不再画下划线
   --------------------------------------------------------------------------
   下划线原本来自 5 条规则里的 :after 伪元素（都靠 content:'' 才渲染）：
     .links a[aria-current=page]:after                    （桌面）
     @media(max-width:850px) .links a[aria-current=page]:after （移动抽屉）
     body.nav-ink-light .nav .links a[aria-current=page]:after          （透明栏白线）
     body.nav-ink-light .nav.nav-on .links a[aria-current=page]:after   （滚过后品牌色）
     body.nav-ink-light .nav .links.open a[aria-current=page]:after     （移动抽屉）
   这里统一把 content 置为 none 一次干掉，比逐条改那 5 处压缩过的行更不容易出错；
   原来的规则保留，方便随时恢复。
   选中态**仍然靠颜色区分**（桌面是 --brand 蓝，透明栏上是白色）。
   ========================================================================== */
.links a[aria-current=page]:after,
body.nav-ink-light .nav .links a[aria-current=page]:after,
body.nav-ink-light .nav.nav-on .links a[aria-current=page]:after,
body.nav-ink-light .nav .links.open a[aria-current=page]:after{content:none}

/* ==========================================================================
   v3.13 (Oct 14) — 英文版珍藏回忆：竖图靠右对齐
   --------------------------------------------------------------------------
   英文态下 .recall-stage 在网格第二列（35% 1fr）里默认左对齐，左边缘正好
   落在正文右边缘上（实测 x=608 / copy.right=608，gap=0），而右侧还空着 366px。
   加 justify-self:end 把它推到列尾，图片靠右、与正文拉开距离。
   单列断点（≤1000px）下网格只有一列，右对齐会让图悬在右边，所以还原为左对齐。
   ========================================================================== */
html[lang=en] .recall-stage{justify-self:end}
@media(max-width:1000px){
  html[lang=en] .recall-stage{justify-self:start}
}

/* ==========================================================================
   v3.14 (Oct 14) — 语言切换：自绘圆角下拉
   --------------------------------------------------------------------------
   原来的 <select> 胶囊是圆角（border-radius:30px），但它展开后的列表由浏览器
   自己绘制，**无法用 CSS 设圆角**（截图里就是「上面圆角、下面直角」）。
   所以换成自绘控件：胶囊按钮 + 圆角列表，四页统一。
   原生 <select> 保留在标记里作为无 JS 回退；JS 就绪后给它加
   html.langpick-ready，此时隐藏原生 select、显示自绘控件。
   select.value / change 事件链路不变，所以 site.js 里既有的 setLanguage
   与 measure 两处监听都不用改。
   ========================================================================== */
.langpick{position:relative;display:inline-flex;align-items:center}
.langpick-btn,.langpick-menu{display:none}

/* JS 就绪后：隐藏原生 select（display:none 不影响读取/写入 value 与派发 change） */
html.langpick-ready .langpick>select{display:none}
html.langpick-ready .langpick-btn{
  display:inline-flex;align-items:center;gap:8px;
  font:inherit;font-size:14px;line-height:1;cursor:pointer;white-space:nowrap;
  min-height:44px;padding:9px 14px 9px 16px;border-radius:30px;
  color:var(--ink);background:white;border:1px solid var(--line);
}
html.langpick-ready .langpick-menu{
  display:block;position:absolute;z-index:40;top:calc(100% + 8px);right:0;left:auto;
  margin:0;padding:6px;list-style:none;min-width:100%;
  background:white;border:1px solid var(--line);border-radius:18px;
  box-shadow:0 18px 42px -18px #19182b4d;
}
html.langpick-ready .langpick-menu[hidden]{display:none}
html.langpick-ready .langpick-menu li{
  padding:10px 18px;border-radius:12px;cursor:pointer;white-space:nowrap;
  font-size:14px;color:var(--ink);background:none;
}
html.langpick-ready .langpick-menu li:hover,
html.langpick-ready .langpick-menu li:focus-visible{background:var(--lavender);outline:none}
html.langpick-ready .langpick-menu li[aria-selected=true]{color:var(--brand);font-weight:600}
html.langpick-ready .langpick-caret{flex:none;opacity:.7;transition:transform .2s}
html.langpick-ready .langpick-btn[aria-expanded=true] .langpick-caret{transform:rotate(180deg)}

/* 透明栏（nav-ink-light）阶段：胶囊转白字白描边；弹出列表仍是浅色面板 */
body.nav-ink-light .nav .langpick-btn{color:#fff;background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.46)}
body.nav-ink-light .nav.nav-on .langpick-btn{color:#19182B;background:white;border-color:var(--line)}

@media(max-width:700px){
  html.langpick-ready .langpick-btn{font-size:12px;padding:8px 10px 8px 12px;min-height:40px;gap:6px}
  html.langpick-ready .langpick-menu li{font-size:13px;padding:9px 14px}
}
@media(prefers-reduced-motion:reduce){
  html.langpick-ready .langpick-caret{transition:none}
}

/* ==========================================================================
   v3.15 (Oct 14) — 珍藏回忆：banner 遮罩统一 + 顶部遮罩不再多一层 + 导航选中态可见
   --------------------------------------------------------------------------
   1) banner 的黑色遮罩（英文版看起来"奇怪"的根因）
      原来是横向渐变： rgba(11,10,20,.62) 0% → .62@70% → 0@86%，
      也就是**画面右侧约 30% 完全没有遮罩**。中文片右侧本来是暗的
      （实测均值 71-75），所以那道竖向接缝看不出来；英文片右侧很亮
      （均值 156-197），接缝就成了一条明显的"断层"。
      现改为整幅均匀覆盖，不留任何渐变接缝。
      alpha 取 0.78（比原来左侧的 .62 更实，因为右侧原来是 0）：实测两片全时间轴
      最坏一格的 14×14 背景对比度 —— 英文 h1 4.35 / 段落 4.51 / 导航 5.09，
      中文 h1 3.83 / 段落 4.00 / 导航 4.11（英文片更亮，是原来那道接缝最明显的原因）。
      h1(大字) ≥ 3:1 —— 用两个片子全时间轴的实测帧逐帧核算，见
      _tools/verify_mem_scrim.py 的输出。
   2) 顶部导航遮罩"比例大小和其它页不一致"
      本页曾单独有一条 200px 的深色纵向渐变（其它页 180px / 118px）。
      现在整幅均匀遮罩已经把导航带一起盖住了，再叠一层只会多出一条水平断层，
      所以本页不再单独加顶部渐变 —— 顶部与画面其余部分完全同色。
   3) 导航选中态看不见（nav-ink-light 的 珍藏回忆 / 产品参数 两页）
      透明栏阶段所有链接都是纯白，当前页与其它页完全无法区分
      （实测四个链接 color 都是 rgb(255,255,255)）。处理：当前页保持纯白，
      其余链接降到 74% —— 只改颜色不改任何盒尺寸，
      所以不会引入"大小/间距不一致"。滚动到实心栏(nav-on)后仍是原来的
      品牌蓝 / 深墨色对比，不受影响。
      只在 ≥851px 生效：≤850px 时 .links 变成浅色抽屉面板，
      那里的链接是深色，不能再被调成半透明白。
   ========================================================================== */
:root{--mem-wash:.78}

/* 1) banner：整幅均匀覆盖，无渐变 */
@media(min-width:1001px){
  .memories-hero:after{background:rgba(11,10,20,var(--mem-wash))}
}
/* 2) 顶部不再单独叠一条渐变遮罩（整幅遮罩已经覆盖了导航带） */
body.memories-video .nav:before{opacity:0}

/* 3) 透明栏阶段：当前页纯白，其余 74% */
@media(min-width:851px){
  body.nav-ink-light .nav:not(.nav-on) .links a[aria-current=page]{color:#fff}
  body.nav-ink-light .nav:not(.nav-on) .links a:not([aria-current=page]){color:rgba(255,255,255,.74)}
  body.nav-ink-light .nav:not(.nav-on) .links a:not([aria-current=page]):hover{color:#fff;opacity:1}
}

/* ==========================================================================
   v3.16 (Oct 16) — 顶部导航：语言切换改为「地球图标 + ZH/EN」低视觉权重
   --------------------------------------------------------------------------
   设计稿 Property 1=Header1.png（1920×83）实测，导航各元素的墨迹位置：
     容器 wrap   x320..1599（1280 宽，与 .wrap 一致 ✓ 未变）
     logo        x321..489  169×35   （与现状 170×36 基本一致，不动）
     4 个链接    x1063 / 1144 / 1225 / 1306，每个 56 宽，间距 26
     语言切换    x1397..1433（墨迹 37 宽）＝ 地球图标墨迹 14 + 间隙 5 + "ZH" 墨迹 18
     主按钮      x1457..1599  143×42  胶囊，内边距左右各 23
   链接4 → 语言 的间距 38px；语言 → 主按钮 的间距 24px。

   改动：
   1. **去掉胶囊**（原 107×44 的圆角描边按钮）与右侧下拉箭头，
      换成「地球图标 + ZH/EN 纯文字」→ 视觉权重显著降低，与设计稿一致。
      图标用用户新切的 qutewear-assets/globe.png（16×16，内含 14×14 墨迹，
      所以按 16px 渲染时可见尺寸正好 14px，与设计稿吻合）。
   2. 按钮盒宽 == 墨迹宽（不加水平内边距），这样上面那两个间距值可以直接
      用 flex gap 精确表达；触控热区另用 ::after 向外扩 10px，不影响布局。
   3. 间距按设计稿调整：链接间距 25→26、链接↔工具区 25→38、工具区内 12→24。
   4. 主按钮内边距 22→23，与设计稿实测一致。

   透明栏（nav-ink-light）阶段：图标是深灰 PNG，用 filter 转白，与 logo 同一手法。
   胶囊原有的 .lang 选择器是**原生 select**（无 JS 回退），JS 会隐藏它，样式不受影响。
   ========================================================================== */
html.langpick-ready .langpick-btn{
  position:relative;            /* 供 ::after 扩热区 */
  gap:5px;
  padding:0;
  min-height:44px;              /* 保持可点高度，但不可见 */
  border:0;
  background:none;
  /* 设计稿里这段文字实测是纯黑（最暗值 0，站点墨色 #19182B 最暗只到 26），
     字号 15px 时字高/字宽与设计稿一致（h=11 / w=18 vs 17）。 */
  color:#000;
  font-size:15px;
  font-weight:500;
  line-height:1;
  letter-spacing:.01em;
}
html.langpick-ready .langpick-btn:hover{color:var(--brand)}
html.langpick-ready .langpick-globe{
  display:block;
  width:16px;height:16px;
  flex:none;
  transition:filter .45s ease;
}
/* 触控/点击热区：向外扩，不参与布局 */
html.langpick-ready .langpick-btn::after{
  content:'';position:absolute;inset:-10px -8px;
}
/* 展开态：菜单右对齐到按钮，保证不超出视口 */
html.langpick-ready .langpick-menu{top:calc(100% + 10px)}

/* 透明栏阶段：图标与文字转白（logo 也是同样处理） */
body.nav-ink-light .nav:not(.nav-on) .langpick-globe{filter:brightness(0) invert(1)}
body.nav-ink-light .nav:not(.nav-on) .langpick-btn{color:#fff}
body.nav-ink-light .nav:not(.nav-on) .langpick-btn:hover{color:#fff}

/* 间距对齐设计稿 —— 只在桌面宽度生效。
   窄屏（≤1050px）后来另有 v3.x 的专门规则（1100/850/700/380 四档），
   这里不去覆盖它们，避免打乱既有的移动端节奏。 */
@media(min-width:1051px){
  .navin{gap:38px}
  .links{gap:26px}
  .navtools{gap:24px}
  .btn.small{padding:9px 23px}
}
@media(max-width:700px){
  html.langpick-ready .langpick-btn{font-size:14px;gap:4px}
  html.langpick-ready .langpick-globe{width:15px;height:15px}
}

/* ==========================================================================
   v3.18 (Oct 16) — 「应用下载」模块 1:1 还原 Frame 1125.png（1920×909 实测）
   --------------------------------------------------------------------------
   设计稿实测（wrap 1280 = 设计 1:1）：
     标题 应用下载   墨迹 323..661 × 84..169（h85）→ 84px/600 #000（Chrome 实测
                     84px 墨迹 336×83，全站字体栈下最接近）；标题墨迹底→卡片顶 33px
     卡片            x320..1600 y202..828（1280×627），圆角 ≈28
                     渐变＝左上青 #E6F9FD + 右下薄荷 #DDFBEF 两团 radial + 近白底
     文案列          左内边距 74，整体垂直居中（上留 160 / 下留 162）
       内标题        Qutewear APP 墨迹宽 249 → 38px/600 #000
       段落          字距实测 25px/行高 36 → font 25px/36px，色 #545858，
                     三行断行 = 最大宽 495px 自然换行（25px 下逐行复核过）
       徽章          高 66 胶囊 1px #000 描边、无填充；三只 193/226/158，间距 13
                     图标 24×24（墨迹≈设计 23×22/18×22/20×23），文字 17px/500 #000
                     （Chrome 实测 Android下载 98.6 / HarmonyOS下载 127.5 / iOS 61.5，
                     与设计 94/126/58 误差 ≤5px）
       脚注          您也可以在应用商城上搜"Qutewear"进行下载 → 17px（墨迹 343 vs 342）
       手机图        download-app-zh.png 412×532 原大置于卡片内 (796,48)，
                     即 padding 48/72/47 时垂直居中、右边距 72（NCC 0.9968 验证）
     英文版          同版式；文案为中文的对应英文翻译；手机图换 download-app-en.png；
                     扫码模块保持仅中文（不变）
   ========================================================================== */
.app-dl-title{
  font-size:clamp(44px,4.4vw,84px);
  line-height:1.05;
  letter-spacing:0;             /* 覆盖 h2 的负字距：设计稿实测无字距 */
  color:#000;
  margin:0 0 25px;
}
.app-dl-card{
  display:flex;align-items:flex-start;justify-content:space-between;gap:40px;
  padding:48px 72px 47px 74px;
  border-radius:28px;
  overflow:hidden;
  background:
    radial-gradient(640px 820px at 3% 0%, #E6F9FD 0%, rgba(230,249,253,0) 60%),
    radial-gradient(780px 560px at 100% 100%, #DDFBEF 0%, rgba(221,251,239,0) 60%),
    radial-gradient(500px 700px at 103% 52%, rgba(221,251,239,.75) 0%, rgba(221,251,239,0) 60%),
    #F8FEFC;
}
.app-dl-copy{max-width:600px;padding-top:102px}   /* 顶部 48(卡) + 108 = 标题行墨迹 y160；徽章行总宽≈600，须比段落宽 */
.app-dl-brand{font-size:38px;line-height:1.2;letter-spacing:0;color:#000;font-weight:600;margin:0 0 24px}
.app-dl-text{max-width:495px;margin:0 0 22px;color:#545858;font-size:25px;line-height:36px}
.app-dl-stores{display:flex;flex-wrap:wrap;gap:13px;margin:0 0 30px}
.store-badge{
  display:inline-flex;align-items:center;gap:8px;
  height:66px;padding:0 32px;
  border:1px solid #000;border-radius:999px;
  background:transparent;color:#000;
  font-weight:500;font-size:17px;
  transition:border-color .2s,color .2s,transform .2s;
}
.store-badge:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-2px)}
.store-badge img{display:block;width:24px;height:24px;flex:none}
.app-dl-note{margin:0;color:#565958;font-size:17px;line-height:1.5}
.app-dl-art{flex:none}
.app-dl-art img{display:block;width:412px;max-width:100%;height:auto}
.app-dl-art .dl-art-en{display:none}
html[lang=en] .app-dl-art .dl-art-zh{display:none}
html[lang=en] .app-dl-art .dl-art-en{display:block}
/* 英文版没有「扫码查看使用说明」模块（维持 v3.17 行为） */
html[lang=en] .scan-usage{display:none}

/* 断点：卡片内边距与两栏随视口收缩 */
@media(max-width:1360px){
  .app-dl-card{padding:40px 48px}
  .app-dl-copy{padding-top:96px}
  .app-dl-brand{font-size:32px;margin-bottom:20px}
  .app-dl-text{font-size:22px;line-height:33px;margin-bottom:22px}
  .app-dl-stores{margin-bottom:24px}
  .app-dl-art img{width:360px}
  .store-badge{height:58px;padding:0 26px;font-size:16px}
}
@media(max-width:1150px){
  .app-dl-card{flex-direction:column;align-items:flex-start;gap:36px;padding:36px 40px}
  .app-dl-copy{padding-top:0}
  .app-dl-art{align-self:center}
  .app-dl-title{font-size:clamp(38px,5.4vw,64px);margin-bottom:24px}
}
@media(max-width:700px){
  .app-dl-card{padding:28px 22px;gap:30px}
  .app-dl-title{font-size:40px;margin-bottom:18px}
  .app-dl-brand{font-size:26px;margin-bottom:16px}
  .app-dl-text{font-size:18px;line-height:28px;margin-bottom:20px}
  .app-dl-stores{gap:10px;margin-bottom:22px}
  .store-badge{height:52px;padding:0 20px;font-size:15px;gap:7px}
  .store-badge img{width:20px;height:20px}
  .app-dl-note{font-size:14px}
  .app-dl-art img{width:min(300px,82%)}
}

/* v3.19 (Oct 19) — 「扫码查看使用说明」1:1 还原用户 UI 图（1038×242 → 全宽 1920×448）
   UI 图实测：标题 Qutewear智能摄像耳机 墨迹 x173 y51 h18（×1.85 → x320 y94 33px）
     → 32px/500 #000（Chrome 实测墨迹 332.8 vs 336.7）
   小字 扫码查看使用说明 h12 → 24px/400 #000（墨迹 191.0 vs 190.6）
   二维码 84×84 → 155×155（qr-app.png，300 图含静区，内容 ≈135 vs 设计 ≈140）
   云朵 = Frame 1131（1059×434）右贴边、占满模块高（NCC 0.827 @h242, ox=448/1038）
   文字列左缘 173/1038×1920 = 320.06 = wrap 左缘，故直接用 .wrap */
html[lang=en] .scan-usage{display:none}
.scan-usage{padding:0}
.scan-band{position:relative;height:448px;overflow:hidden}
.scan-clouds{position:absolute;right:0;top:0;height:100%;width:auto;pointer-events:none;user-select:none}
.scan-inner{position:relative;height:100%;padding-top:86px}
.scan-title{font-size:32px;font-weight:500;letter-spacing:0;color:#000;margin:0;line-height:1.2}
.scan-sub{font-size:24px;color:#000;margin:12px 0 0;line-height:1.5}
.scan-qr{display:block;width:178px;height:178px;margin:26px 0 0}  /* 内容 155 vs 设计 155；盒含静区 */
@media(max-width:1360px){
  .scan-band{height:400px}
  .scan-inner{padding-top:70px}
  .scan-title{font-size:28px}
  .scan-sub{font-size:21px;margin-top:10px}
  .scan-qr{width:152px;height:152px;margin-top:24px}
}
@media(max-width:1150px){
  .scan-band{height:360px}
  .scan-inner{padding-top:56px}
  .scan-title{font-size:25px}
  .scan-sub{font-size:19px}
  .scan-qr{width:136px;height:136px;margin-top:20px}
}
@media(max-width:700px){
  .scan-band{height:auto;padding:34px 0 150px}
  .scan-clouds{height:auto;width:min(620px,100%);top:auto;bottom:-36px}
  .scan-inner{padding-top:0}
  .scan-title{font-size:23px}
  .scan-sub{font-size:16px;margin-top:8px}
  .scan-qr{width:126px;height:126px;margin-top:16px}
}