:root{--ink: #1f2a24;--muted: #6f7a73;--green: #1f8a5b;--green-dark: #166946;--green-soft: #dff3e8;--peach: #ffb38a;--lilac: #c9b8f0;--red: #e0524f;--red-soft: #fde8e6;--gold: #f4b740;--track: rgba(31, 42, 36, .08);--glass: rgba(255, 255, 255, .62);--glass-strong: rgba(255, 255, 255, .82);--edge: rgba(255, 255, 255, .9);--shadow: 0 10px 30px rgba(60, 80, 70, .1);--radius: 22px;color-scheme:light}*{box-sizing:border-box}html,body{margin:0}body{color:var(--ink);font:600 16px/1.5 Nunito,system-ui,sans-serif;-webkit-font-smoothing:antialiased;background:#f3efe6 linear-gradient(160deg,#d9f2e4,#f6f1dc 38%,#fde3d3 70%,#f9d4dc) fixed;min-height:100vh}img{max-width:100%;display:block}a{color:inherit;text-decoration:none}button,select{font:inherit;color:inherit}h1,h2,h3{margin:0;line-height:1.2;font-weight:800}h1{font-size:30px}h2{font-size:19px}.muted{color:var(--muted)}.glass{background:var(--glass);border:1px solid var(--edge);border-radius:var(--radius);box-shadow:var(--shadow);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%)}.app{min-height:100vh}.screen{max-width:720px;margin:0 auto;padding:22px 16px 120px}.bottom-nav{position:fixed;left:50%;bottom:14px;transform:translate(-50%);z-index:20;width:min(440px,calc(100% - 24px));display:grid;grid-template-columns:1fr 1fr auto 1fr 1fr;align-items:center;padding:8px 10px;border-radius:26px;background:var(--glass-strong);border:1px solid var(--edge);box-shadow:0 12px 34px #3c50462e;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}.bottom-nav a{display:flex;flex-direction:column;align-items:center;gap:1px;font-size:11px;font-weight:800;color:var(--muted)}.bottom-nav a span{font-size:19px;filter:grayscale(1);opacity:.7}.bottom-nav a.active{color:var(--green)}.bottom-nav a.active span{filter:none;opacity:1}.bottom-nav .fab{width:56px;height:56px;margin:-26px 8px 0;display:grid;place-items:center;border-radius:50%;background:var(--green);color:#fff;font-size:22px;box-shadow:0 8px 20px color-mix(in srgb,var(--green) 40%,transparent);border:4px solid rgba(255,255,255,.9)}.round-btn{flex:none;width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:var(--green);color:#fff;font-weight:900;font-size:16px}.icon-btn{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:var(--glass-strong);border:1px solid var(--edge);font-weight:900}.page-title{margin:6px 0 16px}.page-bar{display:grid;grid-template-columns:40px 1fr 40px;align-items:center;text-align:center;margin-bottom:14px}.section-head{display:flex;justify-content:space-between;align-items:baseline;margin:24px 2px 10px}.section-head a{color:var(--green);font-weight:800;font-size:14px}.streak{padding:7px 14px;border-radius:999px;font-weight:900}.stars{color:var(--gold);letter-spacing:2px;font-size:16px}.stars .dim{color:#1f2a2426}.big-num{font-size:30px;font-weight:900;line-height:1.1}.big-num span{font-size:15px;color:var(--muted);font-weight:800}.bar{height:8px;border-radius:6px;background:var(--track);overflow:hidden;margin-top:8px}.bar span{display:block;height:100%;border-radius:6px;background:var(--green)}.ring{position:relative;flex:none}.ring-in{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.hello{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.hello p{margin:2px 0 0}.goal{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px}.goal>div:first-child{flex:1}.mini-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}.mini-stats>div{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;padding:12px 14px;border-radius:18px}.mini-stats .ico{grid-row:span 2;font-size:22px;align-self:center}.mini-stats small{color:var(--muted);font-size:12.5px}.mini-stats b{font-size:18px}.continue{display:flex;align-items:center;gap:14px;padding:12px 14px}.continue img{width:64px;height:64px;object-fit:contain}.continue>div{flex:1;display:flex;flex-direction:column}.h-scroll{display:grid;grid-auto-flow:column;grid-auto-columns:140px;gap:12px;overflow-x:auto;padding:4px 2px 14px;scroll-snap-type:x mandatory}.h-scroll>*{scroll-snap-align:start}.topic-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}.topic-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:12px;min-height:176px}.topic-card img{width:100%;height:92px;object-fit:contain;filter:drop-shadow(0 8px 10px rgba(0,0,0,.12))}.topic-card .emoji{width:100%;height:92px;display:grid;place-items:center;font-size:52px}.topic-card b{font-size:14.5px;line-height:1.25}.topic-card .soon{color:var(--muted);font-weight:800}.topic-card .plus{position:absolute;right:10px;bottom:10px;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:var(--green);color:#fff;font-weight:900}.topic-card.locked{opacity:.55}.topic-card.open:hover{transform:translateY(-2px);transition:transform .15s}.tabs,.lang-list{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}.tab{padding:8px 18px;border-radius:999px;border:1px solid var(--edge);background:var(--glass);font-weight:800;cursor:pointer}.tab.active{background:var(--green);color:#fff;border-color:var(--green)}.soon-box{padding:26px;text-align:center;font-weight:800;color:var(--muted)}.hub-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:20px}.hub-head img{width:150px;height:150px;object-fit:contain;filter:drop-shadow(0 12px 16px rgba(0,0,0,.15))}.hub-head .emoji.big{font-size:90px}.hub-head p{margin:0}.plan{display:grid;gap:10px}.plan-item{display:flex;align-items:center;gap:14px;padding:12px 14px}.plan-ico{flex:none;width:54px;height:54px;display:grid;place-items:center;border-radius:50%;background:var(--glass-strong);font-size:26px;box-shadow:inset 0 0 0 1px var(--edge)}.plan-txt{flex:1;display:flex;flex-direction:column;line-height:1.3}.plan-txt small:first-child{color:var(--green);font-weight:800;font-size:12px}.plan-item.next{box-shadow:0 0 0 2px var(--green),var(--shadow)}.plan-item.done .round-btn{background:var(--green-soft);color:var(--green)}.chart-card{padding:18px;margin-bottom:14px}.donut-wrap{display:grid;place-items:center;margin:14px 0}.legend{list-style:none;margin:0;padding:0;display:grid;gap:8px}.legend li{display:flex;align-items:center;gap:10px}.legend i{width:12px;height:12px;border-radius:50%}.legend b{margin-left:auto;font-size:14px}.bars{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;align-items:end;height:170px;margin-top:14px}.bar-col{position:relative;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px}.bar-col span{width:70%;max-width:30px;border-radius:10px;background:color-mix(in srgb,var(--green) 28%,transparent)}.bar-col.today span{background:var(--green)}.bar-col small{font-size:11.5px;color:var(--muted);font-weight:800}.bar-col em{font-style:normal;font-size:11px;font-weight:900;padding:1px 6px;border-radius:8px;background:var(--ink);color:#fff}.topic-progress{display:grid;grid-template-columns:48px 1fr auto;gap:12px;align-items:center;margin:12px 0}.topic-progress img{width:48px;height:48px;object-fit:contain}.stepbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:12px;padding:12px 16px;max-width:720px;margin:0 auto}.progress{flex:1;display:grid;grid-template-columns:repeat(5,1fr);gap:6px}.progress span{height:10px;border-radius:6px;background:#ffffffb3}.progress span.on{background:color-mix(in srgb,var(--green) 45%,transparent)}.progress span.cur{background:var(--green)}.step .screen{padding-top:8px;padding-bottom:60px}.step-title{font-size:26px;margin-bottom:14px}.step-title small{display:block;font-size:14px;color:var(--muted);font-weight:800}.plain{margin:0 0 12px}.lesson-meta{color:var(--muted);font-size:14px;font-weight:700;margin:4px 0}.landing-eyebrow{display:block;font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--green);margin-bottom:6px}.card{background:var(--glass);border:1px solid var(--edge);border-radius:var(--radius);box-shadow:var(--shadow);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding:18px;margin:14px 0}.card h3{font-size:18px;margin-bottom:8px}.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}.actions.center{justify-content:center}.button{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:13px 22px;border-radius:999px;border:0;background:var(--green);color:#fff;font-weight:800;font-size:16px;cursor:pointer;box-shadow:0 8px 18px color-mix(in srgb,var(--green) 30%,transparent)}.button:hover{background:var(--green-dark)}.button:disabled{opacity:.45;cursor:default}.button.secondary{background:var(--glass-strong);color:var(--green);border:1px solid var(--edge);box-shadow:none}.play-panel>.button{margin-top:20px;width:100%;max-width:420px}.form-error{color:var(--red);font-weight:800}.word-group h3{margin:22px 2px 10px;font-size:19px}.word-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}.word-tile{position:relative;display:flex;flex-direction:column;gap:2px;text-align:left;padding:10px 12px 14px;cursor:pointer;background:var(--glass);border:1px solid var(--edge);border-radius:var(--radius);box-shadow:var(--shadow);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}.word-tile:hover{box-shadow:0 0 0 2px var(--green),var(--shadow)}.word-tile b{font-size:15.5px;font-weight:800}.word-img{width:100%;aspect-ratio:4 / 3;object-fit:contain;border-radius:14px;margin-bottom:4px;filter:drop-shadow(0 8px 10px rgba(0,0,0,.12))}.word-img.big{width:min(240px,66vw);margin:0 auto 6px}.word-emoji{font-size:44px;aspect-ratio:4 / 3;display:grid;place-items:center;border-radius:14px;background:#ffffff8c;margin-bottom:4px}.word-emoji.big{font-size:80px;width:min(240px,66vw);margin:0 auto 6px}.word-tr{color:var(--green);font-weight:800;font-size:13.5px}.word-ex{color:var(--muted);font-size:12.5px;line-height:1.4}.word-play{position:absolute;top:10px;right:10px;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:var(--green);color:#fff;font-size:12px}.group-pick,.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}.chip{padding:7px 14px;border-radius:999px;border:1px solid var(--edge);background:var(--glass);font-weight:800;font-size:14px;cursor:pointer}.chip.active{background:var(--green);border-color:var(--green);color:#fff}.mode-switch{display:flex;gap:4px;padding:4px;border-radius:999px;background:#ffffff80;border:1px solid var(--edge);margin-bottom:18px;max-width:420px}.mode{flex:1;padding:8px 10px;border-radius:999px;border:0;background:none;font-weight:800;color:var(--muted);cursor:pointer}.mode.active{background:#fff;color:var(--green);box-shadow:0 4px 12px #00000014}.cards-wrap{max-width:460px;margin:0 auto}.flashcard{width:100%;min-height:330px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:22px;text-align:center;cursor:pointer;background:var(--glass-strong);border:1px solid var(--edge);border-radius:30px;box-shadow:var(--shadow)}.flashcard.flipped{background:var(--green-soft)}.fc-tr{font-size:24px;font-weight:900;color:var(--green)}.fc-en{font-size:30px;font-weight:900}.match-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:20px;font-weight:900}.match-board{display:grid;grid-template-columns:1fr 1fr;gap:10px}.match-board>div{display:grid;gap:10px;align-content:start}.match-item{padding:13px 12px;border-radius:16px;border:1px solid var(--edge);background:var(--glass-strong);text-align:left;font-weight:800;font-size:15px;cursor:pointer;box-shadow:var(--shadow);transition:opacity .3s}.match-item.picked{box-shadow:0 0 0 2px var(--green)}.match-item.wrong{background:var(--red-soft);box-shadow:0 0 0 2px var(--red);animation:shake .3s}.match-item.matched{background:var(--green-soft);opacity:.45;cursor:default}@keyframes shake{25%{transform:translate(-4px)}75%{transform:translate(4px)}}.test-card{max-width:560px}.test-card h3{font-size:26px;margin:4px 0}.play-options{display:grid;gap:10px;margin:12px 0}.play-option{padding:14px 16px;border-radius:18px;border:1px solid var(--edge);background:var(--glass-strong);text-align:left;font-weight:800;cursor:pointer;box-shadow:var(--shadow)}.play-option:hover:not(:disabled){box-shadow:0 0 0 2px var(--green)}.play-option.picked{box-shadow:0 0 0 2px var(--green)}.play-option.right{background:var(--green-soft);box-shadow:0 0 0 2px var(--green);color:var(--green-dark)}.play-option.wrong{background:var(--red-soft);box-shadow:0 0 0 2px var(--red);color:#a3302d}.play-done{margin-top:16px;padding:22px;max-width:560px;background:var(--glass-strong);border:1px solid var(--edge);border-radius:var(--radius);box-shadow:var(--shadow)}.play-done h3{font-size:23px;margin-bottom:6px}.chat{display:grid;gap:8px;margin:14px 0;max-width:600px}.bubble{max-width:85%;padding:10px 14px;border-radius:20px;font-weight:700}.bubble.staff{justify-self:start;background:var(--glass-strong);border:1px solid var(--edge);border-bottom-left-radius:6px}.bubble.customer{justify-self:end;background:var(--green);color:#fff;border-bottom-right-radius:6px}.bubble.now{box-shadow:0 0 0 3px var(--gold)}.bubble .who{display:block;font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;opacity:.7}.bubble .mini{border:0;background:none;cursor:pointer}.bubble.sample{max-width:100%;margin-top:12px}.comics{display:grid;gap:12px;margin-top:14px;max-width:600px}.comics img{border-radius:20px;box-shadow:var(--shadow)}.say-aloud{display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding:14px 16px;border-radius:20px;background:var(--green-soft);font-weight:800;max-width:600px}.mission h3{font-size:20px;line-height:1.4}@media (max-width: 560px){.word-grid,.topic-grid{grid-template-columns:repeat(2,1fr);gap:10px}.match-item{font-size:14px;padding:11px 9px}h1{font-size:27px}}.bottom-nav a img{width:26px;height:26px;object-fit:contain;opacity:.55;filter:grayscale(.6);transition:opacity .15s}.bottom-nav a.active img{opacity:1;filter:none}.mini-stats img.ico{width:34px;height:34px;object-fit:contain}.plan-ico img{width:38px;height:38px;object-fit:contain}.step-title img{width:40px;height:40px;object-fit:contain;display:inline-block;vertical-align:-10px;margin-right:8px}.tr-block{margin:0 0 12px}.tr-block>.plain,.tr-block>h3{margin-bottom:0}.tr-btn{margin-left:8px;padding:2px 10px;border-radius:999px;border:1px solid var(--edge);background:var(--glass-strong);color:var(--green);font-size:12.5px;font-weight:800;cursor:pointer;vertical-align:2px;white-space:nowrap}.tr-btn.on{background:var(--green);color:#fff;border-color:var(--green)}.tr-text{margin:6px 0 0;padding:8px 12px;border-radius:14px;background:var(--green-soft);color:var(--green-dark);font-weight:700;font-size:15px}.bubble.tappable{cursor:pointer}.bubble-tr{display:block;margin-top:4px;font-size:13.5px;font-weight:600;opacity:.8;font-style:italic}.bubble.staff .bubble-tr{color:var(--green-dark)}.bubble.friend{justify-self:end;background:var(--green-dark);color:#fff;border-bottom-right-radius:6px}.comic-player{margin:12px 0 14px;max-width:640px}.comic-frame{display:grid;place-items:center}.comic-frame img{max-width:100%;max-height:100%;border-radius:20px;box-shadow:var(--shadow)}.comic-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px}.comic-nav .icon-btn{cursor:pointer;font-size:22px}.comic-nav .icon-btn:disabled{opacity:.35;cursor:default}.comic-dots{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}.comic-dots span{width:8px;height:8px;border-radius:50%;background:#1f2a242e}.comic-dots span.on{background:var(--green);width:20px;border-radius:4px}