.sei-portrait{display:block;position:relative;overflow:hidden;flex:none;width:100%;aspect-ratio:280/470;border-radius:22px;background:#f3eef8}
.sei-portrait img{position:absolute;max-width:none;width:548.571%;height:auto;top:-74.47%;pointer-events:none}
.sei-1 img{left:-113.57%}.sei-2 img{left:-220%}.sei-3 img{left:-325%}.sei-4 img{left:-434.28%}
.sei-0 img{width:150%;left:-25%;top:-8%}
.friends{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.friend{display:flex;flex-direction:column;align-items:stretch;gap:12px;padding:10px;border-color:color-mix(in srgb,var(--card-color) 35%,white)}.friend .sei-portrait{width:100%;margin:0}.friend div{padding:0 3px 8px}.friend strong{color:var(--card-color)}.friend div span{font-size:14px;line-height:1.5}.friend:focus-visible{outline:3px solid var(--card-color);outline-offset:3px}
.conversation{display:flex;flex-direction:column;height:100dvh}.conversation[hidden]{display:none}.conversation-head{height:auto;min-height:142px;flex:none;padding:10px 18px}.conversation-head>div{flex:1}.conversation-head>.sei-conversation-face{width:94px;height:124px;padding:0;background:none;border-radius:22px;overflow:hidden;transition:width .2s,height .2s}.sei-conversation-face .sei-portrait{height:100%;aspect-ratio:auto}.sei-typing .conversation-head{min-height:76px}.sei-typing .sei-conversation-face{width:44px;height:48px}.sei-typing .sei-conversation-face .sei-portrait img{top:-62%}.sei-typing .sei-conversation-face .sei-0 img{top:-18%}
.conversation .messages{height:auto;min-height:0;flex:1;padding-bottom:24px}.conversation .speak-bar{position:relative;inset:auto;margin:8px 14px max(12px,env(safe-area-inset-bottom));flex:none}.sei-listening .sei-conversation-face{box-shadow:0 0 0 4px color-mix(in srgb,var(--friend-color) 25%,transparent)}.sei-thinking .sei-conversation-face{animation:sei-glow 1.5s ease-in-out infinite}
.sei-practice-face,.sei-result-face{width:36px;height:40px;border:0;padding:0;background:none;flex:none;border-radius:50%;overflow:hidden}.sei-practice-face .sei-portrait,.sei-result-face .sei-portrait{height:100%;border-radius:50%}.sei-practice-face img,.sei-result-face img{top:-60%}.sei-practice-face .sei-0 img,.sei-result-face .sei-0 img{top:-18%}.result-head{gap:10px}.result-head #copyBtn{margin-left:auto}
.sei-dialog{border:0;border-radius:24px;padding:20px;width:min(330px,85vw);max-height:90dvh;background:#fffaf0;color:#332c3d}.sei-dialog::backdrop{background:#221a2dcc}.sei-dialog>button{float:right;border:0;border-radius:12px;padding:10px 15px;background:#eee7f7;color:#534077;font:inherit}.sei-dialog h2{font-size:20px;margin:8px 0 20px}.sei-dialog .sei-portrait{max-height:65dvh}.sei-dialog .sei-0 img{width:125%;left:-12.5%;top:0}
#sentencePanel .sentence-card-top>#saveBtn{display:block;flex:none;border:1px solid #c9badd;background:#fff;color:#574176;border-radius:12px;padding:9px 12px;font-size:14px;font-weight:800;white-space:nowrap}
.result-actions{flex-wrap:wrap}
.welcome{align-items:center;gap:12px;background:linear-gradient(145deg,var(--home-sei-color,#73579d),color-mix(in srgb,var(--home-sei-color,#73579d) 65%,#241d35))}
.welcome>div:first-child{flex:1;min-width:0;position:relative;z-index:1}
.welcome>.sei-home-face{position:relative;z-index:1;align-self:stretch;flex:0 0 29%;max-width:125px;min-height:140px;border:0;padding:0;border-radius:24px;background:transparent;overflow:hidden;cursor:pointer}
.sei-home-face .sei-portrait{height:100%;aspect-ratio:auto;border-radius:24px}.sei-home-face .sei-0 img{width:190%;left:-45%;top:-7%}
.sei-home-face:focus-visible{outline:3px solid white;outline-offset:3px}
@media(max-width:380px){.welcome{padding:20px 16px;gap:8px}.welcome h1{font-size:1.4rem}.welcome>.sei-home-face{flex-basis:27%}.welcome p:not(.eyebrow){font-size:14px}}
#saveHint{display:block;flex:0 0 100%;width:100%;margin-top:6px;color:#695b73;font-size:14px;line-height:1.45;font-weight:500}
body.practice-landscape .sentence-card-top{gap:8px;flex-wrap:wrap}
@keyframes sei-glow{50%{box-shadow:0 0 18px color-mix(in srgb,var(--friend-color) 40%,transparent)}}
@media(prefers-reduced-motion:reduce){.sei-thinking .sei-conversation-face{animation:none}.conversation-head>.sei-conversation-face{transition:none}}
@media(max-height:450px){.conversation-head{min-height:64px}.conversation-head>.sei-conversation-face{width:42px;height:44px}.conversation-head .sei-portrait img{top:-60%}.conversation-head .sei-0 img{top:-18%}}
/* Keep image coordinates independent of the card height. */
.sei-portrait:not(.sei-0) img{width:400%;height:auto;top:0}
.sei-1 img{left:0}.sei-2 img{left:-100%}.sei-3 img{left:-200%}.sei-4 img{left:-300%}
.friend .sei-portrait:not(.sei-0){aspect-ratio:418/941}
.welcome>.sei-home-face{align-self:center;height:160px;min-height:0}
.sei-portrait.sei-0 img{top:0}
.sei-dialog .sei-portrait:not(.sei-0){aspect-ratio:418/941;max-height:none}
.sei-dialog{overflow:auto}
.welcome h1{word-break:keep-all;overflow-wrap:normal;font-size:clamp(1.25rem,5.4vw,1.6rem);text-wrap:balance}
.welcome p:not(.eyebrow){word-break:keep-all;overflow-wrap:normal;text-wrap:pretty}
.sei-voice-bar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:8px 18px;font-size:14px;color:#6a5c75;border-bottom:1px solid #ece5ee;flex:none}
.sei-voice-bar button,.chat-audio-controls button{border:1px solid currentColor;background:transparent;color:inherit;border-radius:10px;padding:8px 12px;font:inherit;font-size:14px;cursor:pointer}
.chat-audio-controls{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.chat-audio-controls button{background:#ffffff18}
.sei-voice-status{color:#6a5c75;font-size:14px;line-height:1.4;margin:4px 0}.sei-voice-status:empty{display:none}
.sei-speaking .sei-conversation-face{box-shadow:0 0 0 4px color-mix(in srgb,var(--friend-color) 35%,transparent)}
.chat-transcript[hidden]{display:none}
.conversation.sei-audio-first .chat-transcript,.conversation.sei-audio-first .talk-correction,.conversation.sei-audio-first .daily-question-meaning{display:none!important}
.chat-speaker{display:block;font-size:14px;opacity:.85;margin-bottom:6px}
.sei-audio-first .chat-speaker{margin-bottom:0}
.sei-audio-first .hint-message{display:none}
.sei-audio-first .chat-audio-controls{margin-top:8px}

.conversation-opening-status{margin:16px 0;padding:12px 14px;border-radius:14px;background:#f1edf5;color:#655973;font-size:.85rem;line-height:1.6}
.conversation-opening-status button{margin-left:5px;padding:6px 12px;border:1px solid #cfc4d9;border-radius:10px;background:#fff;color:inherit;font:inherit}

/* Home friend selection shares the existing portraits and selected-friend state. */
.sei-home-choice{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:16px;font-size:14px}
.sei-home-choice>span{font-weight:700}
.sei-home-choice>button{min-height:44px;padding:8px 12px;border:1px solid #ffffff90;border-radius:12px;background:#fff;color:var(--home-sei-color);font:inherit;font-weight:700;cursor:pointer}
.sei-home-choice>button:focus-visible{outline:3px solid #fff;outline-offset:3px}
.sei-friend-picker{box-sizing:border-box;width:min(460px,calc(100vw - 24px));max-height:calc(100dvh - 32px);padding:18px;border:1px solid var(--line);border-radius:24px;background:#fffaf0;color:#332c3d;overflow:auto}
.sei-friend-picker::backdrop{background:#221a2da6}
.sei-picker-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.sei-picker-head h2{margin:0;font-size:20px;line-height:1.4;word-break:keep-all}
.sei-picker-head>button{flex:none;min-height:44px;padding:8px 12px;border:1px solid var(--line);border-radius:12px;background:#fff;color:inherit;font:inherit;font-size:14px;cursor:pointer}
.sei-picker-list{display:grid;gap:10px}
.sei-picker-friend{display:flex;align-items:center;gap:12px;width:100%;padding:10px;border:2px solid transparent;border-radius:16px;background:#fff;text-align:left;color:inherit;font:inherit;cursor:pointer}
.sei-picker-friend[aria-pressed=true]{border-color:var(--card-color);background:color-mix(in srgb,var(--card-color) 7%,white)}
.sei-picker-friend:focus-visible{outline:3px solid var(--card-color);outline-offset:2px}
.sei-picker-friend>.sei-portrait{width:56px;height:76px;border-radius:12px}
.sei-picker-detail{display:grid;gap:4px;min-width:0;flex:1}
.sei-picker-detail strong{font-size:16px;color:var(--card-color)}
.sei-picker-detail>span{font-size:14px;line-height:1.4;word-break:keep-all}
.sei-picker-selected{flex:none;font-size:14px;font-weight:700;color:var(--card-color)}
.sei-picker-selected[hidden]{display:none}
@media(max-width:360px){.sei-picker-friend{gap:8px}.sei-picker-friend>.sei-portrait{width:44px;height:62px}.sei-picker-selected{font-size:13px}}