@layer components {
  .redirect-page {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--inline-space-double);
    min-block-size: 100dvh;
  }

  .redirect-page__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--block-space);
    text-align: center;
  }

  .redirect-page__logo {
    display: flex;
    align-items: center;
    color: var(--color-ink);
    font-size: var(--text-xl);
    font-weight: 700;
    gap: var(--inline-space-half);
    margin-block-end: var(--block-space);
    text-decoration: none;

    em {
      color: var(--color-primary);
      font-style: normal;
    }
  }

  .redirect-page__spinner {
    border: 3px solid var(--color-border);
    border-radius: 50%;
    animation: redirect-spin 0.8s linear infinite;
    block-size: 2rem;
    border-block-start-color: var(--color-primary);
    inline-size: 2rem;
  }

  @keyframes redirect-spin {
    to { transform: rotate(360deg); }
  }

  .redirect-page__icon {
    color: var(--color-muted);
    font-size: 2rem;
  }

  .redirect-page__message {
    color: var(--color-ink);
    font-size: var(--text-lg);
  }

  .redirect-page__fallback {
    color: var(--color-muted);
    font-size: var(--text-sm);

    a {
      color: var(--color-link);
    }
  }
}