@import"https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap";:root{font-family:DM Sans,sans-serif;color:#243d34;background:#f7f8f4;font-synthesis:none;font-size:14px}*{box-sizing:border-box}body{margin:0}button,a,input,textarea{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{opacity:.5;cursor:default}button:focus-visible,a:focus-visible{outline:3px solid #ac88ed;outline-offset:4px}button{transition:background .18s,transform .18s}button:hover:not(:disabled){transform:translateY(-2px)}button svg{flex-shrink:0}a{color:inherit;text-decoration:none}.app{--bg:#f7f8f4;--card:#fff;--ink:#243d34;--muted:#748079;--border:#e5e9e2;display:flex;min-height:100vh;background:var(--bg);color:var(--ink)}.app.dark{--bg:#14231d;--card:#20352b;--ink:#e9f1e9;--muted:#a9b7ad;--border:#354a3e}aside{width:244px;position:fixed;inset:0 auto 0 0;background:var(--card);border-right:1px solid var(--border);padding:40px 24px;display:flex;flex-direction:column;z-index:5}.brand{display:flex;gap:12px;align-items:center;font-family:Manrope,sans-serif;font-size:25px;font-weight:800;letter-spacing:-1px}.logo{position:relative;background:#1c5e49;color:#e3f0ab;width:44px;height:48px;border-radius:15px 15px 15px 5px;font-size:42px;line-height:40px;text-align:center}.logo>span{font-size:20px;position:absolute;right:5px;top:-5px}.academy{display:block;font-size:10px;letter-spacing:4px;margin-top:1px;font-weight:700}.nav-label{color:var(--muted);font-size:9px;letter-spacing:1.5px;font-weight:700;margin:58px 12px 16px}nav{display:flex;flex-direction:column;gap:9px}nav button{border:0;background:none;color:var(--muted);display:flex;align-items:center;gap:14px;padding:15px 14px;border-radius:11px;text-align:left;font-weight:600}nav button.active{background:#eaf0e4;color:#265640}nav .new{margin-left:auto;color:#76814e;font-size:9px;background:#dce6cb;border-radius:4px;padding:3px 5px}.aside-bottom{margin-top:auto;padding:26px 12px 0}.mini-logo{color:#7e9a5e;font-size:32px;margin-bottom:12px}.aside-bottom strong{font-size:12px}.aside-bottom p{font-size:11px;color:var(--muted)}.theme{display:flex;gap:9px;align-items:center;border:1px solid var(--border);background:none;color:var(--muted);border-radius:9px;padding:10px 12px;margin-top:25px;font-size:11px}main{margin-left:244px;flex:1;min-width:0}header{height:86px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);padding:0 45px;font-size:12px;color:var(--muted);background:var(--card)}.top-stats{display:flex;align-items:center;gap:27px;color:var(--ink);font-weight:700}.top-stats>span{display:flex;align-items:center;gap:7px}.top-stats svg{color:#dc9950}.top-stats>span:nth-child(2) svg{color:#b39b3b}.top-stats small{font-size:10px;color:var(--muted);font-weight:400}.avatar{background:#e9e9dc;border:3px solid var(--card);outline:1px solid var(--border);height:36px;width:36px;border-radius:50%;display:grid;place-items:center;font-size:11px;color:#476140}.content{max-width:1400px;margin:auto;padding:40px 45px 0}.eyebrow{font-size:9px;letter-spacing:1.8px;color:#819373;font-weight:700;margin-bottom:12px}h1,h2,h3{font-family:Manrope,sans-serif}h1{font-size:clamp(23px,2.3vw,34px);letter-spacing:-1.2px;margin:0;font-weight:800}h2{letter-spacing:-.6px}p{line-height:1.7}.heading p{color:var(--muted);font-size:12px;margin:10px 0 28px}.hero{position:relative;overflow:hidden;background:#195c47;color:#fff;border-radius:19px;min-height:310px;display:flex;justify-content:space-between;padding:30px 36px}.pill{display:inline-flex;align-items:center;gap:7px;font-size:8px;letter-spacing:1.1px;color:#dce9b0;background:#ffffff13;border:1px solid #ffffff20;border-radius:30px;padding:7px 10px}.hero h2{font-size:40px;line-height:1.16;font-weight:800;letter-spacing:-1.6px;margin:17px 0 10px}.hero p{font-size:12px;color:#c4d9cf;margin:0 0 20px}.primary{display:inline-flex;align-items:center;justify-content:center;gap:18px;background:#245e46;color:#fff;border:0;border-radius:9px;padding:13px 20px;font-size:12px;font-weight:700;box-shadow:0 3px #123d2b}.primary.cream{color:#304e36;background:#e4edac;box-shadow:0 3px #afc579}.hero-foot{display:flex;gap:20px;font-size:9px;color:#b5cfc0;margin-top:20px}.art{width:40%;position:relative;min-width:290px}.orbit{position:absolute;border:1px solid #ffffff14;width:300px;height:300px;border-radius:50%;top:0;left:0}.orbit:after{content:"";position:absolute;top:30px;right:30px;bottom:30px;left:30px;border:1px solid #ffffff14;border-radius:50%}.mascot{position:absolute;left:76px;top:85px;width:150px;height:147px;background:#d4e598;border-radius:52px 52px 50px 15px;transform:rotate(-10deg);box-shadow:9px 11px #0f4738}.eyes{display:flex;gap:25px;position:absolute;top:46px;left:35px}.eyes i{height:22px;width:12px;border-radius:50%;background:#20513e}.eyes i:after{content:"";display:block;width:4px;height:5px;border-radius:50%;background:#fff;margin:3px}.smile{position:absolute;top:75px;left:58px;width:30px;height:20px;border-bottom:5px solid #20513e;border-radius:50%}.bubble{position:absolute;font-weight:800;font-family:Manrope;font-size:25px;box-shadow:4px 5px #124a39;z-index:1;display:flex;align-items:center;gap:18px}.dutch{background:#f6f8ee;color:#345742;border-radius:15px 15px 3px;padding:14px 20px;top:25px;left:0;transform:rotate(-7deg)}.dutch span{font-size:18px;color:#9fa790}.pesk{background:#d6c4ee;color:#503c6e;border-radius:14px 14px 14px 3px;padding:13px 20px;left:185px;top:177px;transform:rotate(9deg)}.spark{position:absolute;color:#d7e69c;font-size:32px}.s1{left:250px;top:25px}.s2{left:14px;top:220px;font-size:23px}.art-caption{position:absolute;bottom:-5px;left:60px;color:#9dbba9;font-size:8px;letter-spacing:2px}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:22px 0 35px}.stat{border:1px solid var(--border);background:var(--card);border-radius:12px;padding:19px 15px;display:flex;gap:12px;align-items:flex-start}.stat-icon{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;flex-shrink:0}.yellow{color:#aa8c2b;background:#faf2cf}.purple{color:#8d73b2;background:#f0e9f8}.orange{color:#c38556;background:#fcf0e2}.green{color:#6e987b;background:#eaf2e9}.stat small{font-size:10px;color:var(--muted);display:block;margin-bottom:6px}.stat strong{font-family:Manrope;display:block;font-size:23px;font-weight:800;letter-spacing:-1px}.stat p{font-size:8px;color:var(--muted);margin:6px 0 0;white-space:normal}.section-title{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:0 0 18px}.section-title h2{font-size:20px;margin:0}.section-title h2>span{font-family:DM Sans;font-weight:400;font-size:10px;color:var(--muted);margin-left:13px;letter-spacing:0}.tag{font-size:9px;letter-spacing:1px;font-weight:700;background:#eaf0df;color:#758a50;padding:6px 10px;border-radius:5px}.lesson-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.lesson{display:flex;text-align:left;gap:16px;align-items:center;color:var(--ink);background:var(--card);border:1px solid var(--border);border-radius:12px;padding:22px 19px}.lesson.current{border:1.5px solid #95ad77;background:color-mix(in srgb,var(--card) 90%,#dce9b2)}.lesson>div:nth-child(2){flex:1}.lesson>svg{color:#96a08f}.lesson-icon{height:47px;width:47px;border-radius:13px;display:grid;place-items:center;flex-shrink:0;background:#edf0e8;color:#81946d}.tone0{background:#dfe8c6;color:#678447}.tone1{background:#e9e4f4;color:#a08db7}.tone2{background:#f4ead9;color:#b69a6d}.tone3{background:#e2eaf2;color:#8c9fb4}.tone4{background:#f3e6e7;color:#ba989a}.tone5{background:#eae9de;color:#aaa57d}.lesson small{font-size:8px;letter-spacing:1.3px;color:#8b997b;font-weight:700}.lesson h3{font-size:13px;margin:5px 0;letter-spacing:-.1px}.lesson p{font-size:10px;color:var(--muted);margin:0}.progress{background:var(--border);height:5px;border-radius:8px;overflow:hidden;margin-top:15px}.progress i{display:block;background:#8ba95e;height:100%;border-radius:8px;transition:width .4s}.tip{display:flex;gap:17px;align-items:center;background:#eeeee3;border-radius:11px;padding:10px 20px;margin-top:25px;color:#687057}.tip>span{font-size:26px;color:#a6b47c}.tip p{font-size:10px;flex:1}.tip strong{margin-right:8px}.tip button{border:0;background:none;display:flex;gap:12px;align-items:center;color:#5f704b;font-size:10px;font-weight:700}footer{border-top:1px solid var(--border);margin-top:35px;padding:22px 0;display:flex;justify-content:space-between;gap:15px;color:var(--muted);font-size:9px}.footer-brand{font-weight:700}.tabs{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:20px}.tabs button,.secondary{border:1px solid var(--border);border-radius:9px;background:var(--card);padding:10px 17px;color:var(--ink)}.tabs .selected{background:#245e46;color:#fff;border-color:#245e46}.muted{color:var(--muted);font-size:12px}.sound-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:15px}.sound{height:165px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border:1px solid var(--border);background:var(--card);border-radius:15px;color:var(--ink)}.sound small{font-size:9px;color:var(--muted)}.sound strong{font-size:34px}.sound span{font-size:11px;color:var(--muted)}.sound.known{border-color:#93ac73}.panel{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:28px;margin-bottom:22px}.panel h2{margin-top:0;font-size:24px}.panel>p{color:var(--muted)}.level-choice{display:flex;gap:20px;align-items:center;width:100%;padding:18px;border:1px solid var(--border);background:var(--bg);border-radius:10px;margin-top:12px;color:var(--ink);text-align:left}.level-choice>span{font-weight:800;color:#8da26f}.level-choice svg{margin-left:auto}.exercise{max-width:750px;margin:0 auto;min-height:420px}.exercise-top{display:flex;justify-content:space-between;font-size:10px;letter-spacing:2px;color:var(--muted)}.exercise h2{margin-top:35px}.question{display:flex;align-items:center;gap:20px;font-size:26px;margin:30px 0;overflow-wrap:anywhere}.question-icon{border-radius:15px;padding:16px;background:#edf0df;color:#6f8657;display:flex}.exercise input{width:100%;border:2px solid var(--border);background:var(--bg);color:var(--ink);padding:20px;border-radius:12px;font-size:18px}.exercise input:focus{outline-color:#87a866}.options{display:grid;grid-template-columns:1fr 1fr;gap:12px}.options button{border:2px solid var(--border);background:var(--bg);color:var(--ink);padding:17px;border-radius:10px;text-align:left}.options button span{padding:4px 8px;border:1px solid var(--border);border-radius:5px;margin-right:15px;font-size:11px}.options button.chosen{border-color:#8da965;background:#e7efda;color:#29412e}.exercise-footer{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-top:30px}.exercise-footer>small{color:var(--muted);font-size:10px}.feedback{border-radius:10px;padding:18px;margin-top:20px;line-height:1.7}.feedback.right{background:#e8f1df;color:#365739}.feedback.wrong{background:#f8e9dd;color:#8b4e31}.feedback p{margin:5px 0}.feedback small{font-size:10px}.finished{text-align:center;position:relative;overflow:hidden;padding:70px 20px}.finished>svg{color:#b2a251;margin-bottom:22px}.finished .secondary{margin-left:20px}.confetti span{position:absolute;top:-30px;color:#a9b55b;font-size:25px;animation:fall 2s ease-in infinite}@keyframes fall{to{transform:translateY(450px) rotate(320deg)}}.translator{display:grid;grid-template-columns:1fr 1fr;gap:18px}.translator label{font-size:10px;letter-spacing:2px;font-weight:700;color:var(--muted)}textarea{display:block;resize:vertical;width:100%;min-height:220px;background:none;border:0;color:var(--ink);font-size:24px;line-height:1.7;margin-top:23px}textarea:focus{outline:0}.translator .result{background:color-mix(in srgb,var(--card) 90%,#dce8b1)}.result-label{display:flex;justify-content:space-between}.result-label button{border:0;background:none;color:var(--ink);display:flex;gap:8px;font-size:10px}.translation{font-size:24px;line-height:1.7;margin-top:23px;white-space:pre-wrap;overflow-wrap:anywhere}.translator small{color:var(--muted);font-size:10px}.rule-chips{display:flex;flex-wrap:wrap;gap:9px;margin:20px 0}.rule-chips>span{padding:9px 12px;border:1px solid var(--border);border-radius:7px;color:var(--muted);font-size:12px}.rule-chips b{color:var(--ink);margin-left:6px}.mistake{display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap;padding:18px 0;border-top:1px solid var(--border);font-size:12px}.mistake small{color:var(--muted)}.dark .tip{background:#2d3b2a;color:#c3ceb3}.dark nav button.active{background:#324c35;color:#e2efc8}@media(min-width:1550px){.content{padding-top:50px}.hero{min-height:355px;padding:38px 45px}.hero h2{font-size:48px}.art{margin-right:60px}.mascot{top:95px;transform:scale(1.15) rotate(-10deg)}.art-caption{bottom:0}.stats-grid{margin-top:26px}.lesson{padding:26px}}@media(max-width:1150px){aside{width:205px;padding:35px 18px}main{margin-left:205px}.content{padding:30px 26px 0}header{padding:0 26px}.hero{padding:28px}.hero h2{font-size:35px}.art{min-width:255px;transform:scale(.85);transform-origin:center}.stats-grid{grid-template-columns:repeat(2,1fr)}.section-title h2>span{display:block;margin:7px 0 0}.lesson{padding:17px 14px;gap:12px}.lesson-icon{height:40px;width:40px}.lesson h3{font-size:12px}.tip{flex-wrap:wrap}.tip button{margin-left:auto}}@media(max-width:760px){aside{width:100%;height:65px;top:auto;bottom:0;padding:0;border-right:0;border-top:1px solid var(--border)}aside .brand,.nav-label,.aside-bottom{display:none}nav{flex-direction:row;justify-content:space-around;gap:0;height:100%}nav button{flex-direction:column;gap:4px;padding:10px 6px;font-size:9px;border-radius:0;flex:1}nav .new{display:none}main{margin-left:0;padding-bottom:65px}header{height:65px;padding:0 20px}header>span{font-size:10px}.top-stats{gap:13px}.top-stats small{display:none}.content{padding:28px 20px 0}h1{font-size:26px;line-height:1.3}.heading p{font-size:11px}.hero{padding:25px;min-height:340px}.hero h2{font-size:34px}.hero p{max-width:200px;font-size:11px}.hero .art{position:absolute;right:-75px;bottom:20px;transform:scale(.62);height:260px;transform-origin:center;min-width:290px}.hero>div:first-child{z-index:1}.hero-foot{gap:12px;font-size:8px}.stats-grid{gap:10px;margin-bottom:28px}.stat{padding:16px 11px;gap:9px}.stat-icon{width:31px;height:31px}.stat strong{font-size:22px}.stat p{font-size:8px}.lesson-grid{grid-template-columns:1fr}.lesson{padding:21px 17px}.lesson h3{font-size:14px}.tip{gap:10px}.tip p{min-width:200px}.tip button{margin:0 0 5px 30px}footer{font-size:8px;flex-wrap:wrap}footer>span:nth-child(2){display:none}.sound-grid{grid-template-columns:repeat(3,1fr);gap:9px}.sound{height:145px}.sound span{font-size:9px}.sound small{font-size:8px}.panel{padding:22px 18px}.translator{grid-template-columns:1fr;gap:0}.translator textarea{min-height:150px}.translation{min-height:100px}.exercise h2{font-size:21px}.question{font-size:22px;gap:12px}.question-icon{padding:12px}.exercise-footer{align-items:flex-end}.exercise-footer small{max-width:110px}.options{grid-template-columns:1fr}.finished .secondary{margin:20px 0 0}.section-title .primary{font-size:10px;padding:10px;gap:8px}.tabs button{padding:10px;font-size:11px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}.header-theme{border:0;background:none;color:var(--muted);display:flex;padding:4px}@media(max-width:420px){.hero .art{display:none}.hero{min-height:0}.hero p{max-width:none}.hero h2{font-size:37px}.hero-foot{flex-wrap:wrap}}