:root{font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;font-synthesis:none;color:#17233b;background:#f5f8ff;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #438df6;outline-offset:3px}a{text-decoration:none;color:inherit}.container{max-width:1040px;margin:0 auto;padding:0 24px}.topbar{max-width:1040px;margin:auto;height:76px;padding:0 24px;display:flex;align-items:center;justify-content:space-between}.logo{font-size:26px;font-weight:900;letter-spacing:-1.5px}.logo-dot{color:#fe9b51}.top-right{display:flex;align-items:center;gap:14px}.pill{display:inline-flex;align-items:center;padding:8px 13px;border:1px solid #dce4f6;background:#fff;color:#607393;border-radius:999px;font-size:13px;font-weight:750}.pill.small{color:#5b65d9}.version{font-size:12px;color:#96a1ba}.hero{background:#1e264b;border-radius:32px;min-height:283px;display:grid;grid-template-columns:1.35fr .65fr;overflow:hidden;position:relative;box-shadow:0 22px 55px rgba(33,47,95,.10)}.hero-copy{position:relative;z-index:2;padding:42px 44px;color:#fff}.eyebrow{font-size:11px;font-weight:900;letter-spacing:1.8px;color:#7887d9}.hero .eyebrow{color:#adbcff}.hero h1{font-size:clamp(29px,3.9vw,46px);letter-spacing:-1.9px;line-height:1.1;margin:18px 0 14px}.hero h1 em{color:#ffce77;font-style:normal}.hero p{font-size:15px;color:#cbd5f7;line-height:1.65;max-width:530px;margin:0}.hero-art{position:relative;min-height:275px;isolation:isolate}.hero-art:before{content:"";position:absolute;right:-55px;top:-95px;width:380px;height:380px;background:radial-gradient(circle,#6772ca 0,#404a89 43%,transparent 72%);opacity:.8}.orb{position:absolute;z-index:2;display:grid;place-items:center;box-shadow:0 11px 22px #13193555;font-size:17px;font-weight:900;transform:rotate(-9deg)}.orb-a{top:36px;left:16px;background:#fff;border-radius:15px;padding:14px;color:#5860cc}.orb-b{right:18px;bottom:49px;background:#ffca7b;padding:17px 19px;border-radius:15px;transform:rotate(12deg);color:#604b28}.orb-c{top:39px;right:38px;color:#fff;font-size:35px;box-shadow:none}.mascot{width:145px;height:142px;background:#a7e2ff;border:8px solid #fff;box-shadow:inset 0 -14px 0 #70c3fb,0 28px 32px #151b3b55;border-radius:45% 45% 42% 42%;position:absolute;top:88px;left:27%;transform:rotate(-7deg);display:grid;place-items:center;font-size:55px;color:#273459}.mascot i:before,.mascot i:after{content:"";position:absolute;width:11px;height:20px;background:#1c2b46;top:54px;border-radius:10px}.mascot i:before{left:45px}.mascot i:after{right:44px}.mascot b{position:absolute;bottom:14px;font-size:50px;font-weight:500;line-height:1}.section{margin:35px 0}.section-head{display:flex;justify-content:space-between;align-items:end;gap:12px;margin-bottom:18px}.section h2{font-size:25px;letter-spacing:-.9px;margin:0 0 4px}.subtle{color:#7f8ba4;font-size:14px;line-height:1.5;margin:0}.profiles{display:grid;grid-template-columns:1fr 1fr;gap:15px}.profile{background:white;border:2px solid #e9edfa;border-radius:23px;text-align:left;padding:22px;display:flex;align-items:center;gap:14px;transition:transform .15s,border-color .15s,box-shadow .15s;min-height:129px;color:#182947}.profile:hover,.lesson-card:hover{transform:translateY(-2px);box-shadow:0 14px 36px #213b6417}.profile.active.orange{border-color:#f5a95f;background:#fff9ef}.profile.active.violet{border-color:#9196f0;background:#f7f7ff}.avatar{display:grid;place-items:center;width:67px;height:67px;background:#f0f4fe;border-radius:22px;font-size:31px;flex-shrink:0}.orange .avatar{background:#ffebd2}.violet .avatar{background:#e7e5ff}.profile-info{display:flex;flex-direction:column;gap:4px;min-width:0}.profile-info strong{font-size:17px;letter-spacing:-.4px}.profile-info small{font-size:12px;color:#71809c}.profile-info .profile-progress{color:#666eda;font-weight:700;margin-top:3px}.profile-arrow{margin-left:auto;color:#9facbf;font-size:25px}.count{font-size:12px;color:#6477a1;border:1px solid #d7e1f2;border-radius:30px;padding:9px 12px;background:#fff}.lesson-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.lesson-card{background:#fff;min-height:226px;border-radius:23px;border:1px solid #e7eafa;padding:19px;text-align:left;display:flex;flex-direction:column;align-items:flex-start;transition:transform .15s,box-shadow .15s;color:#1d2a49}.lesson-icon{width:57px;height:57px;border-radius:18px;background:#edf2ff;display:grid;place-items:center;font-size:29px;margin-bottom:13px}.lesson-card:nth-child(2) .lesson-icon{background:#fff2dd}.lesson-card:nth-child(3) .lesson-icon{background:#e4f8f0}.lesson-card:nth-child(4) .lesson-icon{background:#fae7f3}.lesson-order{font-size:11px;font-weight:900;letter-spacing:.7px;color:#8593b7}.lesson-card strong{font-size:19px;letter-spacing:-.4px;margin:4px 0}.lesson-subtitle{font-size:12px;color:#74819c}.lesson-foot{border-top:1px solid #edf0f7;margin-top:auto;padding-top:15px;font-size:12px;color:#6a76a0;width:100%;display:flex;justify-content:space-between;gap:4px}.lesson-foot b{font-size:18px}.roadmap{display:flex;gap:16px;align-items:center;background:#ecefff;padding:19px;border-radius:19px;margin-top:17px;color:#35457b}.roadmap-icon{font-size:27px}.roadmap strong{font-size:14px}.roadmap p{font-size:12px;margin:4px 0 0;line-height:1.5}.parent{margin-bottom:50px}.textlink,.back,.ghost{background:none;border:0;color:#6a7798;font-weight:700;font-size:13px;padding:9px}.textlink{padding-left:0}.textlink:hover,.back:hover{color:#435be4}.reset-panel{border:1px solid #f2b9b9;padding:15px;border-radius:14px;background:#fff}.reset-panel p{font-size:13px}.danger{border:0;background:#b83232;color:#fff;padding:11px 13px;border-radius:12px;font-weight:700}.footer{max-width:1040px;margin:55px auto 0;padding:23px 24px 30px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:7px;border-top:1px solid #e3e9f6;color:#92a0ba;font-size:12px}.lesson-page,.exercise-page,.finish-page{max-width:790px}.lesson-page .back{margin:12px 0 16px 0}.intro-card,.question-card,.finish-card{background:white;border-radius:28px;border:1px solid #e2e8f4;padding:35px 42px;box-shadow:0 16px 50px #223c6510}.intro-card{text-align:center}.intro-icon{display:inline-grid;place-items:center;width:91px;height:91px;border-radius:28px;background:#edf0ff;font-size:43px;margin-bottom:18px}.intro-card h1,.finish-card h1{font-size:clamp(27px,5vw,43px);margin:12px 0 8px;letter-spacing:-1.5px}.intro-card .subtitle{color:#74819c;font-size:17px;margin:0 0 25px}.rule{display:flex;gap:16px;text-align:left;background:#f2f5ff;padding:21px;border-radius:18px;color:#384b7b;line-height:1.6;margin:0 0 19px}.rule>span{font-size:25px}.rule p{margin:4px 0 0;font-size:14px}.intro-meta{display:flex;flex-wrap:wrap;gap:17px;justify-content:center;color:#7d8cac;font-size:13px;margin:25px 0}.primary{border:0;color:#fff;background:linear-gradient(110deg,#5a69ec,#7d67ee);box-shadow:0 7px 19px #6b76ef40;border-radius:15px;font-weight:850;letter-spacing:.1px}.primary:hover{filter:brightness(1.05)}.primary.huge{min-height:56px;padding:16px 25px;font-size:16px}.intro-card .primary.huge{width:100%;display:flex;justify-content:center;gap:12px}.exercise-nav{display:flex;justify-content:space-between;gap:13px;align-items:center;margin:11px 0 23px}.progress-meta{display:flex;justify-content:space-between;gap:10px;font-size:13px;font-weight:750;color:#71809c}.progress-track{height:10px;background:#dfe6f8;border-radius:30px;overflow:hidden;margin:12px 0 22px}.progress-track>div{height:100%;border-radius:inherit;background:linear-gradient(90deg,#6c81f8,#83d4c8);transition:width .28s}.question-top{display:flex;align-items:center;justify-content:space-between;gap:15px}.question-top h1{font-size:clamp(26px,5.1vw,38px);margin:16px 0 12px;letter-spacing:-1px;line-height:1.23}.question-decoration{font-size:52px;line-height:1;opacity:.9}.question-help{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 20px}.hint-button,.mode-button,.listen-button{background:#f3f5fc;border:1px solid #e1e7f7;border-radius:11px;color:#6476a7;padding:10px 12px;font-size:13px;font-weight:750}.mode-button:hover,.hint-button:hover,.listen-button:hover{background:#e9eeff}.hint-panel{background:#fffae9;border:1px solid #f8e2ac;border-radius:14px;padding:15px 16px;font-size:14px;color:#63542d;line-height:1.65;margin-bottom:18px}.answer-tray{min-height:100px;border:2px dashed #d3dcf3;background:#f8faff;border-radius:17px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:16px}.placeholder{color:#b0bdd4;font-size:14px}.chosen-chip{padding:11px 14px;border:1px solid #bacafa;border-radius:12px;background:#e8edff;color:#364eaa;font-size:17px;font-weight:800}.chosen-chip span{margin-left:6px;color:#8b9bc4}.word-bank{display:flex;flex-wrap:wrap;gap:10px;margin:25px 0 24px;min-height:80px;align-content:flex-start}.word-chip{background:#fff;border:2px solid #dce5f9;border-bottom-width:4px;border-radius:13px;color:#273d6d;padding:12px 17px;font-size:17px;font-weight:800;min-height:50px;transition:transform .1s,background .1s}.word-chip:active:not(:disabled){transform:translateY(2px);border-bottom-width:2px}.word-chip:disabled{opacity:.25}.field-label{display:block;font-size:13px;color:#71809d;font-weight:700;margin-bottom:9px}.typed-input{width:100%;border:2px solid #c8d6f5;padding:15px;border-radius:13px;font-size:18px;background:#fff;color:#192a49;outline:none}.typed-input:focus{border-color:#6878ee}.feedback{border-radius:15px;margin:18px 0;padding:15px 17px;font-size:14px;line-height:1.5}.feedback p{margin:5px 0 0;font-size:16px}.feedback.correct{background:#e8faf2;color:#146149}.feedback.wrong{background:#fff3e5;color:#835224}.feedback.reveal{background:#eef1ff;color:#4054a9}.inline-audio{display:block;background:transparent;border:0;padding:10px 0 0;color:inherit;font-weight:800}.question-actions{display:flex;gap:13px;align-items:center;flex-wrap:wrap;margin-top:10px}.question-actions .primary{flex:1;min-width:200px}.secondary{border:1px solid #dae3f4;border-radius:14px;color:#64749f;background:#f5f7fd;font-weight:800;padding:16px 20px}.secondary:disabled{opacity:.4}.exercise-tip{font-size:12px;color:#9ba6be;text-align:center;margin:22px 0 0}.finish-page{padding-top:35px}.finish-card{text-align:center}.finish-confetti{color:#e7b55d;font-size:30px;margin-bottom:10px;letter-spacing:20px}.finish-icon{display:block;font-size:71px;margin-bottom:10px}.finish-card p{color:#7b89a6;line-height:1.55;max-width:400px;margin:10px auto 20px}.stars{font-size:45px;color:#ffb852;letter-spacing:7px}.stars span{color:#cad2e3}.score{font-size:48px;font-weight:900;color:#626fe7;margin:13px 0 25px}.finish-actions{display:flex;gap:13px;flex-wrap:wrap;justify-content:center}.finish-actions>*{flex:1;min-width:220px}
@media(max-width:750px){.container{padding:0 17px}.topbar{height:64px;padding:0 17px}.hero{grid-template-columns:1fr;min-height:auto;border-radius:24px}.hero-copy{padding:30px 26px 165px}.hero h1{font-size:33px;letter-spacing:-1.2px}.hero p{font-size:14px}.hero-art{position:absolute;right:0;bottom:0;width:235px;height:177px;min-height:0}.hero-art:before{height:280px;width:280px;right:-40px;top:-70px}.mascot{width:93px;height:95px;border-width:6px;top:62px;left:60px}.mascot i:before,.mascot i:after{top:35px;width:9px;height:13px}.mascot i:before{left:29px}.mascot i:after{right:28px}.mascot b{bottom:5px;font-size:31px}.orb-a{top:10px;left:15px;font-size:11px;padding:11px}.orb-b{right:10px;bottom:22px;font-size:11px;padding:10px}.orb-c{top:22px;right:15px;font-size:27px}.profiles{grid-template-columns:1fr}.profile{min-height:100px;padding:16px}.section{margin:29px 0}.section h2{font-size:23px}.section-head{align-items:center}.lesson-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.lesson-card{padding:15px;min-height:210px}.lesson-card strong{font-size:17px}.lesson-icon{width:49px;height:49px;font-size:25px}.intro-card,.question-card,.finish-card{padding:25px 20px;border-radius:23px}.question-decoration{font-size:39px}.question-top h1{font-size:31px}.answer-tray{min-height:90px}.word-chip{padding:11px 15px;font-size:16px}.progress-meta{font-size:12px}.progress-meta span:last-child{max-width:155px;text-align:right}.exercise-nav .pill{font-size:11px}.finish-actions{flex-direction:column}.finish-actions>*{width:100%}.footer{margin-top:32px;padding:18px 17px 29px}}
@media(max-width:390px){.hero h1{font-size:29px}.hero-copy{padding-bottom:170px}.profile-info strong{font-size:15px}.lesson-card strong{font-size:16px}.question-top h1{font-size:27px}.word-chip{font-size:15px;padding:10px 12px}.primary.huge{font-size:15px}.intro-meta{gap:9px}.lesson-card{min-height:207px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* First-words warm-up for the complete beginner */
.vocab{text-align:left;background:#fff9ee;border:1px solid #f6e7c9;border-radius:18px;padding:18px;margin:18px 0}
.vocab h3{font-size:16px;color:#4a4d70;margin:0 0 5px;letter-spacing:-.3px}
.vocab p{font-size:12px;color:#91866d;margin:0 0 13px}
.vocab-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.vocab-word{display:flex;flex-direction:column;gap:5px;background:#fff;border:1px solid #f3e4cf;border-radius:12px;padding:10px;text-align:left;color:#263557}
.vocab-word:hover{background:#f5f7ff;border-color:#b8c7fa}
.vocab-word span{font-size:16px}
.vocab-word small{font-size:12px;color:#7785a0}
@media(min-width:650px){.vocab-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}