/* Direction A. Brand assets are immutable; all presentation lives in CSS. */
:root{color-scheme:light;--primary:#C42B1C;--primary-hover:#A92216;--primary-lip:#85190F;--brand-gradient:linear-gradient(120deg,#CC1F1A,#FF6B3D);--background:#F7F5F4;--surface:#FFF;--surface-soft:#F0EDEC;--border:#E6E1DF;--ink:#1F1D24;--muted:#5C5862;--secondary:#FDE9E2;--gold:#F4C451;--ease:cubic-bezier(.2,.8,.2,1)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:110px}body{margin:0;background:var(--background);color:var(--ink);font-family:'Be Vietnam Pro',system-ui,sans-serif;font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}a,button{-webkit-tap-highlight-color:transparent}img{display:block;max-width:100%;height:auto}svg{display:block}h1,h2,h3,p{margin-top:0}h1,h2,h3{line-height:1.2;letter-spacing:-.04em;font-weight:700}a,button{transition:transform .25s var(--ease)}a:focus-visible,button:focus-visible{outline:3px solid var(--primary);outline-offset:5px}button:disabled{cursor:default}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.pinyin{font-family:'Nunito',system-ui,sans-serif;font-weight:800}.skip-link{position:fixed;top:10px;left:12px;z-index:100;transform:translateY(-160%);background:var(--surface);border:1px solid var(--primary);border-radius:12px;padding:12px 20px}.skip-link:focus{transform:none}
/* Shared shell. */
.site-header{position:relative;z-index:20;border-bottom:1px solid var(--border);background:var(--surface)}.header-inner,.footer-inner{max-width:1184px;margin:auto;padding-inline:32px}.header-inner{min-height:86px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand,.footer-brand{display:inline-flex;align-items:center;min-height:48px}.brand:hover,.footer-brand:hover{transform:translateY(-2px)}.brand img,.footer-brand img{width:181px;height:38px}.header-nav{display:flex;align-items:center;gap:32px;font-size:14px;font-weight:600}.nav-detail{display:inline-flex;align-items:center;min-height:44px}.nav-detail:hover{color:var(--primary);transform:translateY(-2px)}.header-cta{display:inline-flex;align-items:center;gap:16px;min-height:44px;padding:10px 19px;border:1px solid var(--border);border-radius:12px;background:var(--background)}.header-cta:hover{transform:translateY(-3px)}.header-cta:active{transform:translateY(1px)}
.primary-cta{display:inline-flex;align-items:center;justify-content:center;gap:36px;min-height:58px;padding:13px 22px 13px 26px;background:var(--primary);color:white;border:1px solid var(--primary-lip);border-radius:15px;font-size:17px;font-weight:700;box-shadow:0 4px 0 var(--primary-lip),0 12px 28px #c42b1c18}.primary-cta:hover{background:var(--primary-hover);transform:translateY(-3px)}.primary-cta:active{transform:translateY(3px)}.cta-arrow{font-size:24px;line-height:1;transition:transform .25s var(--ease)}.primary-cta:hover .cta-arrow{transform:translate(3px,-3px)}
.eyebrow{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--muted)}.status-dot{width:7px;height:7px;flex-shrink:0;border-radius:50%;background:var(--primary);box-shadow:0 0 0 4px #c42b1c0b}.eyebrow-divider{height:12px;width:1px;background:#c9bdb9;margin-inline:5px}
/* Hero: warm light, oversized mascot and a real vocabulary preview. */
.hero{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(110deg,#FFF 15%,#fffaf5 100%)}.hero-glow{position:absolute;z-index:-1;width:1000px;height:900px;right:-320px;top:-280px;background:radial-gradient(ellipse at 60% 40%,#FF6B3D25 0%,#CC1F1A10 35%,#fff7e663 55%,#fff0 73%);pointer-events:none}.hero-inner{max-width:1184px;display:grid;grid-template-columns:1.17fr 1fr;align-items:center;gap:18px;min-height:650px;margin:auto;padding:55px 32px 42px}.hero-copy{position:relative;z-index:3;padding-block:12px 20px}.hero-eyebrow{margin-bottom:25px}.hero h1{font-size:clamp(44px,4.5vw,60px);line-height:1.19;letter-spacing:-.06em;margin-bottom:25px;max-width:630px}.hero h1>span{color:var(--primary)}.hero-description{max-width:480px;font-size:16px;line-height:1.9;color:var(--muted);margin-bottom:30px}.hero-visual{position:relative;min-width:0;height:510px}.hero-mascot{position:absolute;width:500px;right:-75px;top:-26px;padding:42px;z-index:2;pointer-events:none}.hero-mascot img{width:416px;height:416px}.visual-orbit{position:absolute;border:1px solid #c42b1c12;border-radius:50%;pointer-events:none}.orbit-back{width:408px;height:408px;right:-10px;top:50px;background:radial-gradient(circle at 60% 35%,#fff6,#FDE9E266 80%)}.orbit-front{width:480px;height:480px;right:-45px;top:12px}.visual-spark{position:absolute;color:var(--primary);font-size:41px}.spark-one{right:10px;top:48px}.spark-two{font-size:25px;color:#9f6b07;left:105px;top:95px}.skill-chip{position:absolute;z-index:3;display:flex;align-items:center;gap:9px;padding:10px 15px;border:1px solid #ffffffdd;border-radius:15px;background:var(--surface);font-size:13px;font-weight:600;box-shadow:0 8px 26px #5022110c}.skill-chip svg{width:20px;height:20px;fill:none;stroke:var(--primary);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.chip-listen{top:72px;left:30px;rotate:-8deg}.chip-speak{top:300px;right:-8px;rotate:7deg}.mascot-caption{position:absolute;bottom:37px;right:42px;display:flex;align-items:center;gap:9px;font-size:12px;color:var(--muted);rotate:-6deg}.caption-line{width:31px;height:15px;border-bottom:1px solid #a18b80;border-radius:50%;rotate:10deg}
.word-card-wrap{position:absolute;z-index:4;left:0;bottom:0;width:194px;rotate:-5deg}.word-card{position:relative;display:flex;flex-direction:column;align-items:center;width:100%;min-height:268px;padding:14px 18px 12px;border:1px solid #e9d9d2;border-radius:21px;background:var(--surface);box-shadow:0 18px 55px #67331c12;overflow:hidden;isolation:isolate}.word-card:hover{transform:translateY(-6px) rotate(3deg)}.word-card:active{transform:translateY(-1px) scale(.98)}.word-card-top,.word-card-bottom{display:flex;align-items:center;justify-content:space-between;width:100%;font-size:10px;color:var(--muted);font-weight:500}.word-card-top>span:last-child{font-size:18px}.word-card-bottom{margin-top:auto;padding-top:12px}.word-card-bottom>span:first-child{font-variant-numeric:tabular-nums}.card-next{font-size:18px}.word-grid{position:absolute;top:53px;left:50%;width:112px;height:112px;transform:translateX(-50%);border:1px solid #c42b1c0c;background:linear-gradient(transparent calc(50% - .5px),#c42b1c0c 50%,transparent calc(50% + .5px)),linear-gradient(90deg,transparent calc(50% - .5px),#c42b1c0c 50%,transparent calc(50% + .5px));z-index:-1}.word-hanzi{height:117px;font-family:'Noto Sans CJK SC','Microsoft YaHei','PingFang SC',sans-serif;font-size:87px;font-weight:500;line-height:1.38;color:var(--primary);min-width:1em;margin-block:9px 2px}.word-card .pinyin{font-size:21px;color:var(--ink);line-height:1.3}.word-meaning{font-size:12px;line-height:1.6;color:var(--muted);text-align:center;margin-top:4px;max-width:100%;overflow-wrap:anywhere}.word-progress{width:100%;height:3px;background:var(--surface-soft);border-radius:5px;overflow:hidden;margin-top:7px}.word-progress>span{display:block;width:100%;height:100%;background:var(--brand-gradient);transform:scaleX(.2);transform-origin:left;transition:transform .6s var(--ease)}.word-instruction{display:block;text-align:center;color:var(--muted);font-size:9px;line-height:1.8;letter-spacing:-.02em;margin-top:11px}.word-card.is-writing .word-hanzi{animation:ink-reveal .65s var(--ease) both}.word-card.is-writing .pinyin,.word-card.is-writing .word-meaning{animation:fade-up .45s .12s both}.word-card.is-writing::after{content:'';position:absolute;left:27px;right:27px;top:51px;height:2px;background:linear-gradient(90deg,transparent,#c42b1c44,transparent);pointer-events:none;animation:brush-sweep .6s var(--ease) both}
.footer-motion{display:flex;justify-content:flex-end}.motion-toggle{display:flex;align-items:center;gap:8px;min-height:44px;border:0;background:transparent;padding:10px 8px;font-size:11px;color:var(--muted);border-radius:10px}.motion-toggle:hover{transform:translateY(-2px);background:var(--secondary)}.motion-toggle:active{transform:scale(.98)}.motion-icon{font-weight:800;font-size:13px}.no-script{margin:12px auto;max-width:1120px;padding:12px 24px;color:var(--muted);font-size:13px}
/* Upcoming availability: muted surfaces, opaque accessible text. */
.download-options{display:flex;flex-wrap:wrap;align-items:stretch;gap:8px;max-width:100%;margin-top:30px}.platform-badge{display:flex;align-items:center;gap:7px;padding:9px 10px;min-height:52px;border:1px solid var(--border);border-radius:11px;font-size:10px;font-weight:600;line-height:1.5}.platform-badge svg{width:17px;height:21px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.platform-badge-disabled{background:var(--surface-soft);color:var(--muted);border-color:transparent;cursor:default}.platform-badge-disabled:hover{transform:translateY(-2px)}.coming-soon{display:block;font-size:9px;font-weight:400;color:var(--muted)}.platform-badge-extension{background:var(--surface);color:var(--ink)}.platform-badge-extension:hover{transform:translateY(-3px);border-color:#c42b1c66}.platform-badge-extension:active{transform:translateY(1px)}.external-arrow{font-size:13px}
/* Bento features. Decorative examples contain no invented learning material. */
.section{max-width:1184px;margin:auto;padding:88px 32px 0}.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:30px}.section-heading .eyebrow{margin-bottom:12px;color:var(--primary)}.section-heading h2{font-size:36px;margin:0;letter-spacing:-.045em}.section-index{color:var(--muted);font-family:'Nunito',sans-serif;font-size:12px;letter-spacing:.15em;padding-bottom:7px}.feature-grid{display:grid;grid-template-columns:1.2fr 1fr;grid-template-rows:250px 250px;gap:20px}.bento-card{position:relative;overflow:hidden;isolation:isolate;border:1px solid var(--border);border-radius:26px;background:var(--surface);padding:30px;transition:transform .3s var(--ease)}.bento-card:hover{transform:translateY(-6px)}.feature-vocabulary{grid-row:span 2;background:linear-gradient(145deg,#FFF 10%,#fff8f2);padding:34px}.feature-copy{position:relative;z-index:2}.feature-number{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:1px solid var(--border);border-radius:10px;font-size:10px;color:var(--muted);margin-bottom:19px;background:#ffffff99}.bento-card h3{font-size:25px;margin-bottom:12px;letter-spacing:-.045em}.bento-card p{color:var(--muted);font-size:13px;line-height:1.8;max-width:320px;margin-bottom:0}.feature-vocabulary h3{font-size:31px}.feature-vocabulary .text-link{position:absolute;left:34px;bottom:25px;z-index:3}.text-link{display:inline-flex;gap:28px;align-items:center;min-height:44px;font-size:12px;font-weight:600;color:var(--primary)}.text-link:hover{transform:translateX(4px)}.lesson-illustration{position:absolute;left:43%;top:49%;width:252px;height:254px;rotate:7deg}.lesson-layer{position:absolute;inset:0;border:1px solid #e7d2c6;border-radius:21px;transform-origin:bottom center}.layer-back{background:#F4C451;transform:rotate(-20deg) translate(-20px,6px)}.layer-middle{background:#FDE9E2;transform:rotate(-10deg) translate(-8px,0)}.layer-front{background:var(--surface);padding:20px;box-shadow:0 15px 30px #6e351b0a;transition:transform .6s var(--ease)}.bento-card:hover .layer-front{transform:translateY(-10px) rotate(3deg)}.lesson-paper-top{display:flex;justify-content:space-between;color:var(--primary);font-size:10px;font-weight:700}.lesson-paper-title{display:block;font-size:24px;font-weight:600;margin:10px 0 16px}.lesson-topic{display:flex;align-items:center;gap:10px;padding:9px 0;font-size:11px;border-top:1px solid var(--border)}.lesson-topic i{width:10px;height:10px;border-radius:3px;background:var(--secondary)}.lesson-topic>span{margin-left:auto}.lesson-star{position:absolute;left:-100px;top:60px;color:var(--primary);font-size:45px;rotate:-15deg}.feature-listening{background:#fff}.feature-listening p,.feature-tests p{max-width:260px}.feature-listening .feature-copy,.feature-tests .feature-copy{max-width:80%}.audio-illustration{display:flex;gap:12px;align-items:center;position:absolute;right:30px;left:30px;bottom:22px}.audio-play{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;color:var(--primary);background:var(--secondary);font-size:11px;padding-left:2px}.audio-wave{display:flex;align-items:center;gap:5px;height:28px}.audio-wave i{width:4px;height:14px;background:var(--primary);border-radius:5px;transform-origin:center;animation:none;animation-delay:calc(var(--bar,0)*-.1s)}.audio-wave i:nth-child(3n){height:27px;--bar:3}.audio-wave i:nth-child(3n + 1){height:9px;--bar:7}.audio-wave i:nth-child(2n){height:20px;--bar:4}.audio-icon{margin-left:auto;font-size:29px;color:#9d541d}.feature-tests{background:#FDE9E2}.feature-tests .feature-number{border-color:#eac8bb}.feature-tests .feature-copy{max-width:66%}.feature-tests h3{font-size:24px}.test-illustration{position:absolute;bottom:-12px;right:10px;width:125px;height:158px;rotate:12deg}.test-sheet{height:100%;border-radius:15px;background:var(--surface);border:1px solid #e7c4b5;padding:16px;font-size:10px;font-weight:600}.test-sheet i{display:block;height:6px;background:var(--surface-soft);border-radius:10px;margin-top:14px}.test-sheet i:nth-child(3){width:70%}.test-check{position:absolute;right:-8px;bottom:32px;width:38px;height:38px;display:grid;place-items:center;border:4px solid #FDE9E2;border-radius:50%;background:var(--primary);color:white;font-size:18px;animation:none}
/* Shared footer and document layouts. */
.site-footer{margin-top:88px;background:var(--surface);border-top:1px solid var(--border);padding-block:44px 20px}.footer-top{display:flex;align-items:center;justify-content:space-between;gap:32px}.footer-top .download-options{margin:0}.footer-name{margin:0;font-size:14px;color:var(--muted)}.footer-links{display:flex;flex-wrap:wrap;gap:10px 28px;padding-block:26px;margin-top:26px;border-top:1px solid var(--border)}.footer-links a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;font-size:12px;color:var(--muted)}.footer-links a:hover{color:var(--primary);transform:translateY(-2px)}.footer-bottom{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--border);padding-top:12px;color:var(--muted);font-size:11px}.footer-bottom p{margin:0}.footer-bottom a{display:flex;align-items:center;gap:12px;min-height:44px}.footer-bottom a:hover{transform:translateY(-2px)}.legal-main{max-width:824px;margin:auto;padding:64px 32px 0;overflow-wrap:anywhere}.legal-title{font-size:clamp(30px,4vw,45px);margin-bottom:38px;line-height:1.35}.legal-document,.legal-content{font-size:16px;line-height:1.9}.legal-document h2,.legal-content h2{font-size:26px;margin-top:40px;letter-spacing:-.03em}.legal-document h3,.legal-content h3{font-size:21px;margin-top:28px;line-height:1.4;letter-spacing:-.02em}.legal-document a,.legal-content a{display:inline-flex;align-items:center;min-height:44px;max-width:100%;color:var(--primary);text-decoration:underline;text-underline-offset:3px}.legal-content li,.legal-document li{margin-bottom:10px}.legal-content hr,.legal-document hr{border:0;border-top:1px solid var(--border);margin:36px 0}.legal-content ul,.legal-content ol,.legal-document ul,.legal-document ol{padding-left:24px}.legal-content p,.legal-document p{margin-bottom:20px}.utility-main{max-width:1040px;margin:auto;padding:64px 32px 0}.utility-card{background:var(--surface);border:1px solid var(--border);border-radius:26px;padding:48px;transition:transform .25s var(--ease)}.utility-card:hover{transform:translateY(-3px)}.utility-icon{width:60px;height:60px;background:var(--secondary);color:var(--primary);display:grid;place-items:center;border-radius:18px;margin-bottom:24px}.utility-icon svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.5}.utility-copy h1{font-size:40px;margin:16px 0 24px}.utility-copy h2{font-size:23px;margin:32px 0 16px}.utility-copy p,.utility-copy li,.utility-note{color:var(--muted);font-size:15px;line-height:1.9}.utility-copy li{margin-bottom:10px}.utility-note{margin-top:24px}.utility-card .primary-cta{font-size:14px;margin-top:12px}kbd{padding:3px 7px;border:1px solid var(--border);border-radius:6px;background:var(--background);font:inherit}
/* Entrance, scroll and ambient motion use transform/opacity only. */
@keyframes fade-up{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes ink-reveal{0%{opacity:0;transform:translateY(-10px) scale(.92)}60%{opacity:.7}100%{opacity:1;transform:translateY(0) scale(1)}}@keyframes brush-sweep{0%{transform:translateY(0);opacity:0}20%{opacity:1}100%{transform:translateY(110px);opacity:0}}@keyframes audio-bounce{from{transform:scaleY(.45)}to{transform:scaleY(1)}}@keyframes check-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}@keyframes spark-pulse{0%,100%{transform:scale(.9) rotate(0);opacity:.7}50%{transform:scale(1.1) rotate(12deg);opacity:1}}
.motion-ready .hero-eyebrow,.motion-ready .hero h1,.motion-ready .hero-description,.motion-ready .hero-copy>.primary-cta,.motion-ready .hero-copy>.download-options{animation:hero-enter .8s var(--ease) both}.motion-ready .hero h1{animation-delay:.08s}.motion-ready .hero-description{animation-delay:.16s}.motion-ready .hero-copy>.primary-cta{animation-delay:.24s}.motion-ready .hero-copy>.download-options{animation-delay:.32s}.motion-ready .hero-mascot{animation:fade-up 1s .15s var(--ease) both}.motion-ready .word-card-wrap{animation:fade-up 1s .4s var(--ease) both}.motion-ready .visual-spark{animation:spark-pulse 4s ease-in-out infinite}.spark-two{animation-delay:-2s}.reveal{opacity:1;transform:none}.has-reveal .reveal{transition:transform .75s var(--ease),opacity .75s var(--ease)}.has-reveal .reveal:not(.is-visible){opacity:0;transform:translateY(24px)}.feature-listening{transition-delay:.08s}.feature-tests{transition-delay:.14s}.motion-paused *,.motion-paused *::before,.motion-paused *::after{animation-play-state:paused!important}.motion-paused [data-parallax]{transform:none!important}.motion-paused .hero-eyebrow,.motion-paused .hero h1,.motion-paused .hero-description,.motion-paused .hero-copy>.primary-cta,.motion-paused .hero-copy>.download-options,.motion-paused .hero-mascot,.motion-paused .word-card-wrap{animation:none!important}.motion-paused .reveal{opacity:1!important;transform:none!important;transition:none!important}
@media(min-width:1400px){.hero-inner{min-height:700px}.hero-glow{right:-150px}.hero h1{font-size:64px}}
@media(max-width:1100px){.hero-inner{grid-template-columns:1.15fr 1fr;gap:0}.hero h1{font-size:49px}.hero-visual{height:490px}.hero-mascot{width:430px;right:-60px;top:0;padding:38px}.hero-mascot img{width:354px;height:354px}.orbit-front{width:420px;height:420px;right:-45px;top:24px}.orbit-back{width:355px;height:355px;right:-10px;top:60px}.word-card-wrap{width:177px;bottom:0;left:0}.word-card{min-height:258px;padding-inline:15px}.chip-listen{left:20px;top:62px}.chip-speak{right:0;top:286px}.spark-one{right:12px;top:40px}.spark-two{left:55px;top:18px}.mascot-caption{right:12px;bottom:50px}.platform-badge{font-size:9px;padding:8px;gap:5px}.platform-badge svg{width:15px}.download-options{gap:6px}.lesson-illustration{left:34%;width:230px;height:250px;top:51%}.audio-wave{gap:4px}.audio-wave i{width:3px}.feature-tests .feature-copy{max-width:75%}}
@media(max-width:900px) and (min-width:701px){.hero-inner{padding-block:46px 44px;min-height:610px;grid-template-columns:1.18fr 1fr}.hero h1{font-size:41px}.hero-description{font-size:14px;line-height:1.9}.hero-visual{height:440px;margin-right:-10px}.hero-mascot{width:355px;right:-54px;top:5px;padding:32px}.hero-mascot img{width:291px;height:291px}.orbit-back{width:290px;height:290px;right:-10px;top:43px}.orbit-front{width:340px;height:340px;right:-35px;top:19px}.word-card-wrap{width:157px;bottom:0;left:0}.word-card{min-height:240px;padding-inline:13px}.word-hanzi{font-size:73px;height:103px}.word-grid{top:47px;width:97px;height:97px}.word-card .pinyin{font-size:19px}.word-meaning{font-size:11px}.word-instruction{font-size:8px}.chip-listen{left:8px;top:25px;font-size:11px;padding:8px 11px}.chip-speak{right:-7px;top:252px;font-size:11px;padding:8px 11px}.spark-one{font-size:26px;right:0;top:18px}.spark-two{left:82px;top:10px;font-size:18px}.mascot-caption{bottom:43px;right:1px;font-size:10px}.hero-copy .download-options{max-width:320px}.hero-copy .platform-badge{font-size:10px;padding:8px 11px}.hero-copy .platform-badge-extension{flex-basis:auto}.feature-grid{grid-template-columns:1.05fr 1fr}.bento-card{padding:25px}.feature-vocabulary h3{font-size:28px}.feature-tests h3{font-size:21px}.bento-card p{font-size:12px}.lesson-illustration{left:32%;width:210px;top:51%;rotate:10deg}.lesson-star{left:-64px;font-size:33px}.test-illustration{right:-30px;opacity:.8}.audio-illustration{left:25px;right:25px}.audio-wave i:nth-child(n+14){display:none}.footer-top{gap:12px}.footer-top .platform-badge{font-size:9px}}
@media(max-width:700px){.header-inner,.footer-inner{padding-inline:22px}.header-inner{min-height:76px;gap:14px}.brand img{width:151px;height:auto}.header-nav{gap:0}.nav-detail{display:none}.header-cta{padding:9px 12px;gap:12px;font-size:11px;border-radius:11px}.hero-inner{display:flex;flex-direction:column;align-items:stretch;padding:42px 22px 20px;min-height:0;gap:0}.hero-copy{padding:0;max-width:450px;width:100%;margin:auto}.hero-eyebrow{font-size:10px;margin-bottom:21px}.hero h1{font-size:clamp(34px,10.3vw,48px);line-height:1.23;letter-spacing:-.055em;margin-bottom:20px}.hero-description{font-size:14px;line-height:1.85;max-width:370px;margin-bottom:25px}.hero-copy>.primary-cta{font-size:15px;min-height:55px;gap:50px;padding:12px 23px}.download-options{margin-top:25px;gap:8px}.platform-badge{font-size:10px;padding:8px 10px;gap:7px;min-height:52px}.platform-badge svg{width:17px}.coming-soon{font-size:9px}.hero-copy .platform-badge-extension{flex-basis:auto}.hero-visual{width:100%;max-width:440px;margin:22px auto 0;height:410px}.hero-mascot{width:365px;right:-35px;top:-16px;padding:32px}.hero-mascot img{width:301px;height:301px}.orbit-back{width:294px;height:294px;right:0;top:32px}.orbit-front{width:350px;height:350px;right:-27px;top:6px}.word-card-wrap{width:163px;bottom:2px;left:3px}.word-card{min-height:243px;padding:11px 14px}.word-hanzi{font-size:77px;height:107px;margin-top:8px}.word-grid{top:45px;width:102px;height:102px}.word-card-top,.word-card-bottom{font-size:9px}.word-card .pinyin{font-size:19px}.word-meaning{font-size:11px}.word-instruction{font-size:8px;margin-top:9px;white-space:nowrap}.chip-listen{left:4px;top:22px;font-size:11px;padding:9px 12px}.chip-speak{right:-2px;top:255px;font-size:11px;padding:9px 12px}.spark-one{font-size:30px;right:3px;top:10px}.spark-two{left:86px;top:6px;font-size:19px}.mascot-caption{right:3px;bottom:36px;font-size:10px}.caption-line{width:20px}.hero-glow{width:750px;height:950px;right:-300px;top:100px}.motion-toggle{font-size:10px}.section{padding:55px 22px 0}.section-heading{margin-bottom:23px;align-items:flex-start}.section-heading h2{font-size:28px;line-height:1.3}.section-heading .eyebrow{font-size:10px;margin-bottom:8px}.section-index{font-size:9px;padding-top:26px;white-space:nowrap}.feature-grid{grid-template-columns:1fr;grid-template-rows:auto;gap:15px}.bento-card{padding:26px;border-radius:23px;min-height:240px}.feature-vocabulary{grid-row:auto;min-height:480px}.feature-vocabulary h3{font-size:28px}.feature-number{margin-bottom:16px}.bento-card h3{font-size:24px}.bento-card p{font-size:12px;max-width:285px}.lesson-illustration{width:208px;height:230px;left:37%;top:48%;rotate:9deg}.lesson-star{left:-66px;top:55px;font-size:38px}.feature-vocabulary .text-link{left:26px;bottom:19px}.feature-listening .feature-copy{max-width:100%}.audio-illustration{left:26px;right:26px}.audio-wave{gap:4px}.audio-wave i{width:3px}.feature-tests .feature-copy{max-width:72%}.feature-tests h3{font-size:23px}.feature-tests p{max-width:200px}.test-illustration{width:112px;height:148px;right:0}.test-check{right:0}.site-footer{margin-top:55px;padding-top:30px}.footer-top{align-items:flex-start;flex-direction:column;gap:25px}.footer-links{gap:4px 20px;margin-top:25px;padding:15px 0}.footer-links a{font-size:11px;min-height:44px}.footer-bottom{font-size:10px}.footer-top .download-options{gap:8px}.legal-main{padding:40px 22px 0}.legal-title{font-size:29px;line-height:1.4}.legal-content,.legal-document{font-size:16px}.legal-content h2,.legal-document h2{font-size:24px}.legal-content h3,.legal-document h3{font-size:20px}.utility-main{padding:36px 22px 0}.utility-card{padding:25px;border-radius:23px}.utility-copy h1{font-size:29px}.utility-copy h2{font-size:22px}.utility-copy p,.utility-copy li,.utility-note{font-size:14px}.utility-card .primary-cta{font-size:12px;padding-inline:15px;gap:14px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.reveal,.has-reveal .reveal:not(.is-visible){opacity:1;transform:none}[data-parallax]{transform:none!important}}



/* Availability remains readable at every breakpoint. */
.platform-badge,.hero-copy .platform-badge,.footer-top .platform-badge{font-size:11px}.coming-soon{font-size:10px}

/* Keep card text centered in stable boxes while data loads or rotates. */
.word-card .pinyin{min-height:1.3em;width:100%;text-align:center}
.word-meaning{width:100%}

/* Reserve the control's final space while deferred JavaScript enables it. */
.motion-toggle[hidden]{display:flex!important;visibility:hidden}

.bento-card:focus-within{transform:translateY(-4px)}
.footer-bottom a:hover span,.text-link:hover span{transform:translate(3px,-2px)}
.footer-bottom a span,.text-link span{transition:transform .25s var(--ease)}
.platform-badge-disabled:hover{transform:translateY(-2px)}
.motion-paused a,.motion-paused button,.motion-paused .bento-card,.motion-paused .layer-front{transition:none!important}

/* Keep copy and artwork separate on tablets; place the mobile card below the face. */
@media(max-width:900px) and (min-width:701px){.hero-inner{column-gap:28px;grid-template-columns:1.08fr 1fr}.hero-copy{min-width:0}.hero-description{max-width:100%}}
@media(max-width:700px){.hero-visual{height:480px}.mascot-caption{bottom:106px}}

/* Content stays painted while the opening sequence gently moves into place. */
@keyframes hero-enter{from{transform:translateY(16px)}to{transform:translateY(0)}}
.motion-ready .audio-wave i{animation:audio-bounce 1.3s ease-in-out infinite alternate;animation-delay:calc(var(--bar,0)*-.1s)}
.motion-ready .test-check{animation:check-float 3.5s ease-in-out infinite}
.motion-paused .audio-wave i,.motion-paused .test-check{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.bento-card:hover,.bento-card:focus-within{transform:none}}

/* Variant B c1a50e7 map. All dependencies are local to this section. */
#lo-trinh{--primary:#C42B1C;--primary-hover:#A92216;--primary-lip:#85190F;--gradient:linear-gradient(135deg,#CC1F1A,#FF6B3D);--background:#F7F5F4;--surface:#FFF;--surface-soft:#F0EDEC;--border:#E6E1DF;--ink:#1F1D24;--muted:#5C5862;--secondary:#FDE9E2;--gold:#F4C451;--radius:26px;--display:'B Map Baloo 2','B Map Nunito',system-ui,sans-serif;--body:'B Map Nunito',system-ui,-apple-system,'Segoe UI',sans-serif;font-family:var(--body);font-size:17px;line-height:1.6;color:var(--ink);-webkit-font-smoothing:auto}
#lo-trinh h3,#lo-trinh p{margin:0}
#lo-trinh h3{font-family:var(--display);font-weight:800;line-height:1.15;letter-spacing:normal}
#lo-trinh a{touch-action:manipulation}
#lo-trinh a:focus-visible{outline:3px solid var(--primary-lip);outline-offset:6px;border-radius:10px}
#lo-trinh .b-map-shell{width:min(1160px,calc(100% - 80px));margin-inline:auto}
#lo-trinh .b-map-button{display:inline-flex;align-items:center;justify-content:center;gap:28px;min-height:52px;padding:12px 24px;border-radius:16px;font-size:16px;font-weight:900;line-height:1.25;border:2px solid transparent;transition:transform .18s;position:relative;isolation:isolate}
#lo-trinh .b-map-button::after{content:'';position:absolute;z-index:-2;inset:-2px;border-radius:inherit;transform:translateY(6px);background:var(--primary-lip)}
#lo-trinh .b-map-primary{border-color:var(--primary);color:#fff}
#lo-trinh .b-map-primary::before{content:'';position:absolute;inset:-2px;z-index:-1;border-radius:inherit;background:var(--primary)}
#lo-trinh .b-map-primary:hover{transform:translateY(-3px);color:white}
#lo-trinh .b-map-primary:hover::before{background:var(--primary-hover)}
#lo-trinh .b-map-primary:active{transform:translateY(5px)}
#lo-trinh .b-map-primary:active::after{transform:translateY(1px)}
#lo-trinh .b-map-button>span[aria-hidden]{font-size:22px;line-height:1}
#lo-trinh .b-map-mascot-space{padding:12%;box-sizing:content-box}
#lo-trinh.map-section{position:relative;padding:72px 0 36px;isolation:isolate;overflow:clip;background-image:radial-gradient(#D8D0CC 1px,transparent 1px);background-size:26px 26px}
#lo-trinh .roadmap-heading-shell{padding-top:0;font-family:'Be Vietnam Pro',system-ui,sans-serif;line-height:1.65;-webkit-font-smoothing:antialiased}
#lo-trinh .b-map-heading{text-align:left;position:relative;z-index:3}
#lo-trinh .map-legend{display:flex;justify-content:flex-start;gap:24px;margin-top:20px;color:var(--muted);font-size:12px;font-weight:800}
#lo-trinh .map-legend>span{display:inline-flex;align-items:center;gap:7px}
#lo-trinh .map-legend i{display:block;width:8px;height:8px;border-radius:50%;background:#A69D99}
#lo-trinh .map-legend .legend-open{background:var(--primary)}
#lo-trinh .learning-map{height:1300px;max-width:1000px;position:relative;margin-top:18px}
#lo-trinh .route-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
#lo-trinh .route-svg path{fill:none;stroke-linecap:round}
#lo-trinh .route-shadow{stroke:#E3D9D2;stroke-width:40;transform:translateY(6px)}
#lo-trinh #route-path{stroke:#F4C451;stroke-width:36}
#lo-trinh .route-dashes{stroke:#FFF6D8;stroke-width:3;stroke-dasharray:9 13}
#lo-trinh .route-mascot{position:absolute;left:0;top:0;z-index:5;pointer-events:none;will-change:transform}
#lo-trinh .route-mascot.b-map-mascot-space{padding:14px;margin-left:-70px;margin-top:-102px}
#lo-trinh .route-mascot img{width:112px;height:112px}
#lo-trinh .map-stop{position:absolute;z-index:4;padding:28px 30px;width:420px;border-radius:var(--radius);background:var(--surface);border:2px solid var(--border);box-shadow:0 7px 0 var(--border);transition:transform .25s}
#lo-trinh .map-stop:hover{transform:translateY(-6px) rotate(-1deg)}
#lo-trinh .stop-one{top:165px;left:42%;border-color:#D9ADA0;box-shadow:0 7px 0 #E3C6B9}
#lo-trinh .stop-two{top:536px;left:9%;width:365px;background:#FBFAF9}
#lo-trinh .stop-three{top:930px;left:45%;width:365px;background:#FBFAF9}
#lo-trinh .stop-topline{display:flex;align-items:center;justify-content:space-between;gap:12px}
#lo-trinh .stage-label{color:var(--muted);font-size:11px;font-weight:900;letter-spacing:1.5px}
#lo-trinh .status{font-size:11px;font-weight:900;background:var(--surface-soft);color:var(--muted);padding:4px 10px;border-radius:8px;white-space:nowrap}
#lo-trinh .status-open{display:flex;align-items:center;gap:6px;background:var(--secondary);color:var(--primary-lip)}
#lo-trinh .status-open i{width:6px;height:6px;border-radius:50%;background:var(--primary)}
.motion-ready #lo-trinh .status-open i{animation:b-map-status-pulse 2s infinite}
#lo-trinh .map-stop h3{font-size:46px;margin:22px 0 8px;letter-spacing:-.8px}
#lo-trinh .map-stop p{font-size:15px;color:var(--muted);max-width:300px}
#lo-trinh .skill-tags{display:flex;flex-wrap:wrap;gap:6px;margin:18px 0 24px}
#lo-trinh .skill-tags>span{padding:4px 10px;font-size:11px;color:var(--muted);font-weight:800;border:1px solid var(--border);border-radius:8px;background:var(--background)}
#lo-trinh .map-stop .b-map-button{width:100%;justify-content:space-between}
#lo-trinh .stop-sticker{position:absolute;top:-28px;left:-27px;width:62px;height:62px;display:grid;place-items:center;background:var(--gold);border:4px solid var(--surface);border-radius:18px;color:#69440E;font-size:35px;transform:rotate(-15deg)}
#lo-trinh .locked-note{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12px;font-weight:800;margin-top:24px}
#lo-trinh .locked-note svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.7;fill:none}
#lo-trinh .map-node{position:absolute;z-index:3;width:114px;height:114px;display:grid;place-items:center;transform:translate(-50%,-50%)}
#lo-trinh .map-node>span{display:grid;place-items:center;position:relative;z-index:2;width:86px;height:86px;background:var(--surface-soft);border:5px solid var(--surface);border-radius:30px;box-shadow:0 7px 0 #C3B9B1;color:var(--muted);font-family:var(--display);font-size:39px;font-weight:800;transform:rotate(-8deg);transition:transform .3s}
#lo-trinh .map-node:hover>span{transform:rotate(7deg) translateY(-4px)}
#lo-trinh .map-node svg{position:absolute;width:100px;height:32px;bottom:-6px;fill:#D5CDC780}
#lo-trinh .node-one{left:21%;top:24.615%}
#lo-trinh .node-one>span{background:var(--gradient);box-shadow:0 7px 0 var(--primary-lip);color:white}
#lo-trinh .node-two{left:79%;top:49.23%}
#lo-trinh .node-three{left:25%;top:73.845%}
#lo-trinh .route-finish{position:absolute;left:52%;top:96%;transform:translate(-50%,-50%);border:3px solid #E4D8BF;border-radius:50%;background:var(--background);width:50px;height:50px;display:grid;place-items:center;color:#8D6A28;font-size:26px}
#lo-trinh .map-decoration{position:absolute;z-index:-1;pointer-events:none}
#lo-trinh .map-cloud{top:430px;left:-95px;width:250px;fill:white}
#lo-trinh .map-mountain{right:-40px;top:800px;width:210px}
#lo-trinh .map-star{position:absolute;color:var(--gold);font-size:55px}
.motion-ready #lo-trinh .map-star{animation:b-map-star-turn 8s ease-in-out infinite}
#lo-trinh .map-star-one{top:680px;left:30%}
#lo-trinh .map-star-two{right:4%;top:1110px;color:#C4B8AE;font-size:30px}
#lo-trinh .map-position{display:flex;align-items:center;gap:20px;max-width:800px;color:var(--muted);font-size:10px;font-weight:900;letter-spacing:1px}
#lo-trinh .map-progress{height:6px;background:var(--border);border-radius:6px;overflow:hidden;flex:1}
#lo-trinh .map-progress i{display:block;width:100%;height:100%;background:var(--primary);transform:scaleX(0);transform-origin:left;will-change:transform}
#lo-trinh.b-map-reveal-ready .b-map-reveal{opacity:0;transform:translateY(24px);transition:opacity .65s,transform .65s}
#lo-trinh.b-map-reveal-ready .b-map-reveal.is-visible{opacity:1;transform:none}
#lo-trinh.b-map-reveal-ready .map-node.b-map-reveal{transform:translate(-50%,calc(-50% + 24px))}
#lo-trinh.b-map-reveal-ready .map-node.is-visible{transform:translate(-50%,-50%)}
@keyframes b-map-star-turn{0%,100%{transform:rotate(-10deg) scale(1)}50%{transform:rotate(20deg) scale(.85)}}
@keyframes b-map-status-pulse{50%{opacity:.4}}
.motion-paused #lo-trinh .b-map-reveal{opacity:1!important;transition:none!important}
@media(max-width:1050px){#lo-trinh .b-map-shell{width:calc(100% - 56px)}
#lo-trinh .learning-map{height:1260px}
#lo-trinh .map-stop{width:360px;padding:24px}
#lo-trinh .stop-two{left:5%;width:330px}
#lo-trinh .stop-three{left:49%;width:330px}
#lo-trinh .stop-one{left:41%}
}
@media(max-width:760px){#lo-trinh .b-map-shell{width:calc(100% - 40px)}
#lo-trinh.map-section{padding-top:48px;background-size:24px 24px}
#lo-trinh .map-legend{font-size:11px;margin-top:16px}
#lo-trinh .learning-map{height:1150px;margin-top:28px}
#lo-trinh .route-svg{width:44%;left:-6%;height:100%;opacity:.8}
#lo-trinh .route-mascot.b-map-mascot-space{padding:10px;margin-left:-54px;margin-top:-76px}
#lo-trinh .route-mascot img{width:88px;height:88px}
#lo-trinh .map-stop{width:calc(100% - 72px);left:72px;padding:22px 20px;border-radius:22px}
#lo-trinh .stop-one{top:110px}
#lo-trinh .stop-two{top:495px}
#lo-trinh .stop-three{top:835px}
#lo-trinh .map-stop h3{font-size:36px;margin-top:18px}
#lo-trinh .map-stop p{font-size:14px}
#lo-trinh .stage-label{font-size:9px;letter-spacing:1px}
#lo-trinh .status{font-size:10px;padding:4px 7px}
#lo-trinh .stop-topline{gap:6px}
#lo-trinh .skill-tags{gap:5px;margin:15px 0 20px}
#lo-trinh .skill-tags>span{font-size:10px;padding:3px 7px}
#lo-trinh .map-stop .b-map-button{font-size:14px;min-height:48px;padding:12px 15px}
#lo-trinh .stop-sticker{width:42px;height:42px;font-size:24px;border-radius:12px;left:-21px;top:-23px;border-width:3px}
#lo-trinh .map-node{width:56px;height:66px;left:28px}
#lo-trinh .map-node>span{width:52px;height:52px;border-radius:18px;border-width:3px;font-size:26px}
#lo-trinh .map-node svg{width:58px;height:24px;bottom:0}
#lo-trinh .node-one{top:24.615%}
#lo-trinh .node-two{top:49.23%}
#lo-trinh .node-three{top:73.845%}
#lo-trinh .route-finish{left:17%;top:96%;width:38px;height:38px;font-size:20px}
#lo-trinh .map-cloud{width:140px;left:-90px;top:390px}
#lo-trinh .map-mountain{top:770px;right:-40px;width:120px}
#lo-trinh .map-star-one{left:20px;top:410px;font-size:30px}
#lo-trinh .map-star-two{right:12px;top:1115px;font-size:22px}
#lo-trinh .map-position{gap:10px;font-size:8px;letter-spacing:.5px}
#lo-trinh .map-position>span:first-child{max-width:85px}
#lo-trinh .map-progress{height:5px}
}
@media(prefers-reduced-motion:reduce){#lo-trinh.b-map-reveal-ready .b-map-reveal{opacity:1;transform:none}
#lo-trinh.b-map-reveal-ready .map-node.b-map-reveal{transform:translate(-50%,-50%)}
#lo-trinh .b-map-button:hover,#lo-trinh .map-stop:hover{transform:none}
}
@media(prefers-reduced-motion:reduce){#lo-trinh *,#lo-trinh *::before,#lo-trinh *::after{animation:none!important;transition:none!important}}