:root{color-scheme:light;--navy:#17365b;--navy2:#2e5378;--soft:#6b7d91;--coral:#f16a66;--sun:#ffc857;--sun2:#ffefbc;--mint:#26bd9c;--blue:#3f74ea;--sky:#e6f4ff;--cream:#fff9ee;--white:#fffefd;--line:#e9e5dc;--shadow:0 15px 45px rgba(38,65,96,.10);--radius:28px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,'Segoe UI',Arial,'Noto Sans',sans-serif;color:var(--navy);background:radial-gradient(ellipse at 2% 10%,#fff0d6 0%,transparent 28%),radial-gradient(ellipse at 100% 18%,#e3f5ff 0%,transparent 32%),#fffaf1;min-height:100vh}button,input,select{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.47}button:active:not(:disabled){transform:translateY(1px)}a{color:var(--blue)}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #4b78ee;outline-offset:3px}
.scenery{position:fixed;inset:0;pointer-events:none;z-index:-1;overflow:hidden}.scenery:before{content:'✿';position:absolute;font-size:150px;left:-45px;top:105px;color:#ffd4cd;opacity:.3}.scenery:after{content:'✧';position:absolute;font-size:160px;right:-22px;top:250px;color:#ffe6a2;opacity:.37}
#app{max-width:1240px;margin:auto;padding:14px 22px 70px}.topbar{max-width:1240px;margin:auto;padding:16px 22px;display:flex;align-items:center;gap:15px;justify-content:space-between}.brand{display:flex;align-items:center;gap:13px;text-decoration:none;color:var(--navy)}.brandmark{height:50px;width:50px;border-radius:17px;background:linear-gradient(145deg,#fd9a68,#ec6768);box-shadow:0 8px 20px #f8a28155;display:grid;place-items:center;color:white;font-weight:900;font-size:26px;border:3px solid white}.brandtitle{font-size:20px;line-height:1.2;font-weight:950;letter-spacing:-.5px}.brandtitle small{font-size:10px;display:block;color:#7c91aa;font-weight:850;letter-spacing:1.3px;margin-top:4px}.navs{display:flex;flex-wrap:wrap;gap:9px}.navs button,.navs label{border:1px solid #eadfce;background:#fffdf7;border-radius:14px;padding:10px 14px;font-size:13px;font-weight:800;color:var(--navy2);min-height:43px}.navs button.active{border-color:#63bda9;background:#ddf8ee;color:#067d6a}.navs .primary-nav{background:#1a67e9;color:white;border-color:#1a67e9}input[type=file]{display:none}
.card{background:rgba(255,254,251,.96);border:1px solid #f0e9dd;box-shadow:var(--shadow);border-radius:var(--radius)}.hero{display:grid;grid-template-columns:1fr .94fr;overflow:hidden;min-height:325px}.hero-content{padding:35px 28px 32px 40px;position:relative;z-index:1}.eyebrow{display:inline-block;border-radius:30px;background:#fff0c8;border:1px solid #ffe2a3;padding:8px 13px;font-size:11px;letter-spacing:1px;font-weight:900;color:#956122}.hero h1{font-size:clamp(35px,4vw,56px);line-height:1.13;letter-spacing:-1.8px;margin:16px 0 12px}.hero h1 span{color:var(--coral)}.hero p{line-height:1.65;color:#687d94;font-size:14px;max-width:520px;margin:0 0 22px}.hero-metrics{display:flex;gap:10px;flex-wrap:wrap}.metric{display:grid;gap:2px;min-width:115px;background:#ffffffcc;border:1px solid #f0e7d9;border-radius:17px;padding:11px 14px}.metric strong{font-size:22px}.metric span{font-size:11px;color:#7a8ca0;font-weight:750}.hero-art{position:relative;display:flex;align-items:end;justify-content:center;min-height:280px;background:linear-gradient(135deg,#cfedff,#e8fbff 50%,#d8f5e0);overflow:hidden}.hero-art .scene-svg{width:107%;max-width:none;transform:translateY(4px)}.float-hello{position:absolute;top:30px;right:25px;background:white;border:2px solid #f6dcb3;border-radius:21px;padding:10px 19px;text-align:center;transform:rotate(5deg);box-shadow:0 13px 28px #23658422}.float-hello strong{display:block;font-size:33px;color:#e86460}.float-hello small{color:#5c7694;font-size:12px}
.toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin:24px 0 15px}.toolbar h2{font-size:24px;margin:0}.toolbar p{margin:5px 0 0;font-size:13px;color:#7a8a9e}.toolbar-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.btn{display:inline-flex;gap:8px;align-items:center;justify-content:center;min-height:44px;border:0;border-radius:15px;padding:11px 17px;font-weight:850;font-size:13px;text-align:center;transition:transform .12s ease,filter .12s ease}.btn:hover:not(:disabled){filter:brightness(.98)}.btn-yellow{background:linear-gradient(110deg,#ffd44f,#ffb955);color:#69400a;box-shadow:0 7px 16px #e9b25640}.btn-blue{background:linear-gradient(115deg,#407cf0,#5168dc);color:white;box-shadow:0 7px 17px #3d6ae72a}.btn-green{background:linear-gradient(115deg,#25c3a4,#1fa5a9);color:white}.btn-outline{background:white;color:#395878;border:1px solid #dae4ec}.btn-plain{background:#fff3db;color:#946a28;border:1px solid #f3e3bb}.btn-sm{padding:8px 12px;min-height:38px;font-size:12px}.filterbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;background:#ffffffa8;border:1px solid #f0e8da;border-radius:24px;padding:13px 16px;margin-bottom:15px}.levels,.units{display:flex;gap:8px;flex-wrap:wrap}.choice{border:1px solid #e1e5e9;background:white;padding:10px 14px;border-radius:14px;font-size:13px;font-weight:800;color:#68809a;min-height:44px}.choice.sel{background:#e8f8f2;border-color:#5fd0b3;color:#087f6d;box-shadow:inset 0 0 0 1px #5fd0b3}.filter-search{border:1px solid #dfe6e8;border-radius:14px;background:white;min-height:44px;padding:11px 13px;color:#365475;width:210px;max-width:100%;font-size:13px}.segment-title{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin:17px 0}.segment-title h3{font-size:19px;margin:0}.segment-title .sub{font-size:12px;color:#8a94a4}.progress-track{height:9px;border-radius:99px;background:#e7eff1;overflow:hidden}.progress-track>span{display:block;height:100%;background:linear-gradient(90deg,#4dc9a3,#62a5ed);border-radius:inherit}
.lesson-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.lesson-card{border:1px solid #ecdfd1;background:#fffefd;border-radius:24px;padding:17px 16px 16px;min-height:252px;display:flex;flex-direction:column;position:relative;box-shadow:0 9px 23px rgba(33,60,93,.055)}.lesson-card.review{background:linear-gradient(160deg,#fff6e0,#fffbf4);border-color:#f7d69f}.lesson-card.ready{border-color:#82cbbd}.lesson-card.done{border-color:#7bc9b0;background:linear-gradient(170deg,#f2fffa,#fff)}.card-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.stamp{border:1px solid #e9e6dd;border-radius:30px;font-size:10px;padding:6px 8px;color:#6d8195;background:#fff;letter-spacing:.3px;font-weight:850;white-space:nowrap}.stamp.review{background:#ffedc7;border-color:#f6dc9b;color:#916827}.stamp.done{background:#d9f8eb;border-color:#98e1cb;color:#148669}.chapter-icon{font-size:34px;line-height:1.15;margin:15px 0 10px}.lesson-card h4{font-size:17px;line-height:1.3;letter-spacing:-.25px;margin:0 0 8px}.lesson-card p{font-size:12px;line-height:1.55;color:#7b8ca0;margin:0 0 16px;min-height:38px}.card-foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:9px}.foot-muted{color:#7c8a99;font-size:11px;font-weight:650}.lesson-card .btn{min-width:99px}.note-bar{display:flex;align-items:flex-start;gap:11px;padding:16px 18px;margin:21px 0;font-size:12px;line-height:1.7;color:#58708b;background:#eff8ff;border:1px solid #cfebfc;border-radius:20px}.note-bar strong{color:#305776}.note-bar.warning{background:#fffaeb;border-color:#f5e6bd;color:#846b38}.empty{border:1px dashed #d4e1e3;border-radius:23px;background:#ffffffa9;padding:26px;color:#718398;text-align:center;font-size:14px}
.library-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.library-pane{padding:22px}.library-pane h3{margin:0 0 8px}.library-pane p{font-size:13px;color:#6f8295;line-height:1.6}.sample-vocab{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}.vocab{background:#f7fbff;border:1px solid #ddeaf5;border-radius:18px;padding:15px;display:flex;align-items:center;gap:12px;justify-content:space-between}.vocab:nth-child(4n+2){background:#fff8e7;border-color:#f4e5c0}.vocab:nth-child(4n+3){background:#f0fbf7;border-color:#ccefe2}.vocab:nth-child(4n){background:#fff2f2;border-color:#f6dddd}.zh{font-family:'Noto Sans SC','Microsoft Yahei','PingFang SC','Noto Sans CJK SC',sans-serif;font-weight:800;letter-spacing:.1px}.vocab .zh{font-size:30px}.vocab small,.vocab .vi{display:block;font-size:12px;color:#677f9b;margin-top:4px}.vocab .vi{color:#344e6d;font-weight:700}.say{border:1px solid #d8e8e8;border-radius:13px;background:white;color:#236d93;min-width:38px;height:38px}.grammar{padding:15px 0;border-bottom:1px solid #ebe9e2}.grammar h4{font-size:14px;margin:0 0 5px}.grammar p{margin:3px 0;color:#6d7f90}.grammar:last-child{border-bottom:0}
.player-shell{max-width:970px;margin:auto}.player-top{display:flex;align-items:center;gap:12px;justify-content:space-between;margin:3px 0 17px}.back-btn{border:1px solid #e6e5de;background:white;border-radius:99px;min-width:44px;height:44px;color:#395c7b}.player-head{flex:1;min-width:0}.player-head strong{display:block;font-size:16px}.player-head small{font-size:12px;color:#8491a2;display:block}.player-step{font-size:12px;background:#fff;border:1px solid #ebe5db;border-radius:50px;padding:10px 12px;font-weight:800;white-space:nowrap}.stages{display:grid;grid-template-columns:repeat(8,1fr);gap:5px;margin-bottom:18px}.stages span{height:9px;background:#e6e5df;border-radius:10px}.stages span.on{background:linear-gradient(90deg,#39cba3,#8fdba8)}.play-main{padding:29px 32px 36px;min-height:480px;overflow:hidden;position:relative}.play-main:before{content:'✦';position:absolute;right:25px;top:12px;color:#ffe6ad;font-size:75px;opacity:.52;pointer-events:none;z-index:0}.play-body{position:relative;z-index:1}.play-main h1{font-size:clamp(27px,3vw,38px);line-height:1.25;letter-spacing:-.6px;margin:7px 0 10px}.intro{color:#7d8fa2;line-height:1.7;font-size:14px;max-width:720px}.line-card{border:1px solid #e0eaf1;background:#f6fbff;border-radius:21px;padding:18px 20px;margin:11px 0}.line-card:nth-of-type(2n){background:#fff9ec;border-color:#f0e8d6}.line-card .zh{font-size:28px}.line-card .py{font-size:15px;color:#4777a3;margin-top:4px}.line-card .vi{font-size:13px;color:#6f8194;margin-top:8px}.line-speaker{color:#8b5c2e;font-size:11px;letter-spacing:1px;font-weight:950}.dialogue-list{display:grid;gap:8px;margin-top:15px}.dialogue-row{display:flex;gap:12px;align-items:flex-start}.dialogue-row .avatar{width:49px;height:49px;background:#edf4fa;border:2px solid #fff;border-radius:18px;display:grid;place-items:center;font-size:25px;flex-shrink:0}.dialogue-row:nth-child(even) .avatar{background:#fff0d1}.dialogue-row .line-card{flex:1;margin:0}.player-vocab{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin-top:17px}.player-vocab .vocab{min-height:113px}.state-msg{margin-top:18px;padding:13px 16px;border-radius:16px;background:#f0fcf6;border:1px solid #bceaca;color:#1e795e;font-size:13px;line-height:1.6}.state-msg.warn{background:#fff8e9;border-color:#f5dfab;color:#916725}.pill{border-radius:50px;padding:7px 11px;font-size:11px;font-weight:900;display:inline-block;background:#e5f7ef;color:#18866e}.chip{border-radius:12px;padding:10px 13px;font-size:14px;background:#f8f9fa;border:1px solid #e0e8eb;font-weight:700;color:#36516e}.chip.active{background:#def8ec;border-color:#5acaa2}.player-bottom{display:flex;align-items:center;justify-content:space-between;gap:13px;flex-wrap:wrap;margin-top:29px}.quiz-options{display:grid;gap:12px;margin-top:16px}.answer{background:white;border:2px solid #dee8ed;border-radius:15px;padding:14px 16px;text-align:left;color:#35516c;font-weight:750;min-height:48px;font-size:15px}.answer.selected{background:#fff0da;border-color:#e5b55a}.answer.correct{background:#e6fbf1;border-color:#40bc88}.answer.wrong{background:#fff0f0;border-color:#ef8282}.builder-tiles{display:flex;flex-wrap:wrap;gap:11px;margin:18px 0}.builder-tiles button{font-size:24px;min-width:65px;border:2px solid #d5e5f5;background:#eaf5ff;border-radius:16px;padding:12px 15px;color:#2f5b8c}.builder-tiles button:disabled{opacity:.35}.built{min-height:75px;border:2px dashed #91d5b4;background:#f4fff8;border-radius:18px;padding:18px;font-size:25px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}.result-badge{text-align:center;margin:17px auto 12px}.result-badge .medal{font-size:78px}.result-badge h1{font-size:36px}.score{font-size:55px;line-height:1.2;font-weight:950;color:#19a281}.next-hint{background:#fff7e6;border:1px solid #f2dfb4;border-radius:18px;padding:16px;font-size:13px;color:#86672c;margin-top:14px}.scene-svg{width:100%;height:auto}.mascot-svg{width:160px;height:auto;filter:drop-shadow(0 10px 14px #5e897a30)}.mascot-side{max-width:260px;min-height:190px;display:grid;place-items:center;background:linear-gradient(160deg,#e4faff,#f7ffef);border-radius:28px}.duo{display:grid;grid-template-columns:1fr 230px;gap:18px;align-items:center}.footer{padding:22px 20px 32px;text-align:center;font-size:12px;line-height:1.8;color:#97a1aa;max-width:980px;margin:auto}.off{display:none!important}.legend{display:flex;gap:9px;flex-wrap:wrap;font-size:11px;color:#8b99a9}.dialogue-toggle{margin-top:15px;display:flex;gap:8px;flex-wrap:wrap}.mini-content{border-radius:17px;background:#fff9eb;border:1px solid #f1e0ba;padding:17px;margin-top:13px;font-size:13px;line-height:1.65}.mini-content p{margin:7px 0}.subtle{font-size:12px;color:#8395a5;line-height:1.5}.quiz-num{font-size:12px;color:#77899c;font-weight:800}.flexline{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.wrap-any{overflow-wrap:anywhere;word-break:break-word}.review-box{padding:18px 20px;background:linear-gradient(125deg,#fff4d8,#fff9e8);border:1px solid #fae3a8;border-radius:20px}.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0}.stats-grid>div{padding:15px;background:#fff;border-radius:16px;border:1px solid #ebe9e0;text-align:center}.stats-grid strong{font-size:24px;display:block}.stats-grid span{font-size:11px;color:#788b9e}
@media(max-width:1000px){.lesson-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.hero{grid-template-columns:1fr .8fr}}
@media(max-width:740px){#app{padding:8px 14px 50px}.topbar{padding:11px 14px;align-items:flex-start}.brandtitle{font-size:15px}.brandmark{width:40px;height:40px;border-radius:13px;font-size:22px}.navs{justify-content:flex-end}.navs button,.navs label{padding:8px 10px;font-size:12px}.navs .tiny-hide{display:none}.hero{grid-template-columns:1fr}.hero-content{padding:28px 22px}.hero-art{height:235px;min-height:235px}.hero h1{font-size:37px}.hero-art .scene-svg{width:95%;max-width:600px}.lesson-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.lesson-card{padding:15px 12px;min-height:244px}.lesson-card h4{font-size:15px}.lesson-card p{font-size:11px}.chapter-icon{font-size:29px}.metric{min-width:88px}.filterbar{display:grid}.filter-search{width:100%}.toolbar h2{font-size:21px}.library-grid{grid-template-columns:1fr}.play-main{padding:23px 18px}.player-head strong{font-size:14px}.player-top{gap:8px}.duo{grid-template-columns:1fr}.mascot-side{min-height:145px;max-width:unset}.mascot-svg{width:130px}.line-card{padding:14px}.line-card .zh{font-size:24px}.player-vocab{grid-template-columns:1fr}.stats-grid{gap:7px}.stats-grid>div{padding:12px 7px}}
@media(max-width:430px){.topbar{flex-direction:column}.navs{width:100%;justify-content:space-between}.brandtitle{font-size:19px}.lesson-grid{grid-template-columns:1fr}.lesson-card{min-height:190px}.lesson-card p{min-height:0}.hero-art{height:210px;min-height:210px}.float-hello strong{font-size:27px}.float-hello{padding:8px 13px}.button-wide-mobile{width:100%}.player-step{font-size:11px}.lesson-card .chapter-icon{margin:8px 0}.navs button{flex:1}.toolbar-actions{width:100%}.toolbar-actions .btn{flex:1}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

/* Production: upcoming lessons appear in the roadmap but are not clickable. */
.lesson-card.upcoming{background:#fffdf9;border-color:#ece5d9}.lesson-card.upcoming .chapter-icon{filter:saturate(.7)}.lesson-card.upcoming .stamp:not(.review){background:#f6f7f7;color:#607285}.lesson-card.upcoming .btn[disabled]{cursor:not-allowed;background:#f5f5f3;border-color:#e7e8e7;color:#768495;opacity:1}.lesson-card.upcoming .btn[disabled]:focus-visible{outline:3px solid #527ee5}