.ask-page{min-height:100vh;display:flex;flex-direction:column;background:#fff}
.topbar{display:flex;justify-content:flex-end;gap:20px;padding:16px 24px;font-size:14px}
.topbar a{color:#3A4A5A;text-decoration:none}.topbar a:hover{text-decoration:underline}
.topbar .btn{min-height:38px;padding:6px 14px;font-size:14px}
.hero{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 20px 48px;transition:padding .3s}
.logo{height:40px;width:auto;margin-bottom:26px}
.face{position:relative;width:168px;height:168px;border-radius:50%;margin-bottom:18px}
.face img{width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:50% 22%;position:relative;z-index:1;border:4px solid #fff;box-shadow:0 6px 24px rgba(20,35,63,.18)}
.face::before{content:"";position:absolute;inset:-10px;border-radius:50%;background:radial-gradient(circle,rgba(44,184,181,.45),rgba(44,184,181,0) 70%);opacity:0;transition:opacity .3s}
.face.speaking::before{opacity:1;animation:glow 1.1s ease-in-out infinite}
.face.listening::before{opacity:1;background:radial-gradient(circle,rgba(229,72,77,.35),rgba(229,72,77,0) 70%);animation:glow .8s ease-in-out infinite}
@keyframes glow{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
.tag{font-size:13px;color:#4A5A6A;margin:0 0 22px;text-align:center}
.tag strong{color:#087173}
.box{width:min(680px,100%);display:flex;align-items:center;gap:6px;border:1px solid #DCE5EA;border-radius:999px;padding:6px 6px 6px 20px;box-shadow:0 2px 10px rgba(20,35,63,.08);background:#fff}
.box:focus-within{box-shadow:0 2px 16px rgba(8,113,115,.25);border-color:#2CB8B5}
.box input{flex:1 1 auto;border:0;outline:0;font:inherit;font-size:18px;min-height:46px;min-width:0;color:#14233F;background:transparent}
.icon{width:46px;height:46px;border-radius:50%;border:0;background:transparent;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:#087173;font-size:20px}
.icon:hover{background:#E6F6F5}
.icon.go{background:#087173;color:#fff}.icon.go:hover{background:#065a5c}
.icon.on{background:#E5484D;color:#fff}
.sugg{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:20px;max-width:760px}
.sugg button{background:#F3F7F8;border:1px solid #DCE5EA;border-radius:999px;padding:9px 15px;font:inherit;font-size:14px;color:#14233F;cursor:pointer;min-height:40px}
.sugg button:hover{background:#E6F6F5;border-color:#2CB8B5}
.under{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:22px}
.under .btn{min-height:42px;font-size:15px}
.answers{width:min(760px,100%);display:flex;flex-direction:column;gap:18px;margin:0 auto 24px;padding:0 20px}
.ans{border:1px solid #DCE5EA;border-radius:16px;padding:18px 20px;background:#fff}
.ans .q{font-size:14px;color:#4A5A6A;margin:0 0 8px;font-weight:600}
.ans .a{font-size:18px;line-height:1.55;margin:0 0 12px}
.ans .meta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;font-size:13px}
.ans .meta button{background:none;border:0;padding:0;color:#087173;font:inherit;font-size:13px;cursor:pointer;text-decoration:underline}
.asked .hero{justify-content:flex-start;padding-top:8px}
.asked .logo{display:none}
.asked .face{width:96px;height:96px;margin-bottom:10px}
.asked .sugg{margin-top:14px}
.live-wrap{width:min(760px,100%);margin:16px auto 0;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#0B1A30;display:none}
.live-wrap iframe{width:100%;height:100%;border:0}
.toggle{font-size:13px;color:#4A5A6A;display:flex;align-items:center;gap:6px;margin-top:14px}
footer.mini{border-top:1px solid #DCE5EA;padding:14px 24px;font-size:13px;color:#4A5A6A;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;background:#F3F7F8}
.topbar a.btn{color:#fff}.topbar a.btn:hover{text-decoration:none}