:root{--bg:#05070d;--card:#0b1020;--text:#eef4ff;--muted:#8ea1c0;--blue:#50a8ff;--violet:#9a6cff;--green:#54f0a9;--red:#ff5c7a;--amber:#ffd36b}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 50% 4%,#172b5c 0,#070914 45%,#020308 100%);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Arial,sans-serif}.shell{min-height:100vh;display:grid;place-items:center;padding:18px}.card{width:min(640px,100%);padding:24px;border:1px solid rgba(255,255,255,.12);border-radius:30px;background:linear-gradient(180deg,rgba(14,22,45,.88),rgba(4,7,14,.94));box-shadow:0 30px 100px rgba(0,0,0,.55);backdrop-filter:blur(16px);text-align:center}.status-row{display:flex;gap:10px;align-items:center;justify-content:center;color:var(--muted);font-size:14px}.dot{width:10px;height:10px;border-radius:99px;background:var(--muted);box-shadow:0 0 20px currentColor}.dot.listen{background:var(--green)}.dot.think{background:var(--violet)}.dot.speak{background:var(--blue)}.dot.warn{background:var(--amber)}.stage{display:grid;grid-template-columns:1fr;place-items:center;gap:12px;margin:18px auto 10px}.face{position:relative;width:250px;height:250px;border-radius:50%;display:grid;place-items:center}.face img{width:216px;height:216px;object-fit:cover;border-radius:50%;border:1px solid rgba(255,255,255,.25);box-shadow:0 0 60px rgba(80,168,255,.25)}.ring{position:absolute;border-radius:50%;border:1px solid rgba(80,168,255,.25);inset:4px;animation:pulse 3s infinite}.r2{inset:20px;animation-delay:.8s;border-color:rgba(154,108,255,.28)}.face.listen img{box-shadow:0 0 80px rgba(84,240,169,.45)}.face.think img{filter:saturate(1.15);box-shadow:0 0 90px rgba(154,108,255,.5)}.face.speak img{animation:breathe 1.1s infinite;box-shadow:0 0 90px rgba(80,168,255,.55)}.camera{width:min(280px,100%);border:1px solid rgba(255,255,255,.13);background:rgba(0,0,0,.28);border-radius:20px;padding:8px}.camera video{width:100%;border-radius:14px;transform:scaleX(-1);display:block}.hidden{display:none!important}.mood{margin-top:7px;font-size:12px;color:var(--muted)}h1{margin:8px 0 4px;font-size:40px;letter-spacing:-.05em}.sub{margin:0 0 18px;color:var(--muted)}.lock{margin:12px 0;padding:12px;border:1px solid rgba(255,211,107,.35);background:rgba(255,211,107,.08);border-radius:14px;color:#ffe7a8;font-size:13px}.controls{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:10px;margin-bottom:12px}button{border:0;border-radius:14px;padding:14px 16px;color:#06101d;background:linear-gradient(135deg,var(--green),var(--blue));font-weight:800;cursor:pointer}button:disabled{opacity:.55;cursor:not-allowed}#cameraBtn,#liveBtn,#mute{background:rgba(255,255,255,.11);color:var(--text);border:1px solid rgba(255,255,255,.12)}form{display:grid;grid-template-columns:1fr auto;gap:10px}input{width:100%;border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:14px 16px;background:rgba(255,255,255,.07);color:var(--text);outline:none}.utility-row{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-top:10px;color:var(--muted);font-size:12px}.utility-row button{background:rgba(255,255,255,.08);color:var(--text);border:1px solid rgba(255,255,255,.12);padding:10px 12px}.diag{margin:10px 0 0;text-align:left;white-space:pre-wrap;max-height:180px;overflow:auto;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.11);border-radius:14px;padding:12px;color:#b9d6ff;font-size:11px}.hint{margin:10px 0 0;color:var(--muted);font-size:12px;line-height:1.4}.log{margin-top:16px;display:grid;gap:10px;max-height:300px;overflow:auto;text-align:left}.msg{border-radius:16px;padding:12px 14px;white-space:pre-wrap;line-height:1.35}.msg.you{background:rgba(84,240,169,.09);border:1px solid rgba(84,240,169,.15)}.msg.six{background:rgba(80,168,255,.09);border:1px solid rgba(80,168,255,.16)}@keyframes pulse{0%,100%{transform:scale(.96);opacity:.45}50%{transform:scale(1.04);opacity:1}}@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.018)}}@media (min-width:720px){.stage{grid-template-columns:1fr 250px}.face{justify-self:end}.camera{justify-self:start}}@media (max-width:520px){.card{padding:18px;border-radius:24px}.face{width:220px;height:220px}.face img{width:190px;height:190px}.controls{grid-template-columns:1fr}.stage{margin-top:12px}h1{font-size:34px}}