:root{--ink:#422e25;--muted:#827269;--orange:#ff9600;--yellow:#ffc800;--cream:#fffbf5;--line:#eee4d9}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--cream);color:var(--ink);font:17px/1.65 ui-rounded,'Arial Rounded MT Bold',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}button,a,input{ -webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible{outline:3px solid #1899d6;outline-offset:5px}.wrap{max-width:1200px;margin:auto;padding:0 40px}.nav{height:100px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:24px}.brand{font-size:27px;font-weight:900;letter-spacing:-1.5px;white-space:nowrap}.brand b{color:#ed8500}.brand em{display:inline-block;background:var(--orange);color:white;width:32px;height:32px;text-align:center;border-radius:12px;font-style:normal;margin-right:10px;line-height:32px;letter-spacing:0}.links{display:flex;gap:32px;font-size:14px;font-weight:750;align-items:center}.lang{border:0;background:none;color:var(--muted)}.button{display:inline-flex;justify-content:center;align-items:center;gap:14px;background:var(--yellow);border:1px solid #edb600;border-bottom:5px solid #dca600;border-radius:15px;padding:14px 27px;font-weight:800;font-size:15px;transition:transform .2s}.button:hover{transform:translateY(-3px)}.button.secondary{background:white;border:2px solid var(--line);border-bottom-width:5px}.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:20px;align-items:center;min-height:700px;padding:65px 0 85px}.eyebrow{font-size:12px;letter-spacing:2.2px;text-transform:uppercase;font-weight:800;color:#b36a13;display:flex;align-items:center;gap:10px}.eyebrow:before{content:'';width:7px;height:7px;border-radius:50%;background:var(--orange)}h1{font-size:clamp(48px,5.2vw,74px);line-height:1.09;letter-spacing:-3px;margin:26px 0}h1 span{color:#ee8700}p{color:var(--muted);max-width:520px}.hero p{font-size:18px;margin-bottom:30px}.actions{display:flex;gap:12px;flex-wrap:wrap}.tiny{font-size:12px;margin-top:18px;color:var(--muted)}.visual{position:relative;display:grid;place-items:center;height:510px}.orb{position:absolute;width:440px;height:440px;background:#fff0d6;border-radius:50%;border:1px solid #ffe3ac}.mascot{position:relative;width:100%;max-width:480px;animation:float 6s ease-in-out infinite}.bubble{position:absolute;border:2px solid #f1dfc8;background:#fff;padding:12px 22px;border-radius:20px;box-shadow:0 5px 0 #f0e4d4;font-weight:800}.hello{top:10px;left:0;transform:rotate(-9deg);font-size:25px}.hello small{font-size:12px;color:#b18a6b;display:block;font-weight:500}.star{right:0;top:95px;color:#ff9600;font-size:42px;position:absolute}.greeting{bottom:5px;right:0;transform:rotate(6deg);font-size:14px}.ribbon{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:25px 0;display:flex;justify-content:space-between;gap:20px;color:#947d6c;font-size:13px;font-weight:800;letter-spacing:1px}.ribbon span:first-child{color:#e78b16}.intro{text-align:center;max-width:750px;margin:95px auto 70px}.intro .eyebrow{justify-content:center}h2{font-size:clamp(32px,4vw,48px);line-height:1.2;letter-spacing:-1.8px;margin:20px 0}.intro p{margin:20px auto}.feature{display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:center;margin:90px 0 120px}.feature h2{max-width:440px}.feature-art{background:#eef5ff;min-height:400px;border-radius:36px;display:grid;place-items:center;position:relative;padding:35px}.practice{width:100%;max-width:350px;background:white;border:2px solid #dce6f2;box-shadow:0 8px 0 #dce6f2;border-radius:25px;padding:25px}.practice-top{font-size:11px;font-weight:800;color:#8d9eaf;letter-spacing:1px;display:flex;justify-content:space-between}.sound{background:#e6f5ff;color:#1586ba;border:0;border-radius:12px;padding:8px 12px}.word{text-align:center;font-size:52px;color:#8056aa;line-height:1.1;margin:26px 0 6px}.pinyin{text-align:center;font-size:16px;color:#b092c5}.answers{display:flex;gap:10px;margin:26px 0 15px}.answer{flex:1;border:2px solid #e8e8e8;border-bottom-width:4px;background:white;border-radius:11px;padding:10px;color:#6b635e;font-size:13px}.answer.selected{background:#fff3ce;border-color:#ffc800}.feedback{font-size:13px;min-height:22px;color:#7b6957}.label{font-size:12px;color:#8ba0b3;text-align:center;margin:20px 0 0}.number{font-size:13px;color:#c49a6a;font-weight:800;letter-spacing:2px}.textlink{display:inline-block;color:#c37300;font-weight:800;font-size:14px;border-bottom:2px solid #ffd178;padding-bottom:3px;margin-top:16px}.journey{background:#fff0d5}.path{position:relative;display:flex;flex-direction:column;align-items:center;gap:16px}.node{width:66px;height:66px;background:#ffc800;border-radius:50%;border:5px solid #ffde63;box-shadow:0 6px 0 #dca600;display:grid;place-items:center;font-size:24px;font-weight:900}.node:nth-child(2){margin-left:105px;background:#ff9600;border-color:#ffbf63}.node:nth-child(3){margin-left:145px;background:white;border-color:#eadac1;box-shadow:0 6px 0 #e0d1ba}.node:nth-child(4){margin-left:45px;background:white;border-color:#eadac1;box-shadow:0 6px 0 #e0d1ba}.path-note{position:absolute;top:25px;left:-140px;background:white;padding:12px 16px;border-radius:14px;font-size:12px;transform:rotate(-8deg)}.character-section{background:#fff1df;padding:85px 0;overflow:hidden}.character-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}.character-section img{height:370px;max-width:100%;object-fit:contain;mix-blend-mode:multiply}.pill{display:inline-block;border:1px solid #e6cfae;border-radius:25px;padding:5px 14px;font-size:12px;color:#a3794f}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:50px;margin:60px 0 100px}.steps h3{font-size:21px;letter-spacing:-.5px}.steps p{font-size:15px}.steps .number{font-size:30px;color:#e89a2d}.download{text-align:center;background:#ffc800;border-radius:35px;padding:65px 25px;margin:80px 0}.download p{margin:15px auto 28px;color:#775b22}.download h2{font-size:50px}.platforms{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}.platform{background:#fff9e9;border:1px solid #e7b500;border-radius:15px;padding:13px 24px;text-align:left;min-width:190px;font-size:17px;font-weight:800}.platform small{display:block;font-size:11px;color:#8c7545;font-weight:500}.faq{max-width:800px;margin:80px auto 100px}details{border-bottom:1px solid var(--line);padding:20px 0}summary{cursor:pointer;font-weight:750;list-style:none;display:flex;justify-content:space-between}summary:after{content:'+';color:#de9100}details[open] summary:after{content:'−'}details p{font-size:15px;max-width:100%}footer{border-top:1px solid var(--line);padding:50px 0 30px}.footer-top{display:flex;justify-content:space-between;gap:40px}.footer-links{display:flex;gap:55px}.footer-links strong{font-size:12px;text-transform:uppercase;letter-spacing:1px}.footer-links a{display:block;font-size:13px;color:var(--muted);margin:12px 0}.footer-bottom{margin-top:40px;border-top:1px solid var(--line);padding-top:22px;font-size:11px;color:#ab9686;display:flex;justify-content:space-between}.legal{max-width:850px;margin:70px auto 100px;padding:0 30px}.legal h1{font-size:48px}.legal h2{font-size:24px;letter-spacing:-.5px;margin-top:40px}.legal p,.legal li{max-width:none;color:#76675f}.notice{padding:18px 22px;border-radius:14px;background:#fff1d5;color:#8c621f;font-size:14px;margin:25px 0}.legal a{text-decoration:underline;color:#b66b00}.menu{display:none}@keyframes float{50%{transform:translateY(-12px) rotate(2deg)}}@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important;transition:none!important}}@media(max-width:850px){.wrap{padding:0 24px}.nav{height:80px}.brand{font-size:22px}.links>a:not(.button){display:none}.links{gap:12px}.links .button{padding:8px 14px;font-size:12px}.hero{grid-template-columns:1fr;padding-top:45px;text-align:center;gap:5px}.hero .eyebrow,.actions{justify-content:center}.hero p{margin-left:auto;margin-right:auto}.visual{height:420px;max-width:450px;width:100%;margin:auto}.orb{width:330px;height:330px}.mascot{max-width:370px}.hero h1{font-size:54px}.ribbon{flex-wrap:wrap;justify-content:center;font-size:11px}.feature{gap:35px;margin:60px 0 80px}.feature-art{padding:22px;min-height:350px}.character-grid{gap:25px}.path-note{left:-80px}.steps{gap:25px}.footer-links{gap:25px}.download h2{font-size:36px}}@media(max-width:600px){.feature,.character-grid{grid-template-columns:1fr}.feature.reverse .feature-art{order:2}.feature{gap:30px}.hero h1{font-size:46px;letter-spacing:-2px}.visual{height:375px}.hello{left:0;top:10px;font-size:20px}.greeting{bottom:10px}.star{right:0;top:60px}.intro{margin-top:65px}.steps{grid-template-columns:1fr;gap:15px;margin-bottom:60px}.steps article{border-bottom:1px solid var(--line);padding-bottom:15px}.footer-top{flex-direction:column}.footer-links{justify-content:space-between}.footer-bottom{gap:20px;align-items:start}.download{margin-top:40px}.character-section{padding:55px 0}.character-section img{height:300px}.legal h1{font-size:38px}}
@media(max-width:600px){.links .button{display:none}.nav{gap:12px}.links{flex-shrink:0}.path-note{left:-65px}.visual{min-width:0}.bubble.greeting{font-size:12px;padding:10px 15px}}
/* Local brand refresh and full locale navigation */
.brand{display:inline-flex;align-items:center;letter-spacing:0}.brand-image{width:205px;height:74px;object-fit:contain;background:#fff;border-radius:16px}.language-picker{display:flex;gap:6px;align-items:center;padding:9px 12px;border:1px solid var(--line);border-radius:12px;background:white;color:#715d50;font-size:14px}.language-picker select{font:inherit;border:0;background:transparent;color:inherit;max-width:145px;cursor:pointer;padding:0 4px;min-height:28px}.language-picker select:focus-visible{outline:2px solid #1899d6;outline-offset:4px}.links{gap:22px}.nav .button{max-width:220px;text-align:center;line-height:1.35}.hero h1{overflow-wrap:anywhere}.hero .eyebrow{line-height:1.5}.companion-row{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:60px}.companion-row figure{margin:0;background:#fffaf2;border:1px solid #edd6b7;border-radius:25px;text-align:center;padding:18px 12px 14px;transition:transform .2s}.companion-row figure:hover{transform:translateY(-7px)}.companion-row img{width:100%;height:180px;object-fit:contain}.companion-row figcaption{font-size:16px;font-weight:800;display:flex;justify-content:space-between;padding:10px 15px 0}.companion-row figcaption span{color:var(--orange)}.footer-links small{display:block;font-size:10px;opacity:.8}.mascot{isolation:isolate}.orb{background:#fffaf2}.answers{flex-wrap:wrap}.answer{min-width:80px}.ribbon span{white-space:normal}html[dir=rtl] .eyebrow{letter-spacing:0}html[dir=rtl] h1,html[dir=rtl] h2{letter-spacing:0;line-height:1.35}html[dir=rtl] .hero,html[dir=rtl] .feature,html[dir=rtl] .character-grid{text-align:right}html[dir=rtl] .pinyin,html[dir=rtl] .word,html[dir=rtl] .practice-top{direction:ltr}html[dir=rtl] .intro,html[dir=rtl] .download{text-align:center}html[lang=th] h1,html[lang=th] h2{line-height:1.45;letter-spacing:0}html[lang=ru] .hero h1{font-size:clamp(44px,4.4vw,64px)}@media(max-width:1050px){.links>a:not(.button){display:none}.links{gap:12px}}@media(max-width:600px){.brand-image{width:145px;height:58px}.language-picker{padding:5px 7px;font-size:12px}.language-picker select{max-width:115px}.companion-row{grid-template-columns:repeat(2,1fr);gap:14px;margin-top:35px}.companion-row img{height:145px}.hero h1,html[lang=ru] .hero h1{font-size:41px}.hero p{font-size:16px}.visual{height:360px}.eyebrow{letter-spacing:1px}.footer-bottom{flex-wrap:wrap}.footer-links{flex-wrap:wrap}.download h2{overflow-wrap:anywhere}.ribbon{font-size:10px}html[dir=rtl] .hero{text-align:center}}
/* Transparent wordmark, source App path, and the supplied motion asset. */
.brand-image{background:transparent;border-radius:0;height:auto;width:190px;max-height:68px;object-fit:contain}.visual{height:400px}.dragon-media{position:relative;width:330px;height:330px;max-width:100%;isolation:isolate}.dragon-animation,.dragon-media video,.dragon-fallback{display:block;width:100%;height:100%;object-fit:contain;border-radius:50%;mask-image:radial-gradient(ellipse 68% 68% at center,#000 56%,transparent 74%);-webkit-mask-image:radial-gradient(ellipse 68% 68% at center,#000 56%,transparent 74%)}.dragon-fallback{display:none}.video-unavailable video{display:none}.video-unavailable .dragon-fallback{display:block}.video-toggle{position:absolute;bottom:0;right:3px;width:38px;height:38px;border:1px solid #ead9c4;border-bottom:3px solid #d9c1a2;border-radius:50%;color:#865723;background:var(--cream);font-size:14px;display:grid;place-items:center;z-index:2}.visual .hello{top:0;left:30px;font-size:22px}.visual .star{right:20px;top:65px;font-size:30px}.visual .greeting{bottom:0;right:15px;font-size:12px;max-width:260px}.journey{padding:25px 30px;background:#fff4e2}.app-path-preview{width:100%;max-width:350px;background:white;border-radius:24px;overflow:hidden;box-shadow:0 8px 0 #e9dcc6;border:1px solid #e5d8c2}.app-unit-header{background:#ff9600;color:white;padding:18px 15px;display:flex;align-items:center;gap:12px;font-size:12px;line-height:1.4}.app-unit-header>span:first-child{font-size:20px;font-weight:900}.app-unit-header>span:last-child{margin-inline-start:auto;font-size:23px}.app-course-path{position:relative;height:465px;direction:ltr;overflow:hidden}.app-path-node{position:absolute;left:var(--x);top:var(--y);width:64px;height:50px;transform:translateX(-50%);border-radius:50%;background:#ff9600;box-shadow:0 7px 0 #dc8100;display:grid;place-items:center;color:white}.app-path-node img{width:32px;height:30px;object-fit:contain}.app-path-node.completed span{font-size:32px;line-height:1;font-weight:900}.app-path-node.locked{background:#e5e5e5;box-shadow:0 7px 0 #c9c9c9;color:#afafaf}.app-path-node svg{width:27px;height:27px}.app-path-node.current:before,.app-path-node.current:after{content:'';position:absolute;inset:-9px -8px -16px;border:3px solid #ffd391;border-radius:50%;pointer-events:none}.app-path-node.current:after{inset:-16px -15px -23px;border-width:2px;opacity:.4;animation:node-breathe 1.6s ease-in-out infinite}.path-word{position:absolute;right:16%;top:225px;transform:rotate(8deg);font-size:26px;color:#c7b69c;font-weight:800}.path-word small{display:block;font-size:11px;font-weight:500}.feature-art.journey{min-height:560px}@keyframes node-breathe{50%{transform:scale(1.06);opacity:.15}}@media(max-width:600px){.brand-image{width:145px;max-height:55px}.visual{height:325px;max-width:360px}.dragon-media{width:270px;height:270px}.visual .hello{left:3px;top:0;font-size:19px;padding:9px 15px}.visual .star{right:10px;top:60px}.visual .greeting{right:0;bottom:0;font-size:11px}.journey{padding:20px}.feature-art.journey{min-height:550px}}
.video-toggle{right:auto;left:0;bottom:12px}.visual .greeting{pointer-events:none}

/* Compact App path preview, preserving the original node proportions. */
.app-path-preview{zoom:.85}.feature-art.journey{min-height:480px;padding:24px;max-width:440px;width:100%;justify-self:center}
@media(max-width:600px){.feature-art.journey{min-height:465px;padding:20px}.app-path-preview{zoom:.85}}
