:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  background: #090b18;
  color: #f4f1ff;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 50% 22%, #272052 0, #11142a 34%, #090b18 68%); }
main { width: min(760px, calc(100% - 32px)); margin: 0 auto; padding: 9vh 0 40px; text-align: center; }
.orbital { padding: 34px 22px; }
.orb { width: 156px; height: 156px; margin: 0 auto 28px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(from 210deg, #7758ff, #e779ff, #45d8ff, #7758ff); box-shadow: 0 0 56px #805dff77; transition: .35s ease; }
.orb span { width: 132px; height: 132px; border-radius: 50%; background: radial-gradient(circle at 38% 34%, #514584, #18172f 60%); }
.orb.listening { animation: breathe 2.1s ease-in-out infinite; }
.orb.awake { box-shadow: 0 0 90px #5ee7ffbb; transform: scale(1.06); }
.orb.talking { animation: pulse .8s ease-in-out infinite alternate; }
.eyebrow { letter-spacing: .24em; font-size: 12px; color: #aaa0dc; margin: 0 0 10px; }
h1 { font-size: clamp(28px, 6vw, 46px); margin: 0; font-weight: 650; }
#detail { color: #b9b5cc; min-height: 48px; margin: 14px auto 24px; max-width: 580px; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
button { border: 0; border-radius: 999px; padding: 13px 21px; font: inherit; font-weight: 650; color: #111326; background: #f2efff; cursor: pointer; }
button.secondary { color: #eeeaff; background: #ffffff14; border: 1px solid #ffffff22; }
button:disabled { opacity: .5; cursor: wait; }
.panel { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: #ffffff17; border: 1px solid #ffffff17; border-radius: 20px; overflow: hidden; text-align: left; }
.panel div { padding: 18px; background: #101225dd; display: flex; flex-direction: column; gap: 6px; }
.panel span { color: #8e89a7; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.panel strong { font-size: 15px; }
.privacy { color: #78758d; font-size: 12px; line-height: 1.5; max-width: 620px; margin: 20px auto; }
@keyframes breathe { 50% { transform: scale(1.045); box-shadow: 0 0 78px #805dffaa; } }
@keyframes pulse { to { transform: scale(1.055); filter: hue-rotate(20deg); } }
@media (max-width: 540px) { main { padding-top: 5vh; } .panel { grid-template-columns: 1fr; } }