:root{--cream:#fffcf5;--ink:#342b29;--red:#b90b2f;--butter:#ffed9f;--sky:#d9f0f6;--line:#eaddc8}.header{height:90px;margin:18px auto 0;max-width:1180px;border:1px solid #ebdfcd;border-radius:28px;background:#fffdf8;padding:0 30px;box-shadow:0 5px 0 #f3ebdc;position:relative;z-index:5}.header nav{font-size:13px}.button,.button.small{border-radius:100px;box-shadow:0 5px 0 #850c2540;transition:transform .2s,box-shadow .2s}.button:hover{transform:translateY(-3px);box-shadow:0 8px 0 #850c2528}.hero{grid-template-columns:1fr 1.08fr;gap:45px;padding-top:45px;padding-bottom:65px;min-height:680px}.hero-copy{padding-top:10px}.hero .eyebrow{letter-spacing:1.3px;font-size:10px;line-height:1.7;display:inline-flex;background:#fcedd5;padding:9px 14px;border-radius:20px}.hero h1{font-size:61px;line-height:1.16;letter-spacing:-2.8px}.hero h1 em{font-style:normal;white-space:normal}.hero h1 em:after{height:9px;bottom:-11px;border-width:4px;transform:rotate(-2deg)}.hero .lead{font-size:15px;line-height:1.9;max-width:440px}.hero-actions{gap:20px;flex-wrap:wrap}.hero-note{font-size:11px;margin-top:28px}.hero-art{height:555px;isolation:isolate;background:#ffec9a;border-radius:47% 52% 43% 49%;position:relative;display:block;overflow:visible}.mascot{background-image:url('/assets/uni-mascot-poses.png');background-repeat:no-repeat;background-size:200% 200%;aspect-ratio:1;width:260px;flex:none}.mascot-wave{background-position:0 0}.mascot-shop{background-position:100% 0}.mascot-repair{background-position:0 100%}.mascot-talk{background-position:100% 100%}.hero-owl{position:absolute;width:88%;max-width:475px;left:5%;top:85px;z-index:2;transform-origin:50% 85%;animation:owl-hello 4.5s ease-in-out infinite}.speech{position:absolute;background:white;border:2px solid #352723;border-radius:22px;padding:15px 22px;box-shadow:4px 5px 0 #35272314;z-index:3;font-weight:700}.speech:after{content:'';position:absolute;width:18px;height:18px;background:white;border-right:2px solid #352723;border-bottom:2px solid #352723;bottom:-11px;left:38px;transform:skew(-15deg) rotate(45deg)}.hello-bubble{left:20px;top:10px;transform:rotate(-7deg);font-size:19px;display:flex;gap:16px;align-items:center}.hello-bubble>span:last-child{font-size:27px;color:var(--red)}.adventure-bubble{right:-12px;bottom:55px;transform:rotate(7deg);font-size:13px;max-width:230px}.adventure-bubble:after{top:-11px;bottom:auto;left:22px;transform:rotate(225deg)}.ground-shadow{position:absolute;background:#bd932e2b;filter:blur(2px);width:62%;height:23px;bottom:59px;left:20%;border-radius:50%;z-index:1}.hero-art .location-tag{top:auto;bottom:8px;left:42px;right:auto;transform:rotate(-4deg);background:#d6eef6;border:0;font-weight:600;font-size:10px}.cloud{position:absolute;width:65px;height:25px;border-radius:50px;background:#fff9df;z-index:0}.cloud:before,.cloud:after{content:'';position:absolute;border-radius:50%;background:inherit}.cloud:before{width:32px;height:32px;left:10px;top:-16px}.cloud:after{width:25px;height:25px;left:33px;top:-10px}.cloud-one{right:23px;top:85px;transform:rotate(8deg)}.cloud-two{left:-20px;bottom:170px;background:#d7eff7;transform:scale(1.3)}.tiny-star{position:absolute;font-size:42px;color:var(--red);z-index:3}.star-one{right:-8px;top:195px;transform:rotate(12deg)}.star-two{left:15px;top:185px;color:#4486a2;font-size:25px}.mini-app{position:absolute;bottom:15px;right:-25px;width:76px;border:5px solid #fff;border-radius:15px;background:#fff;box-shadow:0 7px 20px #61491b26;transform:rotate(12deg);z-index:4;overflow:hidden}.mini-app img{width:100%;height:132px;object-fit:cover;object-position:top}.mini-app>span{display:block;text-align:center;font-size:9px;font-weight:800;padding:5px}.ribbon{background:var(--sky);color:#315d70;padding:23px 20px;border-top:1px solid #badbe8;border-bottom:1px solid #badbe8}.ribbon span:nth-child(even){color:var(--red);font-size:26px}.ribbon>div{font-weight:800;letter-spacing:1.5px}.overview{padding-top:65px;padding-bottom:55px;border-bottom:1px dashed #dbcbae}.overview h2{font-size:30px}.overview .source-links a{border-radius:50px;background:#fff2dd;padding:8px 12px}.discover{padding-top:75px;padding-bottom:90px}.section-head{gap:35px}h2{letter-spacing:-1.8px;font-weight:800}.feature-layout{gap:32px;grid-template-columns:1fr 1.3fr}.feature-tabs{display:grid;gap:14px}.feature{padding:24px 20px;border:1px solid #e5d9c6;border-radius:22px;background:white;transition:transform .2s,border-color .2s;box-shadow:0 4px 0 #ede4d5}.feature.active{border:2px solid var(--red);background:#fff1d9;padding:23px 19px;transform:translateX(4px)}.feature:hover{transform:translateX(4px)}.feature-number{width:28px;height:28px;background:#ffebad;border-radius:50%;display:grid;place-items:center;padding:0;flex:none;color:var(--red);font-weight:700}.feature b{font-size:16px}.feature small{line-height:1.65}.feature-panel{background:#dff0f3;border:1px solid #bfdde5;border-radius:32px;padding:28px;grid-template-columns:1fr 160px;gap:18px;min-height:470px;box-shadow:0 7px 0 #cbe5e8}.feature-panel>div{position:relative}.feature-panel #feature-mascot{width:110px;margin-top:-12px;margin-left:-10px;margin-bottom:0}.feature-panel .pill{background:white;border-color:#accdd9}.feature-panel h3{font-size:25px;margin-top:15px}.feature-panel>img{width:160px;transform:rotate(5deg);box-shadow:7px 10px 0 #a9cddc77}.feature-panel p{color:#4a6068}.how{background:#fff4ce;padding:75px 0 85px;border-top:1px solid #f0dfad;border-bottom:1px solid #f0dfad;position:relative}.how .section-head h2{max-width:720px}.steps{gap:25px;position:relative;margin-top:35px}.story-card{background:white;border:1px solid #e7d7b0!important;padding:0 25px 27px!important;border-radius:28px;overflow:hidden;box-shadow:0 7px 0 #e6d6ae66;position:relative;transition:transform .6s ease,box-shadow .3s}.story-card:hover{box-shadow:0 11px 0 #e6d6ae66;transform:translateY(-5px)}.story-scene{height:245px;margin:0 -25px 24px;position:relative;background:#ffedb0;overflow:hidden;display:flex;align-items:center;justify-content:center;isolation:isolate}.story-repair .story-scene{background:#d6eff9}.story-talk .story-scene{background:#e7edcf}.story-scene .mascot{width:240px;height:240px;z-index:2;transform-origin:center bottom;transition:transform .7s cubic-bezier(.2,.8,.3,1)}.story-scene .scene-floor{position:absolute;bottom:13px;width:65%;height:15px;background:#7b5e2b1c;filter:blur(1px);border-radius:50%}.scene-mark{position:absolute;top:25px;right:25px;font-size:30px;color:var(--red);transform:rotate(15deg)}.story-card>span{display:inline-block;background:#ffefbd;border-radius:100px;padding:5px 12px;font-size:10px!important;position:static!important}.steps .story-card h3{margin-top:18px;line-height:1.5}.steps .story-card p{max-width:none;font-size:13px;line-height:1.9;margin-bottom:0}.story-card.arrived .mascot{animation:little-bounce .85s ease-out both}.story-repair.arrived .mascot{animation-delay:.15s}.story-talk.arrived .mascot{animation-delay:.3s}.community{gap:50px;padding-top:85px;padding-bottom:85px}.community-image{border-radius:28px;border:1px solid #c8d8c0;box-shadow:0 7px 0 #dfe7d7;background:#e7edcf;transform:rotate(-2deg)}.community-image>img{height:290px}.community .text-link{border-bottom:2px solid #edb8c2;padding-bottom:7px}.faq{position:relative;max-width:950px;padding-right:230px;padding-top:10px;padding-bottom:85px}.faq-friend{position:absolute;width:190px;right:20px;top:65px;transform:rotate(9deg)}.faq>h2{font-size:36px}.faq details{border:1px solid #e6ddcd;border-radius:16px;padding:20px;margin:12px 0;background:#fffdf9}.faq details[open]{background:#fff2ce}.faq summary{font-size:14px;line-height:1.7}.faq details p{font-size:13px}.download{border-radius:38px;background:#b90b2f;overflow:visible;padding:55px 60px;max-width:1124px;margin-bottom:45px;isolation:isolate;box-shadow:0 9px 0 #f0d8dc}.download h2{font-size:47px;line-height:1.25}.download h2 em{font-style:normal;color:#ffeb9c}.download .eyebrow{color:#ffe6a8}.download .store{border-radius:14px;box-shadow:0 4px 0 #750b2666}.download-friend{width:320px;flex:none;align-self:flex-end;text-align:center}.download-friend .mascot{width:310px;transform:rotate(-6deg);filter:drop-shadow(0 9px 0 #81061f40)}.download-friend>span{font-size:12px;letter-spacing:2px;color:#ffecab}.language-links{padding-top:20px}footer{padding-top:20px}footer .brand{transform:rotate(-2deg)}@keyframes owl-hello{0%,100%{transform:rotate(-3deg) translateY(0)}50%{transform:rotate(2deg) translateY(-7px)}}@keyframes little-bounce{0%{transform:translateY(22px) rotate(-7deg)}60%{transform:translateY(-8px) rotate(3deg)}100%{transform:translateY(0) rotate(0)}}html[lang=lo] .hero h1,html[lang=th] .hero h1{font-size:49px;line-height:1.5;letter-spacing:-.5px}html[lang=ko] .hero h1{font-size:51px;line-height:1.45;letter-spacing:-2px}html[lang=lo] .hello-bubble,html[lang=th] .hello-bubble{font-size:16px}html[lang=lo] .adventure-bubble,html[lang=th] .adventure-bubble{font-size:12px}html[lang=lo] .feature-panel h3,html[lang=th] .feature-panel h3{font-size:21px}html[lang=lo] .steps h3,html[lang=th] .steps h3{font-size:20px}@media(max-width:1100px){.header{margin-left:25px;margin-right:25px}.hero{gap:20px}.hero-art{height:500px}.hero h1{font-size:51px}.hero-owl{top:100px;width:91%;left:2%}.hello-bubble{top:22px;left:8px}.adventure-bubble{bottom:40px;right:10px}.mini-app{right:0;bottom:-15px}.hero-art .location-tag{left:8px;bottom:10px}.feature-panel{grid-template-columns:1fr 135px;padding:23px;gap:12px}.feature-panel>img{width:135px}.story-scene{height:210px}.story-scene .mascot{width:210px;height:210px}.download-friend{width:250px}.download-friend .mascot{width:250px}.download{margin-left:25px;margin-right:25px}.download h2{font-size:41px}html[lang=lo] .hero h1,html[lang=th] .hero h1{font-size:42px}html[lang=ko] .hero h1{font-size:45px}}@media(max-width:760px){.header{margin:12px 14px 0;height:73px;padding:0 14px;border-radius:23px}.header .brand img{width:34px;height:34px}.header .brand>span{font-size:23px}.header .button.small{padding:10px 12px;font-size:10px;box-shadow:0 3px 0 #850c2525}.header select{max-width:78px;font-size:11px}.hero{display:flex;flex-direction:column;align-items:stretch;padding-top:34px;padding-bottom:40px;gap:28px;min-height:0}.hero-copy{padding:0 3px}.hero .eyebrow{font-size:8px;letter-spacing:.7px;padding:7px 11px}.hero h1,html[lang=en] .hero h1{font-size:47px;line-height:1.13;letter-spacing:-2.3px;margin-top:22px;margin-bottom:22px}.hero .lead{font-size:13px;margin:22px 0;line-height:1.95}.hero .button{padding:16px 21px;font-size:12px;gap:25px}.hero-actions{gap:20px}.hero-actions .text-link{font-size:11px}.hero-note{font-size:10px;margin-top:23px}.hero-art{width:100%;max-width:440px;height:435px;margin-top:16px;border-radius:46% 52% 46% 45%}.hero-owl{width:89%;top:76px;left:4%}.hello-bubble{font-size:15px;top:4px;left:4px;padding:11px 16px;border-radius:18px}.hello-bubble>span:last-child{font-size:22px}.adventure-bubble{font-size:11px;padding:12px 15px;bottom:50px;right:2px;max-width:190px}.hero-art .location-tag{font-size:9px;bottom:15px;left:3px;padding:8px 12px}.ground-shadow{bottom:67px}.mini-app{width:62px;bottom:-4px;right:5px;border-width:4px;border-radius:12px}.mini-app img{height:108px}.mini-app>span{font-size:8px}.cloud-one{right:5px;top:85px;transform:scale(.8)}.cloud-two{left:-3px;bottom:135px;transform:scale(.8)}.star-one{right:-3px;top:185px;font-size:30px}.star-two{left:4px;top:150px;font-size:21px}.ribbon{padding:17px 15px}.ribbon>div{gap:23px;letter-spacing:1px;font-size:9px}.ribbon span:nth-child(even){font-size:21px}.overview{padding-top:44px;padding-bottom:38px}.overview h2{font-size:27px}.overview p{font-size:13px}.discover{padding-top:50px;padding-bottom:60px}.feature-layout{display:block}.feature-tabs{gap:11px;margin:28px 0}.feature{padding:18px 15px;border-radius:17px;gap:12px}.feature.active{padding:17px 14px;transform:none}.feature b{font-size:14px}.feature small{font-size:11px}.feature-panel,html[lang=lo] .feature-panel,html[lang=th] .feature-panel{grid-template-columns:minmax(0,1fr) 118px;gap:13px;padding:22px;border-radius:25px;min-height:405px}.feature-panel #feature-mascot{width:86px;margin-left:-7px;margin-top:-8px}.feature-panel h3{font-size:22px}.feature-panel>img{width:118px}.feature-panel p{font-size:11px}.feature-panel .screen-note{margin-top:18px;font-size:8px}.how{padding:50px 0 60px}.how .section-head{margin-bottom:10px}.steps{display:grid;grid-template-columns:1fr;gap:24px;margin-top:22px}.story-card{display:grid;grid-template-columns:1fr;max-width:440px;width:100%;margin:auto;padding:0 24px 25px!important;border-radius:26px}.story-scene{margin:0 -24px 20px;height:245px}.story-scene .mascot{width:250px;height:250px}.story-card>span{justify-self:start}.steps .story-card h3{font-size:21px;margin-top:15px}.steps .story-card p{font-size:13px;margin-top:10px}.story-scene .scene-floor{width:50%}.scene-mark{right:45px}.community{padding-top:60px;padding-bottom:50px;gap:35px}.community-image{transform:rotate(-1deg)}.community-image>img{height:220px}.community-copy p{font-size:13px}.community h2{font-size:32px}.faq{padding-right:23px;padding-top:75px;padding-bottom:55px}.faq-friend{width:105px;right:17px;top:-12px;transform:rotate(8deg)}.faq>h2{font-size:31px;margin-bottom:25px}.faq details{padding:18px}.faq summary{font-size:13px}.faq details p{font-size:12px}.download{margin:0 16px 30px;padding:32px 25px 0;border-radius:29px;display:flex;flex-direction:column;gap:20px;overflow:hidden}.download>div:first-child{width:100%}.download h2{font-size:35px}.download .eyebrow{font-size:8px}.download p{font-size:13px;line-height:1.8}.download .stores{gap:8px;flex-wrap:wrap}.download .store{flex:1;padding:10px 11px;gap:6px}.download .store b{font-size:14px}.download-friend{width:210px;align-self:center;margin-bottom:-20px}.download-friend .mascot{width:210px}.download-friend>span{display:none}.language-links{gap:22px;font-size:12px}footer{gap:25px}html[lang=lo] .hero h1,html[lang=th] .hero h1{font-size:37px;line-height:1.5;letter-spacing:-.3px}html[lang=ko] .hero h1{font-size:41px;line-height:1.4;letter-spacing:-1.8px}html[lang=lo] .hello-bubble,html[lang=th] .hello-bubble{font-size:13px}html[lang=lo] .adventure-bubble,html[lang=th] .adventure-bubble{font-size:11px}html[lang=lo] .feature-panel h3,html[lang=th] .feature-panel h3{font-size:19px}html[lang=lo] .steps h3,html[lang=th] .steps h3{font-size:21px}}@media(max-width:360px){.header{margin-left:10px;margin-right:10px;padding:0 10px}.header .brand img{width:29px;height:29px}.header .brand>span{font-size:21px}.header .brand small{display:none}.header .button.small{padding:10px;font-size:9px}.header select{max-width:65px}.hero h1,html[lang=en] .hero h1{font-size:40px}.hero-art{height:370px}.hero-owl{top:76px}.hero-actions{gap:13px}.hero .button{padding:15px 17px}.adventure-bubble{bottom:36px;font-size:10px}.ground-shadow{bottom:50px}.mini-app{width:52px;bottom:-8px}.mini-app img{height:90px}.hero-art .location-tag{bottom:9px}.feature-panel,html[lang=lo] .feature-panel,html[lang=th] .feature-panel{grid-template-columns:minmax(0,1fr) 95px;padding:18px;gap:12px}.feature-panel>img{width:95px}.feature-panel h3{font-size:20px}.download{padding-left:20px;padding-right:20px}.download .store b{font-size:12px}.download .store small{font-size:7px}html[lang=lo] .hero h1,html[lang=th] .hero h1{font-size:33px}html[lang=ko] .hero h1{font-size:36px}}@media(prefers-reduced-motion:reduce){.hero-owl,.story-card.arrived .mascot{animation:none!important}.story-card,.story-scene .mascot,.button,.feature{transition:none!important}}
/* Keep the closing speech readable beside the app preview at every size. */
.adventure-bubble{right:90px;bottom:24px}
@media(max-width:1100px){.adventure-bubble{right:80px;bottom:20px}}
@media(max-width:760px){.adventure-bubble{right:72px;bottom:50px;max-width:180px}}
@media(max-width:360px){.adventure-bubble{right:58px;bottom:42px;max-width:165px}}
