.lesson-practice{margin:48px 0;padding:30px;border:1px solid #cbdbdf;border-radius:18px;background:#fff;box-shadow:0 12px 34px #12344308;scroll-margin-top:24px}.lesson-practice>h2{font-size:32px;margin:8px 0}.lesson-practice>p{color:var(--muted)}
.lesson-takeaways{margin:36px 0;padding:22px 26px;border-left:4px solid var(--teal);background:#eaf1f3;border-radius:0 12px 12px 0}.lesson-takeaways h2{font-size:24px}
.practice-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;border-bottom:1px solid var(--line);padding-bottom:12px;margin-top:24px}.lesson-practice .study-tabs{margin:0;border:0;flex-wrap:wrap;gap:5px}.lesson-practice .study-tabs button{font-size:14px;padding:11px 12px;border-radius:7px;border:0;background:#edf2f4}.lesson-practice .study-tabs button[aria-pressed=true]{background:var(--navy);color:white}.effects-toggle{font-size:14px;border:1px solid var(--line);background:white;border-radius:7px;padding:9px 11px;color:var(--muted);cursor:pointer}
.lesson-practice .practice-meta{font-size:14px;letter-spacing:0}.lesson-practice .flashcard{min-height:290px;border:1px solid #376370;background:radial-gradient(ellipse at top right,#26697a 0,transparent 65%),#123443;box-shadow:0 8px 18px #12344318;transition:background-color .2s,transform .2s}.lesson-practice .flashcard:hover{transform:translateY(-2px)}.lesson-practice .flashcard.is-flipped{background:#174d5c}.lesson-practice .card-side,.lesson-practice .card-hint{font-size:14px}.lesson-practice .card-text{font-size:clamp(19px,2.5vw,24px);line-height:1.5;letter-spacing:0}.card-position{display:flex;gap:5px;align-items:center}.card-position i{width:6px;height:6px;border-radius:50%;background:#c6d6dc}.card-position i.active{background:var(--teal);width:16px;border-radius:4px}.lesson-practice .practice-controls{align-items:center;gap:8px}.lesson-practice .practice-controls button{font-size:14px;padding:10px}.cards-finished{margin-top:25px;border-top:1px solid var(--line);padding-top:12px}.cards-finished .primary{margin-top:6px}
.quiz-scoreboard{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-top:25px;padding:12px 16px;background:var(--navy);border-radius:9px;color:#fff;font-size:14px;font-weight:600}.quiz-scoreboard span:last-child{color:#d5ee9f}.quiz-progress{display:block;width:100%;height:6px;border:0;border-radius:4px;overflow:hidden;appearance:none;background:#e5edef}.quiz-progress::-webkit-progress-bar{background:#e5edef}.quiz-progress::-webkit-progress-value{background:var(--teal);border-radius:4px;transition:width .2s}.quiz-progress::-moz-progress-bar{background:var(--teal)}
.lesson-practice .answer-options button{min-height:64px;font-size:16px;transition:border-color .15s,background-color .15s}.lesson-practice .answer-options button:not(:disabled):hover{border-color:var(--teal);background:#edf5f6}.lesson-practice .answer-options strong{font-size:14px}.lesson-practice .answer-options button.correct{background:#edf8da;border:2px solid #5b8125}.lesson-practice .answer-options button.incorrect{border-color:#a94a34;background:#fff1ed}.lesson-practice .feedback{padding:17px 20px;border-radius:0 9px 9px 0;background:#f4f7f8}.lesson-practice .feedback-win{background:#eef8df;border-color:#5b8125}.feedback-win>strong{font-size:22px;color:#345516}.lesson-practice .feedback:focus{outline:none}.lesson-practice .feedback:focus-visible{outline:3px solid var(--teal);outline-offset:4px}
.quiz-result{margin:25px 0;padding:28px 22px;border-radius:13px;background:#eef3f5}.quiz-result.is-ready{color:white;background:radial-gradient(ellipse at top right,#326878,transparent 70%),#123443}.quiz-result.is-ready .eyebrow{color:#d5ee9f}.quiz-result h3{font-size:64px;margin:10px 0;letter-spacing:-.04em}.quiz-result h3 span{font-size:20px;letter-spacing:0}.quiz-result p{font-size:16px}.result-marks{display:flex;gap:8px;margin-top:22px}.result-marks span{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;font-weight:700;background:#dce5e8;color:#4b626c}.result-marks .hit{color:#203c18;background:#d5ee9f}.result-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.result-actions .primary{margin:20px 0}.practice-next{width:100%;font-weight:600;color:var(--teal);margin:4px 0 12px}.lesson-practice .practice-note{font-size:14px}.return-to-practice{display:block;border:1px solid var(--teal);background:#fff;border-radius:7px;color:var(--teal);font:600 14px/1.5 'DM Sans',sans-serif;padding:10px 14px;cursor:pointer;margin:10px 0}
.practice-confetti{position:fixed;inset:0;overflow:hidden;z-index:9999;pointer-events:none}.practice-confetti i{position:absolute;width:8px;height:13px;border-radius:2px;opacity:0;animation:practice-burst var(--duration) cubic-bezier(.15,.6,.35,1) var(--delay) both;will-change:transform,opacity}.practice-confetti i:nth-child(3n){border-radius:50%;width:9px;height:9px}
@keyframes practice-burst{0%{opacity:1;transform:translate(0,0) rotate(0) scale(.3)}15%{opacity:1}75%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--spin)) scale(.7)}}
@media(max-width:600px){.lesson-practice{padding:20px 15px;margin:32px 0}.lesson-practice>h2{font-size:28px}.lesson-practice .flashcard{padding:22px 17px;min-height:300px}.practice-toolbar{align-items:stretch}.lesson-practice .study-tabs{width:100%}.lesson-practice .study-tabs button{flex:1}.effects-toggle{align-self:flex-start}.quiz-result h3{font-size:52px}.lesson-practice .question-title{font-size:21px}.lesson-practice .answer-options button{padding:14px 12px}.result-actions .primary{width:auto}.card-position{gap:4px}}
@media(prefers-reduced-motion:reduce){.practice-confetti{display:none}.lesson-practice *{animation:none!important;transition:none!important}.lesson-practice .flashcard:hover{transform:none}}