:root { color-scheme: dark; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #03070e; color: #eaf4fc; font-synthesis: none; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; display: flex; flex-direction: column; background: linear-gradient(to bottom, transparent 70%, #03070e 100%), radial-gradient(ellipse at 50% 51%, #0a203b88 0, #07132266 28%, transparent 62%), radial-gradient(ellipse at 50% 120%, #08234477, transparent 57%), #03070e; }
.masthead { padding: 36px 48px; }
.brand { display: inline-flex; align-items: center; font-size: 14px; font-weight: 550; letter-spacing: -.2px; color: #c5d1df; }
.brand-domain { color: #8495a9; font-weight: 400; }
.brand-mark { display: flex; align-items: center; gap: 3px; height: 18px; margin-right: 12px; }
.brand-mark i { display: block; width: 2px; height: 6px; border-radius: 2px; background: #65d9ff; }
.brand-mark i:nth-child(2n) { height: 12px; }
.brand-mark i:nth-child(3) { height: 18px; }
main { flex: 1; display: grid; place-items: center; padding: 34px 24px 58px; }
.experience { width: 100%; text-align: center; }
h1 { font-size: clamp(2rem, 4.5vw, 4rem); font-weight: 350; line-height: 1.2; letter-spacing: -.045em; margin: 0; }
h1 span { color: #91abc7; }
.wave-stage { position: relative; width: min(590px, 88%); margin: 28px auto 5px; }
.wave-stage::before { content: ""; position: absolute; inset: 20% 10%; border-radius: 50%; background: radial-gradient(ellipse, #1e83e21a, transparent 70%); pointer-events: none; }
.rae-waveform { position: relative; }
.rae-status h2 { display: flex; align-items: center; justify-content: center; gap: 11px; font-size: clamp(19px, 2.2vw, 23px); font-weight: 400; letter-spacing: -.025em; margin: 0; color: #e1eefb; }
.status-dot { width: 5px; height: 5px; border-radius: 50%; background: #69dcff; box-shadow: 0 0 10px #3dccff66; }
a { color: #69dcff; }
@media (min-width: 1600px) { .wave-stage { width: 650px; margin-top: 38px; } }
@media (max-width: 600px) {
  .masthead { padding: 26px 24px; }
  .brand { font-size: 12px; }
  main { padding: 40px 20px 70px; }
  h1 { font-size: clamp(1.7rem, 6.5vw, 2.4rem); line-height: 1.3; }
  .wave-stage { width: 100%; margin: 28px auto 16px; }
}
@media (max-height: 560px) and (min-width: 601px) {
  .masthead { padding-top: 20px; padding-bottom: 15px; }
  main { padding: 15px 24px; }
  h1 { font-size: 30px; }
  .wave-stage { width: 360px; margin-top: 10px; }
}

.rae-waveform { display: block; width: 100%; height: auto; overflow: visible; }
.wave-bars { filter: drop-shadow(0 0 5px #1dbfff55) drop-shadow(0 0 18px #167ce733); }
.wave-bar { transform-box: fill-box; transform-origin: center; animation: wave-breathe 4.8s ease-in-out infinite; }
.wave-bar:nth-child(2n) { animation-duration: 5.7s; animation-delay: -1.9s; }
.wave-bar:nth-child(3n) { animation-duration: 4.3s; animation-delay: -3.1s; }
.wave-bar:nth-child(4n) { animation-duration: 6.1s; animation-delay: -2.4s; }
.wave-bar:nth-child(5n) { animation-duration: 5.2s; animation-delay: -4.2s; }
.wave-bar:nth-child(7n) { animation-delay: -0.8s; }
.radio { transform-box: view-box; transform-origin: center; animation: radio-breathe 6s ease-in-out infinite; }
.radio-inner { opacity: .3; }
.radio-middle { opacity: .17; animation-delay: -.8s; }
.radio-outer { opacity: .07; animation-delay: -1.6s; }
@keyframes wave-breathe {
  0%, 100% { transform: scaleY(.78); }
  36% { transform: scaleY(1); }
  68% { transform: scaleY(.88); }
}
@keyframes radio-breathe {
  0%, 100% { transform: scale(.97); }
  50% { transform: scale(1.03); opacity: .07; }
}
/* Reserved visual states. Only idle is used by this homepage. */
.rae-waveform[data-state="listening"] .wave-bar { animation-duration: 2.6s; }
.rae-waveform[data-state="processing"] .wave-bar { animation-name: wave-process; animation-duration: 2s; }
.rae-waveform[data-state="speaking"] .wave-bar { animation-duration: 1.2s; }
@keyframes wave-process {
  0%, 100% { transform: scaleY(.45); }
  50% { transform: scaleY(.7); }
}
@media (prefers-reduced-motion: reduce) {
  .rae-waveform .wave-bar, .rae-waveform .radio { animation: none; }
}