/* The mascot and its text bubble form one accessible launcher. */
.ebai-hero {
  display: flex;
  justify-content: center;
  margin: 24px 0 8px;
}
.ebai-mascot {
  position: relative;
  isolation: isolate;
  display: block;
  width: 360px;
  max-width: 100%;
  height: 320px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 28px;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  font: inherit;
}
.ebai-mascot::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 32px 20px 0 -20px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(77, 220, 220, .1), rgba(166, 128, 248, .08) 45%, transparent 72%);
  pointer-events: none;
}
.ebai-mascot picture {
  position: absolute;
  z-index: 1;
  left: 0;
  bottom: 12px;
  display: block;
  width: 76%;
  transition: transform .25s ease;
}
.ebai-mascot img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 12px 15px rgba(81, 71, 150, .13));
}
.ebai-mascot::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 19%;
  width: 38%;
  bottom: 3px;
  height: 10px;
  border-radius: 50%;
  background: rgba(90, 78, 159, .18);
  filter: blur(7px);
  pointer-events: none;
}
.ebai-bubble {
  --bubble-fill: #fbfcff;
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  display: block;
  width: max-content;
  max-width: 70%;
  padding: 12px 18px;
  border: 2px solid transparent;
  border-radius: 25px;
  background: linear-gradient(var(--bubble-fill), var(--bubble-fill)) padding-box,
    linear-gradient(115deg, #57dedf, #7198ff, #b471ed, #57dedf) border-box;
  background-size: 100% 100%, 220% 100%;
  color: #192745;
  font-size: 17px;
  font-weight: 750;
  line-height: 1.25;
  white-space: nowrap;
  box-shadow: 0 8px 25px rgba(83, 91, 172, .12);
  animation: ebai-bubble-rim 8s ease-in-out infinite alternate;
  transition: transform .25s ease;
}
.ebai-bubble::before, .ebai-bubble::after {
  content: "";
  position: absolute;
  clip-path: polygon(0 0, 100% 0, 0 100%);
  transform: rotate(9deg);
}
.ebai-bubble::before {
  left: 22px;
  bottom: -19px;
  width: 23px;
  height: 24px;
  background: linear-gradient(140deg, #76b8ff, #b875ec);
}
.ebai-bubble::after {
  left: 24px;
  bottom: -13px;
  width: 18px;
  height: 20px;
  background: var(--bubble-fill);
}
.ebai-mascot:focus-visible {
  outline: 3px solid var(--text, #131a25);
  outline-offset: 6px;
}
html[data-theme="dark"] .ebai-mascot::before {
  background: radial-gradient(ellipse, rgba(72, 205, 227, .12), rgba(108, 73, 230, .13) 45%, transparent 72%);
}
html[data-theme="dark"] .ebai-mascot img {
  filter: drop-shadow(0 8px 20px rgba(79, 213, 230, .16));
}
html[data-theme="dark"] .ebai-mascot::after { background: rgba(116, 83, 242, .32); }
html[data-theme="dark"] .ebai-bubble {
  --bubble-fill: #1d294c;
  color: #fff;
  box-shadow: 0 0 18px rgba(91, 142, 255, .17), 0 8px 24px rgba(0, 0, 0, .22), inset 0 0 12px rgba(116, 173, 255, .17);
}
@supports selector(:has(*)) {
  @media (min-width: 1001px) {
    .hero-content:has(>.ebai-hero) {
      display: grid;
      grid-template-columns: minmax(0, 1.85fr) minmax(260px, 1fr);
      column-gap: 40px;
      max-width: none;
    }
    .hero-content:has(>.ebai-hero)>.hero-badge { grid-column: 1; grid-row: 1; justify-self: start; }
    .hero-content:has(>.ebai-hero)>h1 { grid-column: 1; grid-row: 2; }
    .hero-content:has(>.ebai-hero)>p { grid-column: 1; grid-row: 3; }
    .hero-content:has(>.ebai-hero)>.hero-search { grid-column: 1; grid-row: 4; width: 100%; }
    .hero-content:has(>.ebai-hero)>.search-examples { grid-column: 1; grid-row: 5; }
    .hero-content>.ebai-hero {
      grid-column: 2;
      grid-row: 1 / 4;
      align-self: start;
      justify-self: center;
      width: 100%;
      margin: 0;
    }
  }
}
@media (min-width: 1001px) and (max-width: 1150px) {
  .ebai-mascot { height: 290px; }
  .ebai-bubble { font-size: 15px; padding: 11px 15px; }
}
@media (max-width: 1000px) {
  .ebai-hero { margin: 20px 0 8px; }
  .ebai-mascot { width: 310px; height: 172px; }
  .ebai-mascot picture { width: 154px; max-width: 55%; bottom: 6px; }
  .ebai-mascot::before { inset: 12px 100px 0 0; }
  .ebai-mascot::after { left: 12%; width: 25%; bottom: 0; height: 8px; }
  .ebai-bubble { top: 16px; font-size: 16px; padding: 12px 17px; }
}
@media (max-width: 380px) {
  .ebai-mascot { width: 280px; height: 154px; }
  .ebai-mascot picture { width: 138px; }
  .ebai-bubble { font-size: 14px; padding: 11px 15px; }
}
@media (hover: hover) {
  .ebai-mascot:hover picture { transform: translateY(-4px) rotate(-2deg); }
  .ebai-mascot:hover .ebai-bubble { transform: translateY(-3px); }
}
@keyframes ebai-bubble-rim {
  from { background-position: 0 0, 0% 50%; }
  to { background-position: 0 0, 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .ebai-bubble { animation: none; transition: none; }
  .ebai-mascot picture { transition: none; }
  .ebai-mascot:hover picture, .ebai-mascot:hover .ebai-bubble { transform: none; }
}