:root {
  --bg: #070b18;
  --ink: #eef2ff;
  --muted: rgba(226, 232, 255, 0.55);
  --faint: rgba(226, 232, 255, 0.32);
  --line: rgba(255, 255, 255, 0.09);
  --a1: #5ee7ff;
  --a2: #7c6bff;
  --a3: #ff5c8a;
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, Roboto, sans-serif;
  color: var(--ink); background: var(--bg); overflow-x: hidden;
  display: flex; flex-direction: column; min-height: 100dvh;
}
.aurora {
  position: fixed; inset: -20%; z-index: -1; pointer-events: none; opacity: 0.8; will-change: transform;
  background:
    radial-gradient(40% 35% at 25% 25%, rgba(94, 231, 255, 0.18), transparent 70%),
    radial-gradient(45% 40% at 78% 30%, rgba(124, 107, 255, 0.22), transparent 70%),
    radial-gradient(50% 45% at 50% 90%, rgba(255, 92, 138, 0.10), transparent 70%);
  animation: drift 24s ease-in-out infinite alternate;
}
@keyframes drift { to { transform: translate3d(3%, -2%, 0) rotate(6deg) scale(1.05); } }

.top {
  display: flex; align-items: center; justify-content: space-between;
  padding: max(18px, env(safe-area-inset-top)) clamp(16px, 4vw, 32px) 0;
}
.brand { font: 600 15px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: 0.02em; color: var(--ink); opacity: 0.85; }
.tools { display: flex; gap: 6px; }
.icon {
  width: 38px; height: 38px; border-radius: 12px; border: 0; cursor: pointer; display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.05); color: var(--muted); transition: background .2s, color .2s, opacity .2s;
}
.icon svg { width: 18px; height: 18px; }
.icon:hover:not(:disabled) { background: rgba(255, 255, 255, 0.1); color: var(--ink); }
.icon:disabled { opacity: 0; pointer-events: none; }
.icon.done { color: var(--a1); }

main { flex: 1; width: 100%; max-width: 760px; margin: 0 auto; padding: 4vh 20px 0;
  display: flex; flex-direction: column; align-items: center; }

.stage { position: relative; width: min(340px, 82vw); aspect-ratio: 1; display: grid; place-items: center; }
#viz { position: absolute; inset: 0; width: 100%; height: 100%; }
.orb {
  --level: 0;
  position: relative; width: 40%; aspect-ratio: 1; border-radius: 50%; border: 0; cursor: pointer; color: #fff;
  display: grid; place-items: center;
  background: radial-gradient(circle at 30% 25%, #8af0ff 0%, #6a7dff 45%, #5b3df5 100%);
  box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset, 0 18px 50px -12px rgba(98, 104, 255, .75),
              0 0 calc(30px + var(--level) * 60px) rgba(94, 231, 255, calc(.25 + var(--level) * .5));
  transform: scale(calc(1 + var(--level) * 0.06));
  transition: transform 90ms linear, background .4s, box-shadow .2s;
  animation: breathe 4.5s ease-in-out infinite;
}
.orb svg { width: 34%; height: 34%; grid-area: 1 / 1; transition: opacity .25s, transform .25s; }
.mic-icon rect { fill: currentColor; }
.stop-icon { opacity: 0; transform: scale(.6); fill: currentColor; }
body[data-state="listening"] .orb {
  background: radial-gradient(circle at 30% 25%, #ffb3c8 0%, #ff5c8a 45%, #c2306a 100%);
  box-shadow: 0 0 0 1px rgba(255,255,255,.14) inset, 0 18px 50px -12px rgba(255, 92, 138, .75),
              0 0 calc(30px + var(--level) * 70px) rgba(255, 92, 138, calc(.25 + var(--level) * .5));
  animation: none;
}
body[data-state="listening"] .mic-icon { opacity: 0; transform: scale(.6); }
body[data-state="listening"] .stop-icon { opacity: 1; transform: none; }
body[data-state="connecting"] .orb, body[data-state="stopping"] .orb { animation: none; cursor: progress; filter: saturate(.7); }
@keyframes breathe { 50% { transform: scale(1.035); } }
.orb:focus-visible { outline: 2px solid var(--a1); outline-offset: 6px; }

.status { margin: 8px 0 0; min-height: 1.5em; font-size: 15px; color: var(--muted); text-align: center; }
.timer { margin: 2px 0 0; min-height: 1.3em; font: 500 13px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--faint); }

.langs { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 18px; padding: 4px;
  border-radius: 999px; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px var(--line); }
.langs button { position: relative; z-index: 1; border: 0; background: none; padding: 7px 16px; border-radius: 999px;
  font: 500 14px/1.2 inherit; color: var(--muted); cursor: pointer; transition: color .25s; white-space: nowrap; }
.langs button[aria-pressed="true"] { color: var(--ink); }
.pill-bg { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 3); border-radius: 999px;
  background: rgba(255, 255, 255, 0.12); transition: transform .35s cubic-bezier(.3, .9, .3, 1); }
body:not([data-state="idle"]) .langs { opacity: .45; pointer-events: none; }

.transcript { width: 100%; margin-top: 4vh; padding-bottom: 24px; max-height: 42vh; overflow-y: auto; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 28px); mask-image: linear-gradient(to bottom, transparent 0, #000 28px); }
.transcript::-webkit-scrollbar { display: none; }
.phrases { list-style: none; margin: 0; padding: 20px 0 0; }
.phrases li { margin: 0 0 14px; font-size: clamp(18px, 2.4vw, 21px); line-height: 1.5; color: var(--ink);
  animation: rise .45s cubic-bezier(.2, .8, .2, 1) both; }
.phrases li small { margin-left: 10px; font: 600 11px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .08em;
  text-transform: uppercase; color: var(--faint); vertical-align: 3px; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); filter: blur(3px); } }
.live { margin: 0; min-height: 1.6em; font-size: clamp(18px, 2.4vw, 21px); line-height: 1.5; color: var(--ink); }
.live .tail { background: linear-gradient(90deg, var(--muted), var(--faint), var(--muted)); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 1.6s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }

footer { padding: 12px 20px max(16px, env(safe-area-inset-bottom)); text-align: center; font-size: 12px; color: var(--faint); }

.toast { position: fixed; left: 50%; bottom: max(28px, env(safe-area-inset-bottom)); transform: translate(-50%, 20px); opacity: 0;
  padding: 10px 16px; border-radius: 14px; background: rgba(20, 24, 40, .92); box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink); font-size: 14px; transition: opacity .25s, transform .25s; pointer-events: none; max-width: 90vw; text-align: center; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  .aurora, .orb, .live .tail, .phrases li { animation: none !important; }
}