.flashcard-container{width:100%;max-width:500px;height:300px;perspective:1000px;cursor:pointer}.flashcard{width:100%;height:100%;position:relative;transition:transform .6s;transform-style:preserve-3d;border-radius:var(--radius)}.flashcard.is-flipped{transform:rotateY(180deg)}.flashcard-face{position:absolute;width:100%;height:100%;-webkit-backface-visibility:hidden;backface-visibility:hidden;display:flex;align-items:center;justify-content:center;padding:1rem;border-radius:var(--radius);border:1px solid hsl(var(--border));box-shadow:0 4px 6px -1px rgb(0 0 0/.1),0 2px 4px -2px rgb(0 0 0/.1)}.flashcard-front{background:hsl(var(--card));color:hsl(var(--card-foreground))}.flashcard-back{background:hsl(var(--secondary));color:hsl(var(--secondary-foreground));transform:rotateY(180deg)}