:root { color-scheme: dark; font-family: Inter, system-ui, sans-serif; background:#071019; color:#e9f5ff }
* { box-sizing:border-box } body { margin:0; min-height:100vh; background:radial-gradient(circle at 50% 15%,#163047,#071019 60%) }
main { min-height:100vh; display:grid; grid-template-rows:minmax(0,1fr) auto; max-width:1100px; margin:auto; padding:20px; gap:18px }
.stage { position:relative; min-height:55vh; overflow:hidden; border-radius:28px; background:#02070c; box-shadow:0 24px 80px #0009 }
#avatar,.fallback { position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
#avatar:not([src]),#avatar[src=""] { display:none }.fallback { display:grid; place-items:center; background:radial-gradient(circle,#274d67,#07111b 65%) }
.fallback span { display:grid; place-items:center; width:180px; height:180px; border-radius:50%; background:#8ad8ff16; border:1px solid #91dcff55; font:600 76px serif }
.state { position:absolute; top:18px; left:18px; padding:8px 13px; border-radius:99px; background:#06101dcc; font-size:12px; letter-spacing:.14em }
.pulse { position:absolute; right:25px; bottom:25px; width:16px; height:16px; border-radius:50%; background:#758696 }
body[data-state="LISTENING"] .pulse { background:#55d6ff; animation:pulse 1.4s infinite }
body[data-state="SPEAKING"] .pulse { background:#7effae; animation:pulse .8s infinite }
body[data-state="ERROR"] .pulse { background:#ff6b74 } @keyframes pulse { 50%{transform:scale(1.8);opacity:.45} }
.panel { background:#0c1824e8; border:1px solid #ffffff16; border-radius:22px; padding:18px }
.speaker { display:inline-block; margin-bottom:9px; padding:6px 10px; border-radius:999px; background:#102b3d; color:#9edcff; font-size:12px; letter-spacing:.03em }
.transcript { color:#8fc7e6; min-height:24px }.reply { font-size:clamp(18px,2.2vw,26px); min-height:40px; margin:8px 0 14px }
.controls { display:flex; flex-wrap:wrap; gap:10px; align-items:center } button,input { font:inherit; border-radius:12px; border:1px solid #ffffff22; padding:11px 15px }
button { background:#17354a; color:white; cursor:pointer } button:disabled { opacity:.4 } button.active { background:#287b9f }
form { display:flex; margin-top:12px; gap:8px } form input { flex:1; background:#07131e; color:white }.notice { color:#8b9eab; margin:12px 0 0; font-size:13px }
.audio-fallback { display:grid; grid-template-columns:auto minmax(220px,1fr); align-items:center; gap:10px; margin-top:12px; color:#8fc7e6; font-size:13px }
.audio-fallback audio { width:100%; height:38px }
@media(max-width:600px){main{padding:0}.stage{border-radius:0;min-height:62vh}.panel{border-radius:20px 20px 0 0}.controls button{flex:1}}