:root{color-scheme:dark;font-family:Inter,system-ui,sans-serif;background:transparent;color:#f7f2ff}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden}body{background:radial-gradient(circle at 50% 38%,#33275a,#171329 55%,#0e0c18)}#avatar,#live-avatar{display:block;width:100%;height:100%}#avatar{cursor:grab;touch-action:none}#avatar.dragging{cursor:grabbing}#live-avatar{position:absolute;inset:0;object-fit:contain;background:#0e0c18;opacity:0;pointer-events:none;transition:opacity .18s ease}#app.streaming #live-avatar{opacity:1}#app.streaming #avatar{visibility:hidden}.status{position:absolute;top:16px;left:16px;display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:#0c0a16b8;backdrop-filter:blur(8px);font-size:14px}#status-dot{width:9px;height:9px;border-radius:50%;background:#8b7ca8}#status-dot.offline{background:#a99dbd}#status-dot.listening{background:#59d6ff}#status-dot.thinking{background:#ffd166}#status-dot.speaking{background:#7dff9b;box-shadow:0 0 14px #7dff9b}#subtitle{position:absolute;left:50%;bottom:22px;width:min(720px,calc(100% - 32px));transform:translate(-50%);padding:10px 14px;border-radius:14px;background:#0c0a16c7;backdrop-filter:blur(8px);text-align:center;font-size:clamp(14px,2.2vw,20px);opacity:0;transition:opacity .16s ease}#subtitle.visible{opacity:1}#stream-open{position:absolute;top:16px;right:16px;border:0;border-radius:999px;padding:8px 13px;color:#f7f2ff;background:#0c0a16b8;backdrop-filter:blur(8px);font:inherit;cursor:pointer}#view-controls{position:absolute;right:16px;bottom:18px;display:flex;gap:7px;padding:6px;border-radius:14px;background:#0c0a16b8;backdrop-filter:blur(8px)}#view-controls button{width:40px;height:38px;border:0;border-radius:10px;color:#f7f2ff;background:#77649d8c;font:700 20px/1 system-ui;cursor:pointer}#view-controls button:hover{background:#8ff0d08c}#app.streaming #view-controls{display:none}#stream-panel{position:absolute;top:58px;right:16px;width:min(340px,calc(100% - 32px));padding:14px;border-radius:14px;background:#0c0a16eb;box-shadow:0 12px 40px #0008;backdrop-filter:blur(10px)}#stream-panel label{display:block;margin-bottom:8px;font-size:13px;color:#d5cce3}.stream-row{display:flex;gap:8px}#stream-panel input{min-width:0;flex:1;border:1px solid #55476e;border-radius:9px;padding:9px;color:#fff;background:#171126;font:700 14px ui-monospace,monospace;text-transform:uppercase}#stream-panel button{border:0;border-radius:9px;padding:9px 11px;color:#171126;background:#8ff0d0;font:inherit;font-weight:700;cursor:pointer}#stream-close{width:100%;margin-top:9px;background:#c9bed9!important}#stream-status{display:block;margin-top:9px;color:#bfb4d2}