@font-face{font-family:Fredoka;src:url("assets/fonts/Fredoka.ttf") format("truetype");font-style:normal;font-weight:300 700;font-display:swap}
@font-face{font-family:MiSans;src:url("assets/fonts/MiSans-Regular.woff") format("woff");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:MiSans;src:url("assets/fonts/MiSans-Semibold.woff") format("woff");font-style:normal;font-weight:600;font-display:swap}
:root{--header-height:80px;--blue:#075cf0;--ink:#17294a;--muted:#62728b;--paper:#f7f9ff;--gutter:clamp(22px,5vw,88px);color-scheme:light}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:80px}body{margin:0;background:var(--paper);color:var(--ink);font-family:MiSans,-apple-system,BlinkMacSystemFont,"Helvetica Neue","PingFang SC","Microsoft YaHei",sans-serif;-webkit-font-smoothing:antialiased;font-synthesis:none}h1,h2,h3,p,figure{margin:0}h1,h2,h3{text-wrap:balance}p{text-wrap:pretty}em{font-style:normal;color:var(--blue)}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer;border:0}img{display:block;max-width:100%;height:auto}button,a{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:3px solid #bd5600;outline-offset:5px}button:active,.pill:active,.nav-cta:active{scale:.96}.skip{position:fixed;left:20px;top:-100px;z-index:100;background:white;padding:15px}.skip:focus{top:15px}h2{font-size:clamp(40px,4.7vw,78px);line-height:1.2;font-weight:650;letter-spacing:-.05em}.section-pad{padding:110px var(--gutter)}.section-top{display:flex;justify-content:space-between;align-items:end;gap:36px}.section-top h2{margin-top:18px}.section-aside{font-size:15px;line-height:1.8;color:var(--muted)}.fineprint{font-size:11px;line-height:1.7;color:var(--muted);margin-top:20px}.pill{display:inline-flex;align-items:center;justify-content:space-between;gap:42px;padding:17px 23px;border-radius:999px;min-height:54px;font-size:14px;transition:scale .2s,background .2s}.light{background:#fff;color:var(--ink)}.pill:hover{background:#e6edff}
/* The page keeps native scrolling. Each sticky scene is a reversible camera move. */
.scroll-scene{--p:0;position:relative}.sticky-stage{position:relative;min-height:720px}.motion-on .sticky-stage{position:sticky;top:0;height:100svh;min-height:640px}.motion-on .hero{height:170svh}.motion-on .world{height:185svh}.motion-on .product{height:170svh}.motion-on .life{height:260svh}.motion-on .app-section{height:195svh}.motion-on .scroll-scene .sticky-stage{overflow:hidden}.site-header{height:78px;position:fixed;top:0;left:0;right:0;z-index:50;padding:0 var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:28px;background:rgba(249,251,255,.86);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 1px 0 #19365b0c;transition:background .3s}.wordmark{font-weight:800;letter-spacing:-1.3px;font-size:29px;display:flex;gap:13px;align-items:center;min-height:44px}.wordmark span{font-size:10px;font-weight:550;letter-spacing:.05em}.site-header>nav{display:flex;gap:30px;font-size:12px}.site-header>nav>a{min-height:44px;display:flex;align-items:center;position:relative}.site-header>nav>a::after{content:"";position:absolute;bottom:6px;left:0;right:0;height:1px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .25s}.site-header>nav>a:hover::after{transform:scaleX(1)}.nav-cta{font-size:12px;background:var(--blue);color:white;border-radius:0;padding:14px 20px;display:flex;align-items:center;gap:22px;min-height:44px;transition:scale .2s,background .2s}.nav-cta:hover{background:#0049c6}.menu-toggle{display:none}.site-header .mobile-nav{display:none}.reading-progress{position:absolute;bottom:0;left:0;height:2px;background:var(--blue);width:100%;transform:scaleX(var(--read,0));transform-origin:left}
.hero{background:#edf3f9}.hero-sticky{height:100svh;min-height:730px;background:#eef3f8;isolation:isolate;overflow:hidden}.hero-heading{position:relative;text-align:center;z-index:3;padding-top:120px;transform:translateY(calc(var(--p)*-50px));opacity:calc(1 - var(--p)*1.5)}.hero h1{font-size:clamp(42px,5.9vw,96px);line-height:1.1;letter-spacing:-.055em;font-weight:700;margin-top:17px}.hero-sub{font-size:14px;margin-top:20px;letter-spacing:.08em}.hero-image{position:absolute;left:0;right:0;top:35%;height:55%;transform:translateY(calc(var(--p)*-40px)) scale(calc(1 + var(--p)*.19));transform-origin:50% 58%;z-index:1;mask-image:linear-gradient(transparent,#000 12%,#000 90%,transparent)}.hero-image img{width:100%;height:100%;object-fit:cover;object-position:50% 45%}.hero-bottom{position:absolute;bottom:34px;left:var(--gutter);right:var(--gutter);display:flex;justify-content:space-between;align-items:end;z-index:4;transform:translateY(calc(var(--p)*40px));opacity:calc(1 - var(--p)*2)}.hero-brand{font-size:30px;font-weight:900;line-height:.8;letter-spacing:-1.7px;position:relative}.explore{display:flex;align-items:center;gap:20px;min-height:44px;font-size:11px;letter-spacing:.08em}.explore>span{width:38px;height:38px;border:1px solid #57698250;border-radius:50%;display:grid;place-items:center;font-size:18px}.hero-fade{position:absolute;inset:0;background:var(--paper);opacity:calc(var(--p)*.94);z-index:2;pointer-events:none}
.intro{text-align:center;position:relative;padding-block:140px}.intro h2{font-size:clamp(38px,4.6vw,70px);line-height:1.4;margin-top:25px}.intro-copy{font-size:16px;line-height:2.1;color:var(--muted);margin-top:30px}.weather-line{display:flex;justify-content:center;gap:34px;margin-top:38px;font-size:25px}.weather-line span:nth-child(1){color:#bd660c}.weather-line span:nth-child(2){color:#5485b9}.weather-line span:nth-child(3){color:#66874c}.weather-line span:nth-child(4){color:#8b5dbe}.js .reveal{opacity:0;transform:translateY(34px);transition:opacity .8s,transform .8s cubic-bezier(.2,.7,.2,1)}.js .reveal.visible{opacity:1;transform:none}
.world{background:var(--paper)}.world-stage{height:100svh;isolation:isolate}.world-window{position:absolute;inset:35px var(--gutter);border-radius:38px;overflow:hidden;transform:scale(calc(.86 + var(--p)*.14));border-radius:calc(38px - var(--p)*38px)}.world-window picture,.world-window img{width:100%;height:100%;display:block}.world-window img{object-fit:cover;object-position:50% 46%;transform:scale(calc(1.04 + var(--p)*.045))}.world-window::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0728487a,transparent 65%);opacity:calc(.9 - var(--p)*.6)}.world-caption{position:absolute;top:18%;left:calc(var(--gutter) + 5%);color:white;z-index:2;transform:translateY(calc(var(--p)*-30px));opacity:calc(1 - var(--p)*1.7);text-shadow:0 2px 24px #001b4350}.world-caption h2{margin-block:20px 30px;font-size:clamp(48px,6vw,92px)}.world-caption .pill{text-shadow:none}
.characters{padding-bottom:75px}.character-selector{display:flex;gap:10px;margin-block:40px 24px;flex-wrap:wrap}.character-selector button{background:#e9edf3;min-height:52px;padding:12px 23px;display:flex;align-items:center;gap:10px;border-radius:999px;font-size:13px;transition:background .25s,color .25s,scale .2s}.character-selector button[aria-pressed=true]{background:#1b2f50;color:white}.character-selector i{width:9px;height:9px;border-radius:50%;display:block}.sun-dot{background:#e4a12f}.snow-dot{background:#80b6e2}.wind-dot{background:#8fba6c}.thunder-dot{background:#a786d0}.character-theatre{border-radius:30px;overflow:hidden;background:#fff0cd;transition:background .55s}.character-theatre[data-current=snow]{background:#dfeefc}.character-theatre[data-current=wind]{background:#e4edcc}.character-theatre[data-current=thunder]{background:#e6def4}.character-panel{display:grid;grid-template-columns:.8fr 1.2fr;min-height:580px;position:relative}.character-panel[hidden]{display:none}.character-copy{padding:70px 0 58px 7%;position:relative;z-index:2;align-self:center}.character-copy h3{font-size:20px;font-weight:550;margin-top:27px}.character-tagline{font-size:clamp(34px,4.2vw,68px);line-height:1.23;letter-spacing:-.04em;font-weight:650;margin-top:14px}.character-description{font-size:14px;line-height:1.9;margin-top:26px;color:#5a6070}.character-art{position:relative;min-height:550px;perspective:1000px}.giant-word{position:absolute;top:auto;bottom:10%;left:0;font-size:clamp(100px,13vw,220px);letter-spacing:-.07em;line-height:1;font-weight:900;color:#ffffff85;user-select:none}.character-main{position:absolute;width:67%;height:88%;object-fit:contain;left:16%;bottom:1%;z-index:2;filter:drop-shadow(0 28px 22px #3a49691a);transform:translate3d(calc(var(--mx,0)*8px),calc(var(--my,0)*8px),0) rotate(calc(var(--mx,0)*2deg));transition:transform .35s cubic-bezier(.2,.7,.2,1)}.satellite{position:absolute;width:29%;height:36%;object-fit:contain;filter:drop-shadow(0 12px 14px #485a6312)}.satellite-one{top:2%;left:0;transform:rotate(-12deg);z-index:1}.satellite-two{bottom:4%;right:0;transform:rotate(10deg);z-index:3}.character-panel.entering .character-main{animation:character-in .55s cubic-bezier(.2,.7,.2,1)}.character-panel.entering .character-copy{animation:copy-in .45s both}@keyframes copy-in{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
.product{background:#f9f9f9}.product-stage{height:100svh;isolation:isolate;min-height:790px}.product-copy{text-align:center;position:absolute;top:12%;left:0;right:0;z-index:2;transform:translateY(calc(var(--p)*-34px));opacity:calc(1 - var(--p)*.7)}.product-copy h2{margin-top:20px;font-size:clamp(44px,4.6vw,74px)}.product-copy h2 br{display:none}.product-copy h2 em{margin-left:.15em}.product-image{position:absolute;inset:30% 5% 8%;transform:scale(calc(.94 + var(--p)*.17)) translateY(calc(var(--p)*-15px));transform-origin:50% 70%}.product-image img{width:100%;height:100%;object-fit:contain}.product-bottom{position:absolute;bottom:30px;left:var(--gutter);right:var(--gutter);display:flex;justify-content:space-between;align-items:end;z-index:3}.product-bottom>span{font-size:16px}.product-bottom p{font-size:10px;color:var(--muted);line-height:1.8;text-align:right}
.life{background:#eaf1fe}.life-stage{padding:105px 0 30px;min-height:880px}.life .section-top{padding-inline:var(--gutter);margin-bottom:40px}.life h2{font-size:clamp(36px,4vw,62px)}.life h2 em{white-space:nowrap}.gallery-controls{display:flex;align-items:center;gap:12px;flex-shrink:0}.gallery-controls button{width:44px;height:44px;border-radius:50%;background:white;font-size:20px;transition:scale .2s,background .2s}.gallery-controls button:hover{background:#d5e3ff}.gallery-controls button:disabled{opacity:.35;cursor:default}.gallery-counter{font-size:10px;margin-right:12px;font-variant-numeric:tabular-nums;letter-spacing:.1em}.gallery-viewport{padding-inline:var(--gutter);overflow:auto;scrollbar-width:none;scroll-snap-type:x mandatory}.gallery-viewport::-webkit-scrollbar{display:none}.gallery-track{display:flex;gap:26px;width:max-content}.gallery-track figure{width:min(29vw,450px);flex-shrink:0;scroll-snap-align:center}.gallery-track figure img{width:100%;height:clamp(320px,49svh,570px);object-fit:cover;border-radius:16px;outline:1px solid #0000000a;outline-offset:-1px}.gallery-track figure:nth-child(even){padding-top:34px}.gallery-track figcaption{padding:20px 2px 0;display:flex;flex-direction:column;gap:9px}.gallery-track figcaption>span{font-size:15px;font-weight:550}.gallery-bottom{display:flex;justify-content:space-between;gap:20px;margin-top:30px;padding-inline:var(--gutter);font-size:10px;color:var(--muted)}.gallery-hint>i{font-size:16px;font-style:normal;margin-left:18px}.motion-on .life-stage .gallery-viewport{overflow:hidden;scroll-snap-type:none}.motion-on .life-stage .gallery-track{transform:translateX(calc(var(--p)*var(--travel,0px)*-1))}
.app-section{background:#f4f8ff;color:var(--ink)}.app-stage{height:100svh;min-height:940px;padding-top:104px;position:relative;isolation:isolate;background:radial-gradient(ellipse at 50% 73%,#d9eaff,transparent 65%)}.app-heading{text-align:center;position:relative;z-index:6;transform:translateY(calc(var(--p)*-45px));opacity:calc(1 - var(--p)*.2)}.app-heading h2{font-size:clamp(38px,4.5vw,72px);margin-top:16px;line-height:1.16}.app-heading h2 em{color:var(--blue)}.app-heading>p:last-child{font-size:13px;color:var(--muted);line-height:1.9;margin-top:20px}.phone-constellation{position:absolute;left:50%;bottom:78px;transform:translateX(-50%);width:880px;max-width:100%;height:54%;perspective:1500px}.phone{position:absolute;width:clamp(195px,16vw,260px);left:50%;bottom:0;transform-origin:center 95%;padding:2px;border-radius:32px;background:linear-gradient(130deg,#a8b2c5,#293141 30%,#65718b 80%);box-shadow:0 25px 65px #5579aa30,0 0 0 1px #ffffffa0;transition:filter .3s}.phone-screen{border-radius:30px;overflow:hidden;background:#f6f0e7;aspect-ratio:1206/2622}.phone-screen img{width:100%;height:100%;object-fit:cover}.phone figcaption{position:absolute;left:0;right:0;bottom:-31px;text-align:center;font-size:10px;letter-spacing:.04em;color:var(--muted)}.phone-center{z-index:4;transform:translateX(-50%) translateY(calc(var(--p)*-20px)) scale(calc(.94 + var(--p)*.06))}.phone-left{z-index:3;transform:translateX(calc(-50% - 170px - var(--p)*110px)) translateY(calc(8px - var(--p)*10px)) rotate(calc(-10deg - var(--p)*4deg)) rotateY(10deg)}.phone-right{z-index:2;transform:translateX(calc(-50% + 170px + var(--p)*110px)) translateY(calc(8px - var(--p)*10px)) rotate(calc(10deg + var(--p)*4deg)) rotateY(-10deg)}.app-details{background:#fff;color:var(--ink);display:grid;grid-template-columns:1fr 1fr;gap:50px;padding-top:90px;padding-bottom:85px}.app-detail-heading h2{font-size:clamp(32px,3vw,48px);margin-top:24px}.app-feature-list article{display:flex;gap:27px;padding:25px 0;border-top:1px solid #65789250}.app-feature-list h3{font-size:19px;font-weight:500}.app-feature-list p{font-size:13px;line-height:1.8;color:var(--muted);margin-top:14px}.app-status{grid-column:1/-1;color:var(--muted);margin-top:0}.widget-demo{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:60px;padding-top:20px}.widget-demo img{width:430px;max-width:45%;filter:drop-shadow(0 20px 20px #0002)}.widget-demo h3{font-size:24px;line-height:1.4;font-weight:500}.widget-demo p{color:var(--muted);font-size:13px;line-height:1.8;margin-top:14px}
.moods-stage{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:center;background:#eef2fd;min-height:700px;overflow:hidden}.mood-copy h2{margin-block:24px;font-size:clamp(38px,4vw,65px)}.mood-copy>p:not(.eyebrow){font-size:15px;line-height:1.9;color:var(--muted)}.mood-selector{display:flex;gap:8px;flex-wrap:wrap;margin-top:34px}.mood-selector button{min-height:44px;padding:12px 15px;border-radius:999px;font-size:12px;background:white;transition:background .2s,scale .2s}.mood-selector button[aria-pressed=true]{background:var(--blue);color:white}.mood-art{position:relative;min-height:420px;display:grid;place-items:center;perspective:800px}.mood-art img{position:relative;z-index:2;width:80%;max-width:410px;object-fit:contain;filter:drop-shadow(0 25px 20px #7185b12a);transform:rotate(-7deg);transition:transform .3s}.mood-art img[hidden]{display:none}.mood-orbit{position:absolute;width:90%;aspect-ratio:1;border:1px solid #b9ccef;border-radius:50%;transform:rotateX(58deg) rotate(-20deg);box-shadow:0 0 0 35px #dfe8fa44,0 0 0 70px #dfe8fa33}
.closing{position:relative;height:750px;overflow:hidden}.closing picture,.closing img{width:100%;height:100%;display:block}.closing img{object-fit:cover;object-position:50% 40%}.closing::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#001f5099,transparent 70%)}.closing-copy{position:absolute;top:25%;left:var(--gutter);color:white;z-index:2}.closing-copy h2{font-size:clamp(45px,5.5vw,90px);margin-block:22px 30px}.site-footer{background:#f5f8ff;padding:60px var(--gutter) 25px}.footer-top{display:flex;align-items:center;justify-content:space-between;gap:30px;padding-bottom:50px;border-bottom:1px solid #cfd8e8}.footer-top>p{font-size:15px;line-height:1.8;color:var(--muted)}.back-top{display:flex;align-items:center;gap:40px;font-size:12px;min-height:44px}.back-top>span{font-size:22px}.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-top:20px;font-size:10px;color:var(--muted)}.footer-bottom a{min-height:44px;display:flex;align-items:center}
@media(min-width:1800px){.hero-image{top:32%;height:59%}.character-panel{min-height:680px}.character-art{min-height:650px}.gallery-track figure{width:27vw}.phone{width:280px}.app-heading h2{font-size:76px}}
@media(max-width:1100px){.site-header>nav{gap:19px}.wordmark span{display:none}.nav-cta{padding:13px 15px}.hero-image{top:36%;height:47%}.hero h1{font-size:clamp(42px,5.9vw,96px)}.character-panel{grid-template-columns:.8fr 1.2fr;min-height:500px}.character-copy{padding:40px 0 40px 9%}.character-art{min-height:500px}.character-description{font-size:12px}.phone{width:215px}.phone-left{transform:translateX(calc(-50% - 140px - var(--p)*80px)) translateY(28px) rotate(-12deg)}.phone-right{transform:translateX(calc(-50% + 140px + var(--p)*80px)) translateY(28px) rotate(12deg)}}
@media(max-width:760px){
 :root{--gutter:22px}.section-pad{padding:72px var(--gutter)}h2{font-size:37px}.site-header{height:66px;padding-inline:20px;gap:12px}.site-header>.wordmark{font-size:26px}.site-header>nav:not(.mobile-nav),.nav-cta{display:none}.menu-toggle{display:flex;width:44px;height:44px;background:transparent;flex-direction:column;align-items:center;justify-content:center;gap:6px}.menu-toggle span{width:21px;height:1.5px;background:var(--ink);transition:transform .2s}.menu-toggle[aria-expanded=true] span:first-child{transform:translateY(3.75px) rotate(45deg)}.menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-3.75px) rotate(-45deg)}.site-header .mobile-nav:not([hidden]){position:absolute;top:66px;left:0;right:0;padding:18px 25px 25px;display:flex;flex-direction:column;gap:0;background:#f6f9ff;box-shadow:0 14px 20px #20365b12}.mobile-nav a{display:flex;justify-content:space-between;padding-block:18px;font-size:20px}.mobile-nav span{font-size:10px;color:var(--muted)}.reading-progress{height:2px}
 .hero-sticky,.motion-on .hero-sticky{height:100svh;min-height:660px}.motion-on .hero{height:145svh}.hero-heading{padding:118px 20px 0}.hero h1{font-size:clamp(31px,7.9vw,58px);line-height:1.2;margin-top:16px}.hero-sub{font-size:11px;margin-top:16px}.hero-image{top:35%;height:43%;mask-image:linear-gradient(transparent,#000 12%,#000 90%,transparent)}.hero-image img{object-fit:contain;width:170%;max-width:none;position:relative;left:-35%;object-position:center}.hero-bottom{bottom:30px;align-items:end;gap:20px}.hero-brand{font-size:25px}.explore{font-size:10px;gap:12px}.explore span{width:33px;height:33px}.hero-fade{opacity:calc(var(--p)*.85)}
 .intro{padding-block:85px}.intro h2{font-size:31px;line-height:1.45;margin-top:22px}.intro-copy{font-size:13px;margin-top:24px;line-height:2}.weather-line{font-size:22px;margin-top:30px}
 .motion-on .world{height:155svh}.world-stage,.motion-on .world-stage{min-height:650px}.world-window{inset:18px 12px;border-radius:25px;transform:scale(calc(.91 + var(--p)*.09))}.world-window img{object-position:center;transform:scale(calc(1 + var(--p)*.04))}.world-window::after{background:linear-gradient(#14396970,transparent 40%,#14396930)}.world-caption{top:11%;left:36px;right:30px}.world-caption h2{font-size:43px;line-height:1.17;margin-block:12px 18px}.world-caption h2 br{display:none}.world-caption .pill{min-height:44px;font-size:11px;padding:12px 17px;gap:25px}
 .section-top{display:block}.section-top h2{margin-top:14px}.section-aside{font-size:12px;margin-top:18px}.character-selector{gap:7px;margin-top:28px;margin-bottom:17px}.character-selector button{font-size:11px;padding:12px 13px;gap:7px;min-height:44px}.character-selector i{width:7px;height:7px}.character-theatre{border-radius:22px}.character-panel{grid-template-columns:1fr;min-height:720px}.character-copy{padding:32px 25px 0}.character-copy h3{font-size:15px;margin-top:19px}.character-tagline{font-size:36px;line-height:1.2;margin-top:12px}.character-description{font-size:12px;margin-top:16px;line-height:1.8}.character-art{height:360px;min-height:360px}.character-main{width:71%;left:14%;height:98%;bottom:0}.giant-word{font-size:105px;left:3%}.satellite{width:29%;height:35%}.satellite-one{top:3%;left:-2%}.satellite-two{right:-2%;bottom:3%}.fineprint{font-size:9px}.characters{padding-bottom:45px}
 .motion-on .product{height:145svh}.product-stage,.motion-on .product-stage{height:90svh;min-height:650px}.product-copy{top:16%;padding-inline:22px}.product-copy h2{font-size:39px;line-height:1.2}.product-copy h2 br{display:block}.product-copy h2 em{margin:0}.product-image{inset:37% -12% 10%;transform:scale(calc(.96 + var(--p)*.08));transform-origin:center}.product-bottom{bottom:28px;align-items:start;gap:15px}.product-bottom>span{font-size:12px}.product-bottom p{font-size:8px}.product-copy{opacity:calc(1 - var(--p)*.45)}
 .motion-on .life{height:auto}.life-stage,.motion-on .life-stage{position:relative;height:auto;min-height:0;padding:70px 0 40px;overflow:visible}.life .section-top{margin-bottom:28px}.life h2{font-size:34px}.gallery-controls{margin-top:24px;justify-content:end}.gallery-controls button{width:40px;height:40px}.gallery-counter{margin-right:auto}.gallery-viewport,.motion-on .life-stage .gallery-viewport{overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:2px}.gallery-track,.motion-on .life-stage .gallery-track{transform:none}.gallery-track{gap:16px}.gallery-track figure{width:75vw;max-width:360px}.gallery-track figure img{height:410px;border-radius:12px}.gallery-track figure:nth-child(even){padding-top:0}.gallery-track figcaption>span{font-size:14px}.gallery-bottom{font-size:8px;line-height:1.7}.gallery-hint{display:none}
 .motion-on .app-section{height:155svh}.app-stage,.motion-on .app-stage{height:100svh;min-height:820px;padding-top:88px}.app-heading{padding-inline:22px}.app-heading h2{font-size:36px;margin-top:17px}.app-heading>p:last-child{font-size:12px;margin-top:16px}.phone-constellation{height:49%;bottom:68px;width:100%}.phone{width:clamp(145px,40vw,190px);padding:1.5px;border-radius:22.5px}.phone-screen{border-radius:21px}.phone-left{transform:translateX(calc(-50% - 85px - var(--p)*18px)) translateY(5px) rotate(-12deg);filter:brightness(.92)}.phone-right{transform:translateX(calc(-50% + 85px + var(--p)*18px)) translateY(5px) rotate(12deg);filter:brightness(.92)}.phone-center{transform:translateX(-50%) translateY(calc(var(--p)*-12px)) scale(1)}.phone figcaption{font-size:8px;bottom:-24px}.app-details{grid-template-columns:1fr;gap:32px;padding-top:60px}.app-detail-heading h2{font-size:34px;margin-top:20px}.app-feature-list h3{font-size:17px}.app-feature-list p{font-size:12px}.app-feature-list article{gap:20px;padding:23px 0}.widget-demo{display:flex;flex-direction:column-reverse;align-items:start;gap:24px}.widget-demo img{max-width:100%;width:100%}.widget-demo h3{font-size:23px}.app-status{font-size:9px}
 .moods-stage{grid-template-columns:1fr;gap:30px;min-height:0}.mood-copy h2{font-size:37px;margin-block:20px}.mood-copy>p:not(.eyebrow){font-size:13px}.mood-selector{gap:6px;margin-top:26px}.mood-selector button{font-size:11px;padding:12px 13px}.mood-art{min-height:340px}.mood-art img{width:80%;max-width:330px}.closing{height:780px}.closing img{object-position:center}.closing::after{background:linear-gradient(#06325e8c,transparent 48%)}.closing-copy{top:65px;left:var(--gutter)}.closing-copy h2{font-size:42px;margin-block:18px 25px}.closing-copy h2 br{display:none}.closing-copy .pill{min-height:45px;font-size:12px;padding:12px 20px}.site-footer{padding-top:42px}.footer-top{flex-wrap:wrap;gap:25px;padding-bottom:30px}.footer-top .wordmark{font-size:29px;width:100%}.footer-top .wordmark span{display:block}.footer-top>p{font-size:12px}.back-top{font-size:11px;gap:22px;margin-left:auto}.footer-bottom{flex-wrap:wrap;gap:4px 18px;font-size:9px}.footer-bottom>span{width:100%}
}
@media(max-height:750px) and (min-width:761px){.motion-on .hero-sticky{min-height:600px}.hero-heading{padding-top:98px}.hero h1{font-size:60px}.hero-sub{margin-top:12px}.hero-image{top:35%;height:52%}.hero-bottom{bottom:20px}.motion-on .app-stage{min-height:690px}.app-stage{padding-top:90px}.app-heading h2{font-size:43px}.app-heading>p:last-child{font-size:11px;margin-top:12px}.phone{width:180px;border-radius:24px}.phone-screen{border-radius:22px}.phone-constellation{bottom:40px;height:48%}.life-stage{padding-top:95px}.life .section-top{margin-bottom:25px}.life h2{font-size:40px}.gallery-track figure img{height:38svh;min-height:245px}.gallery-track figure{width:25vw}.gallery-bottom{margin-top:20px}.motion-on .product-stage{min-height:600px}}
/* Reduced motion retains the full content and native galleries, with no sticky wait. */
.motion-off .scroll-scene{height:auto}.motion-off .sticky-stage{position:relative;min-height:700px}.motion-off .hero{height:auto}.motion-off .hero-heading,.motion-off .hero-image,.motion-off .hero-bottom,.motion-off .world-window,.motion-off .world-window img,.motion-off .world-caption,.motion-off .product-copy,.motion-off .product-image,.motion-off .gallery-track{transform:none}.motion-off .hero-fade{opacity:0}.motion-off .hero-heading,.motion-off .hero-bottom,.motion-off .world-caption,.motion-off .product-copy{opacity:1}.motion-off .life-stage{min-height:0;padding-bottom:50px}.motion-off .gallery-viewport{overflow:auto}.motion-off .reveal{opacity:1;transform:none}.motion-off *, .motion-off *::before, .motion-off *::after{animation:none!important;transition:none!important}.motion-off .character-main{transform:none}.motion-off .world-window{inset:20px}.motion-off .app-stage{min-height:960px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.js .reveal{opacity:1;transform:none}}

@media(min-width:761px) and (min-height:751px){.app-stage{padding-top:88px}}
@media(max-width:760px){.hero-image{top:34%;height:48%}.hero-image img{width:170%;left:-35%}.motion-off .app-stage{min-height:820px}}
html:has(.motion-off){scroll-behavior:auto}
html:not(.js) .character-selector,html:not(.js) .mood-selector,html:not(.js) .gallery-controls,html:not(.js) .menu-toggle{display:none}
html:not(.js) .character-panel+ .character-panel{border-top:1px solid #0001}

.character-copy h3{margin-top:0;font-size:22px}.character-copy{padding-top:50px}.character-tagline{margin-top:22px}.hero h1{margin-top:0}.hero-heading{padding-top:145px}.world-caption h2{margin-top:0}.product-copy h2{margin-top:0}.section-top h2{margin-top:0}.app-heading h2{margin-top:0}.app-detail-heading h2{margin-top:0}.mood-copy h2{margin-top:0}.closing-copy h2{margin-top:0}.intro h2{margin-top:0}
@media(max-width:760px){.hero-heading{padding-top:135px}.hero-image{top:26%;height:42%}.character-copy{padding-top:35px}.character-copy h3{font-size:18px}.character-tagline{margin-top:16px}}

/* MiSans uses two original weights; typography stays direct and legible. */
h1,h2,h3,.wordmark,.hero-brand,.character-tagline,.giant-word{font-weight:600}.site-header>nav,.nav-cta,.character-selector button,.mood-selector button{font-weight:400}.fineprint,.footer-bottom,.gallery-bottom,.product-bottom p{font-size:12px;line-height:1.7}.site-header>nav,.nav-cta{font-size:14px}.character-description{font-size:16px}.phone figcaption{font-size:12px}.hero-sub{font-size:16px}.hero h1,h2{letter-spacing:-.035em}.hero-bottom{justify-content:space-between}.wordmark{letter-spacing:-1px}
@media(max-width:760px){.hero-sub{font-size:13px}.character-description{font-size:14px}.fineprint,.footer-bottom,.gallery-bottom,.product-bottom p{font-size:11px}.phone figcaption{font-size:10px}.product-bottom{display:block}.product-bottom p{text-align:left;margin-top:10px}.product-image{bottom:17%}.hero h1{font-size:clamp(29px,7.6vw,54px)}}

.wordmark,.site-header>.wordmark,.footer-top .wordmark{display:block;font-size:23px;font-weight:600;letter-spacing:-.7px;line-height:1}.wordmark span,.footer-top .wordmark span{display:block;font-size:12px;font-weight:400;letter-spacing:.18em;margin-top:7px}.footer-top .wordmark{width:auto}@media(max-width:760px){.site-header>.wordmark{font-size:20px}.wordmark span{font-size:11px}.hero-brand{font-size:22px}}

/* Native scroll is the timeline. Depth follows the same frame in either direction. */
.motion-on .hero-image{transform:translateY(calc(var(--p)*-65px)) scale(calc(1 + var(--p)*.36))}
.hero-fade{background:linear-gradient(transparent 5%,#f7f9ff 90%);opacity:calc(var(--p)*1.15)}
.hero-fade::after{content:"";position:absolute;left:-30%;right:-30%;bottom:-18%;height:60%;background:radial-gradient(ellipse at 20% 70%,#f7f9ff 35%,transparent 36%),radial-gradient(ellipse at 53% 80%,#f7f9ff 46%,transparent 47%),radial-gradient(ellipse at 90% 85%,#f7f9ff 49%,transparent 50%);filter:blur(12px);transform:translateY(calc(80px - var(--p)*130px)) scale(calc(1 + var(--p)*.3))}
.motion-on .world-window{inset:calc(35px*(1 - var(--p))) calc(var(--gutter)*(1 - var(--p)));transform:scale(calc(.88 + var(--p)*.12));border-radius:calc(38px*(1 - var(--p)))}
.character-art{touch-action:pan-y;cursor:grab;transform-style:preserve-3d;user-select:none}
.character-theatre.dragging .character-art{cursor:grabbing}
.motion-on .character-main{transform:translate3d(calc(var(--mx,0)*28px),calc(var(--my,0)*18px),40px) rotateX(calc(var(--my,0)*-12deg)) rotateY(calc(var(--mx,0)*18deg)) rotateZ(calc(var(--mx,0)*3deg));transition:transform .45s cubic-bezier(.2,.75,.2,1)}
.motion-on .satellite{transition:transform .55s cubic-bezier(.2,.75,.2,1)}
.motion-on .satellite-one{transform:translate3d(calc(var(--mx,0)*-35px),calc(var(--my,0)*-24px),-20px) rotate(-12deg)}
.motion-on .satellite-two{transform:translate3d(calc(var(--mx,0)*48px),calc(var(--my,0)*32px),80px) rotate(10deg)}
.motion-on .giant-word{transform:translate3d(calc(var(--mx,0)*-15px),calc(var(--my,0)*-10px),-60px);transition:transform .6s}
.character-theatre.dragging .character-main,.character-theatre.dragging .satellite{transition-duration:.08s}
.character-art::after{content:"";position:absolute;bottom:6%;left:26%;width:50%;height:6%;background:#34455d1c;border-radius:50%;filter:blur(18px);transform:translateX(calc(var(--mx,0)*18px));z-index:0}
.motion-off .character-art{cursor:default}
.weather-orbs{position:absolute;inset:0;pointer-events:none;z-index:1}
.orb{position:absolute;display:grid;place-items:center;width:clamp(52px,7vw,110px);aspect-ratio:1;border-radius:50%;font-size:clamp(24px,3vw,48px);background:radial-gradient(circle at 30% 23%,#fff 2%,#ffffff80 18%,transparent 60%),var(--orb-color);box-shadow:inset 0 -8px 16px #29416a15,inset 0 0 0 1px #fff,0 16px 40px #2c548014;color:var(--orb-ink);opacity:0}
.orb-sun{left:9%;top:36%;--orb-color:#fff2c9;--orb-ink:#b77c12;--rise:-65px;--turn:-18deg}
.orb-snow{right:10%;top:30%;--orb-color:#e2f1ff;--orb-ink:#487db1;--rise:-30px;--turn:30deg}
.orb-wind{left:20%;bottom:12%;--orb-color:#e6f0d5;--orb-ink:#64814c;--rise:-85px;--turn:20deg}
.orb-thunder{right:18%;bottom:12%;--orb-color:#e8e1f6;--orb-ink:#8761b1;--rise:-100px;--turn:-25deg}
.motion-on .orb{opacity:calc(var(--p)*.9);transform:translateY(calc(var(--p)*var(--rise))) rotate(calc(var(--p)*var(--turn))) scale(calc(.6 + var(--p)*.4))}
.gallery-viewport{perspective:1400px;scroll-padding-inline:var(--gutter)}
.gallery-track figure{transform:perspective(1000px) rotateY(calc(var(--card-offset,0)*-12deg)) translateY(calc(var(--card-distance,0)*18px)) scale(calc(1 - var(--card-distance,0)*.055));transform-origin:center center}
.motion-on .phone-left{transform:translateX(calc(-50% - 95px - var(--p)*185px)) translateY(calc(8px - var(--p)*10px)) rotate(calc(-5deg - var(--p)*9deg)) rotateY(calc(18deg - var(--p)*8deg))}
.motion-on .phone-right{transform:translateX(calc(-50% + 95px + var(--p)*185px)) translateY(calc(8px - var(--p)*10px)) rotate(calc(5deg + var(--p)*9deg)) rotateY(calc(-18deg + var(--p)*8deg))}
.app-stage::before{content:"";position:absolute;left:10%;right:10%;top:38%;bottom:-20%;z-index:-1;background:radial-gradient(ellipse at 20% 70%,#fff 25%,transparent 55%),radial-gradient(ellipse at 80% 75%,#fff 30%,transparent 60%);transform:scale(calc(.6 + var(--p)*.65));opacity:calc(.4 + var(--p)*.6)}
@media(max-width:1100px) and (min-width:761px){.motion-on .phone-left{transform:translateX(calc(-50% - 90px - var(--p)*130px)) translateY(8px) rotate(calc(-5deg - var(--p)*7deg))}.motion-on .phone-right{transform:translateX(calc(-50% + 90px + var(--p)*130px)) translateY(8px) rotate(calc(5deg + var(--p)*7deg))}}
@media(max-width:760px){.motion-on .hero-image{transform:translateY(calc(var(--p)*-35px)) scale(calc(1 + var(--p)*.2))}.motion-on .world-window{inset:calc(18px*(1 - var(--p))) calc(12px*(1 - var(--p)))}.orb-sun{left:5%;top:39%}.orb-snow{right:5%;top:37%}.orb-wind{left:13%;bottom:20%}.orb-thunder{right:13%;bottom:19%}.motion-on .phone-left{transform:translateX(calc(-50% - 45px - var(--p)*58px)) translateY(5px) rotate(calc(-5deg - var(--p)*7deg))}.motion-on .phone-right{transform:translateX(calc(-50% + 45px + var(--p)*58px)) translateY(5px) rotate(calc(5deg + var(--p)*7deg))}}

.app-stage{padding-top:120px}.app-heading{transform:translateY(calc(var(--p)*-22px))}.app-heading h2{font-size:clamp(38px,4.1vw,64px)}
@media(max-width:760px){.app-stage,.motion-on .app-stage{padding-top:104px}.app-heading h2{font-size:36px}}
@media(max-height:650px){.motion-on .scroll-scene{height:auto}.motion-on .sticky-stage{position:relative;height:750px;min-height:750px}.motion-on .life-stage{height:auto;min-height:0}.motion-on .life-stage .gallery-viewport{overflow:auto;scroll-snap-type:x mandatory}.motion-on .life-stage .gallery-track{transform:none}.motion-on .app-stage{height:900px;min-height:900px}}
@media(max-width:760px) and (min-height:651px){.motion-on .app-stage{min-height:0}}
@media(max-height:750px) and (min-height:651px) and (min-width:761px){.app-stage{padding-top:105px}.motion-on .app-stage{min-height:0}.phone{width:clamp(150px,23svh,175px)}.phone-constellation{bottom:58px}}

@media(min-width:761px){.product-copy{top:14%}}

/* Floating navigation: the IP leads, with a quiet glass shelf for the links. */
.site-header{top:16px;left:24px;right:24px;max-width:1376px;margin-inline:auto;height:80px;padding:0 18px 0 10px;gap:22px;border:1px solid #ffffffd9;border-radius:0;background:#ffffffcf;box-shadow:0 12px 40px #446c9510,0 2px 6px #446c9508;backdrop-filter:blur(24px) saturate(1.2);-webkit-backdrop-filter:blur(24px) saturate(1.2)}
.site-header>.wordmark{display:flex;align-items:center;gap:6px;flex-shrink:0;color:#205bd0}
.brand-mascot{width:68px;height:68px;object-fit:contain;transform:rotate(-8deg);transition:transform .35s}
.wordmark:hover .brand-mascot{transform:rotate(5deg) translateY(-3px)}
.site-header .brand-lockup{display:flex;flex-direction:column;gap:7px;margin:0;letter-spacing:0;line-height:1}
.brand-lockup b{font-size:21px;font-weight:600;letter-spacing:-.9px}.brand-lockup small{font-size:13px;font-weight:600;letter-spacing:.18em;color:var(--ink)}
.site-header>nav:not(.mobile-nav){gap:3px;padding:5px;background:#eaf0f677;border-radius:0;font-size:14px}
.site-header>nav>a{padding:0 15px;border-radius:0;white-space:nowrap;transition:background .2s,color .2s,box-shadow .2s}
.site-header>nav>a::after{display:none}.site-header>nav>a:hover,.site-header>nav>a[aria-current]{background:#fff;color:var(--blue);box-shadow:0 2px 7px #55789912}
.site-header .nav-cta{padding:7px 7px 7px 20px;gap:17px;background:#2366ed;box-shadow:inset 0 1px 0 #ffffff45;white-space:nowrap}
.nav-cta>span{display:grid;place-items:center;width:35px;height:35px;border-radius:0;background:#ffffff26;font-size:21px}
.reading-progress{left:28px;bottom:-1px;width:calc(100% - 56px);height:2px;border-radius:999px;opacity:.45}
@media(max-width:1150px){.site-header{gap:10px}.site-header>nav>a{padding-inline:11px}.brand-lockup b{font-size:18px}.brand-mascot{width:58px;height:58px}.site-header .nav-cta{font-size:12px;gap:10px;padding-left:14px}}
@media(max-width:1050px){.site-header{height:70px;top:12px;left:16px;right:16px;border-radius:0;padding-right:12px}.site-header>nav:not(.mobile-nav),.site-header .nav-cta{display:none}.menu-toggle{display:flex;width:44px;height:44px;background:#eaf1fb;flex-direction:column;align-items:center;justify-content:center;gap:6px;border-radius:0}.menu-toggle span{width:20px;height:2px;background:var(--ink);transition:transform .2s}.menu-toggle[aria-expanded=true] span:first-child{transform:translateY(4px) rotate(45deg)}.menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-4px) rotate(-45deg)}.site-header .mobile-nav:not([hidden]){position:absolute;top:80px;left:0;right:0;padding:16px;display:flex;flex-direction:column;gap:3px;background:#fffffff5;border:1px solid #fff;border-radius:0;box-shadow:0 20px 50px #446c9526}.mobile-nav a{display:flex;justify-content:space-between;align-items:center;padding:15px;font-size:18px}.mobile-nav span{font-size:12px;color:var(--muted)}.brand-lockup b{font-size:20px}}
@media(max-width:760px){.site-header{left:12px;right:12px;top:10px;height:66px}.brand-mascot{width:54px;height:54px}.brand-lockup b{font-size:18px}.brand-lockup small{font-size:12px}}

/* Four stops on the native scroll timeline; no wheel or touch interception. */
.characters{padding:0}.characters-stage{padding-top:130px;padding-bottom:40px}.moods{background:#eef2fd;overflow:visible;transition:background .5s}.moods-stage{background:transparent;overflow:hidden}
.moods[data-current=hug]{background:#eaf3ff}.moods[data-current=party]{background:#f0eafa}.moods[data-current=wind]{background:#eff4e5}
.motion-on .mood-art img:not([hidden]){animation:sticker-in .5s cubic-bezier(.2,.7,.2,1)}
@keyframes character-in{from{opacity:0;translate:20px 20px;scale:.94}to{opacity:1;translate:0 0;scale:1}}
@keyframes sticker-in{from{opacity:0;scale:.8;rotate:10deg}to{opacity:1;scale:1;rotate:0deg}}
@media(min-height:651px){
 .motion-on .characters{height:340svh}.motion-on .moods{height:300svh}
 .motion-on .characters-stage{display:flex;flex-direction:column;min-height:0;height:100svh;padding-top:120px;padding-bottom:35px}
 .motion-on .characters-stage .section-top{flex-shrink:0;align-items:center}.motion-on .characters-stage h2{font-size:clamp(32px,3.7vw,56px)}
 .motion-on .character-selector{flex-shrink:0;margin-block:22px 20px}.motion-on .character-selector button{min-height:44px}
 .motion-on .character-theatre{flex:1;min-height:0}.motion-on .character-panel{height:100%;min-height:0}
 .motion-on .character-copy{padding:24px 0 24px 8%}.motion-on .character-tagline{font-size:clamp(32px,3.9vw,62px)}
 .motion-on .character-art{min-height:0;height:100%}.motion-on .character-description{margin-top:18px}
 .motion-on .moods-stage{min-height:0;height:100svh;padding-top:120px;padding-bottom:45px}
 .motion-on .mood-art{min-height:0;height:min(60svh,600px)}.motion-on .mood-art img{width:90%;max-width:500px;max-height:100%}
}
@media(max-width:760px) and (min-height:651px){
 .motion-on .characters-stage{padding:100px 16px 22px}.motion-on .characters-stage .section-top{display:block}.motion-on .characters-stage h2{font-size:30px}
 .characters-stage .section-aside{margin-top:10px;font-size:13px}.characters-stage .section-aside br{display:none}
 .motion-on .character-selector{gap:5px;margin-block:18px 16px;flex-wrap:nowrap}.motion-on .character-selector button{flex:1;padding:10px 5px;gap:5px;font-size:clamp(10px,3.75vw,12px);justify-content:center}
 .motion-on .character-panel{display:flex;flex-direction:column}.motion-on .character-panel[hidden]{display:none}.motion-on .character-copy{align-self:stretch;padding:24px 24px 0;flex-shrink:0}
 .motion-on .character-copy h3{font-size:16px}.motion-on .character-tagline{font-size:30px;margin-top:12px}.motion-on .character-description{font-size:13px;line-height:1.7;margin-top:12px}
 .motion-on .character-art{flex:1;min-height:0;height:auto}.motion-on .character-main{height:100%;width:66%;left:17%}.motion-on .giant-word{font-size:90px}
 .motion-on .moods-stage{display:flex;flex-direction:column;align-items:stretch;gap:24px;padding:115px 22px 30px}.mood-copy h2{font-size:36px}.mood-selector{margin-top:23px;gap:5px}.mood-selector button{padding:11px 12px}
 .motion-on .mood-art{height:auto;flex:1;min-height:0}.motion-on .mood-art img{width:85%;height:100%;max-height:360px}.mood-orbit{width:85%;max-width:360px}
}
@media(max-height:650px){.motion-on .characters,.motion-on .moods{height:auto}.motion-on .characters-stage,.motion-on .moods-stage{position:relative;height:auto;min-height:0}.characters-stage{padding-block:110px 45px}}
.motion-off .characters-stage,.motion-off .moods-stage{height:auto;min-height:0}.motion-off .moods-stage{padding-block:110px}

/* Company navigation, with the IP identity centered in its own hero. */
.site-header .brand-lockup b{font-size:24px;letter-spacing:.04em;color:#202734}.site-header .brand-lockup{margin-right:8px}
.hero-heading{padding-top:132px}.hero-ip{display:flex;justify-content:center;align-items:center;gap:16px;color:var(--blue);font-weight:600;line-height:1.2;margin-bottom:18px}.hero-ip{font-size:32px}.hero-ip .hero-ip-en{font-size:1em;letter-spacing:-.5px}.hero-ip .hero-ip-zh{font-size:.85em;letter-spacing:.02em}.hero-bottom{justify-content:space-between}
.world-caption{inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:90px 24px 60px;text-align:center;text-shadow:0 4px 36px #001534b3,0 2px 12px #00153466;pointer-events:none}.world-caption .pill{pointer-events:auto}.world-caption h2 br{display:block}
.world-window::after{background:radial-gradient(ellipse at 50% 50%,#092151b3 0%,#11336980 38%,#193f7020 72%,transparent 100%);opacity:clamp(0,calc(1 - var(--p)*1.8),1)}
@media(max-width:760px){.site-header .brand-lockup b{font-size:22px}.hero-heading{padding-top:112px}.hero-ip{gap:12px;margin-bottom:16px}.hero-ip{font-size:24px}.hero-sub{margin-top:14px}.hero-image{top:30%;height:42%}.world-caption{padding:85px 26px 60px}.world-caption h2{font-size:clamp(36px,9vw,52px);margin-bottom:28px}}
@media(max-height:750px) and (min-width:761px){.hero-heading{padding-top:115px}.hero-ip{margin-bottom:12px}.hero-ip{font-size:26px}}

/* The active button fills with scroll progress, then resets at the next stop. */
.character-selector button,.mood-selector button{position:relative;isolation:isolate;overflow:hidden}
.character-selector button{justify-content:center;background:#f7f9fc;box-shadow:inset 0 0 0 1px #dce3ed;color:var(--ink);transition:box-shadow .2s,scale .2s}
.character-selector button[aria-pressed=true]{background:#f7f9fc;color:var(--ink);box-shadow:inset 0 0 0 1px #1b2f5060}
.character-selector button::before,.mood-selector button::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;transform:scaleX(0);transform-origin:left}
.character-selector button::before{background:#1b2f50}
.character-selector button[aria-pressed=true]::before,.mood-selector button[aria-pressed=true]::before{transform:scaleX(var(--step-progress,1))}
.character-selector button::after{content:attr(aria-label);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding-left:19px;color:white;pointer-events:none;clip-path:inset(0 100% 0 0)}
.character-selector button[aria-pressed=true]::after{clip-path:inset(0 calc((1 - var(--step-progress,1))*100%) 0 0)}
.mood-selector{display:grid;grid-template-columns:minmax(0,1fr);width:min(100%,240px);margin-left:0;gap:14px;padding-bottom:0}
.mood-selector button{flex:1;white-space:nowrap;font-weight:600;padding-inline:10px;border-radius:12px;background:#ffffff42;color:var(--ink);border:1px solid #ffffffb3;box-shadow:inset 0 1px 0 #fff9,0 4px 14px #667f9d0c;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:border-color .2s,box-shadow .2s,scale .2s}
.mood-selector button[aria-pressed=true]{background:#ffffff42;color:var(--ink);border-color:#8aaacf88;box-shadow:inset 0 1px 0 #fffc,0 4px 18px #667f9d16}
.mood-selector button::before{background:linear-gradient(110deg,#c5d9f380,#93b7e58c)}
.mood-selector button:hover{border-color:#a4bbd7}
.motion-off .character-selector button[aria-pressed=true]::before,.motion-off .mood-selector button[aria-pressed=true]::before{transform:scaleX(1)}
.motion-off .character-selector button[aria-pressed=true]::after{clip-path:inset(0)}
@media(max-width:760px){.character-selector button::after{padding-left:12px}.mood-selector{gap:12px}.mood-selector button{padding-inline:4px;font-size:11px;border-radius:10px}}
@media(max-height:650px){.character-selector button[aria-pressed=true]::before,.mood-selector button[aria-pressed=true]::before{transform:scaleX(1)}.character-selector button[aria-pressed=true]::after{clip-path:inset(0)}}

/* Fill the scene without the extra zoom that clipped WORLD. */
.world-window img,.closing img{object-fit:cover;object-position:50% 80%;transform:none}
@media(max-aspect-ratio:1/1){.world-window img,.closing img{object-position:50% 60%}}
@media(min-aspect-ratio:4/3){.motion-on .world{height:max(185svh,calc(72vw + 70svh))}.world-stage,.motion-on .world-stage{height:max(100svh,72vw)}.closing{height:max(750px,65vw)}}

/* Edge-to-edge navigation; padding preserves the existing control positions. */
.site-header{top:0;left:0;right:0;max-width:none;height:var(--header-height);border:0;padding:0 max(43px,calc((100% - 1376px)/2 + 19px)) 0 max(35px,calc((100% - 1376px)/2 + 11px));box-shadow:0 1px 0 #19365b0c}
.site-header>nav:not(.mobile-nav),.site-header>nav>a:hover,.site-header>nav>a[aria-current],.site-header .nav-cta,.site-header .nav-cta:hover,.nav-cta>span,.site-header .menu-toggle{background:transparent;box-shadow:none}
.site-header .nav-cta{color:var(--blue)}
.site-header .brand-lockup,.site-header>nav:not(.mobile-nav),.site-header .nav-cta,.site-header .menu-toggle{translate:0 5px}
@media(max-width:1050px){:root{--header-height:70px}.site-header{height:var(--header-height);padding:0 29px 0 27px}.site-header .mobile-nav:not([hidden]){top:calc(100% + 10px);left:16px;right:16px}}
@media(max-width:760px){:root{--header-height:64px}.site-header{height:var(--header-height);padding:0 25px 0 23px}.site-header .mobile-nav:not([hidden]){top:calc(100% + 10px);left:12px;right:12px}}
.hero-heading{padding-top:clamp(124px,15svh,170px)}
.hero .hero-ip{display:flex;flex-direction:column;gap:12px;font-size:clamp(38px,4.4vw,70px);line-height:1;margin:0;letter-spacing:-.02em}
.hero-ip .hero-ip-zh{font-size:.64em;letter-spacing:.12em}.hero-sub{margin-top:20px}
.hero-image{top:29.5%;height:59%;mask-image:linear-gradient(transparent 0%,transparent 10%,#000 26%,#000 88%,transparent)}
@media(max-width:760px){.hero-heading{padding-top:108px}.hero .hero-ip{font-size:clamp(31px,7.8vw,48px);gap:10px}.hero-sub{font-size:12px;margin-top:18px;letter-spacing:.02em}.hero-image{top:26.5%;height:52%}}

/* A local, clickable interpretation of the App's friend-care animation. */
.care-section{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:70px;background:radial-gradient(ellipse at 85% 60%,#e0eeff,transparent 48%),radial-gradient(ellipse at 50% 90%,#fff4d6,transparent 50%),#fff;padding-block:115px}
.care-copy h2{font-size:clamp(34px,3.8vw,62px);line-height:1.3}.care-companion{width:100%;max-width:440px;justify-self:center}.care-guidance{margin-bottom:24px;text-align:left}.care-guidance>p{font-size:clamp(17px,1.5vw,21px);line-height:1.8;color:var(--muted)}.care-guidance .care-invite{font-size:18px;font-weight:600;color:var(--blue);margin-top:20px}.care-invite span{display:inline-block;margin-left:10px;font-size:23px}
.care-demo{position:relative;width:100%;max-width:440px;justify-self:center;text-align:center;padding:18px 22px 24px;border-radius:38px;background:linear-gradient(145deg,#fff4e1,#fce1b9);border:1px solid #fff8;box-shadow:0 30px 80px #a07a3c20,0 3px 9px #846b4510;color:#714821}
.care-handle{width:36px;height:5px;border-radius:3px;background:#927f644d;margin:0 auto 22px}.care-demo h3{font-size:20px;font-weight:600;color:#352519;margin-bottom:28px}
.care-friend{display:flex;align-items:center;gap:18px;text-align:left;padding:24px 20px;background:#fffcf6d9;border-radius:26px;margin-bottom:18px}.care-avatar{width:78px;height:78px;flex-shrink:0;position:relative}.care-avatar img{width:100%;height:100%;object-fit:contain}.care-friend strong{font-size:22px;font-weight:600}.care-friend p{font-size:14px;color:#b46824;margin-top:10px;white-space:nowrap}.care-friend p span{margin-inline:4px}
.care-send{text-align:left;padding:24px 20px;background:#fffcf6d9;border-radius:26px}.care-send h4{font-size:17px;font-weight:600;margin:0 0 16px}.care-actions{display:flex;gap:10px}.care-actions button{flex:1;min-width:0;min-height:74px;padding:12px 5px;border-radius:16px;background:#fff;color:#714821;font-weight:600;font-size:14px;transition:scale .2s,box-shadow .2s}.care-actions button>span{display:block;font-size:26px;margin-bottom:6px;line-height:1.2}.care-actions button:disabled{cursor:default}.care-actions button:not(:disabled):hover{box-shadow:0 6px 18px #b393631c;scale:1.025}.care-actions button:not(:disabled):active{scale:.97}
.care-status{font-size:14px;line-height:1.7;color:#956331;min-height:48px;display:grid;place-items:center;margin-top:18px}
.care-flight{position:absolute;left:-24px;top:-24px;width:48px;height:48px;font-size:40px;line-height:48px;pointer-events:none;z-index:5;will-change:transform,opacity}.care-flight[hidden]{display:none}
.motion-on .care-arrived{animation:care-wave .56s ease-in-out}.care-arrived::after{content:"";position:absolute;inset:-8px;border:2px solid #eac587;border-radius:50%;pointer-events:none}.motion-on .care-arrived::after{animation:care-ring .65s ease-out both}
@keyframes care-wave{0%{rotate:-6deg}35%{rotate:5deg}70%{rotate:-2deg}100%{rotate:0deg}}@keyframes care-ring{from{scale:.96;opacity:.8}to{scale:1.3;opacity:0}}
@media(max-width:1000px){.care-section{gap:36px}.care-demo{padding:18px 18px 20px}.care-actions button{font-size:14px}}
@media(max-width:760px){.care-section{grid-template-columns:1fr;gap:36px;padding-block:75px}.care-copy{text-align:center}.care-copy h2{font-size:clamp(30px,7.8vw,44px)}.care-guidance>p{font-size:17px}.care-guidance .care-invite{font-size:16px;margin-top:18px}.care-demo{border-radius:28px}.care-actions{gap:9px}.care-friend{gap:10px;padding:20px 14px}.care-avatar{width:64px;height:64px}.care-friend strong{font-size:20px}.care-friend p{font-size:12px}.care-send{padding:20px 14px}.care-actions button{font-size:12px}.care-status{font-size:12px}}

/* Rounded brand lettering; the Chinese name signs the lower right. */
.hero-ip .hero-ip-en{font-family:Fredoka,MiSans,sans-serif;font-weight:700;letter-spacing:0;line-height:1.05}
.hero .hero-ip{color:#0085f9;width:max-content;max-width:100%;align-items:flex-end;gap:4px;font-size:clamp(38px,5.3vw,90px);margin-inline:auto}
.hero-ip .hero-ip-zh{font-size:clamp(14px,1.7vw,24px);letter-spacing:.14em;margin-right:.05em}
.hero .hero-sub{font-size:clamp(20px,2.4vw,34px);font-weight:600;letter-spacing:.08em;line-height:1.3;margin-top:20px}
@media(max-width:760px){.hero .hero-ip{font-size:clamp(28px,7.6vw,48px)}.hero .hero-sub{font-size:20px;margin-top:19px}}

/* One continuous cloud scene, with no resizing frame or live backdrop filter. */
.world-atmosphere{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(var(--paper),#f7f9ff00 17%,#f7f9ff00 84%,var(--paper))}
.world-window,.motion-on .world-window,.motion-off .world-window{inset:0;border-radius:0;transform:none}
.motion-on .world-window{opacity:calc(1 - var(--exit,0))}

/* Visible controls invite attention without holding the page in place. */
.care-scene,.details-scene{background:white}.care-section,.app-details{position:relative;padding-block:112px 52px}.app-details{gap:30px}
.motion-on .care-invite.attention{animation:invite-nudge 2.4s ease-in-out}
.motion-on .widget-demo img.attention{animation:widget-nudge 2.6s ease-in-out;transform-origin:50% 75%}
@keyframes invite-nudge{0%,32%,64%,100%{translate:0 0}16%{translate:10px -12px}48%{translate:13px -9px}82%{translate:7px -6px}}
@keyframes widget-nudge{0%,100%{rotate:0deg;translate:0 0}15%{rotate:-3.5deg;translate:0 -12px}30%{rotate:3deg;translate:0 -8px}48%{rotate:-2.5deg;translate:0 -9px}65%{rotate:2deg;translate:0 -5px}82%{rotate:-1deg;translate:0 -3px}}
@media(max-width:760px){.care-section,.app-details{padding-block:100px 28px}.care-section{gap:28px}.app-details{gap:24px}}

/* Read the whole section, then briefly hold its bottom before the next page. */
.motion-on .reading-stop{height:calc(var(--stage-height,100svh) + 28svh)}
.motion-on .reading-stop>.section-pad{position:sticky;top:var(--pause-top,0px)}

/* Keep the headline, KV and corner lettering in separate rows at every desktop height. */
.hero{--hero-title-size:min(100px,12.5vw)}
.hero .hero-ip{font-size:var(--hero-title-size)}
@media(min-width:761px){
 .hero-sticky,.motion-on .hero-sticky,.motion-off .hero-sticky{display:grid;grid-template-rows:auto minmax(0,1fr) auto;row-gap:16px;height:100svh;min-height:600px;padding-block:calc(var(--header-height) + clamp(12px,2svh,24px)) clamp(20px,3svh,34px)}
 .hero-heading{padding:0 var(--gutter)}
 .hero-image{position:relative;inset:auto;height:auto;min-height:0;mask-image:linear-gradient(transparent,#000 16%,#000 84%,transparent)}
 .hero-bottom{position:relative;inset:auto;margin-inline:var(--gutter)}
}
@media(max-width:760px){.hero{--hero-original-size:clamp(28px,7.6vw,48px);--hero-title-size:clamp(32px,10vw,60px)}.hero-image{top:calc(26.5% + (var(--hero-title-size) - var(--hero-original-size))*1.05)}}