:root{font-family:'Be Vietnam Pro',system-ui,sans-serif;color:#233f34;background:#faf9f4;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,a,input{font:inherit}button{cursor:pointer}button:disabled{opacity:.5;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #efb52b;outline-offset:4px}header{max-width:1260px;margin:auto;padding:24px 32px;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{font-size:27px;font-weight:800;text-decoration:none;color:#246b52;white-space:nowrap}.brand span{font-weight:500}nav{display:flex;gap:8px}nav button{border:0;background:none;padding:12px;border-radius:22px;font-size:13px;color:#5b6d64}nav button.active{background:#e8eee6;color:#246b52;font-weight:700}.avatar{background:white;padding:10px 16px;border:1px solid #e6e9df;border-radius:30px;font-size:13px}main{max-width:1196px;margin:12px auto;padding:0 28px;min-height:75vh}.hero{display:grid;grid-template-columns:1.1fr 1fr;background:#e9f0df;border-radius:30px;overflow:hidden;min-height:340px}.hero-copy{padding:44px}.eyebrow{font-size:11px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:#548063}h1{font-size:42px;line-height:1.25;letter-spacing:-1.7px;margin:17px 0}p{line-height:1.8;color:#65766b;font-size:14px}.primary,.secondary{border:0;border-radius:15px;padding:15px 22px;font-weight:700;font-size:14px}.primary{background:#246b52;color:white;box-shadow:0 5px 0 #194c3b}.secondary{background:#edf1e7;color:#246b52}.hero-art{position:relative;display:grid;place-items:center;background:radial-gradient(ellipse at center,#ffedb4 0 38%,transparent 39%);padding:24px}.hero-art .big{font-size:150px;transform:rotate(-8deg);filter:drop-shadow(0 16px 0 #375a2c12)}.bubble{position:absolute;top:45px;right:30px;background:white;padding:16px 24px;border-radius:20px;transform:rotate(5deg);font-size:17px;font-weight:700}.little{position:absolute;bottom:40px;left:24px;padding:12px 18px;background:white;border-radius:18px;font-size:12px}.stats{display:flex;gap:24px;padding:20px 5px;font-size:12px;color:#708070}.stats strong{color:#284b3a}.section-top{display:flex;justify-content:space-between;align-items:center;margin:24px 0 18px;gap:16px}h2{font-size:23px;letter-spacing:-.6px;margin:0 0 8px}.filters{display:flex;gap:6px;flex-wrap:wrap}.filters button{background:white;border:1px solid #e3e8dc;border-radius:24px;padding:10px 15px;font-size:12px}.filters button.active{background:#246b52;color:white;border-color:#246b52}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.card{background:white;border:1px solid #e8eadf;border-radius:24px;overflow:hidden;transition:transform .2s}.card:hover{transform:translateY(-5px)}.cover{height:205px;display:grid;place-items:center;position:relative;background:var(--bg)}.cover .emoji{font-size:91px;filter:drop-shadow(0 10px 0 #0000000a)}.cover:before,.cover:after{content:'';position:absolute;border-radius:50%;background:#ffffff45;width:100px;height:100px;left:20px;top:20px}.cover:after{left:auto;top:auto;bottom:-35px;right:15px;width:160px;height:160px}.tag{position:absolute;top:15px;left:15px;background:#ffffffd9;border-radius:14px;font-size:10px;padding:7px 11px;font-weight:700}.card-body{padding:22px}.card h3{margin:0 0 7px;font-size:20px}.card p{margin:0 0 17px;font-size:12px}.meta{display:flex;justify-content:space-between;font-size:11px;color:#7b887b;margin-bottom:20px}.card button{width:100%;text-align:left;display:flex;justify-content:space-between}.banner{margin:30px 0;padding:23px 28px;border:1px solid #e3e8d9;background:#f2f3e9;border-radius:20px;display:flex;align-items:center;gap:20px}.banner .icon{font-size:36px}.banner p{margin:0;font-size:12px}footer{text-align:center;color:#8b9789;font-size:11px;padding:30px}.reader{max-width:840px;margin:24px auto}.reader-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.text-button{background:none;border:0;color:#246b52;padding:10px}.steps{display:flex;gap:10px;margin:20px 0}.steps span{padding:10px 18px;background:#e9eee3;border-radius:20px;font-size:12px}.steps .active{background:#246b52;color:white}.page-art{height:260px;border-radius:25px 25px 0 0;background:var(--bg);display:grid;place-items:center;font-size:115px}.page-text{background:white;padding:28px;text-align:center;border:1px solid #e7ebdf;border-radius:0 0 25px 25px}.sentence{font-size:27px;font-weight:700;color:#243d32;line-height:1.6;margin:0}.translation{font-size:14px;margin:12px;color:#788273}.controls{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:22px 0}.progress{height:7px;background:#e7ebdf;border-radius:8px;margin-bottom:22px;overflow:hidden}.progress div{height:100%;background:#e9b43c}.panel{background:white;border:1px solid #e5e9dd;padding:28px;border-radius:22px;margin:20px 0}.answers{display:grid;gap:12px}.answers button{padding:20px;text-align:left;border:2px solid #e7eadf;border-radius:15px;background:white}.answers button.correct{background:#e7f1e2;border-color:#74a35f}.answers button.wrong{background:#fff0ea;border-color:#db946e}.notice{font-size:12px;color:#6a766a;line-height:1.7}.success{text-align:center;padding:40px}.success .medal{font-size:100px}.metric-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.metric{padding:25px;background:#edf2e6;border-radius:20px}.metric strong{font-size:32px;display:block;margin-bottom:10px}.metric span{font-size:12px}table{width:100%;border-collapse:collapse;font-size:13px}td,th{text-align:left;padding:15px 8px;border-bottom:1px solid #edf0e7}audio{max-width:100%;margin-top:14px}.recording{background:#a83d39}input[type=checkbox]{accent-color:#246b52}label{font-size:13px;line-height:1.8}.empty{padding:40px;text-align:center}.badge-row{display:flex;gap:20px;justify-content:center;flex-wrap:wrap}.badge{background:#f4eedb;border-radius:24px;padding:28px;width:160px;text-align:center}.badge span{display:block;font-size:48px;margin-bottom:15px}.locked{opacity:.35}@media(max-width:760px){header{padding:18px;flex-wrap:wrap}.avatar{display:none}nav{width:100%;justify-content:space-between}nav button{font-size:11px;padding:10px}main{padding:0 16px}.hero{grid-template-columns:1fr}.hero-copy{padding:28px}h1{font-size:33px}.hero-art{min-height:230px}.hero-art .big{font-size:120px}.bubble{top:10px}.cards{grid-template-columns:1fr}.section-top{align-items:flex-start;flex-direction:column}.stats{gap:12px;flex-wrap:wrap}.cover{height:190px}.metric-grid{grid-template-columns:1fr}.sentence{font-size:22px}.page-art{height:210px}.steps span{padding:9px 12px;font-size:10px}.reader-head h2{font-size:18px}table{font-size:11px}.panel{padding:20px}}

.curriculum-tools{padding:18px 22px;background:#edf2e6;border-radius:18px;margin-bottom:22px}.curriculum-tools label{font-weight:700;display:block;margin-bottom:10px}.curriculum-tools select{font:inherit;max-width:100%;padding:12px;border:1px solid #c9d5c2;border-radius:12px;background:white;color:#233f34}.curriculum-tools p{font-size:12px;margin-bottom:0}.learning-tip{text-align:left;padding:18px;border-radius:15px;background:#f1f5e9;margin-top:22px}.learning-tip p{font-size:12px;margin:8px 0}.reader-head h2{max-width:60%;font-size:18px}

.video-card-button{margin-top:14px;border:1px solid #d8e2d0;background:white;color:#246b52;border-radius:14px;padding:12px 16px;font-size:12px;font-weight:700}#lesson-video{display:block;width:100%;max-height:540px;border-radius:18px;background:#eaf1e2}

@media(max-width:760px){nav{flex-wrap:wrap;justify-content:flex-start;gap:2px}nav button{padding:9px 10px;font-size:11px}}