:root{font-family:'DM Sans','Noto Sans SC',system-ui,sans-serif;color:#243334;background:#f6f4ec;font-synthesis:none}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;-webkit-tap-highlight-color:transparent}button,input{font:inherit}button{cursor:pointer}button:focus-visible,label:focus-within{outline:3px solid #137c77;outline-offset:3px}button:disabled{cursor:not-allowed}
.app-shell{max-width:1440px;margin:0 auto;min-height:100vh;padding:0 clamp(18px,3.8vw,56px) 40px}.topbar{height:82px;display:flex;align-items:center;justify-content:space-between;gap:16px}.logo{border:0;background:none;font-size:19px;font-weight:800;color:#1d655f;display:flex;align-items:center;gap:9px;padding:8px 0;white-space:nowrap}.logo span{display:grid;place-items:center;width:33px;height:33px;border-radius:50%;background:#177e79;color:white}.top-title{font-weight:700;color:#6e817c}.top-spacer{width:98px}.icon-button{border:1px solid #d0ddd6;border-radius:999px;background:#fff;padding:10px 17px;color:#276c65;font-weight:700;white-space:nowrap}.eyebrow{margin:0 0 14px;color:#bd714b;letter-spacing:.12em;font-size:12px;font-weight:800}.primary,.secondary{border:0;border-radius:18px;padding:15px 22px;font-weight:800;min-height:52px}.primary{background:#187d76;color:white;box-shadow:0 7px 0 #0f615a;transition:transform .15s,box-shadow .15s}.primary:hover{transform:translateY(2px);box-shadow:0 5px 0 #0f615a}.primary:active{transform:translateY(6px);box-shadow:0 1px 0 #0f615a}.secondary{background:#fff;color:#276f69;border:1px solid #bed7cf}.hero{min-height:430px;background:#d8eee5;border-radius:34px;position:relative;overflow:hidden;display:flex;align-items:center;padding:55px clamp(28px,6vw,86px)}.hero:before{content:'';position:absolute;width:410px;height:410px;border-radius:50%;background:#badfd2;right:11%;top:54px}.hero:after{content:'';position:absolute;width:250px;height:250px;border-radius:50%;background:#e9f5ef;right:-55px;bottom:-90px}.hero-copy{position:relative;z-index:2}.hero h1{font-size:clamp(39px,5vw,70px);line-height:1.18;letter-spacing:-.05em;margin:0 0 18px}.hero-copy>p:not(.eyebrow){font-size:20px;color:#526b63}.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}.hero-art{position:absolute;right:7%;top:0;bottom:0;width:40%;z-index:1}.orb{position:absolute;display:grid;place-items:center;border-radius:50%;font-weight:800;box-shadow:0 18px 35px #2e786c25}.orb-one{width:178px;height:178px;background:#f9b486;color:#7b4c46;font-size:90px;top:55px;right:10%}.orb-two{width:132px;height:132px;background:#f6e0a7;color:#9c6c44;font-size:68px;bottom:39px;left:8%}.orb-three{width:95px;height:95px;background:#8cc6b5;color:#276e68;font-size:59px;bottom:41px;right:5%}.home-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px;margin-top:23px}.summary-card{display:flex;text-align:left;align-items:center;gap:14px;min-height:116px;background:#fff;border:1px solid #e3e7dd;border-radius:25px;padding:19px;color:#243334}.summary-card:hover,.chapter-tile:hover{border-color:#76b5a6;transform:translateY(-2px)}.summary-icon{width:54px;height:54px;flex:none;border-radius:18px;background:#e1f1eb;color:#267c6d;display:grid;place-items:center;font-size:27px}.summary-card strong,.summary-card small{display:block}.summary-card strong{font-size:18px;margin-bottom:5px}.summary-card small{font-size:13px;line-height:1.4;color:#688078}.summary-number,.arrow{margin-left:auto;font-size:27px;font-weight:800;color:#4ca297}.home-footnote{text-align:center;color:#7c8983;margin:24px 0}.page-heading{padding:22px 0 30px}.page-heading h1{font-size:clamp(30px,4vw,48px);margin:0 0 8px}.page-heading>p:last-child{color:#718077;margin:0}.stage-section{margin-bottom:42px}.stage-heading{display:flex;align-items:end;justify-content:space-between;border-bottom:1px solid #d7e3d9;margin-bottom:18px;padding-bottom:15px}.stage-heading h2{margin:0;font-size:27px}.stage-heading span{font-weight:700;color:#778780}.chapter-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.chapter-tile{min-height:190px;background:#fff;border:1px solid #e1e8de;border-radius:24px;display:flex;flex-direction:column;text-align:left;padding:21px;color:inherit;transition:transform .15s,border-color .15s}.chapter-tile.mastered{background:#eaf6ee;border-color:#abd3b8}.tile-top{display:flex;justify-content:space-between;align-items:center}.tile-number{font-size:12px;letter-spacing:.14em;color:#bd815c;font-weight:800}.tile-status{font-size:12px;color:#589083;background:#e7f3ee;border-radius:99px;padding:5px 9px}.chapter-tile strong{font-size:22px;line-height:1.25;margin-top:22px}.chapter-tile small{color:#788780;margin-top:7px}.tile-end{font-size:13px;color:#267e74;font-weight:800;margin-top:auto;padding-top:18px}.maintenance{padding:10px 0 30px}.maintenance button,.text-button,.quiet-back{background:none;border:0;color:#6d877f;text-decoration:underline;padding:8px}.central-card,.settings-card{max-width:720px;margin:45px auto;background:white;border:1px solid #e3e8df;border-radius:30px;padding:clamp(30px,5vw,62px);text-align:center}.central-card h1,.settings-card h1{font-size:clamp(30px,4vw,47px);margin:0 0 16px}.central-card p:not(.eyebrow),.settings-card p{font-size:18px;line-height:1.65;color:#62746d}.start-illustration{font-size:48px;color:#b88a6a;margin:38px auto}.start-illustration span{display:inline-grid;place-items:center;background:#d9eee6;color:#2b716c;width:66px;height:66px;border-radius:18px;font-size:39px}.lesson-layout{display:grid;grid-template-columns:minmax(0,2fr) minmax(230px,1fr);gap:25px;margin-top:18px}.lesson-main{background:white;border:1px solid #e6e9df;border-radius:30px;padding:clamp(26px,4.5vw,58px)}.lesson-main h1{font-size:clamp(32px,4.1vw,53px);margin:0 0 7px}.lesson-target{color:#aa724f;font-weight:800;font-size:18px}.lesson-explain{font-size:21px;line-height:1.65;max-width:780px}.narration{background:#eef7f1;border-radius:20px;padding:17px;display:flex;align-items:center;gap:15px;margin:25px 0;flex-wrap:wrap}.narration span{color:#627a6d;font-size:14px}.audio-button{background:#f3e7d2;color:#624a33;border:1px solid #e2cfae;border-radius:16px;padding:12px 19px;font-weight:800;min-height:50px}.audio-button:hover{background:#f7dcae}.mouth-grid{display:flex;gap:14px;margin:30px 0;flex-wrap:wrap}.mouth-card{flex:1;min-width:200px;border:2px solid var(--vowel);border-radius:18px;padding:17px;background:#fffdf9;display:grid;grid-template-columns:auto 1fr;column-gap:15px;align-items:center}.mouth-card span{width:55px;height:55px;border-radius:15px;background:var(--vowel);color:white;font-size:38px;font-weight:800;display:grid;place-items:center}.mouth-card strong{font-size:24px}.mouth-card small{grid-column:1/-1;margin-top:10px;font-size:15px;color:#536760}.example-grid{display:flex;flex-wrap:wrap;gap:10px}.lesson-main h2{font-size:23px;margin:28px 0 14px}.lesson-tip{padding:17px 20px;margin:26px 0;border-left:4px solid #e8b570;background:#fff9eb;border-radius:8px;color:#6b624d}.large{width:100%}.lesson-aside{border-radius:30px;background:#d2e7e4;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:28px;min-height:350px;color:#2a655f}.sound-line{display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:center}.sound-line span{background:white;border-radius:15px;display:grid;place-items:center;width:55px;height:65px;font-size:36px;font-weight:800}.sound-line .vowel-slot{background:#f9cf99}.sound-line b{font-size:30px}.lesson-aside p{font-size:31px;line-height:1.4;font-weight:800}.question-wrap{max-width:870px;margin:17px auto 0}.question-progress{display:flex;justify-content:space-between;font-weight:800;color:#5b7770}.progress-track{height:9px;border-radius:99px;background:#dce8df;margin:12px 0 19px;overflow:hidden}.progress-track span{height:100%;background:#5aad96;display:block;border-radius:99px;transition:width .2s}.question-card{min-height:540px;background:#fff;border:1px solid #e2e8df;border-radius:30px;padding:clamp(28px,5vw,54px);text-align:center}.question-card h1{font-size:clamp(26px,3.7vw,39px);margin:0 0 20px}.sound-track{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;color:#648077}.sound-track span{background:#f0f5ed;border-radius:99px;padding:7px 13px;font-size:13px;font-weight:700}.main-audio{margin:33px 0}.main-audio .audio-button{background:#187d76;color:white;border:0;border-radius:25px;min-width:240px;min-height:68px;font-size:20px;box-shadow:0 6px 0 #0e655e}.answer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:630px;margin:0 auto}.answer-grid.two-choices{grid-template-columns:repeat(2,1fr)}.answer-button,.letter-tile{background:#fff9ef;color:#304845;border:2px solid #e4d8c5;border-radius:18px;min-height:80px;font-size:31px;font-weight:800}.answer-button:hover,.letter-tile:hover{border-color:#48a498;background:#edf7f0}.answer-button.correct{background:#dff5e3;border-color:#3eaa74}.answer-button.incorrect{background:#fff0e9;border-color:#df846d}.word-slots{display:flex;justify-content:center;gap:11px;margin:5px auto 24px}.word-slot{width:77px;height:86px;background:#edf5ee;border-bottom:5px solid #7cae9b;border-radius:15px;display:grid;place-items:center;font-size:45px;font-weight:800;color:#a6bcb0}.word-slot.filled{color:#285f58;background:#dff3e7}.letter-bank{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}.letter-tile{min-width:78px}.letter-tile.used{opacity:.4;pointer-events:none}.build-actions{margin:14px auto}.pair-clue{color:#697f77}.pair-clue strong{font-size:22px;color:#2a6660}.guide-hint{max-width:540px;margin:24px auto 0;background:#f6f7e9;color:#777258;padding:11px;border-radius:13px}.feedback{min-height:24px;margin-top:18px;font-weight:800;color:#be6753}.feedback.correct{color:#25826b}.quiet-back{display:block;margin:16px auto}.result-card{max-width:740px;margin:35px auto;background:#fff;border:1px solid #e4e7dc;border-radius:32px;padding:45px;text-align:center}.result-medal{width:98px;height:98px;margin:0 auto 20px;border-radius:50%;display:grid;place-items:center;background:#f7dfa4;color:#916b3b;font-size:55px}.result-card h1{font-size:clamp(31px,4vw,48px);margin:0 0 16px}.result-card>p:not(.eyebrow){color:#62776f;font-size:18px;line-height:1.6}.result-card>p strong{color:#217a70}.result-note{background:#eef7f1;border-radius:18px;padding:17px;color:#4f6e61;margin:26px auto;line-height:1.6}.due-note{font-size:14px!important}.result-actions,.settings-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:28px}.settings-card{text-align:left}.settings-card p{font-size:16px}.file-label{display:grid;place-items:center;cursor:pointer}.file-label input{position:absolute;width:1px;height:1px;opacity:0}.settings-card details{margin-top:50px;border-top:1px solid #e2e7dc;padding-top:20px;color:#806e68}.settings-card summary{cursor:pointer}.danger{color:#a33f32;background:#fff5f2;border:1px solid #e7bbb0;border-radius:12px;padding:10px 16px}#settings-message{color:#217a70;font-weight:800}
@media(max-width:900px){.home-grid{grid-template-columns:1fr}.summary-card{min-height:90px}.chapter-grid{grid-template-columns:repeat(2,1fr)}.lesson-layout{grid-template-columns:1fr}.lesson-aside{display:none}.hero-art{opacity:.45;right:-10%;width:55%}.hero-copy{max-width:75%}}
@media(max-width:600px){.app-shell{padding:0 14px 25px}.topbar{height:66px}.logo{font-size:15px}.top-title{display:none}.hero{min-height:440px;padding:28px}.hero-copy{max-width:100%}.hero-art{opacity:.3;width:75%}.hero h1{font-size:40px}.hero-actions{display:grid}.chapter-grid{grid-template-columns:1fr}.chapter-tile{min-height:155px}.lesson-main,.question-card,.result-card{padding:25px}.question-card{min-height:500px}.answer-grid{grid-template-columns:repeat(2,1fr)}.answer-grid.two-choices{grid-template-columns:repeat(2,1fr)}.answer-button{font-size:25px}.word-slot{width:62px;height:72px;font-size:35px}.letter-tile{min-width:62px;min-height:70px}.narration{display:block}.narration span{display:block;margin-top:9px}}
.mouth-card .audio-button{grid-column:1/-1;margin-top:13px;width:100%;background:var(--vowel);border:0;color:#fff}
.mouth-card .audio-button:hover{filter:brightness(.94)}
.read-word{display:inline-block;margin:28px auto 7px;padding:14px 34px;border-radius:20px;background:#e6f2e9;color:#285f58;font-size:clamp(48px,8vw,72px);font-weight:800;letter-spacing:.08em}.read-help{color:#617c71;margin:8px auto 22px;line-height:1.5}.sound-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;max-width:590px;margin:auto}.sound-choice{display:grid;gap:8px;padding:14px;border:1px solid #e2e8df;border-radius:20px;background:#fafcf8}.sound-choice .answer-button{min-height:60px;font-size:19px}.sound-choice .audio-button{background:#e2f1eb;color:#276d65;border-color:#b8d8cd}
.skip-guide{display:block;margin:12px auto 0}
.chapter-tile.completed{border-color:#8ac7b4}.chapter-tile.completed .tile-status{background:#d7efe2;color:#1a7161}.chapter-tile.mastered{background:#eaf6ee;border-color:#65b997}
@media(max-width:600px){.sound-choices{gap:8px}.sound-choice{padding:8px}.sound-choice .audio-button{font-size:13px;padding:8px}.sound-choice .answer-button{font-size:16px}}