:root{--color-bg:#1a0a2e;--color-surface:#2d1b4e;--color-primary:#ff6b9d;--color-secondary:#c084fc;--color-text:#f0e6ff;--color-text-muted:#a78bca;--color-success:#4ade80;--color-warning:#fbbf24;--radius-full:9999px;--radius-lg:24px;--transition-bounce:cubic-bezier(.34, 1.56, .64, 1);--transition-smooth:cubic-bezier(.4, 0, .2, 1)}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{background:var(--color-bg);height:100%;color:var(--color-text);-webkit-font-smoothing:antialiased;font-family:Segoe UI,system-ui,-apple-system,sans-serif;overflow:auto}#app{justify-content:center;align-items:center;height:100%;display:flex}.shell{flex-direction:column;align-items:center;gap:32px;width:100%;max-width:480px;padding:24px;display:flex}.character{background:radial-gradient(circle at 40% 35%, var(--color-secondary), var(--color-primary));border-radius:var(--radius-full);width:180px;height:180px;transition:transform .2s var(--transition-bounce);cursor:default;-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;display:flex;box-shadow:0 8px 32px #ff6b9d66}.character.connecting{opacity:.75;animation:2s ease-out infinite pulse-ring}.character.reconnecting{opacity:.5;animation:2s ease-out infinite pulse-ring}.character.listening{animation:1.5s ease-out infinite pulse-ring}.character.thinking{animation:.8s ease-in-out infinite wobble}.character.speaking{animation:.4s ease-in-out infinite alternate bounce-speak}.character.error{filter:grayscale(60%);animation:none}.face{flex-direction:column;align-items:center;gap:12px;display:flex}.eyes{gap:20px;display:flex}.eye{border-radius:var(--radius-full);background:#fff;width:24px;height:24px;animation:4s ease-in-out infinite blink;position:relative}.eye:after{content:"";border-radius:var(--radius-full);background:#1a0a2e;width:10px;height:10px;position:absolute;top:6px;left:6px}.mouth{width:40px;height:20px;transition:all .2s var(--transition-smooth);border:4px solid #fff;border-top:none;border-radius:0 0 40px 40px}.character.speaking .mouth{width:32px;height:28px}.status-text{color:var(--color-text);text-align:center;min-height:2em;transition:opacity .3s var(--transition-smooth);font-size:1.25rem;font-weight:600}.conversation-toggle{background:var(--color-surface);border:3px solid var(--color-primary);border-radius:var(--radius-full);min-height:72px;color:var(--color-text);cursor:pointer;transition:all .2s var(--transition-bounce);outline:none;align-items:center;gap:12px;padding:20px 40px;font-size:1.125rem;font-weight:700;display:flex}.conversation-toggle:hover{transform:scale(1.04);box-shadow:0 4px 20px #ff6b9d59}.conversation-toggle:active{transform:scale(.97)}.conversation-toggle[aria-pressed=true]{background:var(--color-primary);border-color:var(--color-primary);color:#fff;box-shadow:0 4px 24px #ff6b9d80}.toggle-icon{font-size:1.5rem;line-height:1}.now-playing{background:var(--color-surface);border-radius:var(--radius-lg);width:100%;max-width:360px;transition:opacity .3s var(--transition-smooth);align-items:center;gap:12px;padding:14px 20px;display:flex}.now-playing.hidden{opacity:0;pointer-events:none}.track-info{flex-direction:column;gap:2px;display:flex;overflow:hidden}.track-title{white-space:nowrap;text-overflow:ellipsis;font-size:.9rem;font-weight:700;overflow:hidden}.track-artist{color:var(--color-text-muted);white-space:nowrap;text-overflow:ellipsis;font-size:.8rem;overflow:hidden}@keyframes blink{0%,92%,to{transform:scaleY(1)}96%{transform:scaleY(.1)}}@keyframes pulse-ring{0%{box-shadow:0 0 #ff6b9d80}70%{box-shadow:0 0 0 24px #ff6b9d00}to{box-shadow:0 0 #ff6b9d00}}@keyframes wobble{0%,to{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}@keyframes bounce-speak{0%{transform:scaleY(.95)}to{transform:scaleY(1.05)}}.spotify-test{background:var(--color-surface);border-radius:var(--radius-lg);flex-direction:column;gap:16px;width:100%;max-width:480px;margin:40px auto 24px;padding:24px;display:flex}.spotify-test-title{color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em;font-size:1rem;font-weight:700}.spotify-status{color:var(--color-text-muted);font-size:.9rem}.spotify-btn{background:var(--color-primary);border-radius:var(--radius-full);color:#fff;cursor:pointer;transition:all .15s var(--transition-smooth);border:none;padding:12px 24px;font-size:.95rem;font-weight:700}.spotify-btn:hover{transform:scale(1.03);box-shadow:0 4px 16px #ff6b9d66}.spotify-btn:active{transform:scale(.97)}.spotify-search{gap:8px;display:flex}.spotify-input{background:var(--color-bg);border:2px solid var(--color-secondary);border-radius:var(--radius-full);color:var(--color-text);transition:border-color .2s var(--transition-smooth);outline:none;flex:1;padding:12px 16px;font-size:.95rem}.spotify-input:focus{border-color:var(--color-primary)}.spotify-input::placeholder{color:var(--color-text-muted)}.spotify-controls{flex-wrap:wrap;gap:8px;display:flex}.spotify-result{color:var(--color-text-muted);white-space:pre-wrap;word-break:break-word;min-height:1.2em;font-size:.85rem}