:root{--green:#13853e;--deep:#073e29;--ink:#243c33;--muted:#788b82;--mint:#eff9f0;--line:#dfebe2;--pink:#fff2f2;--blue:#eaf5ff;--radius:22px;font-family:ui-rounded,"PingFang SC","Microsoft YaHei",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:#fff;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,a,input,select{-webkit-tap-highlight-color:transparent}button,select,input{font:inherit}button,a,select{touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:default;opacity:.42}button:focus-visible,a:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #f0bb40;outline-offset:4px}a{color:inherit;text-decoration:none}[hidden]{display:none!important}.page{max-width:1456px;margin:auto;padding:30px 32px 0}.header{display:grid;grid-template-columns:270px 1fr 165px;align-items:center;margin-bottom:30px;gap:20px;min-height:104px}.brand{display:flex;align-items:center;gap:12px;color:var(--deep);font-size:26px;font-weight:850;white-space:nowrap}.brand small{display:block;font-size:14px;letter-spacing:1.4px;line-height:1.7;color:#398347}.melon-logo{font-size:57px;transform:rotate(-12deg);display:inline-block}.heading{text-align:center}.heading h1{font-size:clamp(24px,2.7vw,39px);font-weight:850;letter-spacing:1px;margin:0 0 10px;color:var(--deep)}.heading h1 span{font-size:34px;color:#ffc348;margin-left:8px;display:inline-block;transform:rotate(15deg)}.heading p{font-size:17px;color:#728078;margin:0}.home{font-size:14px;font-weight:650;justify-self:end;color:#557565}.home span{margin-left:7px}.layout{display:grid;grid-template-columns:262px minmax(0,1fr);gap:24px;align-items:start}.sidebar{position:sticky;top:22px}.lesson-menu{background:#f3faf4;border-radius:20px;padding:8px}.menu-heading{padding:20px 16px 18px}.menu-heading small{font-size:13px;font-weight:550;color:#53765f}.menu-heading h2{font-size:20px;font-weight:800;margin:9px 0 5px;color:var(--deep);letter-spacing:-.3px}.menu-heading p{font-size:12px;color:#86a08d;margin:0}.lesson-link{width:100%;display:flex;gap:10px;align-items:center;border:0;border-radius:13px;background:#fff;text-align:left;padding:17px 12px;min-height:68px;color:#52645d;margin-bottom:5px;transition:background .18s,transform .18s}.lesson-link:hover{background:#e7f5e5}.lesson-link.is-active{background:#ddf2dc;color:var(--deep);font-weight:750;box-shadow:inset 3px 0 var(--green)}.lesson-order{display:grid;place-items:center;width:27px;height:27px;border-radius:50%;background:#eaf0ed;font-size:14px;font-weight:750;flex-shrink:0}.lesson-link.is-active .lesson-order{background:var(--green);color:#fff}.lesson-icon{width:22px;height:24px;display:grid;place-items:center;flex-shrink:0;font-size:16px;font-weight:650;color:var(--deep)}.lesson-icon svg,.button svg{width:22px;height:22px;stroke-width:1.9;flex-shrink:0}.lesson-link .lesson-label{font-size:15px;flex:1;white-space:nowrap}.lesson-tick{font-size:15px;color:#92af9c}.lesson-link.is-complete .lesson-tick{color:var(--green)}.reward{margin-top:14px;background:var(--pink);border-radius:20px;padding:22px 15px;display:flex;align-items:center;gap:10px}.reward-melon{font-size:43px;transform:rotate(-16deg)}.reward strong{font-size:14px;color:#8b5555;line-height:1.6;display:block}.reward p{font-size:11px;color:#a07676;margin:5px 0 10px}.progress-track{height:7px;background:#fff;border-radius:9px;width:147px;overflow:hidden}.progress-track>div{width:0;height:100%;background:#73bf6a;border-radius:9px;transition:width .4s}.scope{font-size:11px;color:#90a296;line-height:1.9;padding:2px 12px}.reader{border:1.5px solid #bce5c5;border-radius:20px;padding:22px 24px 16px;box-shadow:0 7px 20px #144c2510;overflow:hidden}.reader-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px}.reader-heading>div:first-child{display:flex;align-items:center;gap:12px}.number{width:33px;height:33px;border-radius:50%;display:grid;place-items:center;background:var(--green);color:white;font-size:18px;font-weight:750}.reader-heading h2{font-size:22px;margin:0;color:var(--deep);font-weight:800}.reader-options{display:flex;align-items:center;gap:18px;font-size:12px;white-space:nowrap}#position{font-size:14px;font-variant-numeric:tabular-nums;color:var(--green);font-weight:650;border-right:1px solid var(--line);padding-right:18px}.switch-label{display:flex;align-items:center;gap:9px;cursor:pointer}.switch-label input{position:absolute;opacity:0;width:1px;height:1px}.switch{height:22px;width:39px;border-radius:16px;background:#b8c3bc;position:relative;transition:background .2s}.switch:after{content:"";position:absolute;top:3px;left:3px;background:white;height:16px;width:16px;border-radius:50%;transition:transform .2s}.switch-label input:checked+.switch{background:var(--green)}.switch-label input:checked+.switch:after{transform:translateX(17px)}.switch-label input:focus-visible+.switch{outline:3px solid #f0bb40;outline-offset:3px}.scene{height:225px;background:#f0faef;border-radius:14px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.sprite{width:225px;height:225px;background-image:url('./art.jpg');background-size:300% 300%;background-repeat:no-repeat;mix-blend-mode:multiply}.scene-emojis{font-size:86px;display:flex;align-items:center;justify-content:center;gap:12px;letter-spacing:8px}.scene-emojis.family-five{font-size:59px;letter-spacing:0}.scene-letter{position:absolute;top:22px;left:25px;color:#67a46c;font-size:30px;font-weight:700;letter-spacing:3px;opacity:.8}.scene-caption{position:absolute;bottom:16px;right:20px;font-size:12px;letter-spacing:1px;color:#75a17f}.sentence-area{text-align:center;min-height:151px;display:flex;flex-direction:column;justify-content:center;padding:22px 4px 10px}.sentence{font-family:ui-rounded,"Trebuchet MS",-apple-system,BlinkMacSystemFont,sans-serif;font-size:clamp(30px,3.4vw,49px);font-weight:750;line-height:1.5;color:var(--deep);letter-spacing:-.8px;overflow-wrap:break-word}.sentence.long{font-size:clamp(25px,2.7vw,36px);line-height:1.6}.word{font:inherit;color:inherit;background:none;border:0;border-bottom:3px solid transparent;padding:0 1px;margin:0 2px;line-height:1.35;border-radius:4px;transition:color .1s,background .1s,transform .1s;letter-spacing:inherit}.word:hover{background:#edf7e9}.word.focus-word{color:#329120}.word.is-speaking{color:#d95356;border-bottom-color:#e86868;background:#fff2f0;transform:translateY(-2px)}.translation{font-size:17px;color:#65746b;margin:9px 0 0;line-height:1.6;min-height:27px}.translation-hidden .translation{visibility:hidden}.speaker{display:inline-block;font-size:12px;color:#698d75;margin-bottom:10px}.sound-status{min-height:35px;display:flex;align-items:center;justify-content:center;gap:10px;margin:3px 0 13px;color:#82948a}.sound-status>span:first-child{font-size:19px;color:var(--green)}#audioStatus{font-size:12px;max-width:380px;line-height:1.5}.waveform{height:24px;display:flex;gap:3px;align-items:center;width:109px;flex-shrink:0}.waveform i{width:3px;border-radius:2px;background:#b8d8b8;height:var(--h)}.is-playing .waveform i{background:var(--green);animation:wave .65s ease-in-out infinite alternate;animation-delay:var(--d)}.is-recording .waveform i{background:#e36a78;animation:wave .65s ease-in-out infinite alternate;animation-delay:var(--d)}@keyframes wave{to{transform:scaleY(.35)}}.primary-controls{display:flex;justify-content:center;gap:14px}.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:1px solid transparent;border-radius:13px;min-height:52px;padding:10px 22px;font-size:17px;font-weight:700;transition:background .15s,transform .15s,box-shadow .15s}.button:hover:not(:disabled){transform:translateY(-1px)}.primary-controls .button{flex:1;max-width:236px;min-height:59px}.primary{color:#fff;background:var(--green);box-shadow:0 4px 8px #159a2520}.primary:hover{background:#0c7434}.record{background:#fff;border-color:#62a874;color:#278449}.record.active{background:#fff1f1;color:#c84753;border-color:#e99ca2}.continuous{color:#2687b5;background:#edf7ff;border-color:#c4e3f8}.continuous.active{background:#d3ecfb;border-color:#86c3e8}.support-controls{display:flex;align-items:center;justify-content:center;gap:17px;flex-wrap:wrap;margin-top:14px;color:#98a69e;font-size:11px}.speed-label{display:flex;align-items:center;gap:7px;color:#788a7e}.speed-label select{border:0;background:#f3f7f3;color:#567461;border-radius:6px;padding:4px;font-size:11px;cursor:pointer}.reading-tip{display:flex;gap:7px;align-items:center;justify-content:center;color:#87958d;min-height:38px;margin-top:7px}.reading-tip>span{font-size:13px;color:#d3ab55}.reading-tip p{font-size:12px;line-height:1.6;margin:7px 0;text-align:center}.reader-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:8px;padding-top:14px;border-top:1px solid #f0f4f0}.reader-footer .button{font-size:13px;min-height:40px;min-width:116px;padding:8px 15px;border-radius:10px}.subtle{color:#78887f;background:#f6f8f6;border-color:#e7ece8}.next{color:var(--deep);background:#e7f5e7;border-color:#d6edd7}.mastered{border:0;background:none;color:#6b8b74;font-size:13px;padding:10px 12px;line-height:1.5}.mastered[aria-pressed="true"]{color:var(--green);background:#e9f7e5;border-radius:9px}.recording-panel{display:flex;align-items:center;gap:12px;border-radius:12px;background:#fff4f5;padding:10px 14px;margin-top:16px;font-size:12px;color:#995e68}.recording-panel audio{height:32px;flex:1;min-width:50px}.recording-panel a{text-decoration:underline;text-underline-offset:3px;white-space:nowrap}.sentence-list{margin-top:23px}.list-heading{display:flex;justify-content:space-between;gap:15px;align-items:center;padding:0 4px 12px}.list-heading h2{margin:0;font-size:17px;color:var(--deep)}.list-heading p{font-size:12px;line-height:1.7;color:#91a096;margin:6px 0 0}.source{font-size:11px;color:#8da093;white-space:nowrap}.sentence-list ol{padding:0;margin:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:8px}.line-button{display:flex;align-items:center;text-align:left;gap:12px;background:#fff;border:1px solid #e6ede6;border-radius:12px;padding:13px 15px;width:100%;height:100%;color:#627268}.line-button:hover{background:#f5faf3}.line-button.is-active{border-color:#bedfbc;background:#eff9ed}.line-number{font-size:12px;font-weight:700;color:#84a088;background:#f1f6f0;border-radius:50%;display:grid;place-items:center;flex-shrink:0;width:26px;height:26px}.line-button.is-active .line-number{background:#d4ecd0;color:var(--green)}.line-content{flex:1}.line-en{font-size:14px;line-height:1.55;display:block;color:#365541;font-weight:550}.line-zh{display:block;font-size:11px;color:#94a297;line-height:1.7;margin-top:3px}.translation-hidden .line-zh{display:none}.line-check{color:var(--green);font-size:14px}.parent-notes{margin-top:24px;border-top:1px dashed #dce8dc;padding:17px 4px 0;color:#8b9b8e;font-size:11px;line-height:1.9}.parent-notes summary{cursor:pointer;font-size:12px;width:fit-content;color:#7c9481}.parent-notes p{max-width:800px}.page-footer{padding:24px 0;text-align:center;font-size:11px;color:#a3b1a5}.page-footer span{margin-left:6px}.word-popover{position:fixed;z-index:20;width:220px;padding:20px;background:#fff;border:1px solid #d5e6d3;border-radius:16px;box-shadow:0 14px 42px #14382925}.word-popover strong{font-size:27px;color:var(--deep);overflow-wrap:anywhere}.word-popover p{font-size:13px;color:#77897a;line-height:1.6;margin:8px 0 14px}.word-play{padding:8px 15px;border:0;border-radius:8px;background:#e9f6e5;color:var(--green);font-size:13px;font-weight:600}.close-word{position:absolute;top:8px;right:10px;font-size:20px;color:#8a9d8f;border:0;background:none}.is-mastering .reward-melon{animation:pop .5s ease}.is-mastering .mastered{animation:pop .4s ease}@keyframes pop{50%{transform:rotate(-10deg) scale(1.2)}}
@media(min-width:1600px){.page{padding-top:42px}.scene{height:260px}.sprite{width:260px;height:260px}.sentence-area{min-height:166px}.reader{padding:25px 30px 18px}.header{margin-bottom:36px}}
@media(max-width:1120px){.page{padding:22px 23px 0}.header{grid-template-columns:230px 1fr 110px;gap:10px;margin-bottom:24px;min-height:83px}.brand{font-size:22px;gap:8px}.melon-logo{font-size:46px}.heading h1{font-size:27px}.heading h1 span{display:none}.heading p{font-size:14px}.home{font-size:12px}.layout{grid-template-columns:228px minmax(0,1fr);gap:18px}.lesson-link{padding:14px 10px;gap:8px;min-height:63px}.lesson-link .lesson-label{font-size:13px}.lesson-icon{width:18px}.lesson-icon svg{width:18px}.menu-heading{padding:17px 12px}.menu-heading h2{font-size:18px}.reward{padding:18px 12px}.reward strong{font-size:12px}.progress-track{width:128px}.reader{padding:18px 20px 14px}.scene{height:195px}.sprite{width:195px;height:195px}.reader-heading h2{font-size:19px}.reader-options{gap:12px;font-size:11px}#position{padding-right:12px;font-size:12px}.primary-controls{gap:10px}.primary-controls .button{padding:10px;font-size:15px;gap:6px;min-height:53px}.sentence-area{min-height:142px}.sentence{font-size:39px}.sentence.long{font-size:28px}.source{font-size:10px}.list-heading p{font-size:11px}.reward-melon{font-size:36px}.line-en{font-size:13px}.sound-status{flex-wrap:wrap;gap:6px}.sound-status #audioStatus{font-size:11px}}
@media(max-width:780px){.page{padding:16px 16px 0}.header{grid-template-columns:1fr auto;gap:16px;margin-bottom:22px}.brand{font-size:21px}.brand small{font-size:11px;letter-spacing:1px}.melon-logo{font-size:39px}.home{grid-column:2;grid-row:1}.heading{grid-column:1/-1;grid-row:2;padding-top:5px}.heading h1{font-size:27px;letter-spacing:0;margin-bottom:8px}.heading p{font-size:13px}.layout{display:block}.sidebar{position:static}.lesson-menu{background:none;padding:0;overflow:hidden;border-radius:0}.menu-heading{display:none}#lessons{display:flex;gap:7px;overflow:auto;padding:0 0 12px;scrollbar-width:thin;scrollbar-color:#cfe4d0 transparent}.lesson-link{width:auto;min-width:155px;min-height:46px;padding:9px 12px;border:1px solid #e1ede1;gap:7px;margin:0}.lesson-link .lesson-label{font-size:12px}.lesson-order{width:22px;height:22px;font-size:11px}.lesson-icon,.lesson-tick{display:none}.lesson-link.is-active{box-shadow:none;background:#e5f5df;border-color:#b8dcb1}.reward{padding:11px 14px;border-radius:12px;margin:1px 0 17px;gap:10px}.reward-melon{font-size:28px}.reward>div{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;flex-wrap:wrap}.reward strong{font-size:11px}.reward p{font-size:10px;margin:0}.progress-track{width:100%;height:4px}.scope{display:none}.reader{padding:15px 15px 13px;border-radius:17px}.reader-heading{margin-bottom:13px;gap:8px}.reader-heading>div:first-child{gap:8px}.reader-heading h2{font-size:17px}.number{width:26px;height:26px;font-size:14px}.reader-options{gap:9px;font-size:10px}#position{font-size:11px;padding-right:9px}.switch-label{gap:5px}.switch{width:32px;height:19px}.switch:after{width:13px;height:13px}.switch-label input:checked+.switch:after{transform:translateX(13px)}.scene{height:185px}.sprite{width:185px;height:185px}.scene-emojis{font-size:65px;gap:0;letter-spacing:4px}.scene-emojis.family-five{font-size:45px}.scene-caption{font-size:10px;bottom:12px;right:13px}.scene-letter{font-size:26px;top:15px;left:18px}.sentence-area{min-height:145px;padding:18px 1px 9px}.sentence{font-size:36px;letter-spacing:-.8px}.sentence.long{font-size:25px;line-height:1.6}.translation{font-size:14px;min-height:23px;line-height:1.7}.primary-controls{gap:7px}.primary-controls .button{font-size:13px;min-height:49px;border-radius:10px;padding:9px 5px;gap:5px}.primary-controls .button svg{width:17px;height:17px}.sound-status{margin:3px 0 13px;min-height:38px;gap:7px}.waveform{width:86px;gap:2px}.waveform i{width:2.5px}#audioStatus{font-size:10px!important;max-width:200px}.support-controls{gap:8px;margin-top:13px;font-size:9px}.support-controls>span{font-size:9px}.speed-label,.speed-label select{font-size:10px}.reading-tip p{font-size:10px;margin:6px 0}.reading-tip{min-height:33px;margin-top:6px}.reader-footer{gap:5px;margin-top:3px;padding-top:11px}.reader-footer .button{font-size:11px;min-width:86px;min-height:36px;padding:7px 10px}.mastered{font-size:11px;padding:8px}.sentence-list{margin-top:22px}.list-heading{align-items:flex-start;gap:10px}.list-heading h2{font-size:16px}.list-heading p{font-size:10px;max-width:220px}.source{font-size:9px;padding-top:4px}.sentence-list ol{grid-template-columns:1fr}.line-button{padding:12px}.line-en{font-size:14px}.line-zh{font-size:10px}.recording-panel{padding:9px;gap:7px;font-size:10px;flex-wrap:wrap}.recording-panel audio{min-width:180px;max-width:100%;height:32px}.recording-panel>span{display:none}.parent-notes{font-size:10px}.page-footer{font-size:10px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.sprite{-webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 52%,#000 52%,transparent 80%);mask-image:radial-gradient(ellipse 70% 70% at 50% 52%,#000 52%,transparent 80%)}
@media(min-width:1121px){.page{max-width:1505px;padding:24px 27px 0}.header{grid-template-columns:325px 1fr 165px;min-height:88px;margin-bottom:22px;gap:18px}.heading h1{font-size:44px;letter-spacing:0}.layout{grid-template-columns:clamp(270px,22vw,325px) minmax(0,1fr);gap:18px}.brand{font-size:28px}.lesson-link .lesson-label{font-size:17px}.lesson-link{min-height:68px}.menu-heading h2{font-size:23px}.menu-heading small{font-size:14px}.sentence{font-size:58px}.sentence.long{font-size:37px}.scene{height:245px}.sprite{width:245px;height:245px}.sentence-area{min-height:166px}.primary-controls .button{max-width:280px;min-height:65px;font-size:20px}.reader-heading h2{font-size:25px}.translation{font-size:20px}.reader{padding-top:23px}.reward strong{font-size:15px}.reward p{font-size:12px}.progress-track{width:210px}.reward-melon{font-size:47px}}
@media(min-width:1121px) and (max-width:1350px){.header{grid-template-columns:270px 1fr 140px}.heading h1{font-size:35px}.brand{font-size:24px}.layout{grid-template-columns:270px minmax(0,1fr)}.scene{height:220px}.sprite{width:220px;height:220px}.sentence{font-size:49px}.sentence.long{font-size:31px}.primary-controls .button{font-size:17px}.lesson-link .lesson-label{font-size:15px}.menu-heading h2{font-size:20px}.progress-track{width:160px}.reward strong{font-size:13px}}