:root { color-scheme: dark; font-family: ui-rounded, system-ui, sans-serif; background: #101416; color: #f3f6f4; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100dvh; background: radial-gradient(circle at 50% 20%, #263832, #101416 55%); }
main { width: min(100%, 520px); min-height: 100dvh; margin: auto; padding: max(22px, env(safe-area-inset-top)) 22px max(24px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 16px; }
header { display: flex; align-items: center; gap: 10px; }
h1 { font-size: 19px; font-weight: 650; flex: 1; margin: 0; }
.pulse { width: 11px; height: 11px; border-radius: 50%; background: #77e2a1; box-shadow: 0 0 18px #77e2a1; }
label, .hint { color: #a9b5b0; font-size: 13px; }
select, input { width: 100%; border: 1px solid #3b4743; border-radius: 14px; padding: 14px; background: #171e1c; color: inherit; font-size: 16px; }
#conversation { min-height: 210px; border: 1px solid #2d3b36; border-radius: 22px; padding: 20px; background: rgba(20, 27, 25, .76); }
#status { color: #77e2a1; font-size: 14px; }
#response { font-size: 21px; line-height: 1.4; }
.muted { color: #a9b5b0; }
.talk { margin-top: auto; width: 190px; height: 190px; border-radius: 50%; align-self: center; border: 2px solid #89efb0; background: #315f49; color: white; font-weight: 700; font-size: 18px; box-shadow: 0 12px 50px rgba(64, 201, 125, .24); touch-action: none; }
.talk.active { transform: scale(.96); background: #934a45; border-color: #ffaaa2; }
.talk.calibrating { background: #3f5960; border-color: #8fd5e2; }
.talk.listening { background: #315f49; }
.talk.thinking { background: #4b5362; border-color: #b6c4e6; }
.talk.speaking { background: #725e35; border-color: #f0cb82; }
.quiet { border: 1px solid #56635e; border-radius: 999px; padding: 8px 14px; background: transparent; color: inherit; }
.hint { text-align: center; margin: 0; }
dialog { border: 1px solid #4c5a55; border-radius: 18px; background: #171e1c; color: inherit; }
dialog form { display: grid; gap: 14px; min-width: min(78vw, 320px); }
dialog button { padding: 12px; border: 0; border-radius: 12px; background: #77e2a1; color: #0b2014; font-weight: 700; }