/* A steady invitation, expressed in different languages and encoded as bytes. */
.hero-agent .welcome-title {
  position: relative;
  height: 2.16em;
  margin-bottom: 18px;
}
.welcome-text { display: block; }
.welcome-text > span, .welcome-text > em { display: block; }
.welcome-title.is-rendered .welcome-text { visibility: hidden; }
.welcome-canvas {
  position: absolute;
  inset: -8px;
  width: calc(100% + 16px);
  height: calc(100% + 16px);
  pointer-events: none;
}
.welcome-channel {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 27px;
  color: #a6b4b3;
  font: 10px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .09em;
}
.welcome-channel[hidden] { display: none; }
.welcome-language { min-width: 128px; }
.welcome-language::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-right: 10px;
  background: #d29470;
  vertical-align: 2px;
}
.welcome-pause {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 2px 0 2px 16px;
  border: 0;
  border-left: 1px solid #5f6c6e;
  background: transparent;
  color: #a6b4b3;
  font: inherit;
  letter-spacing: inherit;
}
.welcome-pause:hover { color: #efb48d; }
.welcome-pause[hidden] { display: none; }
.welcome-pause:focus-visible { outline: 1px solid #efb48d; outline-offset: 5px; }
.welcome-pause-icon { font-size: 11px; }
.hero-art { --planet-diameter: 335px; }
.planet-rose {
  position: absolute;
  z-index: 2;
  left: calc(51% - 2px);
  top: calc(46% - var(--planet-diameter) / 2 - 49px);
  width: 47px;
  height: 79px;
  transform: rotate(8deg);
  opacity: .86;
  filter: drop-shadow(0 2px 5px #151b2940);
}
.planet-chair {
  --chair-width: 46px;
  --chair-height: 60px;
  position: absolute;
  z-index: 2;
  left: calc(51% - var(--planet-diameter) * .31 - var(--chair-width) / 2);
  top: calc(46% + var(--planet-diameter) * .18 - var(--chair-height) / 2);
  width: var(--chair-width);
  height: var(--chair-height);
  transform: rotate(-12deg);
  transform-origin: 50% 95%;
  opacity: .78;
  filter: drop-shadow(0 2px 3px #151b2950);
}
@media (max-width: 800px) {
  .hero-art { --planet-diameter: 290px; }
}
@media (max-width: 600px) {
  .hero-art { --planet-diameter: 236px; }
  .planet-rose {
    width: 36px;
    height: 62px;
    top: calc(46% - var(--planet-diameter) / 2 - 38px);
  }
  .planet-chair {
    --chair-width: 36px;
    --chair-height: 47px;
  }
  .welcome-channel { margin-bottom: 22px; font-size: 9px; }
}