:root{color-scheme:light;--ink:#172a48;--blue:#3368e8;--muted:#6b7789;--line:#e4e9ef;--paper:#f8fafc;--yellow:#f3d367}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:#fff;color:var(--ink);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;line-height:1.7;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}img{max-width:100%;height:auto;display:block}svg{display:block;width:24px;height:24px}h1,h2,h3,p{margin-top:0}h1,h2,h3{line-height:1.17;letter-spacing:-.045em}h2{font-size:clamp(31px,3.3vw,46px);font-weight:700;margin-bottom:22px}h2 em{font-style:normal;color:var(--blue)}button,a{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #6798ff;outline-offset:5px}a,button{transition:color .2s,background .2s,transform .2s}.container{width:min(1200px,100%);padding:0 32px;margin:auto}.section{padding:100px 0}.eyebrow{display:block;font-size:10px;font-weight:700;letter-spacing:1.5px;color:var(--blue);line-height:1.8;margin-bottom:19px}.muted{color:var(--muted);font-size:14px}.skip{position:fixed;top:-100px;left:16px;z-index:100;background:white;border:2px solid var(--blue);padding:10px 20px;border-radius:10px}.skip:focus{top:15px}header{position:sticky;top:0;z-index:20;background:#fffffff0;backdrop-filter:blur(16px);border-bottom:1px solid #eaf0f5}.navbar{height:82px;display:flex;align-items:center;justify-content:space-between;gap:25px}.brand{display:inline-flex;align-items:center;gap:9px;flex-shrink:0;line-height:1.15;font-weight:750;font-size:21px;letter-spacing:-.6px}.brand-sub{display:block;font-size:10px;font-weight:600;letter-spacing:2.6px;text-transform:uppercase;margin-top:3px}.brand-mark{display:block;overflow:hidden;width:40px;height:40px;flex:none}.brand-mark img{width:222px;height:40px;max-width:none}#navigation{display:flex;align-items:center;gap:27px}#navigation a{font-size:12px;font-weight:550;color:#53627a}#navigation a:hover{color:var(--blue)}#navigation .nav-download{padding:11px 18px;border-radius:8px;background:var(--ink);color:white}.nav-download span{margin-left:18px}.menu{display:none;border:1px solid var(--line);background:white;border-radius:8px;padding:7px 12px;color:var(--ink);font-size:13px}
.hero{padding:65px 0 62px;background:#f9fbfd;overflow:hidden}.hero-grid{display:grid;grid-template-columns:1.07fr 1fr;align-items:center;gap:25px}.hero-copy{position:relative;z-index:2}.hero .eyebrow{font-size:9px;color:#536685;letter-spacing:1.1px;display:flex;align-items:center;gap:9px;margin-bottom:24px}.little-star{color:#cfac38;font-size:19px}.hero h1{font-size:clamp(52px,5.5vw,77px);letter-spacing:-3.7px;line-height:1.06;margin:0 0 25px;font-weight:750}.hero h1 em{color:var(--blue);font-style:normal;position:relative;display:inline-block}.hero h1 em::after{content:"";position:absolute;bottom:-7px;left:1px;right:-6px;height:8px;background:var(--yellow);border-radius:50%;transform:rotate(-2deg);z-index:-1}.hero-description{max-width:430px;color:var(--muted);font-size:16px;line-height:1.85;margin-bottom:28px}.store-links{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.store{display:inline-flex;align-items:center;gap:10px;padding:11px 17px;background:var(--ink);color:white;border-radius:10px;line-height:1.15;border:1px solid var(--ink)}.store svg{width:22px;height:24px;flex-shrink:0}.store small{display:block;font-size:8px;letter-spacing:.1px;color:#c9d2e4;line-height:1.5;margin-bottom:2px}.store b{font-size:16px;font-weight:600;letter-spacing:-.3px}.store:hover{background:#2856b7;border-color:#2856b7;transform:translateY(-2px)}.hero-more{display:inline-flex;align-items:center;gap:22px;font-size:12px;font-weight:650;margin-top:24px}.hero-more span{color:var(--blue);font-size:17px}.hero-note{display:flex;gap:8px;align-items:center;font-size:10px;color:#8390a2;margin-top:25px}.check{color:#439285;font-size:13px}.note-dot{margin:0 3px}.hero-visual{position:relative;height:620px;isolation:isolate}.blue-stage{position:absolute;inset:24px 13px 41px 18px;background:#356be9;border-radius:185px 185px 28px 28px;overflow:hidden;z-index:-1;box-shadow:inset 0 0 80px #1950b74d}.stage-character{position:absolute;top:-45px;right:-12px;font-size:280px;line-height:1.5;color:#ffffff0c;font-family:serif}.stage-grid{position:absolute;inset:0;background-image:linear-gradient(#ffffff07 1px,transparent 1px),linear-gradient(90deg,#ffffff07 1px,transparent 1px);background-size:45px 45px;opacity:.12}.phone{position:absolute;left:50%;top:18px;width:273px;height:554px;transform:translateX(-50%) rotate(6deg);overflow:hidden;border-radius:44px;background:#202327;box-shadow:10px 25px 40px #142b6760,0 0 0 1px #101724}.phone img{position:absolute;width:390px;height:auto;max-width:none;left:-61px;top:-39px}.greeting-card{position:absolute;bottom:76px;left:-22px;width:194px;padding:20px 22px;background:white;border:1px solid #e7ecf5;border-radius:14px;transform:rotate(-7deg);box-shadow:0 18px 36px #17326818}.small-label{display:block;font-size:7px;letter-spacing:1px;font-weight:650;color:#8895a9;white-space:nowrap}.greeting-card strong{display:block;font-size:47px;font-weight:500;letter-spacing:1px;margin:5px 0 7px;color:#203955;font-family:serif}.greeting-dot{color:#e2bc4c}.greeting-card>div{display:flex;justify-content:space-between;font-size:11px;color:#7286a3;gap:10px}.greeting-card>div>span:last-child{color:#335988}.hsk-badge{position:absolute;right:-7px;top:106px;background:white;display:flex;align-items:center;gap:10px;padding:13px 17px;border-radius:12px;box-shadow:0 12px 25px #203c7a14;transform:rotate(5deg)}.badge-icon{width:33px;height:33px;background:#fdf4d7;border-radius:9px;display:grid;place-items:center;font-size:24px;color:#b38a29}.hsk-badge strong{display:block;font-size:14px;letter-spacing:-.4px}.hsk-badge small{display:block;font-size:8px;color:#8593a7}.visual-note{position:absolute;bottom:10px;left:0;right:0;text-align:center;font-size:8px;letter-spacing:1px;color:#8795aa}.quick-strip{border-block:1px solid var(--line)}.quick-strip .container{display:flex;align-items:center;justify-content:space-between;gap:25px;min-height:105px}.quick-strip p{font-size:8px;letter-spacing:1px;color:#8b98aa;line-height:1.9;margin:0}.quick-strip p strong{color:#556781;font-weight:650}.quick-strip .container>span{display:flex;gap:10px;align-items:center;color:#5b6b81;font-size:12px;font-weight:550}.quick-strip svg{color:#7c91b2;width:21px;height:21px}
.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:50px;margin-bottom:42px}.section-heading h2{margin:0}.section-heading>p{max-width:325px;font-size:14px;color:var(--muted);margin:0 0 3px;line-height:1.8}.features{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.feature{padding:26px;border:1px solid #e8edf4;border-radius:18px;background:#f8fafc;transition:transform .2s,box-shadow .2s}.feature:hover{transform:translateY(-3px);box-shadow:0 12px 25px #263c6310}.feature:nth-child(1){background:#eef4ff}.feature:nth-child(2){background:#f2f8f5}.feature:nth-child(3){background:#fff9ec}.feature-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}.feature-icon{display:grid;place-items:center;background:#fff;border:1px solid #dfe7f5;color:var(--blue);width:43px;height:43px;border-radius:11px}.feature:nth-child(2) .feature-icon{color:#4a8f7a;border-color:#d8e8e1}.feature:nth-child(3) .feature-icon{color:#b69035;border-color:#ede3c8}.index{font-size:9px;color:#9ba8bc;letter-spacing:1px}.feature h3{font-size:20px;margin-bottom:11px;letter-spacing:-.6px}.feature p{font-size:12px;line-height:1.85;color:#708099;margin:0}.vocab{display:flex;align-items:center;gap:12px;padding:14px 15px;background:#fff;border:1px solid #e3eafb;border-radius:10px;margin-top:23px}.vocab>span:first-child{font-size:28px;font-family:serif}.vocab b{display:block;font-size:11px;color:#5578ae}.vocab small{display:block;font-size:9px;color:var(--muted)}.vocab .word-type{margin-left:auto;font-size:8px;background:#f2f5fb;padding:3px 7px;border-radius:4px;color:#7d8aa1}.wave{display:flex;align-items:center;gap:4px;height:53px;margin-top:26px}.wave i{display:block;width:4px;height:var(--h);background:#6aa990;border-radius:3px;flex:none}.wave span{margin-left:auto;max-width:94px;font-size:9px;line-height:1.7;color:#709485}.dictionary{display:flex;justify-content:space-between;gap:7px;padding:17px 15px;background:#fffdf8;border:1px solid #ede5d4;border-radius:9px;margin-top:26px;font-size:12px;color:#968350}.dictionary span:nth-child(2){color:#c9ad6e}.learning{background:#f8fafc;border-block:1px solid #ecf0f5}.learning-grid{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:100px}.learning-art{position:relative;min-height:490px;display:grid;place-items:center}.lesson-paper{width:320px;background:#fff;border:1px solid #e2e8f0;border-radius:15px;padding:26px 29px;box-shadow:0 20px 50px #354c7610;transform:rotate(-6deg)}.paper-top{display:flex;justify-content:space-between;font-size:8px;font-weight:650;letter-spacing:.7px;color:#99a5b6;margin-bottom:23px}.hanzi-grid{width:205px;height:205px;margin:auto;display:grid;place-items:center;border:1px solid #d5dfea;background:linear-gradient(45deg,transparent 49.7%,#e1e8f1 49.8%,#e1e8f1 50.2%,transparent 50.3%),linear-gradient(-45deg,transparent 49.7%,#e1e8f1 49.8%,#e1e8f1 50.2%,transparent 50.3%),linear-gradient(90deg,transparent 49.7%,#dae3ef 49.8%,#dae3ef 50.2%,transparent 50.3%),linear-gradient(transparent 49.7%,#dae3ef 49.8%,#dae3ef 50.2%,transparent 50.3%)}.hanzi-grid span{font-size:132px;font-family:"Kaiti SC",KaiTi,serif;line-height:1;color:#2e5593}.paper-definition{display:flex;justify-content:center;gap:17px;margin-top:17px;font-size:12px;color:#5f7190}.paper-definition>span:first-child{color:var(--blue);font-weight:650}.paper-example{border-top:1px solid var(--line);padding-top:18px;margin-top:21px;text-align:center}.paper-example p{font-size:17px;color:#304964;margin-bottom:3px}.paper-example>span{font-size:10px;color:#8692a3}.note-sticker{position:absolute;bottom:4px;right:-5px;background:#f4da80;color:#706035;padding:17px 32px 17px 22px;border-radius:3px;font-size:11px;line-height:1.8;transform:rotate(5deg);box-shadow:0 10px 20px #9172270d}.note-sticker b{font-weight:650}.note-sticker>span{position:absolute;right:12px;top:9px;font-size:18px;color:#a0863b}.learning-copy>p{font-size:14px;color:var(--muted);line-height:1.9}.steps{list-style:none;padding:0;margin:27px 0}.steps li{display:flex;gap:15px;align-items:flex-start;margin:22px 0}.steps li>span{font-size:9px;background:#eaf0fb;border:1px solid #dce5f5;color:#6585b9;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;flex:none}.steps h3{font-size:15px;letter-spacing:-.25px;margin:3px 0 7px}.steps p{font-size:11px;line-height:1.7;color:#8190a6;margin:0}.text-link{font-size:12px;font-weight:650;color:var(--blue);display:inline-flex;align-items:center;gap:15px}.text-link:hover{color:#123776}.text-link>span{font-size:18px}
.vip-section{padding-bottom:0}.vip-panel{background:#162b4d;border-radius:24px;padding:55px 60px;display:grid;grid-template-columns:1fr 1fr;gap:80px;color:white;position:relative;overflow:hidden}.vip-copy .eyebrow{color:#b9ceef;font-size:10px;letter-spacing:2px}.vip-copy .eyebrow>span{color:var(--yellow);margin-left:7px}.vip-copy h2{font-size:47px;line-height:1.1}.vip-copy h2 em{color:#f0d779}.vip-copy>p{color:#9eb2d0;font-size:13px;max-width:330px;line-height:1.9}.benefits{list-style:none;padding:0;margin:25px 0 0}.benefits li{font-size:11px;color:#c7d5e9;line-height:1.8;margin:12px 0;position:relative;padding-left:22px}.benefits li::before{content:"✓";position:absolute;left:0;color:#efd375}.vip-order{align-self:center;background:#fff;border-radius:18px;padding:29px;color:var(--ink)}.offer{font-size:8px;letter-spacing:1.2px;color:#8993a5;font-weight:700}.vip-order h3{font-size:30px;letter-spacing:-1.3px;margin:12px 0}.vip-order h3>span{color:var(--blue)}.vip-order>p{font-size:11px;color:#7b879b;line-height:1.85;margin-bottom:20px}.payment-buttons{display:grid;gap:10px}.payment-buttons button{display:flex;align-items:center;gap:13px;text-align:left;padding:13px;background:#f8fafc;border:1px solid #e5eaf2;border-radius:10px;color:var(--ink)}.payment-buttons button:hover{background:#ecf2ff;border-color:#aec7fb}.payment-symbol{width:34px;height:34px;display:grid;place-items:center;border-radius:8px;font-weight:750;font-size:19px;flex:none}.bank{background:#e1f0e8;color:#247649}.momo{background:#f8e4ef;color:#b42c77}.payment-buttons b{display:block;font-size:12px}.payment-buttons small{font-size:9px;color:#8793a7;display:block}.payment-buttons button>span:last-child{margin-left:auto;font-size:20px;color:#8c9bb2}.vip-order>.payment-note{font-size:10px;margin:17px 0 18px}.contact-mini{display:flex;justify-content:space-between;gap:15px;border-top:1px solid var(--line);padding-top:17px;font-size:11px;font-weight:550;color:#5378b6}.support-hours{display:block;font-size:9px;color:#9aa6b8;margin-top:12px}.faq-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:100px}.faq-grid h2{margin-bottom:20px}.faq-grid .text-link{margin-top:8px}.faqs details{border-bottom:1px solid var(--line);padding:21px 0}.faqs details:first-child{padding-top:0}.faqs summary{cursor:pointer;list-style:none;font-size:14px;font-weight:650;display:flex;align-items:center;justify-content:space-between;gap:25px;line-height:1.6}.faqs summary::-webkit-details-marker{display:none}.faqs summary::after{content:"+";font-size:23px;line-height:1;font-weight:400;color:#8c9bb1}.faqs details[open] summary::after{content:"−"}.faqs p{font-size:12px;color:#7a879a;line-height:1.9;margin:14px 25px 0 0}.download-section{padding:0 0 85px}.download-box{text-align:center;border:1px solid #e2eaf8;background:#eff4fc;border-radius:24px;padding:60px 25px;position:relative;overflow:hidden;isolation:isolate}.download-box .eyebrow{font-size:9px;margin-bottom:17px}.download-box h2{font-size:43px;line-height:1.2}.download-box>p{font-size:13px;color:#7b8a9f;margin-bottom:25px}.download-box .store-links{justify-content:center}.download-character{position:absolute;bottom:-70px;left:50%;transform:translateX(-50%);font-family:serif;font-size:300px;line-height:1.2;letter-spacing:20px;color:#285db606;z-index:-1;white-space:nowrap}footer{border-top:1px solid var(--line);padding:35px 0 25px}.footer-top{display:flex;align-items:center;justify-content:space-between;gap:25px;padding-bottom:28px}.footer-top>p{font-size:11px;color:#929db0;margin:0}.footer-top .text-link{font-size:11px}.footer-bottom{border-top:1px solid var(--line);padding-top:20px;display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:10px;color:#8b97aa}.footer-bottom nav{display:flex;flex-wrap:wrap;gap:23px}.footer-bottom a:hover{color:var(--blue)}dialog{max-width:min(430px,calc(100% - 32px));max-height:calc(100svh - 40px);border:0;border-radius:20px;padding:35px;box-shadow:0 25px 80px #152b4840;text-align:center;color:var(--ink);overflow:auto}dialog::backdrop{background:#10203bd1;backdrop-filter:blur(4px)}dialog h2{font-size:24px;margin:12px 0 20px}dialog .eyebrow{margin:0;font-size:9px}dialog p{font-size:12px;color:var(--muted);line-height:1.8;margin:20px 0}#payment-qr{max-width:100%;width:280px;height:auto;margin:auto;object-fit:contain}.dialog-close{position:absolute;top:8px;right:10px;width:35px;height:35px;border:0;border-radius:50%;background:#f2f5fa;color:#6e7d94;font-size:25px;line-height:1}.primary-button{display:inline-flex;justify-content:center;align-items:center;gap:20px;background:var(--blue);color:white;padding:11px 20px;border-radius:9px;font-size:12px;font-weight:600}
@media(max-width:1050px){#navigation{gap:19px}.hero h1{font-size:65px}.hero-visual{height:580px}.phone{top:9px;transform:translateX(-50%) rotate(5deg) scale(.91);transform-origin:top center}.blue-stage{inset:28px 0 35px 8px}.greeting-card{left:-8px;bottom:70px;width:176px;padding:16px}.hsk-badge{right:-5px;top:110px;padding:10px 12px}.learning-grid,.faq-grid{gap:60px}.vip-panel{padding:45px;gap:45px}.quick-strip .container{gap:16px}.quick-strip .container>span{font-size:11px}.feature{padding:22px}.feature h3{font-size:18px}.hero-description{font-size:15px}.wave{gap:3px}.wave span{font-size:8px;max-width:70px}.hero-note{font-size:9px}}
@media(max-width:850px){.container{padding:0 25px}.navbar{height:72px}.menu{display:block}#navigation{position:absolute;top:72px;left:0;right:0;background:white;border-bottom:1px solid var(--line);box-shadow:0 15px 25px #152b480d;display:none;flex-direction:column;align-items:stretch;padding:16px 25px;gap:4px}#navigation.is-open{display:flex}#navigation a{padding:10px;font-size:14px}#navigation .nav-download{text-align:center;margin-top:8px}.hero{padding:55px 0}.hero h1{font-size:56px;letter-spacing:-2.8px}.hero-grid{gap:10px}.hero-visual{height:510px}.phone{transform:translateX(-50%) rotate(5deg) scale(.79);top:20px}.blue-stage{border-radius:140px 140px 22px 22px}.greeting-card{width:152px;padding:14px;bottom:73px;left:-5px}.greeting-card strong{font-size:36px}.greeting-card .small-label{font-size:6px;letter-spacing:.7px}.greeting-card>div{font-size:9px;gap:5px}.hsk-badge{top:85px;padding:9px;gap:8px}.hsk-badge strong{font-size:11px}.hsk-badge small{font-size:7px}.badge-icon{width:27px;height:27px;font-size:19px}.visual-note{font-size:6px;letter-spacing:.7px}.hero .eyebrow{font-size:7px;letter-spacing:.7px;gap:5px}.hero-description{font-size:13px}.store{padding:10px 12px;gap:8px}.store b{font-size:13px}.store svg{width:20px}.store small{font-size:7px}.store-links{gap:8px}.hero-note{gap:5px;font-size:8px}.hero-more{font-size:11px}.quick-strip .container{flex-wrap:wrap;justify-content:center;padding-top:23px;padding-bottom:23px;gap:17px 26px}.quick-strip p{width:100%;text-align:center}.quick-strip p br{display:none}.quick-strip p strong{margin-left:7px}.section{padding:75px 0}.section-heading{gap:25px}.section-heading>p{max-width:270px;font-size:12px}.features{grid-template-columns:repeat(2,1fr)}.feature h3{font-size:19px}.wave span{font-size:9px;max-width:100px}.learning-grid{gap:35px}.lesson-paper{width:270px;padding:22px}.hanzi-grid{width:185px;height:185px}.learning-art{min-height:445px}.note-sticker{font-size:9px;padding:14px 24px 14px 17px;right:-8px}.learning-copy>p{font-size:12px}.learning-copy .eyebrow{font-size:8px}.steps h3{font-size:13px}.steps p{font-size:10px}.steps{margin:22px 0}.vip-section{padding-bottom:0}.vip-panel{padding:35px 30px;gap:30px}.vip-order{padding:24px}.vip-copy h2{font-size:37px}.vip-copy>p{font-size:12px}.benefits li{font-size:10px}.vip-order h3{font-size:27px}.contact-mini{font-size:10px;gap:9px}.faq-grid{gap:40px}.faqs summary{font-size:13px}.download-section{padding-bottom:65px}.download-box h2{font-size:37px}.footer-top{gap:20px}.footer-top>p{display:none}}
@media(max-width:600px){.container{padding:0 22px}.navbar{height:68px}#navigation{top:68px}.brand{font-size:20px}.hero{padding:35px 0 30px}.hero-grid{grid-template-columns:1fr;gap:25px}.hero-copy{text-align:center}.hero .eyebrow{justify-content:center;font-size:8px;letter-spacing:.9px;margin-bottom:19px}.hero h1{font-size:58px;letter-spacing:-3px;line-height:1.05;margin-bottom:25px}.hero-description{max-width:350px;margin:0 auto 25px;font-size:14px;line-height:1.8}.store-links{justify-content:center;gap:10px}.store{padding:11px 15px;gap:9px}.store b{font-size:15px}.store small{font-size:8px}.hero-more{font-size:11px;margin-top:20px;gap:17px}.hero-note{justify-content:center;font-size:9px;margin-top:17px}.hero-visual{height:540px;max-width:360px;width:100%;margin:auto}.phone{transform:translateX(-50%) rotate(5deg) scale(.83);top:20px}.blue-stage{inset:33px 3px 40px 9px;border-radius:155px 155px 23px 23px}.greeting-card{bottom:65px;left:-1px;width:159px;padding:16px}.greeting-card strong{font-size:39px}.greeting-card>div{font-size:10px}.hsk-badge{top:94px;right:0;padding:11px;gap:9px}.hsk-badge strong{font-size:12px}.hsk-badge small{font-size:7px}.visual-note{font-size:7px;bottom:8px}.quick-strip .container{gap:16px 20px}.quick-strip .container>span{width:43%;font-size:10px;gap:9px}.quick-strip svg{width:19px;height:19px}.quick-strip p{font-size:7px;letter-spacing:.75px}.section{padding:60px 0}.eyebrow{font-size:8px;letter-spacing:1.1px;margin-bottom:15px}h2{font-size:32px}.section-heading{display:block;margin-bottom:27px}.section-heading>p{max-width:none;margin-top:18px;font-size:13px}.features{grid-template-columns:1fr;gap:13px}.feature{padding:24px}.feature h3{font-size:21px}.feature p{font-size:13px}.feature-top{margin-bottom:19px}.feature:nth-child(n+4){padding:22px 24px}.vocab{margin-top:20px}.wave{margin-top:17px}.wave span{font-size:10px;max-width:140px}.dictionary{margin-top:20px;font-size:13px}.learning-grid{grid-template-columns:1fr;gap:35px}.learning-art{min-height:400px;max-width:350px;width:100%;margin:auto}.lesson-paper{width:265px;padding:21px}.hanzi-grid{width:175px;height:175px}.hanzi-grid span{font-size:116px}.paper-top{margin-bottom:16px;font-size:7px}.paper-example{padding-top:15px;margin-top:15px}.note-sticker{right:0;bottom:-4px;font-size:10px}.learning-copy>p{font-size:13px}.steps h3{font-size:14px}.steps p{font-size:12px}.steps li{gap:14px}.vip-section{padding-bottom:0}.vip-panel{grid-template-columns:1fr;padding:30px 23px;gap:22px;border-radius:18px}.vip-copy h2{font-size:38px;line-height:1.13}.vip-copy>p{font-size:13px;max-width:none}.benefits li{font-size:11px;margin:10px 0}.vip-copy .eyebrow{font-size:9px}.vip-order{padding:23px;border-radius:13px}.vip-order h3{font-size:30px}.vip-order>p{font-size:12px}.payment-buttons b{font-size:13px}.payment-buttons small{font-size:10px}.vip-order>.payment-note{font-size:11px}.contact-mini{font-size:11px}.support-hours{font-size:9px}.faq-grid{grid-template-columns:1fr;gap:30px}.faqs summary{font-size:14px}.faqs p{font-size:12px}.download-section{padding-bottom:50px}.download-box{padding:40px 18px;border-radius:18px}.download-box h2{font-size:30px}.download-box .eyebrow{font-size:7px;letter-spacing:.8px}.download-box>p{font-size:12px}.download-box .store{padding:10px 11px;gap:7px}.download-box .store b{font-size:14px}.download-box .store small{font-size:7px}.download-character{font-size:200px;bottom:0}.footer-top{flex-wrap:wrap;justify-content:flex-start;gap:16px;padding-bottom:22px}.footer-top .text-link{font-size:12px}.footer-bottom{align-items:flex-start;flex-wrap:wrap;font-size:10px;gap:18px}.footer-bottom nav{order:3;width:100%;gap:22px}.footer-bottom>a{margin-left:auto}dialog{padding:32px 23px}dialog h2{font-size:23px}}
@media(max-width:360px){.hero h1{font-size:53px}.hero .eyebrow{font-size:7px}.hero-description{font-size:13px}.hero-note{font-size:8px}.hero-visual{height:485px}.phone{transform:translateX(-50%) rotate(5deg) scale(.74)}.greeting-card{width:144px;padding:13px;bottom:66px}.hsk-badge{right:-2px;padding:9px}.hsk-badge strong{font-size:10px}.vip-panel{padding:28px 17px}.vip-order{padding:20px 17px}.download-box .store{padding:9px 10px}.download-box .store b{font-size:12px}.download-box .store svg{width:18px}.download-box .store small{font-size:6px}.download-box h2{font-size:27px}.contact-mini{font-size:10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}

/* Preserve the supplied screenshot inside a CSS device frame. */
.phone{width:270px;height:auto;border:7px solid #20272e;border-radius:43px;overflow:hidden;background:#20272e;box-shadow:10px 25px 40px #142b6760,0 0 0 1px #8691a5,0 0 0 3px #25303b}
.phone img{position:static;display:block;width:100%;max-width:100%;height:auto;left:auto;top:auto;border-radius:34px}
.stroke-demo.lesson-paper{width:330px;max-width:100%;padding:23px 25px;transform:none;border-radius:18px}
.learning-art{min-height:535px}.stroke-demo .paper-top{margin-bottom:15px}.character-choices{display:flex;justify-content:center;gap:8px;margin-bottom:16px}.character-choices button{width:45px;height:38px;border:1px solid #dfe6ef;background:#f8fafd;border-radius:8px;font-size:22px;color:#7789a3;line-height:1}.character-choices button[aria-pressed="true"]{background:#eaf1ff;border-color:#9ebced;color:#2857b1}.character-choices button:hover{border-color:#6e95d4}.stroke-demo .hanzi-grid{width:240px;height:240px;margin:auto;display:block;position:relative;background-color:#fcfdff;touch-action:pan-y}.stroke-demo .hanzi-grid.is-practicing{touch-action:none}.stroke-demo .hanzi-grid>span{display:grid;place-items:center;height:100%;font-size:145px}.stroke-demo .hanzi-grid svg{width:240px;height:240px;display:block;max-width:none}.stroke-demo .paper-definition{align-items:center;margin-top:14px;gap:12px;font-size:11px}.listen-character{width:31px;height:31px;display:grid;place-items:center;border:1px solid #dce6f5;border-radius:50%;background:#f0f5ff;color:#3a6abb;font-size:17px;line-height:1}.listen-character:hover{background:#e1ecff}.stroke-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:16px}.stroke-actions button{padding:10px 9px;border:1px solid #c8d9f4;border-radius:8px;color:#2f5ea9;background:#eef4fe;font-size:11px;font-weight:600}.stroke-actions button:last-child{background:#2d62d9;border-color:#2d62d9;color:white}.stroke-actions button>span{margin-left:7px}.stroke-actions button:disabled{opacity:.55;cursor:wait}.stroke-demo .stroke-status{min-height:34px;line-height:1.6;font-size:10px;color:#7c8ba1;text-align:center;margin:13px 0 0}.learning-art .note-sticker{bottom:-14px;right:-6px;font-size:10px;z-index:2;pointer-events:none}.stroke-demo audio{display:none}
@media(max-width:850px){.stroke-demo.lesson-paper{padding:21px 16px}.learning-art{min-height:525px}.learning-grid{gap:35px}.stroke-demo .paper-top{font-size:7px;letter-spacing:.4px}.learning-art .note-sticker{font-size:9px;bottom:-14px;right:0}}
@media(min-width:601px) and (max-width:750px){.learning-grid{grid-template-columns:1fr}.learning-art{max-width:380px;width:100%;margin:auto}.learning-copy{max-width:520px;margin:auto}}
@media(max-width:600px){.learning-art{min-height:535px;max-width:350px}.stroke-demo.lesson-paper{width:310px;padding:21px 18px}.learning-grid{gap:38px}.learning-art .note-sticker{font-size:9px;bottom:-7px;right:3px}.stroke-demo .stroke-status{font-size:10px}.phone{border-width:7px}.listen-character{width:34px;height:34px}}
@media(max-width:360px){.stroke-demo.lesson-paper{padding:19px 15px}.stroke-demo .hanzi-grid,.stroke-demo .hanzi-grid svg{width:240px;height:240px}.learning-art .note-sticker{font-size:8px;right:0}.stroke-demo .paper-top{font-size:6px}.stroke-actions button{font-size:10px}.stroke-demo .paper-definition{font-size:10px;gap:9px}}
.learning-art{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;min-height:0}.learning-art .note-sticker{position:relative;right:auto;bottom:auto;align-self:flex-end;margin-right:10px}

/* Blue brand palette with soft blue-gray surfaces. */
:root{--ink:#172847;--blue:#233f70;--muted:#516383;--line:#ccd5e4;--paper:#e4eaf3;--yellow:#e4bc69}
body{background:#e4eaf3;color:var(--ink)}header{background:#e4eaf3ed;border-color:#cbd5e7}.hero{background:radial-gradient(ellipse at 85% 30%,#bcc8dd 0,transparent 52%),linear-gradient(135deg,#e1e7f1,#dde4ef)}
.hero h1{font-size:clamp(48px,5vw,70px);letter-spacing:-3px}.hero h1 em{color:#233f70}.hero-description{color:#415679;max-width:490px}.hero .eyebrow{color:#43587d}.hero-capabilities{display:flex;gap:7px;flex-wrap:wrap;max-width:470px;margin:0 0 25px}.hero-capabilities span{padding:5px 11px;background:#e7ebf3;border:1px solid #c5cfe1;border-radius:30px;font-size:11px;font-weight:600;color:#27457a}.hero-more span{color:#233f70}.hero-note{color:#526585}.blue-stage{background:linear-gradient(155deg,#2e5392,#172948);box-shadow:inset 0 0 80px #12213b33}.greeting-card,.hsk-badge{background:#e7ebf3;border-color:#c6d0e2}.greeting-card strong{color:#1f3862}.visual-note{color:#4e607f}.quick-strip{background:#172948;border-color:#172948}.quick-strip p,.quick-strip p strong,.quick-strip .container>span{color:#d6deec}.quick-strip svg{color:#d9bc78}
#features{background:#dce3ef}.section-heading>p{color:#465c82;max-width:410px}.features{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.feature{background:#dce3ee;border:1px solid #c4cfe1;box-shadow:none;border-radius:20px;padding:28px}.feature:first-child{grid-column:span 2;background:#1b3055;color:#e2e7f1}.feature:first-child p{color:#cbd4e4;max-width:570px}.feature:first-child .feature-icon{background:#ffffff14;color:#edcc83}.feature:first-child .index{color:#9dafcd}.feature:nth-child(2){background:#cbd5e7}.feature:nth-child(3){background:#d1dae9}.feature:nth-child(4){background:#d4dceb}.feature:nth-child(5){background:#d7dfec}.feature:nth-child(6){background:#d3dceb}.feature:nth-child(7){background:#cfd9e9}.feature:nth-child(8){background:#d4dceb}.feature h3{font-size:23px;letter-spacing:-.7px}.feature p{color:#445a7f;font-size:14px}.feature-icon{background:#ffffff70;color:#254376}.feature .index{color:#576b8e}.feature:nth-child(n+4){padding:28px}.feature-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:22px}.feature-tags span{font-size:10px;padding:5px 9px;border-radius:20px;border:1px solid #aebdd6;color:#3c4f70}.feature-example{display:grid;gap:7px;border-top:1px solid #b5c2d9;margin-top:22px;padding-top:19px}.feature-example span:first-child{font-size:22px;color:#233f6f}.feature-example span:last-child{font-size:12px;color:#516383}.feature-demo-link{display:inline-flex;gap:18px;margin-top:22px;font-size:13px;font-weight:650;color:#213c6a}.dictionary{background:#e6ebf3;color:#223e6d;border-color:#b7c4da}.wave i{background:#55698b}.wave span{color:#42577b}.quiz-preview{margin-top:23px;padding:22px;background:#e0e6f0;color:#1b3055;border-radius:13px}.preview-label{font-size:9px;letter-spacing:1.2px;color:#526687}.quiz-question{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;margin:8px 0 16px}.quiz-question strong{font-size:38px;font-weight:500}.quiz-question span{font-size:13px}.quiz-answers{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.quiz-answers>span{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 13px;border:1px solid #c2cddf;border-radius:8px;font-size:13px}.quiz-answers .correct{background:#cdd7e8;border-color:#687ea3;color:#1f3863}.quiz-preview small{display:block;font-size:10px;color:#56698b;margin-top:12px}
.learning{background:#d4dceb}.lesson-paper{background:#eaeef5;border-color:#bec9dd;box-shadow:0 20px 55px #1d345b10}.paper-top,.stroke-demo .stroke-status{color:#526687}.character-choices button{background:#dde4ef;border-color:#c3cee0;color:#586d90}.character-choices button[aria-pressed=true]{background:#d2dbea;border-color:#798cad;color:#223d6c}.stroke-demo .hanzi-grid{background-color:#eaeef5}.stroke-demo .paper-definition{color:#516383}.note-sticker{background:#e8cb87;color:#5c512f}.learning-copy>p,.steps p{color:#4e5f7e}.steps li>span{color:#264478;background:#dde4ef}.faq-section{background:#e4eaf3}.faqs details{border-color:#c6d0e2}.faqs p{color:#4e6080}.download-box{background:#1a2f52}.download-box h2,.download-box>p{color:#dee4ef}.download-box h2 em,.download-box .eyebrow{color:#e6c680}.download-box .store{background:#d8e0ed;color:#1a2f52;border-color:#d8e0ed}.download-box .store small{color:#415679}.store:hover{background:#26457a;border-color:#26457a}.vip-section{background:#e4eaf3}.vip-order{background:#e8ecf4}.payment-buttons button{background:#dae1ed}.footer-top,.footer-bottom{border-color:#c6d0e2}footer{background:#d8dfec}.footer-top>p,.footer-bottom{color:#4f6282}.menu{background:#dee4ef;color:#213c6a;border-color:#c0cbde}dialog{background:#e8ecf4}
@media(max-width:850px){#navigation{background:#e4eaf3;border-color:#c6d0e2}.features{grid-template-columns:repeat(2,minmax(0,1fr))}.feature:first-child{grid-column:span 2}.feature:last-child{grid-column:span 2}.hero h1{font-size:50px}.hero-capabilities{gap:5px}.hero-capabilities span{font-size:9px;padding:4px 8px}}
@media(max-width:600px){.hero h1{font-size:53px;letter-spacing:-2.6px}.hero-capabilities{justify-content:center;margin:0 auto 24px;max-width:350px}.hero-capabilities span{font-size:10px}.features{grid-template-columns:1fr}.feature:first-child,.feature:last-child{grid-column:auto}.feature,.feature:nth-child(n+4){padding:24px}.feature h3{font-size:23px}.quiz-preview{padding:17px}.quiz-answers{grid-template-columns:1fr}.quiz-answers>span{padding:9px 12px}.quiz-question{gap:9px}.hero-description{font-size:14px}.section-heading>p{font-size:14px}}

:root{--blue:#3268dd;--ink:#203858}.hero h1 em,.hero-more span{color:#3268dd}.blue-stage{background:linear-gradient(155deg,#4e7ddd,#254b96)}.feature:first-child{background:#284f94}.quick-strip{background:#213e71}.download-box{background:#24467f}.feature-demo-link{color:#285bb8}.feature-icon{color:#3564aa}.quiz-answers .correct{background:#d8e5fa;border-color:#87a5d6;color:#244b8c}