
  /* Reset list styles */
  ul.svelte-1ixvf23 {
    margin: 0;
    padding: 0;
  }

  /* Question list items */
  .qs.svelte-1ixvf23 li:where(.svelte-1ixvf23) {
    margin: var(--spacing-sm) 0;
    padding: 0;
    line-height: var(--line-height);
    font-size: var(--font-lg);
    height: 50px;
    display: flex;
    align-items: center;
  }

  /* Shuffle buttons container */
  .shuffle-elems.svelte-1ixvf23 {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-md);
    margin: var(--spacing-md) 0;
  }

  /* Root and ending button groups */
  .shfl-rt.svelte-1ixvf23,
  .shfl-end.svelte-1ixvf23 {
    display: flex;
    flex-direction: row;
  }

  /* Question list container */
  .qs.svelte-1ixvf23 {
    width: 35%;
    display: inline-block;
  }

  /* Pronoun label */
  .proSp.svelte-1ixvf23 {
    text-transform: capitalize;
    margin-right: var(--spacing-sm);
  }

  /* Active pronoun highlighting */
  .proSp.activePro.svelte-1ixvf23 {
    font-weight: bold;
    color: var(--color-primary);
  }

  /* Active ending highlighting */
  .endSp.activePro.svelte-1ixvf23 {
    font-weight: bold;
    color: var(--color-primary);
  }

  /* Button styling */
  button.svelte-1ixvf23 {
    background: none;
    border: 1px solid currentColor;
    margin: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    font: inherit;
    font-size: var(--font-lg);
    color: inherit;
    cursor: pointer;
    transition: all var(--transition-speed) ease;
    min-width: 2.5rem;
    min-height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  button.svelte-1ixvf23:hover {
    opacity: 0.8;
  }

  button.svelte-1ixvf23:active {
    transform: scale(0.95);
  }

  /* Answer span transitions */
  .rootSp.svelte-1ixvf23,
  .endSp.svelte-1ixvf23 {
    transition:
      opacity var(--transition-speed) ease,
      font-weight var(--transition-speed) ease;
  }

  @keyframes svelte-1ixvf23-highlight {
    0% {
      opacity: 0.6;
    }
    50% {
      opacity: 1;
    }
    100% {
      opacity: 1;
    }
  }

  @keyframes svelte-1ixvf23-shake {
    0%,
    100% {
      transform: translateX(0);
    }

    25% {
      transform: translateX(-5px);
    }

    75% {
      transform: translateX(5px);
    }
  }
