: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}