Layered Deck Shuffle Features Block for Vue

Each card's place is its distance from the front card, going round (data-pos 0 is the front, 1 to 3 are the peeks, the rest wait out of sight). A table of class strings gives each place its translation, scale and opacity, and a CSS transition on transform and opacity moves the card when the front changes. "Next card" moves the front one on, so the old front becomes the last place and fades behind the others.

Edit CARDS: each has a title, a sentence and the prompt and answer of the split preview. The peek count is three because POSE has four visible places; show more peeks by adding poses and widening the space above the deck.

Only the front card's content is in the reading order. Each peek has a button over it named "Bring Ribosome to the front", in the tab order, and the cards out of sight have none. Next card is a real button, and a polite status line reads out the new front card and its sentence after each change.

No. The deck is plain buttons and state on every target; only the Next card button differs in how it handles a press.

The transition is off, so the cards jump to their new places at once.

The heading and features come first, then the deck, with the same peek strips above the front card at the width of the column. Nothing scrolls sideways at 320 pixels.