.totp-setup__step {
  max-width: 55rem;
  box-shadow: 0 0 3rem var(--color-shadow);
  background: linear-gradient(135deg, var(--color-bg--secondary-glint) 0%, var(--color-bg--tertiary-glint) 100%);
  border: 1px solid var(--color-bg--secondary) !important;
  padding: 1em 2em;
  border-radius: 1em;
  margin: 0;
  visibility: hidden;
  position: absolute;
  left: -999em;
  top: -999em;
  opacity: 0;
}

.totp-step--showing {
  animation: slide-in-from-left 0.5s both;
  visibility: visible;
  position: relative;
  left: 0;
  top: 0;
  opacity: 1;
}

.totp-setup__header {
  background: linear-gradient(135deg, var(--color-bg--secondary-glint) 0%, var(--color-bg--tertiary-glint) 100%);
  margin: -1em -2em var(--base-space);
  padding: 1.5em 2em;
  border-radius: 1em 1em 0 0;
}

.totp-setup__column {
  padding: 1em;

  @media (min-width: 40em) {
    max-width: 40rem;
    padding: 1em 0;
    margin: 0 2em;
  }
}

.totp-setup__column--sticky {
  position: sticky;
  top: 12rem;
}

.totp-setup__secret {
  bottom: 3rem;
  width: 100%;
}

.totp-setup__qrcode {
  border-radius: 1em;
  padding: 0.5em;

  > img { border-radius: 1em; }
}

.totp-setup__video-container {
  overflow: hidden;
  padding-top: 56.25%;
  position: relative;
}

.totp-setup__video {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}