dialog.tour-host {
  overflow: visible;
}

@media (min-width: 960px) {
  dialog.tour-host {
    margin-left: max(20px, calc((100vw - 1040px) / 2));
    margin-right: auto;
    transition: margin .4s cubic-bezier(.22, 1, .36, 1);
  }
}

.tour-shade {
  transition:
    left .38s cubic-bezier(.22, 1, .36, 1),
    top .38s cubic-bezier(.22, 1, .36, 1),
    width .38s cubic-bezier(.22, 1, .36, 1),
    height .38s cubic-bezier(.22, 1, .36, 1),
    opacity .22s ease;
  animation: tour-fade-in .24s ease both;
}

.tour-ring {
  transition:
    left .42s cubic-bezier(.22, 1, .36, 1),
    top .42s cubic-bezier(.22, 1, .36, 1),
    width .42s cubic-bezier(.22, 1, .36, 1),
    height .42s cubic-bezier(.22, 1, .36, 1),
    border-radius .3s ease,
    opacity .2s ease;
  animation: tour-ring-in .34s cubic-bezier(.22, 1, .36, 1) both;
}

.tour-popover {
  transition:
    left .4s cubic-bezier(.22, 1, .36, 1),
    top .4s cubic-bezier(.22, 1, .36, 1),
    opacity .2s ease,
    transform .3s cubic-bezier(.22, 1, .36, 1);
  animation: tour-popover-in .34s cubic-bezier(.22, 1, .36, 1) both;
  will-change: left, top, transform, opacity;
}

.tour-popover.tour-switching {
  opacity: 0;
  transform: translateY(8px) scale(.975);
}

.tour-progress i {
  transition: width .42s cubic-bezier(.22, 1, .36, 1);
}

@keyframes tour-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes tour-ring-in {
  from { opacity: 0; filter: brightness(1.5); }
  to { opacity: 1; filter: brightness(1); }
}

@keyframes tour-popover-in {
  from { opacity: 0; transform: translateY(12px) scale(.97); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tour-shade,
  .tour-ring,
  .tour-popover,
  .tour-progress i {
    animation: none !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}