*{margin:0;padding:0 12px;box-sizing:border-box}body{font-family:Inter,sans-serif;background-color:#f9fafb;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1.5rem;color:#1f2937}header{text-align:center;margin-bottom:3rem;display:flex;flex-direction:column;align-items:center}.welcome-text{color:#9ca3af;font-size:.875rem;font-weight:500;margin-bottom:1.5rem;letter-spacing:.05em}.logo-container{position:relative;width:8rem;height:8rem;margin-bottom:2rem;display:flex;align-items:center;justify-content:center}.orb-gradient{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 50% 50%,#45a8f5,#40befa,#fff0);box-shadow:0 0 60px #45a8f5;filter:blur(8px);animation:pulse-glow 4s infinite alternate;opacity:.6;transition:all .3s ease}@keyframes pulse-glow{0%{transform:scale(1);opacity:.8}to{transform:scale(1.05);opacity:1}}.blob{position:absolute;width:5rem;height:5rem;border-radius:50%;filter:blur(40px);opacity:.7;animation:blob 7s infinite;transition:all .3s ease}.blob-1{top:.5rem;left:1rem;mix-blend-mode:multiply;background-color:#86efac}.blob-2{top:.5rem;right:1rem;mix-blend-mode:multiply;background-color:#93c5fd;animation-delay:2s}@keyframes blob{0%,to{transform:translate(0) scale(1)}33%{transform:translate(20px) scale(1.1)}66%{transform:translate(-10px,10px) scale(.9)}}@keyframes listening-pulse{0%,to{transform:scale(1);opacity:.8}50%{transform:scale(1.15);opacity:1}}@keyframes speaking-wave{0%,to{transform:scale(1) rotate(0)}25%{transform:scale(1.08) rotate(5deg)}50%{transform:scale(1.12) rotate(0)}75%{transform:scale(1.08) rotate(-5deg)}}@keyframes thinking-rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.logo-circle{position:relative;z-index:10;width:6rem;height:6rem;border-radius:50%;background:linear-gradient(to bottom right,#fff6,#ffffff1a);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.5);box-shadow:0 10px 15px -3px #0000001a;display:flex;align-items:center;justify-content:center;transition:all .3s ease}.logo-circle svg{width:2.5rem;height:2.5rem;color:#0d9488;transition:all .3s ease}.logo-container.listening .orb-gradient{animation:listening-pulse 1.2s infinite;background:radial-gradient(circle at 50% 50%,#ef4444f2,#dc2626b3,#fff0);box-shadow:0 0 90px #ef4444b3}.logo-container.listening .blob-1{background-color:#f87171;animation:blob 3s infinite}.logo-container.listening .blob-2{background-color:#ef4444;animation:blob 3s infinite}.logo-container.speaking .orb-gradient{animation:speaking-wave .8s infinite;background:radial-gradient(circle at 50% 50%,#10b981e6,#05966999,#fff0);box-shadow:0 0 80px #10b98199}.logo-container.speaking .blob-1{background-color:#34d399;animation:blob 2s infinite}.logo-container.speaking .blob-2{background-color:#10b981;animation:blob 2s infinite}.logo-container.speaking .logo-circle svg{color:#059669}.logo-container.thinking .orb-gradient{animation:thinking-rotate 3s linear infinite;background:radial-gradient(circle at 50% 50%,#fbbf24e6,#f59e0b99,#fff0);box-shadow:0 0 80px #fbbf2480}.logo-container.thinking .blob-1{background-color:#fbbf24;animation:blob 2.5s infinite}.logo-container.thinking .blob-2{background-color:#f59e0b;animation:blob 2.5s infinite}.logo-container.thinking .logo-circle svg{color:#d97706}.logo-container.error .orb-gradient{animation:pulse-glow .5s infinite alternate;background:radial-gradient(circle at 50% 50%,#ef4444e6,#dc262699,#fff0);box-shadow:0 0 80px #ef444499}.logo-container.error .blob-1,.logo-container.error .blob-2{background-color:#ef4444}.logo-container.error .logo-circle svg{color:#dc2626}.controls{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;max-width:600px}button{padding:.75rem 1.5rem;border:none;border-radius:.5rem;font-size:.875rem;font-weight:600;cursor:pointer;transition:all .2s;color:#fff;box-shadow:0 4px 6px -1px #0000001a}button:hover{transform:translateY(-2px);box-shadow:0 6px 8px -1px #00000026}button:active{transform:translateY(0)}.btn-idle{background:linear-gradient(135deg,#64748b,#475569)}.btn-listening{background:linear-gradient(135deg,#ef4444,#dc2626)}.btn-speaking{background:linear-gradient(135deg,#10b981,#059669)}.btn-thinking{background:linear-gradient(135deg,#fbbf24,#f59e0b)}.btn-error{background:linear-gradient(135deg,#ef4444,#dc2626)}h1{font-size:1.875rem;font-weight:600;color:#374151}.instruction-text{margin-bottom:2.5rem;text-align:center}.instruction-text p{color:#4b5563;font-size:1.125rem}.grid-container{display:grid;grid-template-columns:1fr;gap:1.5rem;width:100%;max-width:72rem}.device-card{display:none!important;background-color:#fff;border-radius:2rem;padding:1.5rem;display:flex;margin-top:20px;justify-content:space-between;align-items:center;box-shadow:0 1px 3px #0000001a;border:1px solid #f3f4f6;cursor:pointer;transition:all .3s ease}.device-card:hover{transform:translateY(-5px);box-shadow:0 20px 40px -5px #0000001a}.device-card.selected{margin-bottom:15px;display:flex!important}@keyframes cardSelect{0%{transform:scale(1);box-shadow:0 1px 3px #0000001a}25%{transform:scale(1.05);box-shadow:0 0 0 10px #14b8a64d,0 20px 40px -5px #14b8a666}50%{transform:scale(1);box-shadow:0 0 0 15px #14b8a633,0 10px 30px -5px #14b8a64d}75%{transform:scale(1.03);box-shadow:0 0 0 8px #14b8a626,0 15px 35px -5px #14b8a633}to{transform:scale(1);box-shadow:0 0 #14b8a600,0 10px 30px -5px #14b8a633}}.device-card.selected .status-dot{animation:dotPulse 1.5s ease-in-out infinite}@keyframes dotPulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.3);opacity:.7}}.device-card.selected .card-title{color:#0f766e;font-weight:700}.card-content{display:flex;flex-direction:column;justify-content:center;gap:.25rem;width:50%}.card-header{display:flex;align-items:center;gap:.5rem;margin-bottom:.25rem}.status-dot{width:.75rem;height:.75rem;border-radius:50%}.status-orange{background-color:#fb923c}.status-green{background-color:#4ade80}.status-cyan{background-color:#22d3ee}.status-red{background-color:#f87171}.card-title{font-size:1.125rem;font-weight:700;color:#14b8a6}.card-description{font-size:.625rem;color:#9ca3af;line-height:1.3}.card-image{width:6rem;height:6rem;background-color:#f3f4f6;border-radius:1rem;display:flex;align-items:center;justify-content:center;color:#d1d5db}.card-image svg{width:2.5rem;height:2.5rem}@media (min-width: 768px){.grid-container{grid-template-columns:repeat(2,1fr)}h1{font-size:1.875rem}}@media (min-width: 1024px){.grid-container{grid-template-columns:repeat(3,1fr)}}@media (max-width: 480px){body{padding:1rem}h1{font-size:1.5rem}.logo-container{width:6rem;height:6rem}.logo-circle{width:5rem;height:5rem}.device-card{padding:1rem}.card-image{width:5rem;height:5rem}}.card-image>img{width:100%;height:100%;object-fit:cover;object-position:70% center}#log{font-family:monospace;font-size:12px;color:#888;opacity:.8;position:absolute;bottom:26px;max-height:200px;scroll-behavior:auto;overflow:scroll;width:100%;overflow-x:hidden;text-align:left}.log-line{margin:2px 0;line-height:1.4}