.prompt-guide {
  margin: clamp(42px, 7vh, 64px) 0 0;
  color: #a7bbc2;
  font-size: clamp(18px, 4.8vw, 22px);
  font-weight: 450;
  line-height: 1.35;
  text-align: center;
}

/* The guide takes over some of the vertical space that used to sit above the mic. */
.prompt-layout > .mic {
  margin-top: clamp(28px, 4vh, 38px);
}

/* Recording should be unmistakable without changing the hollow-mic language. */
.prompt-layout > .mic.listening {
  border-color: rgba(235, 253, 255, 1);
  background:
    radial-gradient(circle at 50% 34%, rgba(210, 249, 255, .34) 0%, rgba(124, 219, 239, .22) 34%, rgba(31, 91, 108, .28) 62%, rgba(3, 12, 17, .92) 100%);
  color: #f4feff;
  animation: chuckRecordingPulse 1s ease-in-out infinite;
}

.prompt-layout > .mic.listening::before {
  background: radial-gradient(circle at 48% 30%, rgba(235, 254, 255, .18), rgba(139, 227, 244, .07) 45%, transparent 68%);
}

.prompt-layout > .mic.listening svg {
  filter:
    drop-shadow(0 0 2px rgba(255, 255, 255, 1))
    drop-shadow(0 0 9px rgba(190, 246, 255, .92))
    drop-shadow(0 0 20px rgba(99, 211, 235, .58));
}

@keyframes chuckRecordingPulse {
  0%, 100% {
    box-shadow:
      inset 0 0 34px rgba(173, 239, 252, .18),
      inset 0 0 1px 1px rgba(238, 254, 255, .28),
      0 0 3px rgba(246, 255, 255, 1),
      0 0 18px rgba(174, 239, 252, .68),
      0 0 38px rgba(92, 202, 226, .34),
      0 0 62px rgba(63, 155, 183, .16),
      0 18px 46px rgba(0, 0, 0, .44);
  }
  50% {
    box-shadow:
      inset 0 0 42px rgba(184, 244, 255, .25),
      inset 0 0 2px 1px rgba(246, 255, 255, .40),
      0 0 4px rgba(250, 255, 255, 1),
      0 0 28px rgba(179, 243, 255, .86),
      0 0 54px rgba(101, 216, 239, .48),
      0 0 82px rgba(63, 162, 190, .24),
      0 18px 46px rgba(0, 0, 0, .44);
  }
}

#prompt::placeholder {
  color: #879aa1;
  opacity: 1;
  font-size: clamp(16px, 4.1vw, 19px);
  font-weight: 400;
  line-height: 1.45;
}