:root{--green:#00c896;--green-dark:#009f78;--green-soft:#e4fbf1;--orange:#ff914d;--orange-dark:#ed7535;--yellow:#ffd75e;--yellow-soft:#fff7d9;--blue:#65c9f5;--blue-soft:#e8f8ff;--ink:#203f3b;--muted:#78908a;--line:#e4eee9;--cream:#fbfdf9;--shadow:0 5px 0 #dcebe3;--font:'Baloo 2','Noto Sans Thai','Noto Sans SC',sans-serif}
*{box-sizing:border-box}body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.45;-webkit-font-smoothing:antialiased}button{font:inherit;cursor:pointer;border:0;color:inherit;transition:transform .15s,box-shadow .15s,background .15s}button:hover{transform:translateY(-2px)}button:active{transform:translateY(1px)}button:focus-visible,a:focus-visible{outline:4px solid var(--yellow);outline-offset:4px}button:disabled{cursor:not-allowed;opacity:.5;transform:none}a{color:inherit;text-decoration:none}h1,h2,h3,p{margin:0}button svg{flex-shrink:0}.hidden{display:none!important}.container{max-width:1170px;margin:0 auto;padding:0 36px}.topbar{height:99px;background:#fff;border-bottom:1px solid var(--line)}.topbar-inner{height:100%;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:12px;background:none;padding:0;text-align:left}.brand-panda{width:51px;height:51px;background:var(--green-soft);border-radius:18px;display:flex;align-items:center;justify-content:center}.brand-panda svg{width:45px;height:45px}.brand-name{font-size:31px;line-height:1;font-weight:800;letter-spacing:-.7px}.brand-name span{color:var(--green)}.brand-subtitle{display:block;font-size:11px;color:var(--muted);font-weight:600;letter-spacing:.3px;margin-top:5px}.header-right{display:flex;align-items:center;gap:24px}.mini-stat{display:flex;align-items:center;gap:7px;font-weight:700;font-size:20px}.mini-stat .emoji{font-size:25px}.mini-stat.xp{color:#a17b08}.language-toggle{display:flex;background:#eff5f0;padding:5px;border-radius:15px;gap:3px}.language-toggle button{padding:7px 13px;border-radius:10px;background:transparent;font-size:13px;font-weight:800;color:var(--muted);line-height:1.2}.language-toggle button.active{background:var(--green);color:#fff;box-shadow:0 2px 4px #008a6120}.hero{padding-top:38px;padding-bottom:26px}.hero-copy{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}.eyebrow{color:var(--green-dark);font-weight:800;font-size:12px;letter-spacing:1.6px;text-transform:uppercase;margin-bottom:8px}.hero h1{font-size:44px;font-weight:800;line-height:1.14;letter-spacing:-1.3px;max-width:720px}.hero h1 em{font-style:normal;color:var(--green)}.hero-description{font-size:18px;color:var(--muted);margin-top:9px;font-weight:500}.hero-sticker{background:var(--yellow-soft);border:2px solid #f8e8a3;padding:11px 17px;border-radius:16px;transform:rotate(4deg);font-weight:800;color:#aa7d19;display:flex;align-items:center;gap:9px;font-size:15px;white-space:nowrap;margin-top:9px}.hero-sticker span{font-size:25px}.home-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr);gap:28px;align-items:start;padding-bottom:36px}.mission{background:var(--green);border-radius:27px;position:relative;overflow:hidden;min-height:259px;padding:29px 31px;color:#fff;box-shadow:0 7px 0 #00b487}.mission:before{content:'';position:absolute;width:290px;height:290px;border-radius:50%;border:35px solid #ffffff12;right:-65px;top:-78px}.mission:after{content:'';position:absolute;width:140px;height:140px;border-radius:50%;background:#ffffff0c;left:43%;bottom:-91px}.mission-content{position:relative;z-index:2;max-width:64%}.mission .eyebrow{color:#c7ffea;font-size:11px;letter-spacing:1.4px;display:flex;gap:7px;align-items:center}.mission h2{font-size:31px;line-height:1.16;letter-spacing:-.3px;margin:10px 0 9px}.mission p{font-size:16px;color:#e0fff1;line-height:1.5;font-weight:500}.mission-footer{display:flex;align-items:center;gap:20px;margin-top:22px}.mission-button{background:#fff;color:var(--green-dark);font-size:16px;font-weight:800;border-radius:15px;padding:12px 22px;box-shadow:0 4px 0 #00a67e;display:inline-flex;align-items:center;gap:11px}.mission-button svg{width:19px;height:19px}.mission-time{font-size:12px;color:#d2ffed;display:flex;align-items:center;gap:5px;font-weight:600}.mission-time svg{width:15px;height:15px}.hero-panda{position:absolute;right:17px;bottom:12px;width:188px;height:207px;z-index:1;animation:panda-float 4s ease-in-out infinite}.hero-panda .panda-svg{height:174px;width:174px}.speech-bubble{position:absolute;right:9px;top:-5px;background:white;border-radius:17px 17px 4px 17px;color:var(--green-dark);font-weight:800;padding:7px 13px;font-size:17px;box-shadow:0 3px 0 #008b6130;transform:rotate(6deg);z-index:2;white-space:nowrap}.mission-doodle{position:absolute;font-size:23px;opacity:.7;z-index:1}.doodle-one{right:185px;top:24px;color:#ffdf69;transform:rotate(-14deg)}.doodle-two{right:25px;bottom:24px;color:#ffdf69;font-size:32px}.daily-card{border:2px solid #e5eee6;border-radius:25px;padding:22px 22px 19px;background:#fff;box-shadow:var(--shadow)}.daily-card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:13px}.daily-card h3{font-size:21px;line-height:1.2}.daily-badge{color:#aa7d19;background:var(--yellow-soft);font-size:11px;font-weight:800;padding:4px 9px;border-radius:9px}.goal-title{font-size:15px;font-weight:700;display:flex;justify-content:space-between;align-items:center}.goal-title span{font-size:14px;color:var(--green-dark)}.progress-track{height:11px;background:#e8f0e9;border-radius:10px;overflow:hidden;margin-top:10px}.progress-fill{height:100%;background:var(--green);border-radius:10px;transition:width .4s}.goal-note{font-size:13px;color:var(--muted);margin-top:7px}.week-row{display:flex;justify-content:space-between;margin-top:18px;padding-top:17px;border-top:1px solid var(--line)}.week-day{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:11px;color:var(--muted);font-weight:600}.day-dot{width:27px;height:27px;border-radius:50%;background:#f1f5f0;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}.week-day.done .day-dot{background:var(--green);color:white}.week-day.today .day-dot{background:var(--yellow);color:#8f6e18;box-shadow:0 0 0 3px #fff4c8}.streak-note{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:#bc772a;background:#fff6e8;border-radius:10px;padding:8px 10px;margin-top:15px}.streak-note span{font-size:17px}.path-header{display:flex;align-items:end;justify-content:space-between;margin:31px 0 21px;gap:10px}.path-header h2{font-size:30px;line-height:1.1;letter-spacing:-.5px}.path-header p{font-size:15px;color:var(--muted);margin-top:4px}.path-header .all-stars{display:flex;gap:7px;align-items:center;font-size:14px;font-weight:700;background:#fff7d9;padding:8px 13px;border-radius:13px;color:#a47b16;white-space:nowrap}.all-stars .emoji{font-size:20px}.lesson-list{display:flex;flex-direction:column;gap:17px}.lesson-card{width:100%;text-align:left;display:flex;align-items:center;gap:19px;background:#fff;border:2px solid var(--line);border-radius:23px;padding:20px 22px;box-shadow:var(--shadow);position:relative;overflow:hidden}.lesson-card:hover{border-color:var(--accent,#a6e8cc);box-shadow:0 6px 0 var(--accent,#a6e8cc)}.lesson-number{position:absolute;top:11px;left:13px;font-size:10px;font-weight:800;color:#a0b5a9;letter-spacing:1px}.lesson-icon{height:83px;width:83px;min-width:83px;border-radius:22px;background:var(--soft,#e5faf1);display:flex;align-items:center;justify-content:center;font-size:45px;position:relative;margin-top:6px}.lesson-info{flex:1;min-width:0}.lesson-title-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.lesson-info h3{font-size:24px;line-height:1.2;font-weight:800;letter-spacing:-.2px}.lesson-tag{background:var(--soft,#e5faf1);color:var(--accent-dark,var(--green-dark));border-radius:7px;padding:2px 8px;font-size:10px;letter-spacing:.4px;font-weight:800;text-transform:uppercase}.lesson-description{font-size:14px;color:var(--muted);margin-top:4px;line-height:1.4}.lesson-meta{display:flex;align-items:center;gap:13px;margin-top:9px;font-size:12px;color:#8a9b92;font-weight:600}.lesson-meta span{display:flex;align-items:center;gap:4px}.lesson-meta svg{height:14px;width:14px}.lesson-action{display:flex;align-items:center;gap:14px;flex-shrink:0}.lesson-stars{font-size:20px;letter-spacing:-2px;white-space:nowrap;color:#d9e2d8}.lesson-stars .earned{color:#f4be30}.lesson-go{height:40px;width:40px;border-radius:50%;background:var(--soft,#e5faf1);display:flex;align-items:center;justify-content:center;color:var(--accent-dark,var(--green-dark));font-size:28px;font-weight:600;line-height:1}.lesson-card.current{border-color:#7ce0bb;background:linear-gradient(100deg,#fff 80%,#f0fff7)}.lesson-card.current .lesson-go{background:var(--green);color:#fff}.lesson-card.completed{border-color:#d9ecde}.lesson-card.completed .lesson-go{background:var(--green-soft);color:var(--green-dark)}.home-side-note{margin-top:20px;border:2px dashed #f1cf72;background:#fffaf0;border-radius:23px;text-align:center;padding:22px}.home-side-note .note-emoji{font-size:36px;display:block;margin-bottom:7px}.home-side-note h3{font-size:21px}.home-side-note p{font-size:14px;color:#9e8451;line-height:1.5;margin-top:4px}.home-side-note button{margin-top:14px;background:transparent;color:#b88123;font-weight:800;font-size:13px;text-decoration:underline;text-underline-offset:4px}.footer{border-top:1px solid var(--line);padding:27px 0 30px;margin-top:13px;color:var(--muted);font-size:13px;display:flex;justify-content:space-between;gap:20px}.footer span{display:flex;align-items:center;gap:6px}.footer .footer-heart{color:var(--green)}
/* lesson screens */.lesson-shell{max-width:850px;margin:0 auto;padding:30px 30px 55px}.lesson-topbar{display:flex;align-items:center;gap:22px;margin-bottom:28px}.back-button{height:46px;width:46px;min-width:46px;border-radius:15px;border:2px solid var(--line);background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 0 #e1e9e2}.back-button svg{width:22px;height:22px}.lesson-progress{flex:1}.lesson-progress .progress-track{height:13px;margin:0;background:#e6eee5}.progress-label{font-size:14px;color:var(--muted);font-weight:700;white-space:nowrap}.lesson-heading{text-align:center;margin:20px 0 25px}.lesson-heading .eyebrow{margin-bottom:6px}.lesson-heading h1{font-size:37px;line-height:1.15}.lesson-heading p{color:var(--muted);margin-top:7px;font-size:17px}.lesson-intro-icon{font-size:79px;display:block;filter:drop-shadow(0 5px 0 #dfeee3);margin-bottom:12px;animation:panda-float 4s ease-in-out infinite}.intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.intro-card{background:#fff;border:2px solid var(--line);border-radius:24px;padding:24px;box-shadow:var(--shadow)}.intro-card h2{font-size:23px;margin-bottom:14px}.word-chips{display:flex;flex-wrap:wrap;gap:8px}.word-chip{padding:7px 13px;background:var(--green-soft);border-radius:12px;font-size:24px;font-weight:600}.word-chip small{display:block;color:var(--muted);font-size:11px;text-align:center;line-height:1.1}.intro-sentence{font-family:'Noto Sans SC',var(--font);font-size:22px;line-height:1.65;font-weight:700}.intro-pinyin{color:var(--green-dark);font-size:14px;margin:8px 0}.intro-translation{font-size:16px;color:var(--muted)}.practice-list{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:25px 0}.practice-button{background:#fff;border:2px solid var(--line);border-radius:19px;padding:18px;display:flex;gap:12px;align-items:center;text-align:left;box-shadow:0 4px 0 #e2ece4}.practice-button .emoji{font-size:32px}.practice-button strong{display:block;font-size:19px;line-height:1.2}.practice-button small{font-size:12px;color:var(--muted)}.practice-button:hover{border-color:var(--green)}.primary-button{background:var(--green);color:white;border-radius:17px;min-height:55px;padding:13px 26px;font-weight:800;font-size:19px;box-shadow:0 5px 0 var(--green-dark);display:inline-flex;align-items:center;justify-content:center;gap:9px}.primary-button.orange{background:var(--orange);box-shadow:0 5px 0 var(--orange-dark)}.primary-button.blue{background:var(--blue);box-shadow:0 5px 0 #41add9}.wide-button{width:100%}.center-button{display:flex;justify-content:center}.subtle-button{background:#fff;border:2px solid var(--line);border-radius:15px;min-height:48px;padding:10px 20px;font-size:16px;font-weight:700;box-shadow:0 3px 0 #e3ebe4}.vocab-card{background:#fff;border:3px solid #e3f1e8;border-radius:30px;padding:24px 28px 27px;text-align:center;box-shadow:0 7px 0 #dfece3;position:relative;overflow:hidden}.vocab-card:before{content:'';position:absolute;background:var(--blue-soft);height:190px;width:120%;left:-10%;top:0;border-radius:0 0 50% 50%}.word-illustration{position:relative;font-size:105px;line-height:1.2;display:block;margin:8px auto 5px;filter:drop-shadow(0 5px 0 #b9e2ef);animation:word-bob 4s ease-in-out infinite}.word-pinyin{position:relative;color:var(--green-dark);font-size:26px;font-weight:700}.word-hanzi{font-family:'Noto Sans SC',sans-serif;font-size:72px;font-weight:800;line-height:1.35;position:relative;letter-spacing:3px}.speaker-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:50px;background:var(--blue-soft);color:#2589b5;padding:10px 20px;font-weight:700;font-size:15px;margin:7px 0 17px}.speaker-button svg{height:20px;width:20px}.meaning-divider{border:0;border-top:2px dashed #e3ece5;margin:0 0 17px}.word-english{font-size:26px;font-weight:800;line-height:1.25}.word-thai{font-size:23px;color:var(--muted);font-family:'Noto Sans Thai',sans-serif;margin-top:3px}.example-box{margin-top:24px;border:2px solid #f4df95;border-radius:22px;padding:20px 23px;background:var(--yellow-soft);text-align:left;position:relative}.example-label{font-size:11px;color:#a98323;font-weight:800;letter-spacing:1.2px;margin-bottom:7px;display:flex;align-items:center;gap:5px}.example-hanzi{font-size:24px;font-weight:700;line-height:1.5}.example-pinyin{font-size:14px;color:#9b8853;margin:5px 0}.example-translation{font-size:16px}.example-speaker{position:absolute;right:16px;top:14px;border-radius:50%;height:33px;width:33px;background:#f9e7a9;color:#98731e;display:flex;align-items:center;justify-content:center}.example-speaker svg{width:17px;height:17px}.vocab-nav{display:grid;grid-template-columns:auto 1fr;gap:15px;margin-top:25px}.vocab-count{text-align:center;color:var(--muted);font-size:13px;margin-top:16px}.quiz-question-card{text-align:center;padding:27px 20px;background:var(--blue-soft);border:2px solid #c8eafa;border-radius:25px;margin-bottom:22px}.quiz-question-card small{color:#4895b4;font-weight:800;letter-spacing:1px;font-size:12px}.quiz-question-card h2{font-size:31px;margin-top:5px;line-height:1.25}.quiz-question-card p{font-size:23px;color:#5d8492;margin-top:3px}.quiz-options{display:grid;grid-template-columns:1fr 1fr;gap:17px}.quiz-option{min-height:112px;border:3px solid var(--line);border-radius:23px;background:#fff;box-shadow:0 5px 0 #e2ebe2;font-family:'Noto Sans SC',sans-serif;font-size:41px;font-weight:700}.quiz-option:hover{border-color:var(--blue);background:var(--blue-soft)}.quiz-option.correct{border-color:var(--green);background:var(--green-soft);box-shadow:0 5px 0 #83dab7}.quiz-option.wrong{border-color:#f0997b;background:#fff0e9;box-shadow:0 5px 0 #f3b59d}.quiz-option.dimmed{opacity:.5}.feedback{margin-top:24px;border-radius:24px;padding:19px 22px;display:flex;align-items:center;gap:17px;border:2px solid #a5e4c7;background:var(--green-soft)}.feedback.wrong{background:#fff2e8;border-color:#f3c8a5}.feedback .panda-svg{width:86px;height:82px;flex-shrink:0}.feedback h3{font-size:25px;color:var(--green-dark);line-height:1.2}.feedback.wrong h3{color:#c27a38}.feedback p{font-size:16px;margin-top:3px}.feedback .answer{font-size:16px;font-weight:700;color:var(--ink)}.feedback .primary-button{margin-left:auto;white-space:nowrap;font-size:16px;min-height:47px;padding:10px 17px}.feedback-content{flex:1}.arrange-instruction{text-align:center;color:var(--muted);font-size:16px;margin:-12px 0 24px}.sentence-area{min-height:148px;background:#fff;border:3px dashed #c3decf;border-radius:24px;padding:22px;display:flex;flex-wrap:wrap;gap:11px;align-content:center;justify-content:center}.sentence-placeholder{color:#9bb2a5;font-size:19px;align-self:center}.token{border-radius:14px;background:var(--green-soft);border:2px solid #a1dfc2;box-shadow:0 3px 0 #b0dfc7;padding:10px 15px;min-height:54px;font-family:'Noto Sans SC',sans-serif;font-size:26px;font-weight:600}.token.bank{background:white;border-color:#dce7df;box-shadow:0 3px 0 #dce7df}.token:hover{border-color:var(--green)}.word-bank-label{text-align:center;color:var(--muted);font-size:14px;font-weight:700;margin:24px 0 12px}.word-bank{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;min-height:70px}.arrange-actions{margin-top:26px}.flashcard{min-height:475px;background:#fff;border:3px solid #d3eaf7;border-radius:32px;box-shadow:0 7px 0 #d3e4ec;text-align:center;padding:25px 25px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;position:relative}.flashcard .word-illustration{font-size:112px}.flashcard-hint{position:absolute;top:22px;font-size:11px;color:#91a79d;font-weight:800;letter-spacing:1px}.flashcard .word-hanzi{font-size:85px}.flashcard .word-pinyin{font-size:25px}.flashcard-meaning{margin-top:14px}.flashcard-meaning h2{font-size:34px}.flashcard-meaning p{font-size:25px;color:var(--muted);margin-top:5px}.flashcard .speaker-button{margin-top:18px;margin-bottom:0}.flashcard-question{font-size:15px;color:var(--muted);margin-top:13px}.flashcard-actions{display:grid;grid-template-columns:1fr 1fr;gap:17px;margin-top:24px}.complete-card{text-align:center;padding:25px 25px 34px;background:#fff;border:3px solid #f2dfa1;border-radius:32px;box-shadow:0 7px 0 #eadca9;position:relative;overflow:hidden}.complete-card:before{content:'';position:absolute;width:380px;height:380px;left:calc(50% - 190px);top:12px;background:radial-gradient(circle,#fff7cf 0%,#fff9e455 46%,transparent 69%)}.complete-card>*{position:relative}.big-star{font-size:139px;line-height:1.25;display:inline-block;animation:star-pop .8s cubic-bezier(.17,.67,.25,1.3) both;filter:drop-shadow(0 7px 0 #e9b62c)}.complete-panda .panda-svg{width:144px;height:130px;margin-top:-10px}.complete-card h1{font-size:39px;line-height:1.1;margin-top:12px}.complete-card .complete-subtitle{font-size:20px;color:var(--muted);margin-top:6px}.reward-label{font-size:15px;font-weight:800;color:#a47b15;letter-spacing:.5px;margin-top:21px}.reward-stars{font-size:45px;letter-spacing:5px;color:#f4bd2d;line-height:1.3}.reward-stats{display:flex;justify-content:center;gap:16px;margin:25px 0}.reward-stat{background:var(--green-soft);border-radius:18px;padding:13px 24px;min-width:130px}.reward-stat strong{font-size:28px;display:block;color:var(--green-dark);line-height:1.2}.reward-stat span{font-size:13px;color:#5c8e7a}.complete-actions{display:flex;flex-direction:column;gap:14px;max-width:410px;margin:auto}.encourage-panda{display:flex;justify-content:center;margin:0 0 15px}.encourage-panda .panda-svg{height:100px;width:110px}.progress-hero{display:flex;align-items:center;gap:30px;background:var(--green-soft);border:2px solid #c0ead4;border-radius:25px;padding:25px;margin:25px 0}.progress-hero .panda-svg{width:135px;height:135px;flex-shrink:0}.progress-hero h2{font-size:32px}.progress-hero p{font-size:17px;color:#578b76;margin-top:3px}.progress-overview{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:25px}.overview-card{background:#fff;border:2px solid var(--line);border-radius:22px;text-align:center;padding:19px;box-shadow:var(--shadow)}.overview-card .emoji{font-size:32px}.overview-card strong{display:block;font-size:33px;line-height:1.2}.overview-card span{font-size:14px;color:var(--muted)}.progress-lesson-list{display:flex;flex-direction:column;gap:12px}.progress-lesson{display:flex;align-items:center;gap:15px;border:2px solid var(--line);border-radius:19px;padding:15px 18px;background:white}.progress-lesson .emoji{font-size:35px}.progress-lesson h3{font-size:21px;flex:1}.progress-lesson small{font-size:13px;color:var(--muted);display:block}.progress-lesson .stars{font-size:20px;color:#f4be30}.settings-card{background:white;border:2px solid var(--line);border-radius:25px;padding:26px;margin:20px 0;box-shadow:var(--shadow)}.settings-card h2{font-size:25px}.settings-card p{color:var(--muted);font-size:16px;margin:7px 0 17px}.settings-language{display:flex;gap:15px}.settings-language button{flex:1}.settings-note{background:var(--blue-soft);border-color:#c9e8f7}.settings-note p{margin-bottom:0;color:#518296}.parent-note{font-size:13px!important;color:var(--muted);text-align:center;margin-top:22px}.home-bottom-nav{display:none}
/* animation and responsive */.home-bottom-nav{display:none;position:sticky;bottom:0;z-index:20;background:#fff;border-top:1px solid var(--line);padding:8px 20px 12px;justify-content:space-around;gap:12px}.home-bottom-nav button{background:transparent;color:var(--muted);font-size:12px;font-weight:700;display:flex;flex-direction:column;align-items:center;gap:2px;padding:5px 25px;border-radius:13px}.home-bottom-nav button span{font-size:24px}.home-bottom-nav button.active{background:var(--green-soft);color:var(--green-dark)}.confetti-layer{position:fixed;inset:0;pointer-events:none;z-index:100;overflow:hidden}.confetti-piece{position:absolute;top:-25px;width:12px;height:17px;border-radius:4px;animation:confetti-fall 2.8s ease-in forwards}.celebrating{animation:panda-party .75s ease-in-out 3}.wrong-wiggle{animation:wrong-wiggle .4s ease-in-out}.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,20px);opacity:0;background:var(--ink);color:white;border-radius:15px;padding:13px 23px;z-index:200;transition:all .25s;font-size:16px;box-shadow:0 4px 12px #0002;pointer-events:none;max-width:90%;text-align:center}.toast.show{opacity:1;transform:translate(-50%,0)}@keyframes panda-float{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-6px) rotate(1deg)}}@keyframes word-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}@keyframes panda-party{0%,100%{transform:rotate(0) scale(1)}25%{transform:rotate(-8deg) scale(1.08)}75%{transform:rotate(8deg) scale(1.08)}}@keyframes wrong-wiggle{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}@keyframes star-pop{0%{transform:scale(0) rotate(-40deg)}70%{transform:scale(1.15) rotate(8deg)}100%{transform:scale(1) rotate(0)}}@keyframes confetti-fall{0%{transform:translateY(-5vh) rotate(0);opacity:1}100%{transform:translateY(110vh) rotate(680deg);opacity:0}}
@media(min-width:1300px){.container{max-width:1220px}.mission{min-height:276px}.hero{padding-top:44px}.hero h1{font-size:48px}.lesson-card{padding:22px 25px}.lesson-icon{width:90px;height:90px;font-size:49px}}
@media(max-width:950px){.container{padding:0 25px}.hero h1{font-size:39px}.hero-sticker{display:none}.home-grid{grid-template-columns:minmax(0,1.5fr) minmax(235px,1fr);gap:20px}.mission{padding:24px;min-height:276px}.mission-content{max-width:63%}.mission h2{font-size:28px}.hero-panda{right:0;width:152px}.hero-panda .panda-svg{width:146px;height:160px}.speech-bubble{font-size:14px;right:6px}.mission-footer{flex-direction:column;align-items:flex-start;gap:12px;margin-top:17px}.daily-card{padding:19px 16px}.daily-card h3{font-size:19px}.lesson-card{gap:15px;padding:18px}.lesson-icon{width:68px;height:73px;min-width:68px;font-size:39px}.lesson-info h3{font-size:22px}.lesson-description{font-size:13px}.lesson-stars{font-size:17px}.lesson-action{gap:7px}.header-right{gap:15px}.mini-stat{font-size:18px}}
@media(max-width:740px){.home-bottom-nav{display:flex}.footer{padding-bottom:16px}.lesson-shell{padding-bottom:30px}.container{padding:0 20px}.topbar{height:83px}.brand-panda{width:43px;height:43px;border-radius:14px}.brand-panda svg{width:39px;height:39px}.brand-name{font-size:27px}.brand-subtitle{font-size:9px;margin-top:3px}.header-right{gap:10px}.header-right .mini-stat{display:none}.language-toggle{padding:4px;border-radius:13px}.language-toggle button{padding:7px 10px;font-size:12px}.hero{padding-top:28px;padding-bottom:20px}.hero h1{font-size:36px;max-width:500px}.hero-description{font-size:16px}.eyebrow{font-size:11px}.home-grid{display:flex;flex-direction:column;gap:22px}.home-grid>section{width:100%}.mission{min-height:238px;padding:24px;border-radius:25px}.mission-content{max-width:65%}.mission h2{font-size:28px}.mission p{font-size:14px}.mission-button{font-size:14px;padding:11px 16px;border-radius:13px}.mission-footer{margin-top:18px;gap:10px}.hero-panda{right:2px;bottom:9px;width:145px}.hero-panda .panda-svg{width:142px;height:152px}.mission-time{font-size:10px}.daily-card{padding:20px}.daily-card-top{margin-bottom:9px}.daily-card h3{font-size:22px}.week-row{margin-top:13px;padding-top:14px}.day-dot{width:31px;height:31px}.streak-note{margin-top:13px}.path-header{margin:26px 0 18px}.path-header h2{font-size:27px}.path-header p{font-size:14px}.all-stars{font-size:12px!important;padding:7px 10px!important}.lesson-list{gap:14px}.lesson-card{border-radius:21px;padding:17px 15px;gap:14px}.lesson-icon{width:70px;height:75px;min-width:70px;border-radius:20px;font-size:41px}.lesson-info h3{font-size:22px}.lesson-description{font-size:13px}.lesson-meta{font-size:11px;gap:8px;margin-top:8px}.lesson-action{flex-direction:column;gap:7px}.lesson-go{width:34px;height:34px;font-size:25px}.lesson-stars{font-size:18px}.lesson-tag{font-size:9px}.home-side-note{display:none}.footer{margin-top:29px;flex-direction:column;gap:5px;padding:22px 0 29px;font-size:12px}.lesson-shell{padding:22px 20px 45px}.lesson-topbar{gap:14px;margin-bottom:24px}.lesson-heading h1{font-size:33px}.lesson-heading p{font-size:15px}.intro-grid{grid-template-columns:1fr}.intro-card{padding:20px}.practice-list{gap:11px}.practice-button{padding:14px 12px;gap:9px}.practice-button .emoji{font-size:27px}.practice-button strong{font-size:16px}.practice-button small{font-size:11px}.vocab-card{padding:20px 18px 23px}.word-illustration{font-size:98px}.word-hanzi{font-size:67px}.word-pinyin{font-size:24px}.word-english{font-size:25px}.word-thai{font-size:21px}.example-box{padding:18px}.example-hanzi{font-size:22px}.example-translation{font-size:15px}.quiz-option{font-size:34px;min-height:99px}.feedback{padding:16px;gap:12px;flex-wrap:wrap}.feedback .panda-svg{width:71px;height:69px}.feedback h3{font-size:23px}.feedback p{font-size:14px}.feedback .primary-button{width:100%;margin:0}.complete-card{padding:20px 18px 28px}.complete-card h1{font-size:34px}.reward-stats{gap:10px}.reward-stat{padding:12px 16px;min-width:110px}.reward-stat strong{font-size:26px}.progress-overview{gap:10px}.overview-card{padding:14px 7px}.overview-card strong{font-size:29px}.overview-card span{font-size:12px}.progress-hero{gap:17px;padding:19px}.progress-hero .panda-svg{width:100px;height:105px}.progress-hero h2{font-size:26px}.progress-hero p{font-size:14px}.settings-language{flex-direction:column}.flashcard{min-height:445px}.flashcard-actions{gap:12px}.flashcard-actions .primary-button{font-size:16px;padding:12px 9px}.lesson-heading{margin-top:16px}.vocab-nav{gap:10px}.vocab-nav .subtle-button{padding:10px 14px}.vocab-nav .primary-button{font-size:17px;padding:12px 13px}}
@media(max-width:380px){.container{padding:0 15px}.brand-name{font-size:25px}.brand-subtitle{font-size:8px}.brand{gap:8px}.language-toggle button{padding:7px 9px}.hero h1{font-size:32px}.mission{padding:21px;min-height:254px}.mission-content{max-width:66%}.mission h2{font-size:26px}.hero-panda{width:122px;right:0}.hero-panda .panda-svg{width:122px}.speech-bubble{font-size:13px}.lesson-card{gap:10px;padding:16px 12px}.lesson-icon{width:59px;min-width:59px;height:66px;font-size:35px}.lesson-info h3{font-size:20px}.lesson-description{font-size:12px}.lesson-action{gap:6px}.lesson-stars{font-size:16px}.lesson-shell{padding-left:15px;padding-right:15px}.lesson-info .lesson-tag{display:none}.lesson-heading h1{font-size:29px}.practice-button strong{font-size:15px}.word-hanzi{font-size:59px}.quiz-options{gap:12px}.quiz-option{font-size:29px}.complete-card h1{font-size:31px}.reward-stat{min-width:100px}.lesson-topbar{gap:10px}.progress-label{font-size:12px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}.confetti-layer{display:none}}