.vocab-flashcard-container{cursor:pointer;aspect-ratio:3/2;width:min(480px,90vw);margin:0 auto;animation:.6s ease-out fadeInUp;position:relative}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.vocab-flashcard{perspective:1600px;width:100%;height:100%;position:relative}.vocab-flashcard-front,.vocab-flashcard-back{background:var(--surface);border:1.5px solid var(--line);box-shadow:var(--shadow);backface-visibility:hidden;border-radius:20px;flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:32px;transition:transform .55s cubic-bezier(.2,.7,.2,1),border-color .2s;display:flex;position:absolute;inset:0;overflow:hidden}.vocab-flashcard-front{transform:rotateY(0)}.vocab-flashcard-back{background:var(--surface2);transform:rotateY(180deg)}.vocab-flashcard.flipped .vocab-flashcard-front{transform:rotateY(-180deg)}.vocab-flashcard.flipped .vocab-flashcard-back{transform:rotateY(0)}.vocab-flashcard-container:hover .vocab-flashcard-front,.vocab-flashcard-container:hover .vocab-flashcard-back{border-color:var(--accent)}.vocab-flashcard-container:focus{outline:none}.vocab-kanji{font-family:var(--font-serif);color:var(--text);-webkit-user-select:none;user-select:none;text-align:center;font-size:clamp(40px,10vw,72px);font-weight:700;line-height:1.6}.vocab-kanji ruby{ruby-align:center}.vocab-kanji rt{font-size:.3em;font-family:var(--font-serif);color:var(--muted);letter-spacing:.02em;font-weight:400}.vocab-kana-reading{font-family:var(--font-serif);color:var(--strong);-webkit-user-select:none;user-select:none;text-align:center;font-size:clamp(18px,4vw,26px)}.vocab-definition{font-family:var(--font-ui);color:var(--accent);-webkit-user-select:none;user-select:none;text-align:center;font-size:clamp(20px,5vw,32px);font-weight:600;line-height:1.4}.vocab-flashcard-front .audio-button,.vocab-flashcard-back .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}.vocab-flashcard-front .audio-button svg,.vocab-flashcard-back .audio-button svg{width:22px;height:22px}.vocab-flashcard-front .audio-button:hover,.vocab-flashcard-back .audio-button:hover{background:var(--navy-soft);transform:translateY(-2px)scale(1.05)}.vocab-flashcard-front .audio-button:focus,.vocab-flashcard-back .audio-button:focus{outline:none}@media (prefers-reduced-motion:reduce){.vocab-flashcard-front,.vocab-flashcard-back{transition:none}.vocab-flashcard:not(.flipped) .vocab-flashcard-back,.vocab-flashcard.flipped .vocab-flashcard-front{visibility:hidden}}
.vocab-quiz-container{flex-direction:column;align-items:center;gap:24px;width:min(480px,90vw);display:flex}.vocab-quiz-prompt{aspect-ratio:3/2;border:1.5px solid var(--line);background:var(--surface);width:100%;box-shadow:var(--shadow);border-radius:20px;flex-direction:column;justify-content:center;align-items:center;gap:10px;padding:32px;display:flex}.vocab-quiz-kanji{font-family:var(--font-serif);color:var(--text);-webkit-user-select:none;user-select:none;text-align:center;font-size:clamp(40px,10vw,72px);font-weight:700;line-height:1.6}.vocab-quiz-kanji ruby{ruby-align:center}.vocab-quiz-kanji rt{font-size:.3em;font-family:var(--font-serif);color:var(--muted);font-weight:400}.vocab-quiz-kana{font-family:var(--font-serif);color:var(--strong);-webkit-user-select:none;user-select:none;text-align:center;font-size:clamp(14px,3.5vw,22px)}.vocab-quiz-definition-prompt{font-family:var(--font-ui);color:var(--text);-webkit-user-select:none;user-select:none;text-align:center;font-size:clamp(18px,4.5vw,30px);font-weight:600;line-height:1.4}.vocab-quiz-options{gap:12px;width:100%;display:grid}.vocab-quiz-options.one-col{grid-template-columns:1fr}.vocab-quiz-options.two-col{grid-template-columns:repeat(2,1fr)}.vocab-quiz-option{min-height:60px;font-family:var(--font-ui);color:var(--text);cursor:pointer;border:1.5px solid var(--line);background:var(--surface);text-align:left;border-radius:13px;padding:16px 18px;font-size:15px;font-weight:600;line-height:1.4;transition:all .14s}.vocab-quiz-options.two-col .vocab-quiz-option{font-family:var(--font-serif);text-align:center;font-size:22px}.vocab-quiz-option:hover:not(:disabled){border-color:var(--accent);transform:translateY(-2px)}.vocab-quiz-option:focus{outline:none}.vocab-quiz-option:disabled{cursor:default}.vocab-quiz-option.correct{background:var(--green);border-color:var(--green);color:#fff}.vocab-quiz-option.incorrect{background:var(--accent);border-color:var(--accent);color:#fff}.vocab-quiz-option.selected:not(.correct):not(.incorrect){border-color:var(--navy-soft);background:color-mix(in oklab,var(--navy-soft),transparent 84%)}