.flashcard-container{cursor:pointer;aspect-ratio:3/2;width:min(480px,90vw);margin:0 auto;animation:.6s ease-out fadeInUp;position:relative}.flashcard{perspective:1600px;width:100%;height:100%;position:relative}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.flashcard-front,.flashcard-back{background:var(--surface);border:1.5px solid var(--line);width:100%;height:100%;box-shadow:var(--shadow);backface-visibility:hidden;border-radius:20px;justify-content:center;align-items:center;transition:transform .55s cubic-bezier(.2,.7,.2,1),box-shadow .2s,border-color .2s;display:flex;position:absolute;overflow:hidden}.flashcard-front{transform:rotateY(0)}.flashcard-back{transform:rotateY(180deg)}.flashcard.flipped .flashcard-front{transform:rotateY(-180deg)}.flashcard.flipped .flashcard-back{transform:rotateY(0)}.flashcard-back{background:var(--surface2)}.flashcard-container:hover .flashcard-front,.flashcard-container:hover .flashcard-back{border-color:var(--accent)}.flashcard-container:focus,.flashcard-container:focus .flashcard-front,.flashcard-container:focus .flashcard-back,.flashcard-front:focus,.flashcard-back:focus{outline:none}.character{font-family:var(--font-serif);color:var(--text);-webkit-user-select:none;user-select:none;font-size:clamp(140px,30vw,220px);font-weight:700;line-height:1}.romaji{font-family:var(--font-serif);color:var(--accent);-webkit-user-select:none;user-select:none;font-size:clamp(64px,14vw,104px);font-weight:700;line-height:1}.audio-button{z-index:10;cursor:pointer;background:var(--navy);color:#fff;width:50px;height:50px;box-shadow:0 8px 20px color-mix(in oklab,var(--navy),transparent 50%);border:none;border-radius:50%;place-items:center;transition:transform .14s,background .14s;display:grid;position:absolute;bottom:18px;right:18px}.audio-button svg{width:22px;height:22px}.audio-button:hover{background:var(--navy-soft);transform:translateY(-2px)scale(1.05)}.audio-button:active{transform:scale(.97)}.audio-button:focus{outline:none}@media (max-width:560px){.flashcard-container{width:min(480px,90vw)}}@media (prefers-reduced-motion:reduce){.flashcard-front,.flashcard-back{transition:none}.flashcard:not(.flipped) .flashcard-back,.flashcard.flipped .flashcard-front{visibility:hidden}}