.flow-field {
  --field-low: .12;
  --field-high: .22;
  position: relative;
  isolation: isolate;
  display: block;
  min-width: 0;
  height: 44px;
  border: 0;
  border-radius: 6px;
  background: #090909;
  box-shadow: none;
  outline: none;
  overflow: hidden;
  transition: background-color .6s ease;
}

/* A single soft shader edge, with no additional border or focus ring. */
.flow-field::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  border-radius: inherit;
  background: rgb(3 3 3 / 94%);
  pointer-events: none;
}
.flow-field .flow-button-canvas {
  z-index: -2;
  opacity: .17;
  animation: field-atmosphere-breathe 7.5s ease-in-out infinite;
}
.email-form .flow-field {
  flex: 1 1 0%;
  width: 0;
  height: 48px;
  border-radius: 30px;
}
.flow-field > :is(input, select),
.email-form .flow-field > input,
#studio-dialog .flow-field > :is(input, select) {
  position: relative;
  z-index: 0;
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  border-radius: inherit;
  outline: none;
  background: transparent;
  box-shadow: none;
  color: var(--red100);
  caret-color: var(--red100);
}
.email-form .flow-field > input { font-size: 16px; }
.flow-field input::placeholder { color: var(--red60); opacity: 1; }
.flow-field select option { background: #090909; color: var(--red100); }
.flow-field input::selection { background: var(--red100); color: #030303; }
.flow-field:focus-within {
  --field-low: .26;
  --field-high: .4;
  background-color: #180b0c;
}
.flow-field:has([aria-invalid="true"]) {
  --field-low: .28;
  --field-high: .28;
  background-color: #200a0b;
}
.flow-field:has([aria-invalid="true"]) .flow-button-canvas { animation: none; opacity: .28; }
.flow-field:has(:disabled) { opacity: .45; }
.flow-field:has(:disabled) .flow-button-canvas { animation-play-state: paused; }
/* This inset fill masks the browser autofill color; it is not a stroke. */
.flow-field > input:-webkit-autofill,
.flow-field > input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--red100);
  -webkit-box-shadow: inset 0 0 0 1000px #090909 !important;
  box-shadow: inset 0 0 0 1000px #090909 !important;
  caret-color: var(--red100);
}
.hidden .flow-field .flow-button-canvas,
[hidden] .flow-field .flow-button-canvas,
[inert] .flow-field .flow-button-canvas { animation-play-state: paused; }
@keyframes field-atmosphere-breathe {
  0%, 100% { opacity: var(--field-low); }
  50% { opacity: var(--field-high); }
}
@media (hover: hover) {
  .flow-field:hover:not(:focus-within):not(:has([aria-invalid="true"])) {
    --field-low: .18;
    --field-high: .28;
  }
}
@media (prefers-reduced-motion: reduce) {
  .flow-field { transition: none; }
  .flow-field .flow-button-canvas { animation: none; opacity: var(--field-high); }
}
@media (forced-colors: active) {
  .flow-field { background: Field; }
  .flow-field::before, .flow-field .flow-button-canvas { display: none; }
}