:root{--ink:#23352f;--muted:#7d8982;--green:#3b866d;--green-dark:#286b56;--mint:#e8f3ed;--cream:#f7f8f2;--line:#e4e9e2;--yellow:#f3c85b;--coral:#e88770;--white:#fff;--shadow:0 14px 40px rgba(43,71,59,.08);font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--cream)}
*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:var(--cream)}button,a{font:inherit}button{color:inherit}.app-shell{min-height:100vh}.sidebar{width:248px;position:fixed;inset:0 auto 0 0;padding:30px 20px 22px;background:#fff;border-right:1px solid #edf0eb;display:flex;flex-direction:column;z-index:2}.brand{display:flex;align-items:center;gap:11px;margin:0 0 48px 8px;color:var(--ink);font:900 21px Nunito,sans-serif;text-decoration:none;letter-spacing:-.7px}.brand-light{font-weight:700;color:var(--green)}.brand-mark{display:block;flex:0 0 auto;width:37px;height:37px;border-radius:13px;object-fit:cover;box-shadow:0 5px 12px #3b866d35}.side-nav{display:grid;gap:8px}.nav-link{height:50px;width:100%;border:0;border-radius:13px;background:transparent;display:flex;align-items:center;gap:15px;padding:0 15px;text-decoration:none;color:#78847d;font-size:14px;font-weight:700;text-align:left;cursor:pointer}.nav-link:hover{background:#f5f8f4;color:var(--green-dark)}.nav-link.active{background:var(--mint);color:var(--green-dark);box-shadow:inset 3px 0 var(--green)}.nav-icon{width:20px;text-align:center;font-size:22px;line-height:1}.sidebar-bottom{margin-top:auto}.sidebar-note{border-radius:15px;background:#f8f5e9;padding:15px;display:flex;gap:10px;align-items:flex-start;color:#81734c;font-size:12px;line-height:1.55}.sidebar-note p{margin:0}.sidebar-note strong{color:#5e563e}.note-spark{color:#c69d37;font-size:19px}.help-link{margin:15px 0 0;padding:5px 3px;border:0;background:none;color:#8c9690;font-size:11px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}.main-content{margin-left:248px;min-height:100vh}.topbar{height:79px;display:flex;align-items:center;gap:12px;padding:0 clamp(22px,5vw,70px);border-bottom:1px solid #e8ece6;background:#ffffffb8}.top-spacer{flex:1}.stat-pill{height:37px;min-width:79px;padding:0 11px;border:1px solid var(--line);border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:center;gap:6px;font-size:13px}.stat-pill strong{font-weight:800}.streak-pill span:first-child{font-size:16px}.streak-pill strong{color:#cc7a42}.xp-pill span:first-child{color:#d5a32e}.xp-pill strong{color:#b28a28}.stat-label{color:#98a19b;font-size:11px}.avatar{width:36px;height:36px;border:0;border-radius:12px;background:#f1dfc8;color:#986342;font-weight:800;cursor:pointer}.mobile-brand{display:none}.view{max-width:1040px;margin:0 auto;padding:44px clamp(22px,5vw,66px) 80px}.hero{position:relative;min-height:195px;border-radius:22px;background:#32785f;color:#fff;padding:31px 38px;overflow:hidden;display:flex;align-items:center;box-shadow:0 13px 24px #276a5630}.hero:after{content:'';position:absolute;width:270px;height:270px;border:1px solid #ffffff20;border-radius:50%;right:50px;top:-140px;box-shadow:0 0 0 28px #ffffff0a,0 0 0 57px #ffffff08}.hero-content{position:relative;z-index:1;max-width:570px}.eyebrow{margin:0 0 10px;text-transform:uppercase;letter-spacing:1.4px;font-size:10px;font-weight:800;opacity:.76}.hero h1,.lesson-header h1{font:900 clamp(26px,3.2vw,36px) Nunito,sans-serif;letter-spacing:-.9px;margin:0 0 9px}.hero p:not(.eyebrow){margin:0;font-size:14px;line-height:1.6;color:#e0eee6}.hero-figure{position:absolute;right:7%;bottom:-9px;font-size:100px;filter:drop-shadow(0 8px 8px #1d563d45);transform:rotate(-6deg)}.section-heading{display:flex;align-items:end;justify-content:space-between;margin:39px 0 18px}.section-heading h2{font:900 20px Nunito,sans-serif;letter-spacing:-.35px;margin:0}.section-heading p{font-size:12px;color:var(--muted);margin:5px 0 0}.text-button{border:0;background:none;color:var(--green);font-size:12px;font-weight:800;cursor:pointer}.course-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.course-card{--accent:var(--green);position:relative;border:1px solid var(--line);border-radius:16px;background:#fff;padding:18px 18px 17px 68px;min-height:109px;text-align:left;cursor:pointer;transition:transform .17s,box-shadow .17s,border-color .17s;box-shadow:0 3px 10px #26372d04}.course-card:hover{transform:translateY(-2px);border-color:#bdd9ca;box-shadow:var(--shadow)}.course-card .course-icon{position:absolute;left:17px;top:18px;width:39px;height:39px;border-radius:13px;display:grid;place-items:center;background:#e9f3ec;color:var(--accent);font-size:20px}.course-card:nth-child(2) .course-icon{background:#f9efdd}.course-card:nth-child(3) .course-icon{background:#f9eae5}.course-card:nth-child(4) .course-icon{background:#eeeafb}.course-card:nth-child(5) .course-icon{background:#e5f0f5}.course-card h3{font:800 15px Nunito,sans-serif;margin:0 0 5px}.course-card p{margin:0;color:var(--muted);font-size:11px;line-height:1.45}.course-meta{display:flex;gap:8px;margin-top:10px}.tag{display:inline-flex;align-items:center;border-radius:20px;background:#f4f6f2;padding:4px 8px;color:#849087;font-size:9px;font-weight:800}.tag.progress-tag{background:#edf6ef;color:#548265}.daily-card{margin-top:14px;border:1px solid #efe6c9;background:#fffcf1;border-radius:15px;padding:15px 18px;display:flex;align-items:center;gap:13px}.daily-icon{font-size:22px}.daily-card strong{display:block;font-size:12px}.daily-card p{margin:3px 0 0;color:#8f8a71;font-size:11px}.daily-card button{margin-left:auto;border:0;border-radius:10px;background:#f1c955;padding:10px 13px;font-size:11px;font-weight:800;cursor:pointer}.loading-card{min-height:50vh;display:grid;place-content:center;justify-items:center;color:var(--muted);gap:14px}.loader{width:30px;height:30px;border:3px solid #dfe9e2;border-top-color:var(--green);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}

.lesson-shell{max-width:690px;margin:0 auto}.lesson-top{display:flex;align-items:center;gap:16px;margin:0 0 35px}.icon-button{width:35px;height:35px;border:0;border-radius:50%;background:transparent;color:#89948d;font-size:23px;cursor:pointer}.icon-button:hover{background:#eaf0eb}.progress-track{height:10px;border-radius:20px;background:#e5ebe5;flex:1;overflow:hidden}.progress-fill{height:100%;border-radius:inherit;background:var(--green);transition:width .25s}.heart-count{color:#d87466;font-size:13px;font-weight:800;white-space:nowrap}.lesson-kicker{font-size:10px;text-transform:uppercase;color:var(--green);letter-spacing:1.2px;font-weight:800;margin:0 0 8px}.lesson-header h1{font-size:28px;margin-bottom:7px}.lesson-header p{color:var(--muted);font-size:13px;margin:0;line-height:1.5}.question-card{margin-top:24px;padding:24px;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:0 6px 20px #243b2d07}.question-label{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:#98a39b;font-weight:800;margin:0 0 12px}.prompt-verse{font:700 18px/1.65 Nunito,sans-serif;color:#34483d;margin:0}.prompt-ref{margin-top:14px;color:var(--green);font-size:12px;font-weight:800}.options{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:17px}.option-button{min-height:51px;border:1px solid #dfe6df;border-bottom-width:3px;border-radius:12px;background:white;padding:11px 13px;text-align:left;font-size:12px;font-weight:700;line-height:1.4;cursor:pointer;transition:.15s}.option-button:hover{border-color:#9dc5ad;background:#fbfdfb}.option-button.selected{border-color:var(--green);background:#edf7f0;color:#2f7159}.option-button.correct{border-color:#71ad83;background:#eaf7ed;color:#31704a}.option-button.incorrect{border-color:#dc9284;background:#fff0ec;color:#a54f43}.option-button:disabled{cursor:default}.lesson-footer{margin-top:19px;display:flex;align-items:center;justify-content:space-between;gap:12px}.hint-button{border:0;background:none;color:#8d9990;font-size:11px;font-weight:700;cursor:pointer}.primary-button{min-width:145px;min-height:47px;border:0;border-bottom:3px solid #246449;border-radius:12px;background:var(--green);padding:0 22px;color:#fff;font-weight:800;font-size:13px;cursor:pointer;transition:transform .1s,background .15s}.primary-button:hover{background:var(--green-dark)}.primary-button:active{transform:translateY(2px);border-bottom-width:1px}.primary-button:disabled{background:#cad6ce;border-bottom-color:#bac7bd;cursor:not-allowed}.feedback{margin-top:18px;padding:12px 15px;border-radius:12px;font-size:12px;font-weight:700;line-height:1.45}.feedback.good{background:#eaf6ed;color:#33744a}.feedback.bad{background:#fff0ec;color:#a94f43}.feedback span{display:block;font-size:11px;font-weight:500;margin-top:4px}.word-bank{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:23px}.word-chip{border:1px solid #dfe6df;border-bottom-width:3px;border-radius:10px;background:#fff;padding:9px 12px;font-weight:800;font-size:12px;cursor:pointer}.word-chip:hover{border-color:#9fc7ac;background:#f7fbf7}.word-chip:disabled{opacity:.35;cursor:default}.gap-line{display:inline-flex;min-width:67px;min-height:28px;align-items:center;justify-content:center;border-bottom:2px solid #75a98a;background:#edf7f0;border-radius:5px 5px 0 0;margin:0 3px;padding:0 5px;color:var(--green-dark);font-weight:800;font-size:14px;cursor:pointer;vertical-align:baseline}.gap-line.empty{color:#a1aaa3;background:#f4f6f3;border-color:#cdd6cf}.gap-line.active{outline:2px solid #b7d6c1}.arrange-area{display:flex;min-height:53px;flex-wrap:wrap;align-content:flex-start;gap:8px;padding:10px;border:1px dashed #cedbd0;border-radius:12px;background:#fafcf9}.arrange-word{border:1px solid #dce5dc;border-bottom-width:3px;border-radius:9px;background:#fff;padding:8px 10px;font-size:12px;font-weight:800;cursor:pointer}.arrange-word.placed{background:#edf6ef;border-color:#8db99a;color:#2d6b4a}.empty-state{padding:28px;text-align:center;border:1px dashed #cdd8cf;border-radius:17px;color:var(--muted);background:#fff}.empty-state h2{font:800 19px Nunito,sans-serif;color:var(--ink)}.lesson-complete{text-align:center;padding:37px 25px;border:1px solid var(--line);border-radius:22px;background:#fff;box-shadow:var(--shadow)}.complete-emoji{font-size:58px}.lesson-complete h1{font:900 30px Nunito,sans-serif;margin:9px 0}.lesson-complete p{max-width:400px;margin:0 auto;color:var(--muted);font-size:13px;line-height:1.6}.reward-row{display:flex;justify-content:center;gap:10px;margin:21px 0}.reward{border-radius:12px;background:#f6f5ec;padding:10px 14px;font-size:12px;font-weight:800}.library-list{display:grid;gap:9px;margin-top:18px}.library-item{display:flex;align-items:flex-start;gap:12px;padding:13px 15px;border:1px solid var(--line);border-radius:13px;background:white}.library-num{display:grid;place-items:center;flex:0 0 29px;height:29px;border-radius:10px;background:#eaf4ed;color:var(--green);font-size:11px;font-weight:900}.library-item strong{font-size:12px}.library-item p{margin:4px 0 0;color:#728077;font:600 12px/1.5 Nunito,sans-serif}.help-panel{max-width:660px;border:1px solid var(--line);border-radius:18px;background:#fff;padding:23px;margin-top:18px}.help-panel h2{font:800 16px Nunito,sans-serif;margin:0 0 8px}.help-panel p,.help-panel li{font-size:12px;line-height:1.7;color:#69776e}.help-panel pre{overflow:auto;background:#f4f7f3;padding:13px;border-radius:10px;font-size:11px;line-height:1.6;color:#355241}.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,15px);opacity:0;pointer-events:none;border-radius:12px;background:#2c4938;color:#fff;padding:11px 16px;font-size:12px;font-weight:700;box-shadow:var(--shadow);transition:.2s;z-index:9}.toast.visible{opacity:1;transform:translate(-50%,0)}

@media(max-width:900px){.sidebar{width:210px;padding:25px 15px 18px}.main-content{margin-left:210px}.view{padding-top:32px}.hero{padding:27px}.hero-figure{right:4%;font-size:81px}.course-grid{grid-template-columns:1fr}}
@media(max-width:650px){.sidebar{display:none}.main-content{margin-left:0}.topbar{height:63px;padding:0 16px;gap:8px}.mobile-brand{display:flex;align-items:center;gap:8px;border:0;background:none;padding:0;font:900 15px Nunito,sans-serif}.mobile-brand .brand-mark{width:31px;height:31px;border-radius:10px}.stat-pill{height:33px;min-width:51px;padding:0 7px;gap:4px}.stat-label{display:none}.stat-pill strong{font-size:12px}.avatar{width:32px;height:32px}.view{padding:23px 16px 60px}.hero{min-height:174px;padding:23px 20px;border-radius:17px}.hero-content{max-width:78%}.hero h1{font-size:25px}.hero p:not(.eyebrow){font-size:12px}.hero-figure{right:-2%;bottom:-2px;font-size:67px;opacity:.8}.section-heading{margin-top:29px}.section-heading h2{font-size:18px}.course-card{min-height:101px;padding-left:65px}.daily-card{align-items:flex-start}.daily-card button{align-self:center;white-space:nowrap}.lesson-top{margin-bottom:27px;gap:10px}.lesson-header h1{font-size:25px}.question-card{padding:17px}.prompt-verse{font-size:16px}.options{grid-template-columns:1fr}.option-button{min-height:47px}.lesson-footer{position:sticky;bottom:0;margin:16px -16px -10px;padding:12px 16px;background:#f7f8f2ed;backdrop-filter:blur(8px)}.primary-button{min-width:125px}.gap-line{min-width:57px}.lesson-complete{padding:29px 17px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}
.reference-input{width:100%;min-height:47px;padding:11px 13px;border:1px solid #dfe6df;border-bottom-width:3px;border-radius:11px;background:#fff;color:var(--ink);font:700 14px ui-sans-serif,system-ui,sans-serif;outline:none}.reference-input:focus{border-color:#87b89a;box-shadow:0 0 0 3px #eaf5ed}
.score-count{color:var(--green);font-size:12px;font-weight:800;white-space:nowrap}
.settings-group{display:flex;align-items:center;gap:8px}.settings-select{height:37px;max-width:215px;border:1px solid var(--line);border-radius:11px;background:#fff;padding:0 28px 0 10px;color:var(--ink);font:700 11px ui-sans-serif,system-ui,sans-serif;cursor:pointer}.language-select{width:120px}.translation-select{width:205px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:1000px) and (min-width:651px){.topbar{padding-left:20px;padding-right:20px;gap:7px}.settings-group{gap:5px}.settings-select{font-size:10px}.language-select{width:103px}.translation-select{width:175px}.stat-label{display:none}.stat-pill{min-width:47px;padding:0 8px}}
@media(max-width:650px){.topbar{height:auto;min-height:63px;flex-wrap:wrap;padding:10px 16px;gap:8px}.mobile-brand{order:0}.top-spacer{order:0}.stat-pill{order:1}.avatar{order:1}.settings-group{order:2;width:100%;gap:8px}.language-select{flex:0 0 112px;width:112px}.translation-select{flex:1;min-width:0;width:auto;max-width:none}.settings-select{height:35px;font-size:11px}}
.sound-toggle{flex:0 0 37px;width:37px;height:37px;border:1px solid var(--line);border-radius:11px;background:#fff;font-size:16px;cursor:pointer}.sound-toggle:hover{border-color:#bdd9ca;background:#f8fbf8}.sound-toggle:focus-visible{outline:3px solid #7fb69a;outline-offset:2px}
.feedback{display:flex;align-items:center;gap:12px;min-height:116px;padding:11px 17px;border:1px solid transparent;overflow:hidden}.feedback.good{border-color:#c9e8cf;background:linear-gradient(110deg,#eaf8ed,#f5fbef);color:#33744a}.feedback.bad{border-color:#f2d5c8;background:linear-gradient(110deg,#fff0ec,#fff8ec);color:#a94f43}.feedback-image{width:108px;height:92px;flex:0 0 108px;object-fit:contain;filter:drop-shadow(0 4px 3px #29493416)}.feedback-image-success{animation:feedback-celebrate .55s cubic-bezier(.2,.9,.35,1.35) both}.feedback-image-retry{animation:feedback-think .45s ease-out both}.feedback-copy{min-width:0}.feedback-copy strong{display:block;font-size:15px;font-weight:900}.feedback-copy span{display:block;margin-top:5px;font-size:11px;font-weight:600;line-height:1.45}.complete-illustration{display:block;width:158px;height:136px;object-fit:contain;margin:0 auto 10px;animation:feedback-celebrate .7s cubic-bezier(.2,.9,.35,1.35) both}@keyframes feedback-celebrate{0%{transform:translateY(12px) scale(.72) rotate(-8deg);opacity:0}65%{transform:translateY(-5px) scale(1.08) rotate(4deg);opacity:1}100%{transform:translateY(0) scale(1) rotate(0)}}@keyframes feedback-think{0%{transform:translateX(-7px) rotate(-8deg);opacity:.45}65%{transform:translateX(4px) rotate(4deg);opacity:1}100%{transform:translateX(0) rotate(0);opacity:1}}@media(max-width:480px){.feedback{gap:7px;padding:9px 11px}.feedback-image{width:88px;height:78px;flex-basis:88px}.feedback-copy strong{font-size:14px}}
.section-actions{display:flex;align-items:center;gap:14px}.leaderboard-header{display:flex;align-items:flex-end;justify-content:space-between;gap:18px}.leaderboard-panel{margin-top:22px;padding:22px;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:0 6px 20px #243b2d07}.leaderboard-list{display:grid;gap:9px;margin:0;padding:0;list-style:none}.leaderboard-row{min-height:58px;display:grid;grid-template-columns:38px minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:10px 13px;border:1px solid #e8ece7;border-radius:13px;background:#fff}.leaderboard-row.is-player{border-color:#9cc8a9;background:#f1f8f2}.leaderboard-rank{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:#f5f2e6;color:#a27f27;font-weight:900}.leaderboard-row:nth-child(1) .leaderboard-rank{background:#f8e9b8;color:#94701b}.leaderboard-row:nth-child(2) .leaderboard-rank{background:#e9eef0;color:#64757c}.leaderboard-row:nth-child(3) .leaderboard-rank{background:#f4e2d3;color:#9b6745}.leaderboard-row strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}.leaderboard-score{color:#9a771b;font-size:14px;font-weight:900;white-space:nowrap}.leaderboard-score small{font-size:10px;color:#a69a76}.leaderboard-you{border-radius:20px;background:#dcefe0;padding:4px 8px;color:#38734d;font-size:10px;font-weight:800}.leaderboard-note{margin:16px 2px 0;color:#87928a;font-size:11px;line-height:1.5}.leaderboard-message{padding:18px 12px;border:1px dashed #d7dfd8;border-radius:12px;color:var(--muted);font-size:13px;line-height:1.5;text-align:center}.nickname-summary{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:22px}.nickname-summary p{margin-bottom:5px}.nickname-summary strong{font-size:16px}.secondary-button{min-height:42px;border:1px solid #dce5dc;border-radius:11px;background:#fff;padding:0 15px;color:var(--green-dark);font-size:12px;font-weight:800;cursor:pointer}.secondary-button:hover{border-color:#a9cdb3;background:#f7fbf7}.nickname-dialog{width:min(440px,calc(100vw - 28px));border:1px solid #e1e8e1;border-radius:20px;padding:0;background:#fff;color:var(--ink);box-shadow:0 24px 80px #17291d40}.nickname-dialog::backdrop{background:#1b3028a8;backdrop-filter:blur(3px)}.nickname-form{padding:29px}.nickname-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:15px;background:#f8f1d9;font-size:24px}.nickname-form h2{margin:17px 0 7px;font:900 22px Nunito,sans-serif}.nickname-form>p:not(.nickname-error){margin:0 0 19px;color:var(--muted);font-size:13px;line-height:1.55}.nickname-form label{display:block;margin-bottom:7px;font-size:12px;font-weight:800}.nickname-form input{width:100%;height:47px;border:1px solid #dfe6df;border-bottom-width:3px;border-radius:11px;padding:0 13px;font:700 14px ui-sans-serif,system-ui,sans-serif;outline:none}.nickname-form input:focus{border-color:#87b89a;box-shadow:0 0 0 3px #eaf5ed}.nickname-form small{display:block;margin-top:8px;color:#89948d;font-size:11px;line-height:1.5}.nickname-error{min-height:18px;margin:5px 0;color:#b84f43;font-size:11px}.nickname-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:7px}.nickname-actions .primary-button{min-width:0;min-height:42px;font-size:12px}.profile-grid .course-card{cursor:default}
@media(max-width:650px){.section-actions{align-items:flex-end;flex-direction:column;gap:8px}.leaderboard-header{align-items:flex-start;flex-direction:column}.leaderboard-header .secondary-button{align-self:flex-end;margin-top:-6px}.leaderboard-panel{padding:15px}.leaderboard-row{grid-template-columns:34px minmax(0,1fr) auto;gap:8px;padding:9px}.leaderboard-row strong{font-size:12px}.leaderboard-you{grid-column:2;justify-self:start;margin-top:-2px}.leaderboard-score{grid-column:3;grid-row:1 / span 2}.nickname-form{padding:23px}.nickname-summary{align-items:flex-start}}