:root {
  color-scheme: dark;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif;
  background: #070812;
  color: #f6f2ff;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

body {
  min-height: 100svh;
  background:
    radial-gradient(circle at 50% 10%, rgba(124, 92, 255, .42), transparent 34rem),
    radial-gradient(circle at 10% 90%, rgba(0, 204, 255, .18), transparent 24rem),
    #070812;
}

button { font: inherit; }

.shell {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: max(24px, env(safe-area-inset-top)) 18px max(24px, env(safe-area-inset-bottom));
}

.card {
  width: min(100%, 430px);
  min-height: 680px;
  padding: 34px 22px 30px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 34px;
  background: rgba(14, 15, 31, .74);
  box-shadow: 0 30px 90px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(22px);
  text-align: center;
  display: grid;
  grid-template-rows: 1fr auto auto auto 1fr;
  justify-items: center;
  align-items: center;
  gap: 28px;
}

.eyebrow {
  margin: 0 0 12px;
  color: #b9a8ff;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 12px;
  font-weight: 700;
}

h1 {
  margin: 0;
  font-size: clamp(42px, 13vw, 64px);
  letter-spacing: -.07em;
}

.subtitle {
  margin: 10px auto 34px;
  max-width: 280px;
  color: rgba(246,242,255,.72);
  line-height: 1.35;
}

.brand {
  align-self: end;
  color: rgba(246,242,255,.42);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .32em;
  text-indent: .32em;
}

.orb {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 220px;
  height: 220px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 46%, rgba(255,255,255,.96) 0 10%, rgba(198,242,255,.9) 11% 18%, transparent 19%),
    conic-gradient(from 210deg, #8fffd2, #7c5cff, #ff7adf, #62d9ff, #8fffd2);
  box-shadow:
    0 0 44px rgba(143,255,210,.35),
    0 0 96px rgba(124,92,255,.54),
    0 0 150px rgba(255,122,223,.22);
  transition: transform .22s ease, filter .22s ease, box-shadow .22s ease;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  appearance: none;
  animation: orb-drift 7s linear infinite;
}

.orb::before,
.orb::after {
  content: '';
  position: absolute;
  inset: -18%;
  border-radius: inherit;
  pointer-events: none;
}

.orb::before {
  z-index: 1;
  background:
    radial-gradient(circle at 28% 26%, rgba(143,255,210,.86), transparent 23%),
    radial-gradient(circle at 72% 32%, rgba(255,122,223,.72), transparent 24%),
    radial-gradient(circle at 45% 82%, rgba(98,217,255,.68), transparent 25%);
  filter: blur(10px) saturate(1.45);
  opacity: .68;
  mix-blend-mode: screen;
  animation: plasma-shift 4.6s ease-in-out infinite;
}

.orb::after {
  z-index: 3;
  inset: 9%;
  background:
    linear-gradient(120deg, transparent 18%, rgba(255,255,255,.42) 30%, transparent 44%),
    radial-gradient(circle at 50% 50%, transparent 45%, rgba(246,242,255,.36) 48%, transparent 55%);
  mix-blend-mode: screen;
  animation: iris-sweep 2.8s ease-in-out infinite;
}

.orb:focus-visible {
  outline: 2px solid rgba(246,242,255,.82);
  outline-offset: 12px;
}

.orb:active { transform: scale(.96); }

.orb span {
  z-index: 2;
  position: relative;
  width: 86px;
  height: 86px;
  border-radius: inherit;
  background:
    radial-gradient(circle at 50% 42%, rgba(20,22,42,.98), rgba(7,8,18,.9) 58%, rgba(4,5,13,.72));
  box-shadow:
    inset 0 0 28px rgba(215,199,255,.32),
    0 0 26px rgba(143,255,210,.24);
  animation: core-breathe 2.4s ease-in-out infinite;
}

.orb[data-state='connecting'] { filter: saturate(1.65) brightness(1.08); animation: orb-drift 4.2s linear infinite, pulse 1s ease-in-out infinite; }
.orb[data-state='thinking'] { transform: scale(1.03); filter: saturate(1.55) contrast(1.04); animation: orb-drift 5s linear infinite, wobble 1.6s ease-in-out infinite; }
.orb[data-state='live'] { transform: scale(1.04); filter: saturate(1.5) brightness(1.05); animation: orb-drift 3.8s linear infinite, breathe 1.35s ease-in-out infinite; }
.orb[data-state='speaking'] { transform: scale(1.1); filter: hue-rotate(18deg) saturate(1.9) brightness(1.1); animation: orb-drift 2.2s linear infinite, speaking-pop .62s ease-in-out infinite; }
.orb[data-state='error'] { filter: hue-rotate(135deg) saturate(1.8); }

@keyframes pulse {
  50% { box-shadow: 0 0 54px rgba(143,255,210,.48), 0 0 142px rgba(124,92,255,.86), 0 0 190px rgba(255,122,223,.34); }
}
@keyframes breathe { 50% { transform: scale(.985) rotate(-1deg); } }
@keyframes speaking-pop { 45% { transform: scale(1.14) rotate(2deg); } 72% { transform: scale(1.04) rotate(-1deg); } }
@keyframes wobble { 35% { transform: scale(1.055) translateY(-2px); } 70% { transform: scale(1.01) translateY(2px); } }
@keyframes orb-drift { to { background-position: 0 0, 220px 0; } }
@keyframes plasma-shift { 50% { transform: rotate(34deg) scale(1.12); filter: blur(8px) saturate(1.8); } }
@keyframes iris-sweep { 50% { transform: rotate(38deg) scale(1.08); opacity: .62; } }
@keyframes core-breathe { 50% { transform: scale(.86); box-shadow: inset 0 0 36px rgba(215,199,255,.42), 0 0 38px rgba(143,255,210,.36); } }

@media (prefers-reduced-motion: reduce) {
  .orb,
  .orb::before,
  .orb::after,
  .orb span { animation-duration: 8s; animation-iteration-count: infinite; }
}

.state-line {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 13px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px;
  background: rgba(0,0,0,.16);
  color: rgba(246,242,255,.72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

.state-line i {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #7c5cff;
  box-shadow: 0 0 18px rgba(124,92,255,.8);
}

.orb[data-state='live'] + .state-line i,
.orb[data-state='speaking'] + .state-line i {
  background: #8fffd2;
  box-shadow: 0 0 20px rgba(143,255,210,.85);
}

.orb[data-state='error'] + .state-line i {
  background: #ff7aa8;
  box-shadow: 0 0 20px rgba(255,122,168,.85);
}

.status {
  margin: 0;
  font-weight: 750;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: lowercase;
}

.detail {
  min-height: 44px;
  margin: 10px auto 26px;
  max-width: 310px;
  color: rgba(246,242,255,.64);
  line-height: 1.4;
}

.diagnostics {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
  margin: 0 auto 22px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px;
  background: rgba(0,0,0,.18);
  color: rgba(246,242,255,.62);
  font-size: 12px;
  text-align: left;
}

.controls {
  display: grid;
  gap: 12px;
}

button {
  min-height: 56px;
  border: 0;
  border-radius: 18px;
  font-weight: 800;
  cursor: pointer;
}

button:disabled { opacity: .45; cursor: not-allowed; }
.orb:disabled { opacity: 1; cursor: progress; }

.primary { background: #f6f2ff; color: #070812; }
.secondary { background: rgba(255,255,255,.1); color: #f6f2ff; }

.debug {
  margin-top: 22px;
  text-align: left;
  color: rgba(246,242,255,.58);
}

.debug summary { cursor: pointer; text-align: center; }
pre {
  max-height: 160px;
  overflow: auto;
  white-space: pre-wrap;
  font-size: 11px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(0,0,0,.25);
}