:root{--bg-color: #0f172a;--text-main: #f8fafc;--text-muted: #94a3b8;--card-bg: rgba(255, 255, 255, .03);--card-border: rgba(255, 255, 255, .08);--card-hover: rgba(59, 130, 246, .1);--accent-color: #3b82f6;--accent-glow: rgba(59, 130, 246, .3);--success-color: #10b981;--success-glow: rgba(16, 185, 129, .3);--error-color: #ef4444;--error-glow: rgba(239, 68, 68, .3)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Space Grotesk,sans-serif;background-color:var(--bg-color);color:var(--text-main);line-height:1.6;min-height:100vh;display:flex;justify-content:center}h1{font-size:2rem;letter-spacing:-.05em;font-weight:700}h2{font-size:1.5rem;color:var(--text-main)}h3{font-size:1.25rem;font-weight:500;color:var(--accent-color)}p{font-size:1rem;color:var(--text-muted)}.cursor{animation:blink 1s step-end infinite;color:var(--accent-color)}@keyframes blink{50%{opacity:0}}#app{width:100%;max-width:600px;padding:2rem 1rem;display:flex;flex-direction:column;gap:2rem}header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--card-border);padding-bottom:1rem}.streak{background:var(--card-bg);border:1px solid var(--card-border);padding:.5rem 1rem;border-radius:9999px;font-weight:700;box-shadow:0 0 10px #00000080}.topic-header{text-align:center;margin-bottom:2rem}.instruction{text-align:center;margin-bottom:1.5rem;font-weight:500}.cards-grid{display:flex;flex-direction:column;gap:1rem}.card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:12px;padding:1.5rem;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.card:hover{transform:translateY(-4px);border-color:var(--accent-color);box-shadow:0 10px 30px -10px var(--accent-glow);background:var(--card-hover)}.card.selected-correct{border-color:var(--success-color);background:#10b9811a;box-shadow:0 0 20px var(--success-glow)}.card.selected-wrong{border-color:var(--error-color);background:#ef44441a;box-shadow:0 0 20px var(--error-glow);animation:shake .5s cubic-bezier(.36,.07,.19,.97) both}@keyframes shake{10%,90%{transform:translate3d(-1px,0,0)}20%,80%{transform:translate3d(2px,0,0)}30%,50%,70%{transform:translate3d(-4px,0,0)}40%,60%{transform:translate3d(4px,0,0)}}.hidden{display:none!important}#done-container,#loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:1rem;min-height:40vh}.timer{font-size:3rem;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:2px;color:var(--accent-color);text-shadow:0 0 15px var(--accent-glow)}.btn-share,.btn-primary{background:linear-gradient(135deg,var(--accent-color),#2563eb);color:#fff;border:none;padding:1rem 2rem;font-size:1.1rem;font-weight:700;border-radius:9999px;cursor:pointer;transition:transform .2s,box-shadow .2s;font-family:inherit;box-shadow:0 4px 14px 0 var(--accent-glow)}.btn-share:hover,.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px var(--accent-glow)}.loader{border:4px solid var(--card-border);border-top:4px solid var(--accent-color);border-radius:50%;width:40px;height:40px;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.modal{position:fixed;inset:0;background:#0f172acc;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:50;display:flex;align-items:center;justify-content:center;padding:1rem;opacity:1;transition:opacity .3s ease}.modal.hidden{opacity:0;pointer-events:none}.modal-content{background:var(--bg-color);border:1px solid var(--card-border);border-radius:20px;padding:2.5rem 2rem;max-width:400px;width:100%;text-align:center;box-shadow:0 25px 50px -12px #00000080;display:flex;flex-direction:column;gap:1.5rem;transform:translateY(0);transition:transform .3s cubic-bezier(.175,.885,.32,1.275)}.modal.hidden .modal-content{transform:translateY(20px)}.modal-content.success{border-top:4px solid var(--success-color);box-shadow:0 -10px 40px -20px var(--success-color)}.modal-content.failure{border-top:4px solid var(--error-color);box-shadow:0 -10px 40px -20px var(--error-color)}