:root{--ink:#292b32;--muted:#767882;--purple:#6c56ca;--pale:#ece8fa;--paper:#f8f7f3;--line:#e5e3df;--green:#237a5c;--orange:#a95c2b}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans','Noto Sans SC',sans-serif;-webkit-tap-highlight-color:transparent}button,input{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:default;opacity:.45}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #ac97ee;outline-offset:5px}button{transition:transform 130ms,box-shadow 130ms,background 160ms}button:active:not(:disabled){transform:translateY(3px);box-shadow:none!important}a{color:inherit}.shell{max-width:1220px;margin:auto;padding:0 40px}.topbar{height:96px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{font-size:33px;font-weight:800;letter-spacing:-2px;display:flex;gap:10px;align-items:center}.brand .seed{width:20px;height:28px;border-radius:18px 18px 7px 18px;background:var(--purple);transform:rotate(35deg)}.nav{display:flex;gap:28px;align-items:center;font-size:13px}.link{border:0;background:none;color:var(--muted);padding:10px 0;text-decoration:none}.tag{font-size:11px;border:1px solid var(--line);border-radius:100px;padding:7px 12px;color:var(--muted)}.hero{display:grid;grid-template-columns:1.3fr 1fr;gap:50px;padding:62px 0 48px;align-items:center}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:700;color:var(--purple)}h1{font-size:48px;letter-spacing:-2px;line-height:1.3;margin:20px 0 16px;font-weight:700}p{line-height:1.9;color:var(--muted);font-size:14px}.hero p{max-width:370px}.primary{border:0;background:var(--purple);color:#fff;border-radius:15px;min-height:54px;padding:14px 27px;font-weight:600;box-shadow:0 4px 0 #4b3b92;display:inline-flex;align-items:center;justify-content:center;gap:24px}.primary:hover{background:#775ed8}.secondary{background:#fff;border:1px solid var(--line);border-radius:13px;padding:13px 20px;min-height:48px;color:var(--ink)}.hero .primary{margin-top:18px}.hero-art{height:280px;position:relative;display:grid;place-items:center}.orb{width:245px;height:245px;background:#e7e2f5;border-radius:50%;position:absolute}.speech{position:absolute;right:0;top:24px;border:1px solid #e7e2f5;background:#fff;border-radius:18px 18px 18px 3px;padding:17px 22px;transform:rotate(5deg);font-size:15px;font-weight:500;box-shadow:0 8px 20px #50476708}.speech.small{left:0;right:auto;top:auto;bottom:22px;transform:rotate(-6deg);font-size:12px}.mascot{width:125px;height:142px;background:#b9aaeb;border:3px solid #8e79cb;box-shadow:inset 9px -9px 0 #a08cdb;border-radius:55% 53% 40% 40%;position:relative;transform:rotate(-8deg);animation:breathe 4s ease-in-out infinite}.mascot:before,.mascot:after{content:'';position:absolute;width:27px;height:13px;background:#8e79cb;bottom:-7px;border-radius:100px}.mascot:before{left:12px;transform:rotate(-15deg)}.mascot:after{right:12px;transform:rotate(15deg)}.face{position:absolute;inset:47px 28px;display:flex;justify-content:space-between}.eye{width:10px;height:15px;background:#3e3457;border-radius:9px}.smile{position:absolute;left:52px;top:78px;width:20px;height:12px;border-bottom:3px solid #3e3457;border-radius:50%}.cheek{position:absolute;top:75px;left:17px;background:#e9b9cb;width:17px;height:7px;border-radius:50%;box-shadow:67px 0 #e9b9cb}.star{position:absolute;font-size:27px;color:#c7a45b;left:45px;top:35px;animation:breathe 3s infinite}.section-head{display:flex;justify-content:space-between;align-items:center;margin:10px 0 22px}.section-head h2{font-size:18px;font-weight:600}.section-head span{font-size:12px;color:var(--muted)}.topics{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.topic{border:1px solid var(--line);background:#fff;border-radius:23px;padding:24px;text-align:left;color:var(--ink);position:relative;overflow:hidden;box-shadow:0 4px 0 #eae8e4}.topic:hover{transform:translateY(-4px);box-shadow:0 8px 0 #eae8e4}.topic-art{height:100px;display:flex;align-items:center;justify-content:space-between}.topic-art .emoji{font-size:46px;width:82px;height:82px;border-radius:26px;display:grid;place-items:center;background:var(--tile)}.number{font-size:50px;color:#efedf1;letter-spacing:-3px;font-weight:700}.topic h3{font-size:19px;margin:18px 0 8px}.topic p{margin:0;font-size:12px}.topic-bottom{border-top:1px solid var(--line);margin-top:23px;padding-top:18px;display:flex;justify-content:space-between;font-size:11px;color:var(--muted)}.topic-bottom b{color:var(--purple);font-size:17px}.lower{display:flex;justify-content:space-between;margin:28px 0 50px;padding:20px 0;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}.lower a{color:var(--purple);text-decoration:none}.stats-strip{display:flex;gap:22px;font-size:12px;color:var(--muted);padding:14px 0}.stats-strip b{color:var(--ink)}.setup{max-width:600px;margin:65px auto}.back{border:0;background:none;color:var(--muted);padding:12px 0}.setup h1{font-size:34px;letter-spacing:-1px}.levels{display:grid;gap:12px;margin:28px 0}.level{display:flex;gap:18px;border:2px solid var(--line);background:white;border-radius:17px;text-align:left;padding:18px;color:var(--ink)}.level.selected{border-color:var(--purple);background:#f0ecfb}.level .circle{width:23px;height:23px;border-radius:50%;border:2px solid #ccc;flex-shrink:0}.level.selected .circle{border:7px solid var(--purple)}.level b{font-size:14px}.level p{font-size:12px;margin:5px 0 0}.setup .primary{width:100%}.fineprint{font-size:11px;line-height:1.8;color:var(--muted);margin-top:22px}.learn-layout{display:grid;grid-template-columns:190px 1fr;gap:65px;max-width:1050px;margin:40px auto}.side{border-right:1px solid var(--line);padding:16px 25px 0 0}.side h3{font-size:14px;margin-top:20px}.side p{font-size:11px}.steps{display:flex;gap:6px;margin:24px 0}.step{height:7px;width:14px;border-radius:6px;background:#dedbe7}.step.good{background:#8d78d6}.step.bad{background:#d7a275}.side-note{margin-top:35px;padding-top:22px;border-top:1px solid var(--line);font-size:11px;color:var(--muted);line-height:1.8}.lesson{max-width:650px;width:100%;min-width:0}.lesson-top{display:flex;align-items:center;gap:15px}.exit{width:40px;height:40px;border:0;background:none;font-size:26px;color:#a3a0ab}.progress{height:10px;background:#e7e3ee;border-radius:20px;flex:1;overflow:hidden}.progress i{display:block;height:100%;background:#9b86dc;border-radius:20px;transition:width 400ms cubic-bezier(.2,.8,.2,1)}.count{font-size:12px;color:var(--muted);min-width:35px}.lesson-header{margin:28px 0 26px;display:flex;justify-content:space-between;align-items:center}.pill{font-size:10px;letter-spacing:1px;background:#eae5f7;color:var(--purple);padding:7px 12px;border-radius:8px}.pill.challenge{background:#f4e7cf;color:#94743a}.tools{display:flex;gap:8px}.icon-btn{border:1px solid var(--line);border-radius:10px;background:transparent;padding:8px 10px;color:var(--muted);font-size:12px;min-height:36px}.question{animation:arrive 250ms ease-out}.question h2{font-size:24px;line-height:1.6;margin:15px 0 20px;font-weight:600;letter-spacing:-.5px}.prompt{display:flex;align-items:center;gap:16px;background:white;border:1px solid var(--line);border-radius:18px;padding:20px;margin-bottom:27px;min-height:91px}.mini{width:46px;height:51px;background:#c8b9ee;border-radius:40% 40% 33% 33%;display:grid;place-items:center;font-size:20px;flex-shrink:0}.english{font-size:20px;line-height:1.6}.speaker{border:0;background:var(--pale);color:var(--purple);border-radius:12px;width:39px;height:39px;font-size:20px;flex-shrink:0}.options{display:grid;gap:12px}.option{background:#fff;border:2px solid #e4e1e9;border-radius:14px;min-height:63px;text-align:left;padding:13px 18px;display:flex;gap:16px;align-items:center;box-shadow:0 3px 0 #e4e1e9;color:var(--ink);font-size:14px}.option .key{border:1px solid #e4e1e9;border-radius:6px;width:23px;height:25px;display:grid;place-items:center;font-size:11px;color:var(--muted)}.option.selected{border-color:#9c85dc;background:#f0ebfc;box-shadow:0 3px 0 #9c85dc}.option.correct{border-color:#73b395;background:#edf8f0;box-shadow:0 3px 0 #73b395}.option.wrong{border-color:#d6a17b;background:#fcf2e8;box-shadow:0 3px 0 #d6a17b}.word-answer{display:flex;flex-wrap:wrap;gap:9px;min-height:110px;border-top:2px solid #ded9e9;border-bottom:2px solid #ded9e9;padding:16px 0;margin-bottom:24px;align-content:flex-start}.word-bank{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;min-height:100px}.word{background:white;border:1px solid #dcd7e5;border-bottom:3px solid #dcd7e5;border-radius:10px;padding:10px 14px;color:var(--ink);font-size:15px;min-height:44px}.word.ghost{opacity:.22}.word-answer:empty:before{content:'选择单词组成句子';color:#a4a0ad;font-size:12px;padding:20px 0}.text-input{width:100%;border:2px solid #ded8eb;border-radius:16px;background:#fff;padding:20px;font-size:18px;min-height:82px;color:var(--ink)}.hint-row{display:flex;justify-content:space-between;align-items:center;margin:22px 0;font-size:11px;color:var(--muted);gap:12px}.hint-btn{border:0;border-bottom:1px dashed #ac9cd0;background:none;color:#8a77af;font-size:12px;padding:4px 0}.hint-box{font-size:13px;background:#f0ecf8;border-radius:12px;padding:14px 18px;line-height:1.8;color:#6f5a91;margin:18px 0}.feedback-zone{margin:25px 0 0;border-top:1px solid var(--line);padding:22px 0;min-height:145px}.action-line{display:flex;align-items:center;justify-content:space-between;gap:20px}.action-line .primary{min-width:150px}.keyboard{font-size:11px;color:#aaa5b3}.feedback{background:#eaf4ee;border-radius:18px;padding:18px 20px;animation:arrive 190ms ease-out}.feedback.miss{background:#f6ece0}.feedback h3{font-size:17px;margin:0 0 6px;color:var(--green)}.feedback.miss h3{color:var(--orange)}.feedback p{font-size:12px;margin:4px 0 15px;color:#5c7165;line-height:1.8}.feedback.miss p{color:#896e54}.feedback .answer{font-size:17px;font-weight:500;color:var(--ink)}.feedback .primary{background:var(--green);box-shadow:0 4px 0 #15543d}.feedback.miss .primary{background:#b57a47;box-shadow:0 4px 0 #86502b}.combo{font-size:12px;color:var(--purple);font-weight:600;animation:arrive 150ms}.footer-note{font-size:10px;color:#a19ba8;text-align:center;margin:10px 0 25px}.result{max-width:650px;margin:50px auto;text-align:center}.result-art{width:115px;height:115px;background:#e9e1fa;border-radius:35px;display:grid;place-items:center;font-size:49px;margin:auto;transform:rotate(-6deg)}.result h1{font-size:34px;letter-spacing:-1px}.result-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:30px 0}.result-stat{border:1px solid var(--line);background:#fff;border-radius:16px;padding:20px}.result-stat b{font-size:25px;display:block;margin-bottom:8px}.result-stat span{font-size:11px;color:var(--muted)}.recap{text-align:left;background:#fff;border:1px solid var(--line);border-radius:20px;padding:22px;margin:24px 0}.recap h3{font-size:14px;margin-top:0}.recap-row{border-top:1px solid var(--line);padding:13px 0;display:flex;align-items:center;justify-content:space-between;gap:12px}.recap-row b{font-size:14px;font-weight:500}.recap-row small{display:block;color:var(--muted);margin-top:5px;font-size:11px}.recap-row .status{font-size:10px;color:#987342;white-space:nowrap}.mood{display:flex;gap:9px;justify-content:center;margin:14px 0 25px}.mood button{padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:white;font-size:12px}.mood button.active{background:var(--pale);border-color:#a18bda}.result-actions{display:flex;justify-content:center;gap:13px}.result details{text-align:left;margin-top:28px;font-size:12px;color:var(--muted)}.result details li{line-height:1.8;margin-top:8px}#toast{position:fixed;left:50%;bottom:30px;transform:translate(-50%,20px);background:#39313f;color:white;border-radius:13px;padding:14px 22px;font-size:12px;opacity:0;pointer-events:none;transition:all 200ms;z-index:20;max-width:90vw}#toast.show{opacity:1;transform:translate(-50%,0)}#particles{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:30}.particle{position:absolute;left:50%;top:40%;width:8px;height:8px;background:var(--c);border-radius:2px;animation:confetti 850ms ease-out forwards}.modal-backdrop{position:fixed;inset:0;background:#29233255;z-index:40;display:grid;place-items:center;padding:24px;backdrop-filter:blur(5px)}.modal{background:var(--paper);max-width:380px;border-radius:24px;padding:28px}.modal h3{margin-top:0}.modal .primary{width:100%;margin-top:12px}.modal .secondary{width:100%;margin-top:12px}.notice{font-size:11px;color:var(--muted);padding:14px 0;line-height:1.8}.local-warning{color:#aa5d29}.empty{padding:40px 0;color:var(--muted)}@keyframes breathe{50%{transform:translateY(-8px) rotate(-5deg)}}@keyframes arrive{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}@keyframes confetti{to{transform:translate(var(--x),var(--y)) rotate(var(--r));opacity:0}}@media(min-width:900px){.learn-layout{margin-top:52px}.lesson{padding-right:25px}.question{min-height:360px}}@media(max-width:800px){.shell{padding:0 24px}.hero{gap:10px;padding-top:40px}.hero-art{transform:scale(.83)}h1{font-size:38px}.learn-layout{grid-template-columns:1fr;gap:0;margin-top:22px}.side{display:none}.lesson{margin:auto}.topics{gap:12px}.topic{padding:18px}.topic h3{font-size:16px}.topic p{font-size:11px}.topic-art .emoji{width:64px;height:64px;font-size:35px}.number{font-size:35px}.nav{gap:15px}.hero-art .speech{right:-20px}}@media(max-width:560px){.shell{padding:0 22px}.topbar{height:76px}.brand{font-size:30px}.nav .tag{display:none}.hero{display:flex;flex-direction:column-reverse;align-items:stretch;padding:12px 0 32px;gap:0}.hero-art{height:190px;transform:scale(.7);margin:-8px 0 -15px}.hero h1{font-size:36px;letter-spacing:-1.5px;margin:14px 0}.hero p{font-size:13px;margin:0}.hero .primary{width:100%}.topics{grid-template-columns:1fr}.topic{display:grid;grid-template-columns:62px 1fr;column-gap:20px;padding:18px}.topic-art{height:auto;grid-row:1/4}.topic-art .emoji{width:62px;height:68px;border-radius:20px;font-size:32px}.number{display:none}.topic h3{margin:0 0 6px}.topic-bottom{margin-top:12px;padding-top:12px}.section-head{margin:0 0 12px}.section-head h2{font-size:16px}.lower{display:block;margin:25px 0}.lower a{display:block;margin-top:12px}.setup{margin:30px 0}.setup h1{font-size:30px}.lesson-header{margin:18px 0}.question h2{font-size:21px;margin:13px 0 18px}.prompt{padding:16px;min-height:85px;margin-bottom:20px}.english{font-size:18px}.option{min-height:60px;font-size:13px}.feedback-zone{padding:16px 0;margin-top:18px}.action-line .primary{min-width:135px}.keyboard{display:none}.hint-row{margin:18px 0}.result{margin:30px 0}.result h1{font-size:30px}.result-stats{gap:8px}.result-stat{padding:16px 8px}.result-stat b{font-size:22px}.result-actions{flex-direction:column}.word{padding:10px 12px;font-size:14px}.result-art{width:90px;height:90px}.topbar .nav{font-size:12px}.fineprint{margin-top:18px}.stats-strip{font-size:11px;gap:14px}.question{min-height:320px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.option:disabled{opacity:1}.text-input:disabled{opacity:1;-webkit-text-fill-color:var(--ink)}
.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}.room-main{max-width:900px;margin:32px auto 70px}.room-error{font-size:12px;color:#a4663d;line-height:1.8;overflow-wrap:anywhere;margin:12px 0}.room-error:empty{display:none}.room-welcome{margin:45px 0 30px}.room-welcome h1{font-size:40px;letter-spacing:-1px}.room-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:26px;margin:22px 0}.room-card h2{font-size:19px;margin:0 0 14px}.room-card p{font-size:13px}.room-forms{display:grid;grid-template-columns:1fr 1fr;gap:20px}.room-forms .room-card{margin:12px 0}.room-card form{display:grid;gap:14px}.room-card label{font-size:12px;color:var(--muted)}.room-card input,.inline-form input{border:1px solid #dcd7e5;border-radius:12px;background:#faf9fc;padding:14px;font-size:14px;color:var(--ink);width:100%;min-width:0}.profile-edit{font-size:12px;color:var(--muted);margin:20px 0}.profile-edit summary{cursor:pointer}.inline-form{display:flex;gap:12px;margin:16px 0;max-width:500px}.inline-form .secondary{white-space:nowrap;font-size:12px}.room-title{display:flex;justify-content:space-between;gap:20px;align-items:center;margin:40px 0 20px}.room-title h1{font-size:33px;letter-spacing:-1px;margin:12px 0}.room-title p{font-size:12px;margin:0}.room-title .secondary{font-size:12px;white-space:nowrap}.mission .section-head{margin:0 0 20px}.mission .section-head h2{margin:10px 0 0}.mission .section-head>b{font-size:30px;color:var(--purple)}.mission .section-head>b span{font-size:16px;color:#b5a8ce}.team-progress{height:9px;background:#eeebf4;border-radius:20px;overflow:hidden}.team-progress i{display:block;height:100%;background:#aa97df;border-radius:20px;transition:width 300ms}.members{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin:28px 0}.member{text-align:center;min-width:0}.avatar{margin:0 auto 12px;position:relative;width:56px;height:56px;border-radius:20px;background:var(--avatar);display:grid;place-items:center;font-size:21px;color:#66577a}.avatar.done{outline:2px solid #7ab598;outline-offset:4px}.avatar i{position:absolute;right:-6px;bottom:-5px;font-style:normal;font-size:11px;background:#528a6f;color:white;border-radius:50%;width:20px;height:20px;display:grid;place-items:center;border:2px solid white}.member b{font-size:12px;display:block;font-weight:500;overflow-wrap:anywhere}.member b small{font-size:10px;color:var(--purple)}.member>span{display:block;font-size:10px;color:var(--muted);margin-top:6px}.vacant .avatar{border:1px dashed #d6cfdf;background:#f7f5fa;color:#b2a7c3}.vacant b{color:#a59aaf}.mission-bottom{display:flex;gap:20px;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-top:20px}.mission-bottom>span{font-size:11px;color:var(--muted);line-height:1.9}.mission-bottom .primary{font-size:12px;min-height:45px;white-space:nowrap;padding:12px 18px}.daily-prompt{background:#f3effa;border-radius:16px;padding:20px}.daily-prompt p{margin:9px 0}.daily-prompt .hint-btn{font-size:12px;text-align:left;line-height:1.8}.room-feed{max-height:570px;overflow:auto;overscroll-behavior:contain;padding:10px 0;scrollbar-width:thin}.conversation-empty{text-align:center;padding:42px 15px}.conversation-empty>span{font-size:15px;color:#88759d}.conversation-empty p{font-size:12px}.chat-message{border-bottom:1px solid #efecf2;padding:22px 4px;animation:arrive 180ms}.message-meta{display:flex;justify-content:space-between;gap:15px;align-items:center}.message-meta b{font-size:12px;font-weight:500}.message-meta time{font-size:10px;color:#a39aa9;white-space:nowrap}.message-body{white-space:pre-wrap;overflow-wrap:anywhere;font-size:16px!important;line-height:1.8!important;color:var(--ink)!important;margin:12px 0!important}.mine .message-meta b{color:var(--purple)}.reply-quote{border-left:2px solid #cbbce5;background:#f8f6fb;font-size:11px;line-height:1.8;padding:9px 12px;margin:12px 0;color:#94859e;overflow-wrap:anywhere}.message-actions{display:flex;gap:8px;align-items:center}.reaction{border:1px solid #e9e4ef;border-radius:100px;min-width:44px;height:32px;font-size:13px;padding:4px 10px;background:#fff;color:#867293;display:flex;gap:5px;align-items:center;justify-content:center}.reaction.active{background:#eee7fb;border-color:#b49ed9}.reaction span{font-size:10px}.reply-button{border:0;background:transparent;color:#9789a5;font-size:11px;margin-left:auto;padding:8px}.composer{border-top:1px solid var(--line);padding-top:20px;gap:10px!important}.composer textarea{font-family:inherit;resize:vertical;min-height:95px;border:1px solid #ddd5e9;background:#fcfbfe;border-radius:14px;padding:16px;font-size:15px;color:var(--ink);line-height:1.8;width:100%}.composer textarea:focus-visible{outline:2px solid #bca7e0;outline-offset:2px}.composer-bottom{display:flex;align-items:center;gap:12px}.composer-bottom>span{font-size:10px;color:#a093ab}.composer-bottom #send-state{margin-left:auto}.composer-bottom .primary{min-height:43px;font-size:12px;padding:10px 20px}.reply-target{font-size:11px;color:#897399;background:#f3edf9;padding:10px 13px;border-radius:10px;line-height:1.8;display:flex;justify-content:space-between;align-items:center;gap:15px;overflow-wrap:anywhere}.reply-target button{border:0;background:transparent;font-size:20px;color:#897399}.room-bottom{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:#a399ab}.room-footnote{font-size:11px!important;line-height:1.9;color:#a399ab!important}.together-link{display:flex;gap:20px;align-items:center;justify-content:space-between;border:1px solid #ded6ef;border-radius:18px;padding:20px 24px;margin-top:28px;background:#f0ecf8}.together-link b{font-size:15px;font-weight:500}.together-link p{font-size:12px;margin:7px 0 0}.together-link button{white-space:nowrap;font-size:12px}.sync-note{font-size:11px;color:#8b8196;text-align:center;margin:20px 0;line-height:1.8}.sync-note button{border:0;border-bottom:1px dashed #a18dbd;background:none;color:var(--purple);font-size:11px;cursor:pointer}@media(max-width:560px){.room-main{margin-top:20px}.room-welcome h1{font-size:33px}.room-forms{grid-template-columns:1fr;gap:0}.room-card{padding:20px;margin:18px 0}.room-title{display:block;margin-top:25px}.room-title h1{font-size:28px}.room-title .secondary{margin-top:18px}.members{grid-template-columns:repeat(3,1fr);row-gap:22px}.mission-bottom{align-items:stretch;flex-direction:column;gap:13px}.mission-bottom .primary{width:100%}.conversation .section-head{align-items:flex-start;gap:10px}.conversation .section-head h2{font-size:17px;line-height:1.6}.conversation .section-head>span{font-size:10px;white-space:nowrap;padding-top:4px}.message-body{font-size:15px!important}.room-bottom{align-items:flex-start;gap:20px}.together-link{padding:18px;gap:12px}.together-link b{font-size:14px}.together-link p{font-size:11px}.together-link button{padding:10px 13px}}
.account-main{max-width:430px;margin:60px auto 90px}.account-main h1{font-size:34px;letter-spacing:-1px;margin:17px 0}.account-main>p{font-size:13px}.account-tabs{display:flex;gap:6px;background:#eeebf3;border-radius:13px;padding:5px;margin:28px 0 24px}.account-tabs button{width:50%;border:0;border-radius:9px;padding:11px;background:transparent;color:#8b8196;font-size:13px}.account-tabs button.active{background:white;color:var(--purple);box-shadow:0 2px 5px #483b5e08}.account-main form{display:grid;gap:12px}.account-main label{font-size:12px;margin-top:7px;color:#7e718e}.account-main input{width:100%;min-width:0;padding:15px;border:1px solid #ddd5e8;border-radius:12px;background:white;color:var(--ink);font-size:14px}.account-main .primary{width:100%;margin-top:12px}.password-field{display:flex;position:relative}.password-field input{padding-right:65px}.password-field button{position:absolute;right:12px;top:0;bottom:0;background:none;border:0;font-size:11px;color:#8e7ea2}.account-main .fineprint{font-size:11px}.recovery-code{background:#ede7f8;border:1px solid #d7caec;border-radius:16px;padding:22px;margin:25px 0;font-family:monospace;font-size:17px;line-height:1.9;overflow-wrap:anywhere;user-select:all;letter-spacing:1px;color:#715397}.account-settings{border-top:1px solid var(--line);margin-top:35px;padding-top:22px;font-size:12px;color:#8b7e99}.account-settings summary{cursor:pointer}.account-main #account-error{margin:4px 0;font-size:12px;line-height:1.8}@media(max-width:560px){.account-main{margin:35px auto 60px}.account-main h1{font-size:30px}.nav{gap:12px}.topbar .brand>span{display:none}}
.answer-explanation{font-size:12px;color:#5c7165;margin:8px 0 18px}.answer-explanation summary{cursor:pointer}.answer-explanation p{margin-top:10px}.feedback .answer small{font-size:11px;color:#896e54;font-weight:400}.account-main>h1:first-child{margin-top:0}
/* P0: persistent question controls and in-place word movement. */
.question{animation:none!important}
.question [hidden],.lesson [hidden]{display:none!important}
.learn-layout{align-items:stretch}
.lesson{display:flex;flex-direction:column;min-height:calc(100svh - 174px)}
.lesson .question{flex:1;min-height:0}
.lesson .word-answer{display:grid;position:relative;min-height:120px;align-content:stretch}
.answer-measure,.answer-words{grid-area:1/1;display:flex;flex-wrap:wrap;gap:9px;align-content:flex-start;align-items:flex-start}
.answer-measure{visibility:hidden;pointer-events:none}
.answer-placeholder{grid-area:1/1;align-self:start;pointer-events:none;color:#a4a0ad;font-size:12px;padding:18px 0}
.word-answer:empty:before{content:none}
.lesson .word-bank{align-content:flex-start;align-items:flex-start;min-height:100px}
.word-slot{display:inline-grid;position:relative;flex-shrink:0}
.word-slot>.word{grid-area:1/1;margin:0}
.word-slot>.word-placeholder{visibility:hidden;pointer-events:none;user-select:none}
.word-slot.is-used>.word-placeholder{visibility:visible;opacity:.22}
.word:active:not(:disabled){transform:none}
.lesson .speaker.is-unavailable{visibility:hidden;pointer-events:none}
.lesson-footer{margin-top:auto;position:sticky;bottom:0;background:var(--paper);z-index:2;padding-bottom:env(safe-area-inset-bottom)}
.lesson-footer .feedback-zone{height:112px;min-height:112px;padding:10px 0;margin:0;border-top:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.lesson-footer .hint-box{margin:0;font-size:12px}
.lesson-footer .feedback{padding:12px 16px;animation:none}
.lesson-footer .feedback h3{font-size:16px}
.lesson-footer .feedback p{margin-bottom:0}
.lesson-footer .feedback .answer{font-size:15px}
.lesson-footer .answer-explanation{margin:4px 0 0}
.lesson-actions{height:64px;flex-shrink:0;border-top:1px solid var(--line);padding-top:10px}
.lesson-actions .primary{min-width:150px;min-height:50px}
.lesson-actions .answer-good{background:var(--green);box-shadow:0 4px 0 #15543d}
.lesson-actions .answer-miss{background:#b57a47;box-shadow:0 4px 0 #86502b}
.lesson-footer .footer-note{height:20px;min-height:20px;margin:8px 0 0}
.lesson-footer .primary[aria-disabled=true]{cursor:default}
@media(max-width:560px){.lesson{min-height:calc(100svh - 111px)}.lesson .word-answer{min-height:134px}.lesson-footer{margin-top:8px}.lesson-actions .primary{min-width:145px}.lesson .question h2{font-size:20px}.lesson .prompt{margin-bottom:18px}.lesson-footer .feedback .answer{font-size:14px}}

/* P1: keep a stable feedback viewport while allowing revision links. */
.lesson-footer .feedback-zone{height:144px;min-height:144px}
.feedback-actions{display:flex;gap:18px;align-items:center;margin:10px 0 4px;flex-wrap:wrap}
.feedback-actions .hint-btn{font-size:12px}
.result-lead,.result-progress,.result-next{font-size:13px;line-height:1.75;color:var(--muted)}
.result-progress{margin:0 0 14px}
.result-next{background:#f0ecf8;border-radius:14px;padding:14px 18px;color:#6f5a91;text-align:left}
@media(max-width:560px){.lesson-footer .feedback-zone{height:144px;min-height:144px}.feedback-actions{gap:12px}}

/* P2 · stage-map gameplay. Visuals are original to Lilt. */
.game-map{max-width:780px;margin:0 auto;padding:26px 0 84px}
.map-top{display:flex;justify-content:space-between;align-items:center;gap:16px;color:#93859f}.map-top .back{font-size:13px}.map-top-caption{font-size:11px;font-weight:800;letter-spacing:1.8px}
.map-banner{position:relative;overflow:hidden;min-height:242px;background:linear-gradient(120deg,#ece2fb 0%,#f5e8ed 58%,#fbf0e0 100%);border:2px solid #e2d4ed;border-bottom:5px solid #d6c4e5;border-radius:28px;margin-top:25px;display:flex;align-items:center;justify-content:space-between;padding:32px 36px}
.map-banner:before{content:'✦';position:absolute;font-size:88px;color:#ffffff70;right:17%;top:-42px;transform:rotate(23deg)}
.map-banner-copy{position:relative;z-index:1;max-width:480px}.map-eyebrow{font-size:10px;font-weight:900;letter-spacing:1.8px;color:#8975ba}.map-banner h1{font-size:39px;line-height:1.2;margin:13px 0 10px;color:#4a365e}.map-banner p{font-size:13px;color:#746184;margin:0;line-height:1.75}
.map-badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:23px}.map-badges span{background:#ffffffad;border:1px solid #ffffff;padding:9px 15px;border-radius:100px;font-size:12px;color:#705a89;font-weight:800}
.map-mascot{min-width:120px;height:165px;display:grid;place-items:center;transform:rotate(8deg)}.map-mascot .mascot{animation:breathe 3s ease-in-out infinite;box-shadow:inset 7px -8px #9b87d5,0 14px 22px #8f6c9d26}
.map-resume{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:11px;background:#fff;border:1px solid #d8c9ed;border-radius:17px;padding:13px 18px;margin-top:17px;font-size:12px;color:#6e6082}.map-resume .secondary{border-color:#cdb7ea;color:#6c56ca;font-size:12px;font-weight:700}.map-text-btn{border:none;background:transparent;font-size:11px;color:#9285a0;text-decoration:underline}
.map-section{text-align:center;margin:46px 0 18px}.map-section h2{font-size:23px;color:#4c4356;margin:0 0 7px}.map-section p{font-size:12px;margin:0;color:#978a9c}
.path-track{margin:10px auto 20px;max-width:590px;padding:10px 0 8px;position:relative}
.path-item{position:relative;min-height:150px;display:grid;grid-template-columns:1fr 120px 1fr;align-items:center}
.path-track-line{position:absolute;left:50%;top:0;bottom:0;border-left:7px dotted #d8cae7;transform:translateX(-50%);z-index:0}.path-item:first-child .path-track-line{top:50%}.path-item:last-child .path-track-line{bottom:50%}
.path-node{position:relative;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:center;justify-content:center;width:104px;height:104px;justify-self:center;z-index:1;border-radius:32px;border:3px solid #f9f5fc;background:#aaa0b5;color:white;box-shadow:0 7px 0 #817588,0 12px 24px #5c45742b;transition:transform 170ms,box-shadow 170ms,filter 170ms}
.path-node:disabled{opacity:1;cursor:not-allowed;background:#d8d0db;box-shadow:0 6px 0 #beb5c2;border-color:#f1ecf1;filter:saturate(.4)}
.path-item.available .path-node,.path-item.playing .path-node{background:linear-gradient(155deg,#9f84eb,#795dcd);box-shadow:0 7px 0 #5d459b,0 14px 26px #8e6ec152;animation:mapPulse 2.8s ease-in-out infinite}
.path-item.completed .path-node{background:linear-gradient(155deg,#9ad9b6,#48a079);box-shadow:0 7px 0 #327959,0 12px 21px #40886d25}
.path-node:not(:disabled):hover{transform:translateY(-4px);filter:brightness(1.06)}.path-node:not(:disabled):active{transform:translateY(5px);box-shadow:0 2px 0 #6a528e}
.node-visual{font-size:37px;line-height:1.2;filter:drop-shadow(0 3px 1px #5037642b)}.node-number{position:absolute;bottom:8px;font-size:10px;font-weight:900;letter-spacing:2px;color:#ffffffdc}
.path-label{display:flex;flex-direction:column;gap:6px;padding:12px 18px}.path-label b{font-size:15px;color:#4f435a}.path-label span{font-size:11px;color:#998ca3}.path-label small{font-size:10px;color:#aaa0b2}.path-label .path-new{font-weight:800;color:#8563cd}.path-label .path-stars{letter-spacing:3px;color:#f0ad49;font-size:16px;line-height:1}
.path-item.left .path-label{grid-column:3;grid-row:1;text-align:left;align-items:flex-start}.path-item.right .path-label{grid-column:1;grid-row:1;text-align:right;align-items:flex-end}
.map-footer{margin:42px 0 0;padding:28px 20px;border-radius:24px;background:#fff;border:1px solid #eae2ef;display:flex;flex-direction:column;align-items:center;text-align:center;box-shadow:0 8px 25px #6d52840b}.map-footer-icon{display:grid;place-items:center;width:52px;height:52px;background:#eee7fa;color:#8064c3;border-radius:50%;font-size:27px;margin-bottom:13px}.map-footer b{font-size:16px;color:#564563}.map-footer p{font-size:12px;margin:7px 0 13px}.map-foot-stars{letter-spacing:6px;color:#e6af54;font-size:20px}
.game-award{display:flex;flex-direction:column;align-items:center;gap:8px;margin:12px auto 25px;padding:16px 22px;border-radius:18px;background:#fff8e9;border:1px solid #f4e1b7;max-width:420px}.game-award b{font-size:13px;color:#896434}.game-award small{font-size:11px;color:#99876e}.award-stars{font-size:40px;letter-spacing:6px;color:#e8a534;line-height:1.3;animation:starsPop 500ms cubic-bezier(.2,1.3,.4,1)}.award-stars span{color:#e5d9c6}
@keyframes starsPop{0%{opacity:.2;transform:translateY(12px) scale(.75)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes mapPulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.07)}}
@media(max-width:560px){.game-map{padding:18px 0 55px}.map-banner{padding:24px 21px;min-height:205px;border-radius:23px}.map-banner h1{font-size:30px}.map-banner p{font-size:12px;max-width:175px}.map-eyebrow{font-size:8px}.map-mascot{min-width:78px;transform:scale(.7) rotate(8deg);transform-origin:center}.map-badges span{font-size:10px;padding:8px 11px}.map-resume{justify-content:center}.map-section{margin-top:30px}.path-item{grid-template-columns:minmax(0,1fr) 88px minmax(0,1fr);min-height:126px}.path-node{width:82px;height:82px;border-radius:25px}.node-visual{font-size:30px}.path-label{padding:5px 8px;gap:5px}.path-label b{font-size:12px}.path-label span{font-size:10px}.path-label .path-stars{font-size:14px;letter-spacing:2px}.path-track-line{border-left-width:6px}.map-footer{margin-top:26px}}
@media(prefers-reduced-motion:reduce){.path-item.available .path-node,.path-item.playing .path-node,.award-stars{animation:none!important}.path-node{transition:none}}

.hero .p1-entry{margin:18px 0 0 12px;min-height:54px;vertical-align:top;font-size:12px}
@media(max-width:560px){.hero .p1-entry{min-height:49px;padding:10px 13px;font-size:11px;margin:12px 0 0 8px}}

/* Curriculum content discovery: compact level labels on each scene card. */
.topic-cefr{display:inline-block;vertical-align:middle;margin-left:6px;padding:4px 7px;border-radius:7px;background:#f0eafa;color:#7056b1;border:1px solid #ddd3f2;font-size:10px;font-weight:800;letter-spacing:.25px;white-space:nowrap}
.topics .topic-bottom span{font-size:11px;color:#746e80}
@media(max-width:560px){.topic-cefr{font-size:9px}.section-head>span{font-size:10px;text-align:right;max-width:140px}}

/* P5 · learning habits and progress, grounded in completed sessions */
.habit-strip{display:flex;gap:8px;flex-wrap:wrap;margin:22px 0 6px}
.habit-chip{border:1px solid #e5dbed;background:#fffafa;border-radius:13px;padding:9px 13px;min-width:90px;display:flex;flex-direction:column;gap:3px;text-align:left;box-shadow:0 3px 0 #ede7ef;transition:transform .15s}
.habit-chip:hover{transform:translateY(-2px)}.habit-chip b{font-size:16px;color:#634b78}.habit-chip span{font-size:10px;color:#9989a5;font-weight:600}
.home-daily{margin:22px 0 34px}.daily-quest-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.daily-quest{border:1px solid #e9e0eb;border-radius:17px;background:#fff;padding:16px;display:flex;align-items:center;gap:11px;min-width:0}
.daily-quest.done{background:#f5fcf5;border-color:#d3ebd6}.daily-icon{display:grid;place-items:center;flex:none;width:39px;height:39px;border-radius:13px;background:#f6ecff;font-size:21px}.daily-quest.done .daily-icon{background:#ddf2df}
.daily-quest-body{flex:1;min-width:0}.daily-quest-body b{display:block;font-size:11px;color:#65536f}.daily-quest-body small{display:block;font-size:10px;color:#96879e;margin-top:5px}
.meter{background:#eee7f2;border-radius:100px;height:9px;overflow:hidden;width:100%;margin:8px 0 3px}
.meter i{display:block;height:100%;max-width:100%;background:linear-gradient(90deg,#b9a0eb,#8466d0);border-radius:inherit;transition:width .45s cubic-bezier(.2,.8,.2,1)}
.daily-quest.done .meter i{background:linear-gradient(90deg,#91d2a9,#56b787)}
.mini-link{border:none;color:#7758b2;background:transparent;font-size:11px;font-weight:800;text-decoration:none;cursor:pointer}
.growth-page{max-width:900px;margin:0 auto;padding:26px 0 75px}.growth-top{display:flex;align-items:center;justify-content:space-between;gap:14px}
.growth-top>span{font-size:10px;letter-spacing:2px;font-weight:900;color:#9c8da8}
.growth-hero{margin:22px 0 30px;padding:30px 30px 25px;border-radius:26px;border:1px solid #dfd0e9;background:linear-gradient(120deg,#efe7fb,#fff3ea 77%);color:#624875}
.growth-hero>span{font-size:10px;letter-spacing:1.5px;color:#9978b2;font-weight:900}.growth-hero h1{font-size:32px;margin:11px 0 7px;color:#513a61}
.growth-hero>p{font-size:13px;color:#907e9d;margin:0}.growth-numbers{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:27px}
.growth-numbers>div{display:flex;flex-direction:column;gap:4px;background:#fff9;border:1px solid #fff9;padding:13px 14px;border-radius:14px}
.growth-numbers b{font-size:21px;color:#695180}.growth-numbers small{font-size:11px;color:#91829b}
.growth-caption{font-size:11px;color:#8d789c;margin-top:18px}
.growth-section{border:1px solid #ede4ee;border-radius:21px;background:#fff;padding:23px 24px;margin:15px 0 22px;box-shadow:0 7px 30px #68507f0a}
.growth-section .section-head{margin-top:0}.growth-section .section-head h2{font-size:18px}.growth-section .section-head span{font-size:11px;color:#9d8da5}
.quest-row{display:flex;align-items:center;gap:15px;padding:14px 0;border-bottom:1px solid #f2edf3}.quest-row:last-of-type{border-bottom:none}
.quest-icon{width:40px;height:40px;border-radius:13px;background:#f6f0fc;display:grid;place-items:center;font-size:23px;flex:none}
.quest-row>div{flex:1}.quest-row b{font-size:13px;color:#67556d}.quest-row small{font-size:11px;color:#9c8da5;min-width:54px;text-align:right}
.quiet-note{color:#91849c;font-size:12px;line-height:1.7;margin:10px 0 0}.month-progress{padding:12px 0 0}.month-progress .meter{height:13px}.month-progress p{font-size:12px;color:#a195ac;margin:12px 0 0}
.badge-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.achievement{border-radius:15px;border:1px solid #eee8ef;background:#f9f7fa;padding:19px 10px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:7px;opacity:.62}
.achievement.earned{opacity:1;background:#fff8e8;border-color:#efd7aa;box-shadow:0 3px 0 #f2e2be}
.achievement-icon{font-size:28px;filter:grayscale(1)}.achievement.earned .achievement-icon{filter:none}
.achievement b{font-size:11px;color:#62546b}.achievement small{font-size:10px;color:#9889a2}
.review-word{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:15px 0;border-bottom:1px solid #f1edf4}
.review-word>span{display:flex;flex-direction:column;gap:3px;min-width:0}.review-word small{font-size:10px;color:#a190a7}
.review-word b{font-size:14px;font-weight:700;color:#59486c;overflow-wrap:anywhere}
.review-word em{font-size:12px;font-style:normal;color:#978ba1}
.review-empty{padding:18px 0;color:#a093aa;font-size:12px}
.review-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:19px}.review-actions .secondary{font-size:11px;padding:9px 14px;min-height:39px}
@media(max-width:720px){.daily-quest-grid{grid-template-columns:1fr 1fr}.daily-quest:last-child{grid-column:span 2}}
@media(max-width:540px){.habit-chip{flex:1;min-width:0;padding:9px 10px}.habit-chip b{font-size:15px}
.daily-quest-grid{grid-template-columns:1fr}.daily-quest:last-child{grid-column:auto}.daily-quest{padding:13px}
.growth-page{padding:16px 0 55px}.growth-hero{padding:22px 18px}.growth-numbers{gap:7px}.growth-numbers>div{padding:10px 8px}
.growth-numbers b{font-size:16px}.growth-numbers small{font-size:9px}.growth-section{padding:17px 16px}.badge-grid{grid-template-columns:repeat(3,1fr);gap:8px}
.growth-hero h1{font-size:27px}}
@media(prefers-reduced-motion:reduce){.meter i,.habit-chip{transition:none!important}}

/* P6 · audio-first listening and reversible matching pairs */
.listening-reveal{padding:12px 15px;margin:14px 0;border-radius:12px;background:#ecf9f0;color:#407958;font-size:12px;line-height:1.7}
.listening-reveal b{font-size:14px}.listening-reveal[hidden]{display:none!important}
.prompt .slow-speaker{margin-left:5px;font-size:15px}.prompt:has(.slow-speaker) .english{font-size:15px;color:#85728f}
.practice-shortcuts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:15px}
.practice-shortcut{padding:16px 17px;border-radius:16px;background:#fbf9fc;border:1px solid #ece2f0;display:flex;flex-wrap:wrap;align-items:center;gap:7px}
.practice-shortcut>b{font-size:14px;color:#665071}.practice-shortcut>span{font-size:10px;padding:3px 7px;background:#efe7fb;color:#8360a8;border-radius:7px;font-weight:700}
.practice-shortcut>div{display:flex;width:100%;flex-wrap:wrap;gap:7px;margin-top:7px}.practice-shortcut .secondary{font-size:11px;min-height:36px;padding:9px 12px}
.matching-page{max-width:780px;margin:0 auto;padding:24px 0 65px}
.matching-head{padding:28px 29px;margin:20px 0 15px;background:linear-gradient(125deg,#f0e7fa,#f9edf0);border-radius:24px;border:1px solid #e6d8ed}
.matching-head>span{font-size:10px;letter-spacing:1.2px;font-weight:900;color:#977bac}
.matching-head h1{font-size:31px;margin:9px 0;color:#55416a}.matching-head>p{font-size:13px;color:#8d7a9a;margin:0}
.matching-meter{display:flex;align-items:center;gap:12px;margin-top:20px}.matching-meter .meter{flex:1}.matching-meter small{font-size:11px;color:#887a97;white-space:nowrap}
.matching-stages{display:flex;gap:7px;justify-content:center;margin:18px 0 25px}
.matching-stages button{width:39px;height:39px;border-radius:12px;border:1px solid #dfd2e9;background:#fff;color:#9f8aac;font-weight:800;transition:background .15s}
.matching-stages button.active{background:#8f6dca;color:white;border-color:#7f59bc;box-shadow:0 3px #684795}
.matching-instruction{text-align:center;font-size:12px;margin:10px 0 21px;color:#9888a0}
.matching-board{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:12px 0 22px}
.matching-column{display:flex;flex-direction:column;gap:11px}
.matching-tile{display:flex;justify-content:center;align-items:center;min-height:79px;padding:12px 16px;border-radius:14px;border:2px solid #e5daed;border-bottom:4px solid #d9cbdf;background:#fff;color:#69566e;font-size:13px;font-weight:700;text-align:center;transition:background .12s,transform .12s,border .12s}
.matching-tile:not(:disabled):hover{transform:translateY(-2px)}.matching-tile.selected{background:#f1ebff;border-color:#8d6dcc;border-bottom-color:#7760ad;color:#624aa7}
.matching-tile.matched{background:#edf8ef;border-color:#b6dfc3;border-bottom-color:#a4d8b1;color:#80a88c;opacity:.7}
.matching-done{text-align:center;padding:44px 25px;border:1px solid #e8e0ee;border-radius:20px;background:#fff}
.matching-done>span{font-size:45px}.matching-done h2{font-size:22px;margin:15px 0 5px;color:#624c76}.matching-done p{font-size:12px;color:#9c8ba5;margin-bottom:20px}
@media(max-width:540px){.practice-shortcuts{grid-template-columns:1fr}.matching-page{padding:18px 0 55px}.matching-head{padding:23px 20px}.matching-head h1{font-size:26px}.matching-board{gap:8px}
.matching-column{gap:8px}.matching-tile{padding:10px 8px;font-size:11px;min-height:94px;line-height:1.5}.matching-stages button{height:34px;width:34px}.matching-meter{gap:7px}}
@media(prefers-reduced-motion:reduce){.matching-tile,.matching-stages button{transition:none!important}}

/* Immersive coffee pilot: compact, accessible conversation and recall panels. */
.dialogue-context{padding:16px 18px;border:1px solid #e4dfee;background:#f8f5fe;border-radius:18px;margin:8px 0 14px;display:grid;gap:10px}
.dialogue-scene-label{font-size:11px;font-weight:800;letter-spacing:.08em;color:#7462ae;text-transform:uppercase}
.dialogue-context>p{margin:0 0 4px;font-size:13px;line-height:1.55;color:#686075}
.dialogue-line{display:flex;align-items:flex-start;gap:11px;max-width:96%}
.dialogue-line strong{flex:0 0 38px;font-size:11px;color:#7c6e9d;padding-top:8px}
.dialogue-line span{max-width:100%;font-size:13px;line-height:1.55;padding:9px 12px;border:1px solid #e6e1f0;border-radius:14px;background:#fff;overflow-wrap:anywhere}
.dialogue-line.barista span{background:#ede8fa;border-color:#e3d9f5}
.task-instruction{font-size:13px;font-weight:650;color:#615478;line-height:1.6;margin:10px 0}
.scheduled-review{margin:18px 0 16px;padding:19px 20px;border:1px solid #ded2f3;border-radius:20px;background:#f5f0fd;display:flex;justify-content:space-between;gap:14px;align-items:center}
.scheduled-review small{font-size:11px;color:#7759ab;font-weight:800;letter-spacing:.04em}
.scheduled-review h2{font-size:18px;margin:5px 0 5px}
.scheduled-review p{font-size:12px;line-height:1.6;color:#756d7d;max-width:380px;margin:0}
.scheduled-review .primary{white-space:nowrap}
.review-upcoming{margin:12px 0;font-size:11px;color:#797385}
@media(max-width:560px){.scheduled-review{flex-direction:column;align-items:stretch;padding:16px}.scheduled-review .primary{width:100%}.dialogue-context{padding:12px}.dialogue-line span{font-size:12px}}

/* Groups and two-person buddy competitions */
.room-invite-tip{padding:12px 14px;border-radius:12px;background:#f1eafb;color:#634979;font-size:13px}
.buddy-section{margin:22px 0;border:1px solid #e6d9ef;background:linear-gradient(180deg,#fffafd,#fff)}
.buddy-section .section-head{align-items:center;gap:8px}
.buddy-week{font-size:11px;font-weight:700;color:#987cab}
.buddy-intro{color:#83718c;font-size:13px;line-height:1.8;margin:7px 0 20px}
.buddy-your-team,.buddy-join-callout{padding:20px;border:1px solid #e4d4ed;background:#f8f3ff;border-radius:17px;margin-bottom:20px}
.buddy-your-team>span,.buddy-join-callout>b{display:block;font-size:11px;letter-spacing:.05em;color:#9277a3}
.buddy-your-team h3{font-size:20px;color:#644979;margin:8px 0}
.buddy-your-team p,.buddy-join-callout p{font-size:12px;color:#8e779a;margin:0 0 14px;line-height:1.7}
.buddy-your-team button,.buddy-join-callout button{margin:5px 8px 0 0}
.buddy-board-head{display:flex;justify-content:space-between;gap:10px;align-items:center;margin:18px 0 13px}
.buddy-board-head h3{font-size:17px;margin:0;color:#5b4665}
.buddy-board-head span{font-size:12px;color:#94819b}
.buddy-rank-list{display:flex;flex-direction:column;gap:10px}
.buddy-rank{display:flex;align-items:center;gap:13px;background:white;padding:13px 14px;border:1px solid #efe6f2;border-radius:15px}
.buddy-rank.mine{background:#f6f1ff;border-color:#c8b2e4}
.buddy-rank-number{display:grid;place-items:center;width:37px;height:37px;flex:none;border-radius:12px;background:#f1eaf6;color:#80639e;font-size:17px}
.buddy-rank:first-child .buddy-rank-number{color:#9b742d;background:#fff2ca}
.buddy-rank-names{min-width:0;flex:1}.buddy-rank-names>b{display:block;font-size:14px;color:#5d4b66;overflow-wrap:anywhere}
.buddy-rank-names small{display:block;font-size:11px;color:#9989a0;line-height:1.6;margin-top:3px}
.buddy-rank-score{font-size:17px;white-space:nowrap;color:#7c5aad}
.buddy-empty{padding:18px;color:#91829b;font-size:13px;background:#faf8fb;border-radius:12px}
.buddy-pending{font-size:11px;color:#92809a;line-height:1.6;margin:16px 0}
@media(max-width:540px){.buddy-section .section-head{flex-wrap:wrap}.buddy-your-team,.buddy-join-callout{padding:15px}
.buddy-rank{gap:8px;padding:12px 10px}.buddy-rank-score{font-size:14px}.buddy-rank-names>b{font-size:12px}}

/* Invitation landing states: keep account forms and invite provenance clear */
.account-invite{border:1px solid #decbed;background:linear-gradient(125deg,#f7f0ff,#fff7ef);border-radius:17px;padding:15px 18px;margin:4px 0 23px;color:#674d81;line-height:1.65;font-size:13px}
.account-invite b{font-size:15px}.account-invite p{font-size:12px;color:#8b7895;margin:7px 0 0}
.invite-preview{border:1px solid #ded0ec;border-radius:16px;background:#f8f1ff;padding:17px 19px;margin:15px 0;font-size:14px;line-height:1.65}
.invite-preview b{color:#685179}.invite-preview p{color:#887498;margin:6px 0 0;font-size:12px}
.invite-expired{display:block;color:#a46b77;font-size:12px;background:#fff0f2;border-radius:10px;padding:11px 13px}
.room-welcome .room-invite-tip{max-width:650px;line-height:1.75}

.targeted-invite{border-color:#d7c3eb;background:linear-gradient(130deg,#fff,#fbf7ff)}
.targeted-invite form button{width:100%}
.invite-more{margin:8px 0;border:1px solid #e9e0f0;background:#fff;border-radius:15px;padding:11px 15px}
.invite-more summary{cursor:pointer;font-size:12px;font-weight:700;color:#806792;line-height:2}
.invite-more .room-card{margin-top:11px;border:0;box-shadow:none;padding:6px 0}

/* P10 mobile-first question viewport. The answer area scrolls; action stays visible.
   No answer option is clipped on short iPhone, landscape, or 200% text zoom. */
html{min-width:0}body{min-width:0;overflow-x:hidden}
.learn-layout,.lesson,.question,.prompt,.options,.word-bank,.word-answer{min-width:0}
.question .english,.question .option,.question .word,.question .dialogue-line span{overflow-wrap:anywhere;word-break:normal}
.lesson-footer .feedback-zone{scroll-padding-block:8px}
.lesson-footer:not(.has-feedback):not(.has-hint) .feedback-zone{height:0;min-height:0;padding:0;border:0;overflow:hidden}
.lesson-footer.has-hint:not(.has-feedback) .feedback-zone{height:auto;max-height:min(26dvh,130px);min-height:0;overflow:auto;padding:6px 0}
.lesson-footer.has-feedback .feedback-zone{height:min(26dvh,148px);min-height:78px;overflow:auto}
@media(max-width:800px){
 .learn-layout{display:block!important;min-height:0;margin-top:8px}
 .lesson{width:100%;max-width:640px;height:calc(100dvh - 92px);min-height:350px;max-height:none;overflow:hidden;padding:0;display:flex;flex-direction:column}
 .lesson .question{flex:1 1 auto;overflow-y:auto;overflow-x:hidden;min-height:0!important;max-height:none;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin;padding:0 2px 20px;scroll-padding-bottom:18px}
 .lesson-top,.lesson-header{flex-shrink:0}
 .lesson-footer{flex:0 0 auto;position:relative;bottom:auto;z-index:3;margin-top:0;box-shadow:0 -9px 16px -18px #31273b80;padding-bottom:max(env(safe-area-inset-bottom),6px)}
 .lesson-actions{height:auto;min-height:59px;display:flex;align-items:center;gap:8px;padding:7px 0 3px}
 .lesson-actions .primary{min-height:48px;flex-shrink:0}
 .lesson .word-answer{min-height:68px}
 .lesson .word-bank{min-height:0;padding-bottom:14px}
 .lesson .options{padding-bottom:6px}
 .lesson .option{height:auto;min-height:54px;white-space:normal}
 .lesson .prompt{min-height:60px;margin-bottom:13px}
 .lesson .question h2{margin:8px 0 13px}
 .lesson .hint-row{margin:12px 0}
}
@media(max-width:540px){
 .shell{padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}
 .topbar{min-width:0;gap:8px}.topbar .nav{gap:8px;flex-wrap:wrap;justify-content:flex-end}.topbar .nav .link{font-size:11px;padding:9px 3px}
 .brand{font-size:27px;flex-shrink:0}
 .lesson{height:calc(100dvh - 85px);min-height:330px}
 .lesson .question h2{font-size:clamp(17px,5vw,20px)}
 .lesson .prompt{padding:12px;gap:7px}
 .lesson .english{font-size:clamp(15px,4.7vw,19px)}
 .lesson .option{font-size:13px;padding:11px 12px}
 .lesson .word{font-size:13px;padding:9px 10px}
 .lesson-actions .primary{min-width:124px}
 .lesson-footer .footer-note:empty{height:0;min-height:0;margin:0}
 .lesson-footer .footer-note{height:auto;min-height:0;line-height:1.4}
 .lesson .dialogue-context{max-height:none}
 .lesson .dialogue-line{max-width:100%}
 .lesson .dialogue-line span{min-width:0}
 .lesson .text-input{font-size:16px}
}
@media(max-height:620px) and (max-width:800px){
 .lesson{height:calc(100dvh - 78px);min-height:300px}
 .lesson-header{margin:5px 0}
 .lesson .question h2{margin:4px 0 8px;font-size:17px}
 .lesson .prompt{padding:9px 12px;min-height:0;margin-bottom:9px}
 .lesson .option{min-height:46px}
 .lesson-footer.has-feedback .feedback-zone{height:min(23dvh,98px);min-height:62px}
 .lesson-actions{min-height:52px}
 .lesson-actions .primary{min-height:44px}
 .lesson .hint-row{margin:8px 0}
}
@supports not (height:100dvh){
 @media(max-width:800px){.lesson{height:calc(100vh - 92px)}}
}

/* Rich, inspectable study notes: progressive detail rather than more repeated quizzes. */
.learning-next{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 18px;padding:16px 20px;margin:12px 0 25px;background:#fff;border:1px solid #e8e0ef;border-left:4px solid #9b87d5;border-radius:17px}
.learning-next>span{grid-column:1/-1;font-size:10px;color:#846caa;font-weight:750;letter-spacing:.05em}
.learning-next>b{font-size:17px;font-weight:750;color:#625173}
.learning-next>p{grid-column:1;font-size:12px;line-height:1.6;margin:0}
.learning-next>button{grid-column:2;grid-row:2/4;white-space:nowrap}
.course-guide{background:#fff;border:1px solid #e9dfef;border-radius:19px;padding:18px 20px;margin:22px 0}
.course-guide .section-head{margin-bottom:10px;flex-wrap:wrap;gap:8px}
.course-guide .section-head>span{color:#7c7585;font-size:11px}
.course-guide-details>summary{font-weight:700;color:#6b57a3;font-size:13px;cursor:pointer;list-style-position:inside;padding:6px 0}
.course-guide-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:26px;padding:13px 0 3px}
.course-guide-grid h3{margin:0 0 12px;font-size:14px;color:#564b64}
.course-guide-grid article{padding:10px 0;border-top:1px solid #f1ecf4}
.course-guide-grid article b{font-size:13px}
.course-guide-grid article p{font-size:12px;line-height:1.7;margin:5px 0}
.course-guide-grid article small{font-size:12px;font-weight:700;color:#7660ad;overflow-wrap:anywhere}
.guide-words{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.guide-words>div{display:flex;min-width:0;flex-direction:column;gap:4px;padding:11px;background:#faf7fd;border-radius:11px}
.guide-words b{font-size:12px;overflow-wrap:anywhere;color:#5c4d75}.guide-words span{font-size:11px;color:#82798d}
.micro-lesson{margin:9px 0 18px;border-radius:14px;border:1px solid #e8e0f1;background:#fbf9fd;font-size:12px;overflow:hidden}
.micro-lesson>summary{font-size:12px;font-weight:700;cursor:pointer;padding:12px 15px;color:#695288}
.micro-lesson-body{padding:0 14px 14px;display:grid;gap:10px}
.micro-lesson-body>b{font-size:13px}
.micro-lesson-body>p{font-size:12px;line-height:1.65;margin:0}
.micro-lesson-body>div{display:flex;flex-direction:column;gap:4px;border-top:1px solid #ece4f3;padding-top:9px}
.micro-lesson-body span{color:#8b8194;font-size:10px}
.micro-lesson-body strong{font-size:13px;color:#53476b;line-height:1.5;overflow-wrap:anywhere}
.micro-lesson-body small{font-size:11px;color:#887d94}
.speaking-page{max-width:760px;margin:27px auto 70px}
.speaking-page .growth-top{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:24px}
.speaking-page .growth-top span{font-size:11px;color:#80718e}
.speaking-card{background:#fff;border:1px solid #e5dbef;border-radius:27px;padding:38px 36px;box-shadow:0 16px 45px #3b24500a}
.speaking-card h1{font-size:29px;margin:10px 0 21px;letter-spacing:-.8px}
.speaking-task{font-size:12px;letter-spacing:.01em}
.speaking-sentence{font-size:clamp(21px,4vw,34px);font-weight:750;letter-spacing:-.5px;line-height:1.45;color:#4a3869;margin:20px 0 7px;overflow-wrap:anywhere}
.speaking-meaning{font-size:14px;margin:5px 0 9px}
.speaking-rule{font-size:12px;line-height:1.7;padding:12px 15px;border-radius:13px;background:#f7f3fc}
.speaking-actions{display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin:24px 0 16px}
.speaking-actions .primary,.speaking-actions .secondary{min-height:46px;font-size:12px;padding:11px 15px}
.speaking-feedback{border:1px solid #e7e2f0;background:#f9f6fc;border-radius:13px;min-height:53px;padding:14px 16px;font-size:12px;line-height:1.8;overflow-wrap:anywhere}
.speech-privacy{font-size:11px;line-height:1.8;margin:18px 0 0}
.speaking-pagination{display:flex;justify-content:space-between;gap:12px;margin-top:20px}
@media(max-width:560px){
 .learning-next{grid-template-columns:1fr;gap:5px 0;padding:14px 16px}
 .learning-next>b,.learning-next>p,.learning-next>button{grid-column:1;grid-row:auto}
 .learning-next>button{width:100%;margin-top:5px}
 .course-guide{padding:14px}
 .course-guide-grid{grid-template-columns:1fr;gap:14px}
 .course-guide .section-head>span{max-width:none}
 .guide-words{gap:8px}
 .speaking-page{margin:16px auto 40px}
 .speaking-card{padding:22px 17px;border-radius:21px}
 .speaking-card h1{font-size:25px}
 .speaking-sentence{font-size:clamp(20px,6vw,30px)}
 .speaking-actions .primary{width:100%}
 .speaking-pagination .primary,.speaking-pagination .secondary{padding:10px 12px;font-size:12px;min-height:46px}
}

.reminder-banner{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:12px 0;padding:13px 18px;background:#fff8ea;border:1px solid #f0dcbd;border-radius:15px;font-size:12px;color:#82673c}
.reminder-banner .secondary{font-size:12px;min-height:40px;padding:9px 14px;white-space:nowrap}
.reminder-controls{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.reminder-controls>label{font-size:12px;color:#685677}
.reminder-controls input{border:1px solid #e3d7ec;background:white;border-radius:11px;min-height:44px;padding:8px 13px;font-size:16px}
.reminder-controls .secondary{min-height:44px;font-size:12px}
@media(max-width:800px){.lesson{height:calc(var(--lilt-visible-viewport,100dvh) - 92px)}}
@media(max-width:540px){
 .lesson{height:calc(var(--lilt-visible-viewport,100dvh) - 85px);min-height:0}
 .reminder-banner{align-items:stretch;flex-direction:column}
 .reminder-banner .secondary{width:100%}
 .reminder-controls input{flex:1;min-width:100px}
 .reminder-controls .secondary{flex:1}
}
@media(max-height:620px) and (max-width:800px){.lesson{height:calc(var(--lilt-visible-viewport,100dvh) - 78px);min-height:0}}

.voice-self-check{margin-top:18px;border:1px solid #dfd6ec;background:#fff;border-radius:14px;padding:16px}
.voice-self-check>b{font-size:13px;color:#5f4c76}
.voice-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:14px 0}
.voice-actions .secondary{min-height:42px;padding:9px 14px;font-size:12px}
.voice-self-check audio{display:block;width:100%;max-width:460px;margin:11px 0}
.voice-self-check audio[hidden]{display:none}
.voice-status{font-size:11px;color:#82768c;line-height:1.6;margin:8px 0 0}
@media(max-width:540px){.voice-actions .secondary{flex:1}.voice-self-check{padding:12px}}

.learning-route{margin:24px 0 30px}
.learning-route .section-head{flex-wrap:wrap;gap:8px}
.route-note{font-size:11px;line-height:1.7;margin:4px 0 14px}
.route-levels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.route-level{display:flex;text-align:left;gap:11px;min-width:0;padding:17px 13px;border:1px solid #ded6e9;border-radius:18px;background:#fff;transition:transform .15s,border-color .15s}
.route-level:hover{border-color:#b8a7d7;transform:translateY(-2px)}
.route-step{width:28px;height:28px;border-radius:11px;background:#ede7fa;color:#715da6;display:grid;place-items:center;font-size:12px;font-weight:800;flex-shrink:0}
.route-info{min-width:0;flex:1}.route-info>span{font-size:11px;color:#88799e;font-weight:750}
.route-info>b{display:block;font-size:13px;margin-top:5px;color:#54445e;line-height:1.45}
.route-info small{display:block;font-size:10px;line-height:1.55;color:#8c8391;margin-top:7px}
.route-meter{height:6px;background:#f0eaf7;border-radius:999px;margin:10px 0 0;overflow:hidden}
.route-meter i{display:block;background:#9680d0;height:100%;border-radius:999px}
.route-arrow{font-size:16px;color:#7e69a6}
@media(max-width:740px){.route-levels{grid-template-columns:1fr}.route-level{align-items:center;padding:14px 16px}.route-info b{font-size:13px}}
@media(prefers-reduced-motion:reduce){.route-level{transition:none}.route-level:hover{transform:none}}