:root{--flashcard-accent:#0083b3;--flashcard-accent-dark:#00698f;--flashcard-ink:#1c2a33;--flashcard-soft:#f8f8f2;--flashcard-panel:#fff;--flashcard-shadow:0 24px 60px rgb(15 30 45 / 18%)}body{opacity:0;transition:opacity .4s ease-in-out}body.flashcards-ready{opacity:1}#flashcards-container{padding-bottom:2rem}#flashcard-stage{display:flex;flex-direction:column}#flashcard-controls .card{border:1px solid rgb(0 0 0 / 4%)}.flashcard-shell{position:relative;display:flex;align-items:center;justify-content:center;min-height:360px;padding:32px;border-radius:24px;background:#f1f5f9;box-shadow:var(--flashcard-shadow)}.flashcard{position:relative;width:100%;max-width:520px;height:320px;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.2, .7, .2, 1);outline:0}.flashcard:focus-visible{box-shadow:0 0 0 4px rgb(0 131 179 / 25%)}.flashcard.is-revealed{transform:rotateY(180deg)}.flashcard-face{position:absolute;inset:0;border-radius:20px;background:#fff;border:1px solid rgb(0 0 0 / 6%);backface-visibility:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;box-shadow:0 10px 30px rgb(0 0 0 / 12%)}.flashcard-front{background:linear-gradient(150deg,#fff 0,#f7fbff 100%)}.flashcard-back{transform:rotateY(180deg);background:linear-gradient(150deg,#f9fcff 0,#eef6fb 100%)}.flashcard-text{font-size:clamp(2.6rem, 5vw, 4.5rem);font-weight:700;color:var(--flashcard-ink);text-align:center}.flashcard-reading{font-size:clamp(1.25rem, 2.4vw, 1.7rem);color:var(--flashcard-accent-dark)}.flashcard-progress .progress{background:#e8edf2}.flashcard-progress .progress-bar{background:var(--flashcard-accent)}.flashcard-panel{background:var(--flashcard-panel)}.flashcard-deck-list{max-height:20rem;overflow-y:auto}.flashcard-deck-list .list-group-item{display:flex;justify-content:space-between;align-items:center;gap:12px;cursor:pointer;border:1px solid rgb(0 0 0 / 8%);padding:.75rem 1rem}.flashcard-deck-item.is-active{background:var(--flashcard-accent);border-color:var(--flashcard-accent);color:#fff}.deck-kanji{font-weight:700;font-size:1.1rem}.deck-meaning{font-size:.9rem;color:#526271}.flashcard-deck-item.is-active .deck-meaning{color:rgb(255 255 255 / 80%)}@media (width <= 768px){.flashcard-shell{padding:24px;min-height:300px}.flashcard{height:260px}.flashcard-text{font-size:clamp(2.2rem, 8vw, 3.2rem)}}