:root{color:#263238;background:#f7f8f4;font-family:Inter,system-ui,sans-serif}*{box-sizing:border-box}body{margin:0}.onboarding,.app{max-width:480px;min-height:100vh;margin:auto;padding:24px 20px}.onboarding{flex-direction:column;justify-content:center;display:flex}.brand{font-size:22px;font-weight:800}.brand span{color:#f2a65a}.card{background:#fff;border-radius:28px;margin-top:24px;padding:28px 22px;box-shadow:0 12px 40px #243b5320}.eyebrow{color:#e58b42;font-size:13px;font-weight:700}h1{margin:10px 0 26px;font-size:28px}label{margin:16px 0;font-size:14px;font-weight:700;display:block}input{background:#fbfcfa;border:1px solid #dfe5df;border-radius:14px;width:100%;margin-top:7px;padding:14px;font-size:16px}.characters{grid-template-columns:repeat(3,1fr);gap:10px;display:grid}.characters button,.pills button,.levels button{cursor:pointer;background:#fff;border:1px solid #e1e8e1;border-radius:16px;padding:10px 8px}.characters button.selected,.pills button.active,.levels button.active{background:#fff6ed;border-color:#f2a65a}.characters img{object-fit:cover;border-radius:12px;width:100%;height:112px;margin-bottom:8px;display:block}.characters b,.characters small{display:block}.characters small{color:#7a8780;margin-top:5px}.primary{color:#fff;background:#263238;border:0;border-radius:15px;width:100%;margin-top:25px;padding:15px;font-size:16px;font-weight:700}.pills,.levels{gap:10px;display:grid}.pills{grid-template-columns:1fr 1fr}.app header{justify-content:space-between;align-items:center;display:flex}.mistakeLink,.back{color:#d77934;background:0 0;border:0;font-weight:700}.companion-card{text-align:center;padding:16px 0 10px}.speech{background:#fff;border-radius:18px;margin:4px auto 10px;padding:12px 16px;display:inline-block;box-shadow:0 5px 20px #243b5312}.character-stage{cursor:pointer;background:#e5f0df;border:0;border-radius:120px 120px 38px 38px;width:230px;height:300px;margin:auto;display:block;position:relative;overflow:hidden;box-shadow:0 16px 30px #243b5320}.character-stage img{object-fit:cover;width:100%;height:100%}.tap-hint{color:#fff;background:#26323899;padding:5px;font-size:12px;position:absolute;bottom:10px;left:0;right:0}.companion-card h2{margin:10px 0 0}.companion-card p{color:#7b877e;margin:3px 0;font-size:13px}.messages{flex-direction:column;gap:12px;display:flex}.messages.compact{margin:10px 0}.bubble{border-radius:18px;max-width:85%;padding:13px 15px;line-height:1.45}.bubble.user{color:#fff;background:#263238;border-radius:18px 18px 4px;align-self:flex-end}.bubble.assistant{background:#fff;border-radius:18px 18px 18px 4px}.correction{color:#8b4f24;border-top:1px solid #f0e1d2;margin-top:10px;padding-top:9px}.correction b{font-size:12px}.correction small{color:#718078;margin-top:5px;display:block}.quick-actions{grid-template-columns:repeat(4,1fr);gap:8px;margin:12px 0;display:grid}.quick-actions button{color:#263238;cursor:pointer;background:#fff;border:0;border-radius:16px;padding:10px 4px;box-shadow:0 4px 14px #243b5310}.quick-actions button:active,.character-stage:active{transform:scale(.96)}.quick-actions span{margin-top:5px;font-size:11px;display:block}.composer{align-items:center;gap:8px;display:flex;position:sticky;bottom:14px}.composer input{border:0;margin:0;box-shadow:0 4px 18px #243b5320}.composer button{background:#fff;border:0;border-radius:14px;width:44px;height:44px;font-size:19px}.composer .send{color:#fff;background:#263238}.mistakes{padding-top:20px}.empty{color:#718078;background:#fff;border-radius:18px;padding:24px}.mistake{background:#fff;border-radius:16px;margin:10px 0;padding:16px}.mistake p{color:#6f7b74;margin:7px 0}.mistake small{color:#a27654}.room-header{z-index:4;justify-content:space-between;align-items:center;padding:2px 0 8px;display:flex;position:relative}.room-icon{color:#263238;background:#ffffffc9;border:0;border-radius:50%;width:38px;height:38px;font-size:20px}.room-title{text-align:center;font-weight:800}.room-title small{color:#7b877e;margin-top:2px;font-size:11px;font-weight:500;display:block}.room-stage{background:#d9ead0;border-radius:30px;flex-direction:column;justify-content:center;align-items:center;height:calc(100vh - 150px);min-height:520px;display:flex;position:relative;overflow:hidden}.room-stage:before{content:"";pointer-events:none;background:linear-gradient(#d9f1e4aa,#f2d8b555);position:absolute;inset:0}.room-stage .character-stage{z-index:1;width:min(78vw,320px);height:min(70vh,470px);box-shadow:none;background:0 0;border-radius:0}.room-stage .character-stage img{object-fit:cover;mix-blend-mode:normal;border-radius:0}.room-stage .speech{z-index:3;max-width:78%;font-size:14px;position:absolute;top:30px}.room-stage .tap-hint{background:#26323877;border-radius:10px;bottom:20px}.floating-action{z-index:3;cursor:pointer;-webkit-user-select:none;user-select:none;background:#ffffffd9;border-radius:50%;place-items:center;width:48px;height:48px;font-size:21px;font-weight:800;display:grid;position:absolute;box-shadow:0 6px 16px #243b5330}.floating-action:active{background:#fff0d9;transform:scale(.9)}.companion-page .messages.compact{z-index:5;margin:-58px 12px 8px;position:relative}.companion-page .composer{z-index:6;position:relative}.companion-page{padding-bottom:12px}.room-stage .character-stage{transition:filter .2s;animation:3.2s ease-in-out infinite idleFloat}.room-stage .character-stage img{filter:saturate(1.05);transition:transform .25s}.motion-bounce img{animation:.65s bounce}.motion-happy img{animation:.65s happy}.motion-nod img{animation:.65s nod}.motion-think img{animation:.65s think}.motion-peek img{animation:.65s peek}@keyframes idleFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}@keyframes bounce{0%{transform:translateY(0)scale(1)}35%{transform:translateY(-18px)scale(1.04)}70%{transform:translateY(2px)scale(.98)}to{transform:translateY(0)scale(1)}}@keyframes happy{0%{transform:rotate(0)}30%{transform:rotate(-3deg)scale(1.04)}60%{transform:rotate(3deg)scale(1.04)}to{transform:rotate(0)}}@keyframes nod{0%,to{transform:rotate(0)}35%{transform:rotate(4deg)}70%{transform:rotate(-3deg)}}@keyframes think{0%,to{transform:translate(0)}35%{transform:translate(-5px)rotate(-2deg)}70%{transform:translate(5px)rotate(2deg)}}@keyframes peek{0%,to{transform:scale(1)}50%{transform:scale(1.07)rotate(2deg)}}.room-stage .character-stage video{object-fit:cover;border-radius:0;width:100%;height:100%}.floating-action{border:0;font-family:inherit}.floating-action span{white-space:nowrap;color:#45545a;background:#ffffffd9;border-radius:8px;padding:3px 6px;font-size:11px;font-weight:600;position:absolute;top:52px;box-shadow:0 3px 8px #243b5318}.action-top-left span,.action-left span,.action-bottom-left span{left:0}.action-top-right span,.action-right span,.action-bottom-right span{right:0}.floating-action:hover span{background:#fff0d9}.photo-input{display:none}.photo-preview{z-index:4;object-fit:cover;border:3px solid #fff;border-radius:16px;width:82px;height:82px;position:absolute;top:118px;right:14px;box-shadow:0 6px 16px #243b5330}.dialogue-card{z-index:4;text-align:left;background:#fffffff0;border-radius:18px;padding:12px 14px;position:absolute;bottom:16px;left:12px;right:12px;box-shadow:0 8px 22px #243b5320}.dialogue-en{color:#263238;font-size:15px;line-height:1.35}.dialogue-zh{color:#718078;margin-top:5px;font-size:13px}.dialogue-tools{gap:14px;margin-top:6px;display:flex}.dialogue-tools button{color:#78827d;background:0 0;border:0;padding:0;font-size:13px}.room-stage .dialogue-card~.floating-action.action-bottom-left,.room-stage .dialogue-card~.floating-action.action-bottom-right{bottom:104px}.room-stage{background:linear-gradient(#d8f2ee 0%,#eaf3dc 74%,#dce9ca 100%);border-radius:30px;height:min(760px,100vh - 94px);min-height:620px;padding:0 68px 170px}.room-stage .character-stage{width:100%;max-width:330px;height:100%}.room-stage .character-stage video,.room-stage .character-stage img{border-radius:22px}.dialogue-card{min-height:82px;padding:12px 14px;bottom:72px;left:74px;right:74px}.dialogue-en{font-size:16px;font-weight:500}.dialogue-zh{font-size:13px}.dialogue-tools{margin-top:5px}.floating-action{width:48px;height:48px}.speech{max-width:68%;font-size:14px;top:28px}.photo-preview{top:110px;right:84px}@media (height<=720px){.room-stage{height:600px;min-height:600px}}.room-stage{background:#d8f2ee;border-radius:28px;height:calc(100vh - 96px);min-height:680px;padding:0;position:relative;overflow:hidden}.room-stage .character-stage{z-index:1;border-radius:0;width:100%;max-width:none;height:100%;margin:0;position:absolute;inset:0}.room-stage .character-stage video,.room-stage .character-stage img{object-fit:cover;border-radius:0;width:100%;height:100%}.room-stage:after{content:"";z-index:2;pointer-events:none;background:linear-gradient(#00000012 0%,#0000 35% 62%,#ffffff18 100%);position:absolute;inset:0}.room-stage .speech{display:none}.floating-action{z-index:5;color:#15191b;background:#fffffff0;width:56px;height:56px;box-shadow:0 4px 14px #243b5330}.floating-action span{background:#ffffffe8;font-size:12px;top:60px}.action-top-left{top:82px;left:16px}.action-top-right{top:82px;right:16px}.action-left{top:43%;left:16px}.action-right{top:43%;right:16px}.action-bottom-left{bottom:118px;left:16px}.action-bottom-right{bottom:118px;right:16px}.dialogue-card{z-index:6;background:#fffffff0;border-radius:18px;min-height:94px;bottom:18px;left:58px;right:58px}.room-stage .dialogue-card~.floating-action.action-bottom-left,.room-stage .dialogue-card~.floating-action.action-bottom-right{bottom:116px}.photo-preview{z-index:7;top:110px;right:82px}.room-stage .tap-hint{z-index:5}.messages.compact{display:none}.companion-page .composer{margin-top:12px}@media (width<=520px){.room-stage{border-radius:0;height:calc(100vh - 88px);min-height:600px;margin:0 -20px}.dialogue-card{left:58px;right:58px}.action-top-left{left:14px}.action-top-right{right:14px}.action-left{left:14px}.action-right{right:14px}.action-bottom-left{left:14px}.action-bottom-right{right:14px}}.photo-recognition{z-index:9;text-align:center;background:#fffffff5;border-radius:24px;padding:14px;position:absolute;top:18%;left:28px;right:28px;box-shadow:0 12px 30px #243b5340}.photo-recognition img{object-fit:cover;border-radius:16px;width:100%;max-height:280px}.recognition-en{margin-top:12px;font-size:18px;font-weight:700}.recognition-zh{color:#718078;margin:6px 0 12px;font-size:13px}.photo-recognition button{color:#fff;background:#263238;border:0;border-radius:12px;padding:10px 20px;font-weight:700}.photo-scene .character-stage{filter:blur(2px)brightness(.8)}.room-stage .floating-action span,.room-stage .tap-hint{display:none}.room-stage .floating-action{font-size:23px;font-weight:500}.room-stage .dialogue-tools button{font-size:18px}.room-stage .floating-action{width:44px;height:44px;font-size:18px}.room-stage .action-top-left,.room-stage .action-top-right{top:76px}.room-stage .action-bottom-left,.room-stage .action-bottom-right,.room-stage .dialogue-card~.floating-action.action-bottom-left,.room-stage .dialogue-card~.floating-action.action-bottom-right{bottom:112px}.room-stage .floating-action{filter:saturate(1.05);background:linear-gradient(145deg,#fff,#f4f7ef);border:2px solid #fff;transition:transform .18s,box-shadow .18s}.room-stage .floating-action:hover{transform:scale(1.08)rotate(-3deg);box-shadow:0 8px 18px #243b5340}.room-stage .floating-action:active{transform:scale(.88)rotate(4deg)}.room-stage .action-top-left{background:linear-gradient(145deg,#fff9c9,#fff0a3)}.room-stage .action-top-right{background:linear-gradient(145deg,#e7f4ff,#cbe8ff)}.room-stage .action-left{background:linear-gradient(145deg,#f1e6ff,#e2caff)}.room-stage .action-right{background:linear-gradient(145deg,#e8fff3,#c8f3db)}.room-stage .action-bottom-left{background:linear-gradient(145deg,#ffe5ed,#ffc8d8)}.room-stage .action-bottom-right{background:linear-gradient(145deg,#fff0dd,#ffd8aa)}.room-stage .action-top-left{top:82px;left:16px}.room-stage .action-top-right{top:82px;right:16px}.room-stage .action-bottom-left{bottom:112px;left:22%}.room-stage .action-bottom-center{background:linear-gradient(145deg,#d7e8ff,#a9caff);font-size:22px;bottom:112px;left:50%;transform:translate(-50%)}.room-stage .action-bottom-right{bottom:112px;right:22%}.room-stage .dialogue-card{min-height:74px;bottom:176px}.dialogue-card .dialogue-zh{padding-top:2px}.room-stage .dialogue-card{bottom:98px}.room-stage .dialogue-card~.floating-action.action-bottom-left,.room-stage .dialogue-card~.floating-action.action-bottom-center,.room-stage .dialogue-card~.floating-action.action-bottom-right,.room-stage .action-bottom-left,.room-stage .action-bottom-center,.room-stage .action-bottom-right{bottom:28px}.room-stage .floating-action.listening{animation:1s ease-in-out infinite listenPulse;box-shadow:0 0 0 8px #8db9ff55,0 8px 22px #243b5340}@keyframes listenPulse{50%{transform:scale(1.08)}}.room-stage .action-bottom-center{transform:translate(-50%)}.room-stage .action-bottom-center:hover{transform:translate(-50%)scale(1.08)rotate(-3deg)}.room-stage .action-bottom-center:active{transform:translate(-50%)scale(.88)rotate(4deg)}.room-stage .action-bottom-center.listening{animation:1s ease-in-out infinite centerListenPulse}@keyframes centerListenPulse{0%,to{transform:translate(-50%)scale(1);box-shadow:0 0 #8db9ff55,0 8px 22px #243b5340}50%{transform:translate(-50%)scale(1.08);box-shadow:0 0 0 8px #8db9ff55,0 8px 22px #243b5340}}.mode-panel{z-index:12;text-align:left;background:#fffffff5;border-radius:18px;width:230px;padding:12px;position:absolute;top:58px;right:14px;box-shadow:0 10px 28px #243b5340}.mode-panel b{margin-bottom:8px;font-size:13px;display:block}.mode-panel button{text-align:left;background:#f2f5ef;border:0;border-radius:10px;width:100%;margin-top:6px;padding:10px;font-size:12px;display:block}.mode-panel button.active{color:#1e4a9a;background:#d8eaff;font-weight:700}.room-stage .action-bottom-center{touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.room-stage .action-bottom-center.listening{color:#fff;background:linear-gradient(145deg,#8ab9ff,#427bea)}.voice-status{z-index:8;text-align:center;color:#263238;pointer-events:none;background:#fffffff0;border-radius:12px;padding:6px 10px;font-size:12px;line-height:1.4;position:absolute;bottom:78px;left:20px;right:20px}.room-stage .floating-action{z-index:7;pointer-events:auto}.hint-bubble{z-index:8;text-align:left;background:#fffffff2;border-radius:16px;padding:10px 34px 10px 13px;position:absolute;bottom:132px;left:76px;right:76px;box-shadow:0 8px 20px #243b5322}.hint-bubble .hint-en{color:#263238;font-size:14px;line-height:1.3}.hint-bubble .hint-zh{color:#718078;margin-top:4px;font-size:12px}.hint-bubble button{color:#7b877e;background:0 0;border:0;font-size:20px;line-height:1;position:absolute;top:7px;right:8px}@media (width<=520px){.hint-bubble{bottom:128px;left:64px;right:64px}}.hint-bubble{bottom:230px}@media (width<=520px){.hint-bubble{bottom:220px}}.room-stage{touch-action:pan-y}.room-stage:before{pointer-events:none}.room-stage .character-stage,.room-stage .floating-action{touch-action:none}.profile-shell{color:#263238;background:radial-gradient(at 85% 0,#dcf0e6 0%,#0000 45%),radial-gradient(at 10% 80%,#e7e9fa 0%,#0000 45%),#f6f8f5;min-height:100dvh;padding:28px 24px 44px}.profile-brand{align-items:center;gap:6px;max-width:820px;margin:0 auto 30px;font-size:20px;font-weight:650;display:flex}.profile-brand>span:not(.profile-mark){color:#75968b}.profile-mark{background:#d9e9df;border-radius:12px;place-items:center;width:36px;height:36px;margin-right:8px;display:grid}.profile-brand button{color:#5c6c66;background:0 0;border:0;margin-left:auto;padding:10px;font-size:13px}.profile-panel{background:#ffffffdb;border:1px solid #fff;border-radius:30px;max-width:820px;margin:auto;padding:40px;box-shadow:0 20px 70px #26323809}.profile-progress{color:#7a8983;justify-content:space-between;align-items:center;margin-bottom:30px;font-size:13px;display:flex}.profile-progress>div{gap:6px;display:flex}.profile-progress i{background:#e8ece9;border-radius:4px;width:28px;height:4px}.profile-progress i.done{background:#739d8c}.profile-step{animation:.2s ease-out profile-in}.profile-eyebrow{letter-spacing:1px;color:#739180;margin:0 0 12px;font-size:12px}.profile-panel h1{letter-spacing:-.5px;margin:0 0 12px;font-size:clamp(25px,4vw,36px);line-height:1.3}.profile-subtitle{color:#7b8982;max-width:550px;margin:0 0 28px;font-size:15px;line-height:1.8}.profile-choice{text-align:left;color:#263238;cursor:pointer;background:#fafbf9;border:1.5px solid #e4eae6;border-radius:19px;padding:22px;font-family:inherit;transition:transform .18s,border-color .18s,box-shadow .18s,background .18s;position:relative}.profile-choice:hover:not(:disabled){border-color:#9fbeb0;transform:translateY(-3px);box-shadow:0 8px 22px #3d6b5212}.profile-choice:focus-visible,.profile-continue:focus-visible{outline-offset:3px;outline:3px solid #97b9e2}.profile-choice.chosen{background:linear-gradient(145deg,#eff7f1,#e4efea);border-color:#6c9983;box-shadow:0 6px 20px #3d6b5210}.profile-choice h2{margin:16px 0 7px;font-size:18px;font-weight:600}.profile-choice p{color:#78887f;margin:0;font-size:13px;line-height:1.65}.profile-choice small{color:#8c9993;margin-top:24px;font-size:12px;display:block}.age-grid{grid-template-columns:repeat(3,1fr);gap:14px;display:grid}.choice-icon{background:#eaf0eb;border-radius:14px;place-items:center;width:54px;height:54px;font-size:28px;display:grid}.choice-check{color:#fff;border:1px solid #d6e0d9;border-radius:50%;place-items:center;width:20px;height:20px;font-size:12px;display:grid;position:absolute;top:18px;right:17px}.chosen .choice-check{background:#6c9983;border-color:#6c9983}.level-grid{gap:10px;display:grid}.level-choice{align-items:center;gap:20px;padding:16px 22px;display:flex}.level-choice h2{margin:0 0 4px;font-size:16px}.level-choice .choice-check{flex-shrink:0;margin-left:auto;position:static}.level-badge{color:#648473;min-width:90px;font-size:13px;font-weight:600}.goal-grid{grid-template-columns:repeat(2,1fr);gap:12px;display:grid}.goal-choice{align-items:center;gap:12px;padding:22px;font-size:15px;display:flex}.goal-choice>span:first-child{font-size:24px}.goal-check{color:#86a393;margin-left:auto}.goal-choice:disabled{opacity:.45;cursor:default}.selection-count{color:#87978d;text-align:right;margin-top:16px;font-size:12px}.profile-footer{margin-top:32px}.profile-footer>div{align-items:center;gap:14px;display:flex}.profile-continue{color:#fff;cursor:pointer;background:#325c48;border:0;border-radius:14px;min-height:50px;margin-left:auto;padding:15px 27px;font-family:inherit;font-size:15px;transition:background .18s}.profile-continue:hover{background:#244c39}.profile-continue:disabled{color:#9aa89f;cursor:default;background:#dce4df}.profile-back{color:#778a7d;font:inherit;background:0 0;border:0;padding:12px 0;font-size:14px}.profile-footer>small{text-align:right;color:#99a49c;margin-top:18px;font-size:11px;display:block}.profile-error{color:#a74639;font-size:13px}.welcome-art{width:150px;height:170px;margin:0 0 30px;position:relative}.welcome-art img{object-fit:cover;border-radius:50%;width:145px;height:145px;box-shadow:0 10px 30px #a1bda922}.welcome-art span{white-space:nowrap;letter-spacing:1px;color:#739180;background:#fff;border:1px solid #e7ece6;border-radius:20px;padding:7px 12px;font-size:9px;position:absolute;bottom:8px;left:15px}.welcome-note{color:#79917e;background:#eef4ef;border-radius:20px;padding:10px 15px;font-size:12px;display:inline-block}.summary-symbol{color:#648e72;background:#e5f1e8;border-radius:50%;place-items:center;width:55px;height:55px;margin-bottom:28px;font-size:26px;display:grid}.profile-summary{background:#f9fbf8;border:1px solid #e5ece6;border-radius:20px;padding:10px 24px}.profile-summary>div{border-bottom:1px solid #e9eee9;justify-content:space-between;gap:20px;padding:18px 0;display:flex}.profile-summary>div:last-child{border:0}.profile-summary span{color:#86948a;font-size:13px}.profile-summary strong{text-align:right;font-size:14px;font-weight:500}.profile-loading{color:#789080;background:#f6f8f5;place-items:center;min-height:100dvh;display:grid}@keyframes profile-in{0%{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}@media (width<=600px){.profile-shell{padding:20px 18px 28px}.profile-brand{margin-bottom:20px;font-size:18px}.profile-panel{border-radius:24px;padding:25px 20px}.age-grid{grid-template-columns:1fr;gap:10px}.age-choice{min-height:105px;padding:18px 20px 18px 84px}.age-choice .choice-icon{width:48px;height:48px;position:absolute;top:24px;left:18px}.age-choice h2{margin:0 0 4px;font-size:17px}.age-choice small{margin-top:7px}.profile-subtitle{margin-bottom:22px;font-size:14px}.goal-grid{gap:10px}.goal-choice{gap:7px;padding:18px 12px;font-size:13px}.goal-choice>span:first-child{font-size:21px}.level-choice{gap:10px;padding:15px 14px}.level-badge{min-width:63px;font-size:11px}.level-choice p{font-size:12px}.profile-footer{padding:16px 0 calc(8px + env(safe-area-inset-bottom));background:#fffffff5;margin-top:22px;position:sticky;bottom:0}.profile-summary>div{flex-direction:column;gap:8px}.profile-summary strong{text-align:left}.profile-footer>small{text-align:center}.profile-continue{flex:1}.welcome-art{margin-top:8px}.profile-choice:hover:not(:disabled){transform:none}}@media (prefers-reduced-motion:reduce){.profile-step{animation:none}.profile-choice{transition:none}}