.vapl-pill {
  --vapl-avatar-size: 98px;
  --vapl-avatar-scale: 1;
  --vapl-border-width: 4px;
  --vapl-border-color: #d4a25e;
  --vapl-panel-width: 98px;
  --vapl-panel-height: 150px;
  --vapl-panel-bg: rgba(0, 0, 0, 0.8);
  --vapl-text-color: #ffffff;
  --vapl-font-size: 16px;
  --vapl-font-weight: 700;
  --vapl-radius: 999px;
  --vapl-duration: 300ms;
  --vapl-shadow: rgba(0, 0, 0, 0.2);
  --vapl-panel-shadow: rgba(0, 0, 0, 0.18);
  --vapl-top-space: 20px;
  --vapl-label-gap: 20px;
  --vapl-open-label-height: var(--vapl-panel-height);
  position: relative;
  width: var(--vapl-avatar-size);
  max-width: var(--vapl-avatar-size);
  height: var(--vapl-avatar-size);
  min-height: var(--vapl-avatar-size);
  overflow: visible;
  line-height: 1;
}

.vapl-pill[data-hide-mobile="1"] {
  display: block;
}

.vapl-pill.vapl-is-inline {
  display: inline-block;
  vertical-align: top;
}

.vapl-link {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  width: var(--vapl-panel-width);
  max-width: var(--vapl-panel-width);
  padding: var(--vapl-top-space) 0 0;
  border-radius: var(--vapl-radius);
  background-color: transparent;
  text-decoration: none;
  line-height: 1;
  transition: all var(--vapl-duration) ease;
}

.vapl-label {
  display: block;
  width: auto;
  max-width: 100%;
  height: 0;
  overflow: hidden;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: var(--vapl-font-weight);
  color: var(--vapl-text-color);
  font-size: 0;
  letter-spacing: 1px;
  line-height: 1;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  margin: 0 0 0 0;
  transition: all var(--vapl-duration) ease;
}

.vapl-avatar-wrap {
  position: relative;
  z-index: 2;
  width: var(--vapl-avatar-size);
  height: var(--vapl-avatar-size);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.vapl-avatar {
  width: var(--vapl-avatar-size);
  height: var(--vapl-avatar-size);
  max-height: var(--vapl-avatar-size);
  border-radius: 50%;
  overflow: hidden;
  border: var(--vapl-border-width) solid var(--vapl-border-color);
  background: #e8dfd3;
  box-shadow: 0 14px 26px var(--vapl-shadow);
  transform: scale(.9);
  transform-origin: center center;
  transition: all var(--vapl-duration) ease;
}

.vapl-avatar img,
.vapl-fallback {
  width: 100%;
  height: 100%;
  display: block;
}

.vapl-avatar img {
  object-fit: cover;
}

.vapl-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1f1f1f;
  font-size: calc(var(--vapl-avatar-size) * 0.34);
  font-weight: 700;
}

.vapl-link:hover,
.vapl-link:focus-visible,
.vapl-pill.vapl-open-touch .vapl-link {
  background-color: var(--vapl-panel-bg);
  box-shadow: 0 18px 50px var(--vapl-panel-shadow);
}

.vapl-link:hover .vapl-label,
.vapl-link:focus-visible .vapl-label,
.vapl-pill.vapl-open-touch .vapl-label {
  font-size: var(--vapl-font-size);
  height: var(--vapl-open-label-height, var(--vapl-panel-height));
  margin-bottom: var(--vapl-label-gap);
}

.vapl-link:hover .vapl-avatar,
.vapl-link:focus-visible .vapl-avatar,
.vapl-pill.vapl-open-touch .vapl-avatar {
  transform: scale(var(--vapl-avatar-scale));
  box-shadow: 0 18px 34px var(--vapl-shadow);
}

.vapl-link:focus-visible {
  outline: none;
}

.vapl-link:focus-visible .vapl-avatar {
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .75), 0 18px 34px var(--vapl-shadow);
}

@media (hover: hover) {
  .vapl-pill .vapl-link {
    cursor: pointer;
  }
}

@media (max-width: 782px) {
  .vapl-pill[data-hide-mobile="1"] {
    display: none !important;
  }

  .vapl-pill.vapl-is-auto.vapl-anchor-right-center,
  .vapl-pill.vapl-is-auto.vapl-anchor-right-bottom {
    right: var(--vapl-offset-x) !important;
    left: auto !important;
    top: auto !important;
    bottom: var(--vapl-offset-y) !important;
    transform: none !important;
  }

  .vapl-pill.vapl-is-auto.vapl-anchor-left-center,
  .vapl-pill.vapl-is-auto.vapl-anchor-left-bottom {
    left: var(--vapl-offset-x) !important;
    right: auto !important;
    top: auto !important;
    bottom: var(--vapl-offset-y) !important;
    transform: none !important;
  }
}