:root {
  color: #eef6ee;
  background: #08110d;
  font-family: Inter, system-ui, sans-serif;
}

body { margin: 0; min-height: 100vh; display: grid; place-items: center; }
main { width: min(90vw, 680px); text-align: center; }
.eyebrow { color: #8ff0b5; letter-spacing: .18em; font-size: .75rem; }
h1 { font-family: Georgia, serif; font-size: clamp(2.8rem, 8vw, 6rem); line-height: .94; font-weight: 400; }
.orb { width: 9rem; height: 9rem; margin: 2rem auto; border: 1px solid #8ff0b5; border-radius: 50%; display: grid; place-items: center; }
.orb span { width: 55%; height: 55%; border-radius: 50%; background: #8ff0b5; box-shadow: 0 0 50px #38d97b; }
.orb[data-state="connecting"] span, .orb[data-state="thinking"] span { animation: pulse 1.1s ease-in-out infinite alternate; }
.orb[data-state="listening"] span { animation: listen .55s ease-in-out infinite alternate; }
.orb[data-state="speaking"] span { animation: speak .3s ease-in-out infinite alternate; }
.orb[data-state="error"] { border-color: #ff9e91; }
#status { font-size: 1.25rem; }
#detail { color: #a5b2aa; }
.actions { display: flex; justify-content: center; gap: 1rem; margin-top: 2rem; }
button { padding: .9rem 1.25rem; border: 1px solid #8ff0b5; border-radius: 999px; background: #8ff0b5; color: #08110d; font-weight: 700; cursor: pointer; }
button:last-child { background: transparent; color: #eef6ee; }
button:disabled { opacity: .4; cursor: not-allowed; }
#error { min-height: 1.5rem; color: #ff9e91; }
@keyframes pulse { to { transform: scale(.78); opacity: .65; } }
@keyframes listen { to { transform: scaleX(.58) scaleY(1.18); } }
@keyframes speak { to { transform: scaleX(1.2) scaleY(.68); } }
@media (max-width: 520px) { .actions { flex-direction: column; } button { width: 100%; } }