@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800&display=swap');
:root{--ink:#183e36;--green:#176558;--orange:#df714b;--paper:#faf8f1;--muted:#61716b;--line:#e3e6dc;--yellow:#f8cd62;--shadow:0 14px 40px #274c3910}*{box-sizing:border-box}body{margin:0;color:var(--ink);background:var(--paper);font-family:'Be Vietnam Pro',Arial,sans-serif;font-size:16px;line-height:1.6}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:default;opacity:.65}button,a{touch-action:manipulation}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #dc7136;outline-offset:4px}button{color:inherit}a{color:var(--green)}header{background:#faf8f1ed;border-bottom:1px solid var(--line)}.nav{max-width:1240px;margin:auto;padding:20px 30px;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:flex;align-items:center;gap:12px;color:var(--ink);font-size:21px;font-weight:800;text-decoration:none;line-height:1.2}.brand small{font-size:9px;font-weight:600;letter-spacing:2px;display:block;margin-top:7px}.brand-icon{background:var(--green);color:white;border-radius:13px 13px 13px 3px;width:45px;height:45px;display:grid;place-content:center;position:relative;font-size:29px;font-style:italic}.brand-icon span{position:absolute;font-size:13px;right:5px;bottom:5px;color:var(--yellow)}nav{display:flex;align-items:center;gap:25px}.nav-link{border:0;background:none;font-size:14px;padding:8px 0;font-weight:600}.star-total{background:#fff0bd;border:1px solid #efd487;border-radius:24px;padding:7px 18px;font-weight:800;color:#765115;white-space:nowrap}main{max-width:1240px;margin:auto;padding:30px;min-height:65vh}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(34px,4.3vw,57px);letter-spacing:-2px;line-height:1.16;font-weight:800;margin-bottom:20px}h2{font-size:30px;letter-spacing:-1px;line-height:1.3}h3{line-height:1.35}p{color:var(--muted)}.eyebrow{color:var(--green);font-size:11px;font-weight:800;letter-spacing:2px;text-transform:uppercase}.hero{min-height:420px;border-radius:30px;background:#fff9ed url('assets/explorer.png') center/cover no-repeat;position:relative;overflow:hidden;display:flex;align-items:center;padding:45px;margin-bottom:25px;border:1px solid #eee9db}.hero-copy{width:49%;z-index:1}.hero-copy h1 em{font-style:normal;color:var(--green)}.hero-copy p{max-width:390px;font-size:15px}.hero-sticker{position:absolute;right:25px;bottom:22px;background:#fffaf0e8;transform:rotate(-5deg);padding:13px 21px;border-radius:14px;box-shadow:var(--shadow);font-size:12px;font-weight:700;backdrop-filter:blur(8px)}.hero-sticker strong{font-size:23px;display:block;color:var(--orange)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--green);color:white;border:1px solid var(--green);border-radius:14px;font-weight:700;font-size:14px;padding:13px 21px;min-height:49px;text-decoration:none;transition:transform .18s,box-shadow .18s}.btn:hover{transform:translateY(-2px);box-shadow:0 6px 18px #17655825}.btn.light{background:white;color:var(--ink);border-color:var(--line)}.btn.peach{background:#ffeddd;color:#935333;border-color:#f2d3bb}.btn.small{padding:8px 15px;min-height:40px;font-size:13px}.btn.wide{width:100%}.actions{display:flex;gap:12px;flex-wrap:wrap}.tiny{font-size:12px;color:var(--muted)}.hero .tiny{margin:12px 0 0}.overview{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;border:1px solid var(--line);border-radius:20px;background:white;padding:21px 28px;margin-bottom:42px}.stat{display:flex;gap:15px;align-items:center;padding:0 22px;border-right:1px solid var(--line)}.stat:first-child{padding-left:0}.stat:last-child{border:0}.stat b{font-size:29px;letter-spacing:-1px}.stat span{font-size:12px;color:var(--muted)}.stat strong{display:block;color:var(--ink);font-size:13px}.section-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:22px}.section-head h2{margin:6px 0 0}.section-head p{font-size:13px;margin-bottom:4px}.topics{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}.topic{background:#fff;border:1px solid var(--line);border-radius:23px;overflow:hidden;transition:transform .2s,box-shadow .2s}.topic:hover{transform:translateY(-5px);box-shadow:var(--shadow)}.topic-art{height:140px;background:var(--tint);display:grid;place-items:center;position:relative;overflow:hidden}.topic-art:before{content:'';position:absolute;width:126px;height:126px;border-radius:50%;background:#ffffff70;right:-20px;top:-18px}.topic-art img{width:95px;height:95px;transform:rotate(-7deg);z-index:1}.chapter{position:absolute;top:13px;left:15px;font-size:10px;font-weight:700;letter-spacing:1px;z-index:2}.topic-body{padding:18px}.topic-body h3{font-size:17px;margin-bottom:5px}.topic-body .en{font-size:11px;color:var(--muted);margin-bottom:17px}.topic-progress{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-bottom:7px}.bar{height:6px;background:#eceee6;border-radius:5px;overflow:hidden}.bar span{height:100%;display:block;background:var(--green);transition:width .3s}.topic .btn{margin-top:17px;font-size:12px;padding:9px 10px;min-height:42px}.review-band{margin:29px 0 38px;border:1px solid #e3dccb;border-radius:22px;background:#f2eddf;padding:24px 28px;display:flex;justify-content:space-between;align-items:center;gap:20px}.review-band h3{margin-bottom:5px;font-size:19px}.review-band p{font-size:13px;margin:0}.how{border-top:1px solid var(--line);padding-top:28px;display:grid;grid-template-columns:1.1fr repeat(4,1fr);gap:20px;margin-bottom:15px}.how h3{font-size:19px}.how b{display:block;font-size:13px;margin:5px 0}.how p{font-size:12px}.step-icon{font-size:23px}.page-top{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:28px}.back{border:0;background:none;padding:10px 0;color:var(--muted);font-size:13px}.topic-title h1{font-size:40px;margin:12px 0}.topic-title p{max-width:600px}.topic-title{margin:20px 0 30px}.vocab-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.vocab-card{background:white;border:1px solid var(--line);border-radius:22px;overflow:hidden;text-align:center}.vocab-image{height:150px;background:var(--tint);display:grid;place-items:center;position:relative}.vocab-image img{width:110px;height:110px}.vocab-image .known{position:absolute;right:12px;top:12px;border-radius:20px;background:white;padding:3px 10px;font-size:10px;color:var(--green)}.vocab-text{padding:18px 13px}.vocab-text h3{font-size:18px;margin-bottom:3px}.vocab-text p{font-size:12px;min-height:21px;margin-bottom:12px}.vocab-text button{font-size:12px}.word-count{background:white;border:1px solid var(--line);border-radius:20px;padding:8px 16px;font-size:12px}.practice-box{background:var(--green);color:white;border-radius:22px;padding:28px;margin:30px 0;display:flex;justify-content:space-between;align-items:center;gap:25px}.practice-box h3{margin-bottom:6px}.practice-box p{color:#d3e6e0;margin:0;font-size:13px}.practice-box .btn{background:var(--yellow);border-color:var(--yellow);color:var(--ink);flex-shrink:0}.game{max-width:850px;margin:0 auto}.game-head{display:flex;align-items:center;gap:16px;margin-bottom:20px}.game-head .bar{flex:1;height:9px}.rounds{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:20px 0 25px}.rounds span{border-radius:20px;padding:7px 14px;background:#eeeee6;font-size:11px;color:var(--muted)}.rounds span.active{background:var(--green);color:#fff}.game-card{background:white;border:1px solid var(--line);border-radius:28px;padding:30px;text-align:center;box-shadow:var(--shadow)}.game-card h1{font-size:30px;letter-spacing:-.8px;margin:6px 0 9px}.game-card .lead{font-size:14px;margin-bottom:21px}.picture{width:175px;height:165px;display:grid;place-items:center;margin:15px auto;border-radius:35px;background:var(--tint,#edf1df)}.picture img{width:140px;height:140px}.clue{font-weight:600;color:var(--muted);font-size:14px}.options{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px}.option{background:#fafaf7;border:2px solid #e5e9df;border-radius:15px;padding:16px;font-size:18px;font-weight:600;min-height:64px;transition:background .15s,transform .15s}.option:hover:not(:disabled){border-color:var(--green);background:#eef8ef;transform:translateY(-2px)}.option.correct{border-color:#258358;background:#e8f6e7;opacity:1}.option.wrong{border-color:#dc8b6c;background:#fff0e5;opacity:1}.option img{display:block;width:72px;height:72px;margin:0 auto 5px}.option.listen{font-size:13px}.sound-orb{width:110px;height:110px;border-radius:50%;font-size:40px;background:#e0efe9;border:0;margin:18px auto;box-shadow:0 0 0 13px #f0f6f0}.listen-controls{display:flex;justify-content:center;gap:12px;align-items:center;margin:15px}.text-btn{border:0;background:none;text-decoration:underline;color:var(--muted);font-size:12px;padding:10px}.sentence{font-size:25px;line-height:1.7;margin:28px 0;color:var(--ink)}.answer-form{display:flex;gap:12px;max-width:600px;margin:25px auto}.answer-form input{width:100%;min-width:0;border:2px solid #dce3d7;border-radius:14px;padding:15px;font-size:19px;color:var(--ink);background:#fcfcf9}.feedback{margin-top:22px;text-align:left;background:#eff7e9;border-radius:16px;padding:19px 22px;animation:appear .25s ease}.feedback.retry{background:#fff0e2}.feedback b{display:block;margin-bottom:4px}.feedback p{margin:0;font-size:14px}.feedback .btn{margin-top:15px}.speaking{background:#f7f4e9;border-radius:18px;padding:22px;text-align:left;margin:23px 0}.speaking p{margin:0 0 7px;font-size:14px}.speaking strong{font-size:22px}.note{font-size:12px;color:var(--muted);margin-top:20px;margin-bottom:0}.flip-card{width:100%;background:#faf7e9;border:1px solid #ede3c5;border-radius:23px;min-height:320px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px;margin:25px 0 22px;transition:transform .3s}.flip-card:hover{transform:rotate(-1deg)}.flip-card img{width:145px;height:145px}.flip-card h2{margin:10px 0 5px;font-size:33px}.flip-card .hint{font-size:12px;color:var(--muted)}.flip-card.revealed{background:#eaf4ed}.center-actions{justify-content:center}.finish{text-align:center;padding:45px 30px}.finish .trophy{font-size:75px}.finish h1{font-size:39px;margin:18px 0}.finish .score{font-size:30px;color:var(--green);font-weight:800}.result-words{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:20px}.pill{background:#f3ead9;padding:6px 13px;border-radius:20px;font-size:12px}.report{background:#fff;padding:25px;border:1px solid var(--line);border-radius:22px;margin-bottom:20px}.report h3{margin-bottom:12px}.report-list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.report-word{padding:14px;border-radius:12px;background:#f8f6ef;display:flex;gap:12px;align-items:center}.report-word img{width:45px;height:45px}.report-word b{display:block;font-size:14px}.report-word span{font-size:11px;color:var(--muted)}.report .actions{margin-top:20px}footer{max-width:1180px;margin:30px auto 0;border-top:1px solid var(--line);padding:26px 0 35px;font-size:11px;color:var(--muted)}footer p{margin-bottom:7px}footer p:first-child{color:var(--ink);font-weight:600}footer p span{float:right}footer details{margin-top:12px;max-width:850px}footer summary{cursor:pointer}footer details p{margin-top:10px}.skip{position:absolute;left:10px;top:-100px;padding:10px;background:white;z-index:50}.skip:focus{top:10px}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:var(--ink);color:white;border-radius:13px;padding:12px 20px;max-width:90%;width:max-content;font-size:13px;z-index:100;box-shadow:var(--shadow);display:none}#toast.visible{display:block}#celebration{pointer-events:none;position:fixed;inset:0;overflow:hidden;z-index:80}.confetti{position:absolute;top:15%;font-size:25px;animation:fall 1.1s ease-out forwards}@keyframes fall{to{transform:translateY(70vh) rotate(240deg);opacity:0}}@keyframes appear{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.storage-warning{padding:12px;background:#fff0de;border-radius:12px;font-size:13px;margin-bottom:20px;color:#794422}.hidden{display:none!important}main:focus{outline:none}
@media(min-width:1450px){.hero{min-height:455px}}@media(max-width:1050px){.topics{grid-template-columns:repeat(3,1fr)}.how{grid-template-columns:repeat(4,1fr)}.how>div:first-child{grid-column:1/-1}.vocab-grid{grid-template-columns:repeat(3,1fr)}.hero{padding:30px;min-height:400px}.hero-copy{width:53%}.hero-copy h1{font-size:40px}.hero-copy p{max-width:310px}.hero-sticker{display:none}footer{margin-left:30px;margin-right:30px}.topic-art{height:130px}}@media(max-width:650px){.nav{padding:17px 18px}.brand{font-size:17px;gap:8px}.brand-icon{width:38px;height:38px}.brand small{font-size:7px;letter-spacing:1px}nav{gap:12px}.nav-link{font-size:11px}.star-total{padding:5px 9px;font-size:12px}main{padding:20px 16px}.hero{min-height:560px;align-items:start;padding:26px 23px;background-position:right bottom;background-size:auto 340px;background-repeat:no-repeat;background-color:#fff9ed}.hero:before{content:'';position:absolute;inset:0;background:linear-gradient(#fff9ed 0%,#fff9ed 41%,#fff9ed00 65%)}.hero-copy{width:100%}.hero-copy h1{font-size:37px;letter-spacing:-1.3px;max-width:370px;margin-bottom:12px}.hero-copy p{font-size:13px;max-width:300px;margin-bottom:16px}.hero .tiny{display:none}.hero-copy .eyebrow{font-size:9px}.hero .btn{min-height:46px;padding:10px 16px;font-size:13px}.overview{padding:17px 12px;margin-bottom:29px}.stat{padding:0 10px;gap:4px;display:block;text-align:center}.stat b{font-size:25px}.stat strong{font-size:10px}.stat span{font-size:10px}.stat:first-child{padding-left:10px}.section-head{align-items:start}.section-head h2{font-size:25px}.section-head p{display:none}.topics{grid-template-columns:repeat(2,1fr);gap:12px}.topic:last-child{grid-column:1/-1;display:grid;grid-template-columns:1fr 1.2fr}.topic:last-child .topic-art{height:auto}.topic-body{padding:14px}.topic-body h3{font-size:15px}.topic-art{height:118px}.topic-art img{width:85px;height:85px}.topic-body .en{margin-bottom:10px;font-size:10px}.review-band{padding:20px;align-items:start;flex-direction:column;gap:13px}.review-band .btn{width:100%}.how{grid-template-columns:1fr 1fr;gap:14px}.how p{font-size:11px}.how h3{margin:0}.how>div:first-child{margin-bottom:5px}.vocab-grid{grid-template-columns:repeat(2,1fr);gap:12px}.vocab-image{height:125px}.vocab-image img{width:90px;height:90px}.vocab-text{padding:14px 10px}.vocab-text h3{font-size:16px}.vocab-text p{font-size:11px}.topic-title h1{font-size:32px}.practice-box{padding:22px;flex-direction:column;align-items:start}.practice-box .btn{width:100%}.game-card{padding:23px 17px;border-radius:22px}.game-card h1{font-size:25px}.rounds{gap:5px}.rounds span{font-size:9px;padding:6px 8px}.game-head{gap:12px}.game-head .tiny{font-size:10px}.picture{height:145px;width:155px}.picture img{width:120px;height:120px}.option{font-size:15px;padding:12px;min-height:62px}.option.listen{font-size:12px}.answer-form{flex-direction:column}.sentence{font-size:21px}.speaking strong{font-size:19px}.report-list{grid-template-columns:1fr}.report{padding:20px}.page-top{margin-bottom:15px}.word-count{font-size:10px;padding:6px 10px}.finish{padding:26px 13px}.finish h1{font-size:30px}.flip-card{min-height:285px;padding:22px 15px}.flip-card h2{font-size:27px}footer{margin:15px 16px 0;padding-top:22px}footer p span{float:none;display:block;margin-top:5px}.actions .btn{flex-grow:1}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.chapter-nav{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:0 0 14px;scroll-margin-top:100px}.chapter-btn{text-align:left;padding:16px;border:1px solid var(--line);border-radius:16px;background:white;color:var(--ink)}.chapter-btn b,.chapter-btn span,.chapter-btn small{display:block}.chapter-btn b{font-size:12px;color:var(--green)}.chapter-btn span{font-size:13px;font-weight:700;margin:5px 0}.chapter-btn small{font-size:11px;color:var(--muted)}.chapter-btn.selected{background:var(--green);border-color:var(--green);color:white}.chapter-btn.selected b,.chapter-btn.selected small{color:#dcf4e6}.chapter-note{font-size:12px;margin-bottom:22px}@media(max-width:650px){.chapter-nav{grid-template-columns:1fr 1fr;gap:8px}.chapter-btn{padding:12px}.chapter-btn span{font-size:12px}}
/* Keep the illustration separate from copy on narrow screens. */
@media(max-width:650px){.hero{display:block;min-height:0;padding:0;background:#fff9ed}.hero:before{display:none}.hero:after{content:'';display:block;width:100%;height:260px;background:url('assets/explorer.png') right bottom/auto 300px no-repeat}.hero-copy{padding:26px 23px 8px}.hero-copy h1{font-size:clamp(30px,7.5vw,37px);line-height:1.16}.hero-copy p{font-size:13px}.hero .btn{width:100%}}
@media(max-width:380px){.nav{flex-wrap:wrap;gap:12px}.brand{white-space:nowrap}.brand small{letter-spacing:1.5px}.nav nav{width:100%;justify-content:space-between}.overview{padding:14px 6px}.stat{padding:0 7px}.stat:first-child{padding-left:7px}}