*,*:before,*:after{box-sizing:border-box}:root{--primary: #2563eb;--primary-light: #3b82f6;--primary-dark: #1e40af;--secondary: #7c3aed;--success: #10b981;--success-dark: #059669;--warning: #f59e0b;--danger: #ef4444;--background: #fafbfc;--surface: #ffffff;--surface-elevated: #ffffff;--text-primary: #0f172a;--text-secondary: #475569;--text-muted: #94a3b8;--border: #e2e8f0;--border-light: #f1f5f9;--gradient-primary: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);--gradient-secondary: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);--gradient-success: linear-gradient(135deg, #10b981 0%, #059669 100%);--gradient-background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);--shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--shadow-glow: 0 0 40px rgba(37, 99, 235, .15);--shadow-glow-primary: 0 4px 14px rgba(37, 99, 235, .35);--transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--transition-base: .25s cubic-bezier(.4, 0, .2, 1);--transition-slow: .35s cubic-bezier(.4, 0, .2, 1);--transition-spring: .5s cubic-bezier(.34, 1.56, .64, 1);--transition-snappy: .25s cubic-bezier(.2, .8, .2, 1);--radius-sm: 8px;--radius: 14px;--radius-lg: 18px;--radius-xl: 24px;--radius-full: 9999px;--font-heading: "Space Grotesk", -apple-system, sans-serif;--font-body: "Inter", -apple-system, sans-serif}html{scroll-behavior:smooth}body{margin:0;padding:0;font-family:var(--font-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--gradient-background);background-attachment:fixed;color:var(--text-primary);line-height:1.6;min-height:100vh}body:before{content:"";position:fixed;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 20% 80%,rgba(37,99,235,.03) 0%,transparent 50%),radial-gradient(circle at 80% 20%,rgba(124,58,237,.03) 0%,transparent 50%),radial-gradient(circle at 40% 40%,rgba(16,185,129,.02) 0%,transparent 40%);pointer-events:none;z-index:-1}code{font-family:Fira Code,source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace;background:var(--border-light);padding:2px 6px;border-radius:4px;font-size:.9em}::-moz-selection{background:#2563eb33;color:var(--text-primary)}::selection{background:#2563eb33;color:var(--text-primary)}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:var(--border-light);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb{background:var(--text-muted);border-radius:var(--radius-full);border:2px solid var(--border-light)}::-webkit-scrollbar-thumb:hover{background:var(--text-secondary)}:focus-visible{outline:2px solid var(--primary);outline-offset:2px}img{max-width:100%;height:auto}a{color:var(--primary);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--primary-dark)}.App{text-align:center;min-height:100vh}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes popOutLeft{0%{opacity:1;transform:scale(1) translate(0)}to{opacity:0;transform:scale(.9) translate(-50px)}}@keyframes popOutRight{0%{opacity:1;transform:scale(1) translate(0)}to{opacity:0;transform:scale(.9) translate(50px)}}@keyframes popInRight{0%{opacity:0;transform:scale(1.05) translate(50px)}to{opacity:1;transform:scale(1) translate(0)}}@keyframes popInLeft{0%{opacity:0;transform:scale(1.05) translate(-50px)}to{opacity:1;transform:scale(1) translate(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}@keyframes progressPulse{0%{box-shadow:0 0 #2563eb66}70%{box-shadow:0 0 0 10px #2563eb00}to{box-shadow:0 0 #2563eb00}}@keyframes pulse-glow{0%,to{box-shadow:0 4px 14px #2563eb59,0 0 #2563eb66}50%{box-shadow:0 4px 14px #2563eb59,0 0 0 12px #2563eb00}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}@keyframes ripple{to{transform:scale(4);opacity:0}}@keyframes countdownPop{0%{transform:scale(.5);opacity:0}50%{transform:scale(1.2);opacity:1}to{transform:scale(1);opacity:1}}.animate-fadeIn{animation:fadeIn .4s ease-out forwards}.animate-fadeInUp{animation:fadeInUp .4s ease-out forwards}.animate-fadeInDown{animation:fadeInDown .4s ease-out forwards}.animate-popOutLeft{animation:popOutLeft .2s cubic-bezier(.4,0,1,1) forwards}.animate-popOutRight{animation:popOutRight .2s cubic-bezier(.4,0,1,1) forwards}.animate-popInRight{animation:popInRight .3s cubic-bezier(0,0,.2,1) forwards}.animate-popInLeft{animation:popInLeft .3s cubic-bezier(0,0,.2,1) forwards}.animate-scaleIn{animation:scaleIn .3s ease-out forwards}.animate-float{animation:float 3s ease-in-out infinite}.animate-pulse{animation:pulse 2s ease-in-out infinite}.delay-100{animation-delay:.1s}.delay-200{animation-delay:.2s}.delay-300{animation-delay:.3s}.delay-400{animation-delay:.4s}.delay-500{animation-delay:.5s}.modern-card{background:#fff;border-radius:16px;padding:24px;box-shadow:0 1px 3px #0000001a;border:1px solid rgba(0,0,0,.05);transition:all .3s cubic-bezier(.4,0,.2,1)}.modern-card:hover{transform:translateY(-4px);box-shadow:0 12px 24px #0000001a}.modern-card-interactive{cursor:pointer}.modern-card-interactive:active{transform:translateY(-2px) scale(.99)}.glass-card{background:#ffffffb3;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.3);border-radius:20px;box-shadow:0 8px 32px #00000014}.btn-glow{position:relative;overflow:hidden}.btn-glow:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;background:#fff3;border-radius:50%;transform:translate(-50%,-50%);transition:width .6s,height .6s}.btn-glow:hover:before{width:300px;height:300px}.question-card{background:linear-gradient(135deg,#f8fafc,#f1f5f9);border-radius:20px;padding:20px;border:1px solid rgba(0,0,0,.05);box-shadow:0 4px 15px #0000000d;animation:fadeInUp .4s ease-out forwards}.answer-card{background:#fff;border-radius:16px;transition:all .25s cubic-bezier(.4,0,.2,1);border:2px solid #e2e8f0;overflow:hidden}.answer-card:hover{border-color:#2563eb;transform:translateY(-2px) scale(1.02);box-shadow:0 8px 20px #2563eb26}.answer-card:active{transform:scale(.98)}.answer-card.correct{border-color:#10b981;background:linear-gradient(135deg,#10b9811a,#10b9810d)}.answer-card.incorrect{border-color:#ef4444;background:linear-gradient(135deg,#ef44441a,#ef44440d)}.progress-container{padding:16px 0;animation:fadeInDown .4s ease-out forwards}.progress-bar-modern{height:10px;border-radius:10px;background:linear-gradient(90deg,#2563eb1a,#1e40af1a);overflow:hidden;position:relative}.progress-bar-fill{height:100%;border-radius:10px;background:linear-gradient(90deg,#2563eb,#1e40af);transition:width .4s cubic-bezier(.4,0,.2,1);position:relative}.progress-bar-fill:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.3) 50%,transparent 100%);background-size:200% 100%;animation:shimmer 2s infinite}.timer-container{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;background:linear-gradient(135deg,#2563eb14,#1e40af14);border-radius:12px;font-family:var(--font-heading);font-weight:600;color:#2563eb;animation:fadeIn .4s ease-out forwards;border:1px solid rgba(37,99,235,.15)}.timer-container.warning{background:linear-gradient(135deg,#f59e0b1a,#ef444414);color:#f59e0b;animation:pulse 1s infinite}.timer-container.danger{background:linear-gradient(135deg,#ef44441a,#ef444426);color:#ef4444;animation:pulse .5s infinite}.stepper-container{margin-top:32px;padding:20px;animation:fadeInUp .4s ease-out forwards}.step-button{min-width:40px!important;height:40px;border-radius:10px!important;font-weight:600!important;transition:all .2s cubic-bezier(.4,0,.2,1)!important}.step-button:hover{transform:translateY(-2px)}.step-button.active{animation:bounce .5s ease-out}.step-button.completed{background:linear-gradient(135deg,#10b981,#059669)!important}.header-modern{display:flex;flex-direction:column;gap:16px;padding:16px 0;animation:fadeInDown .4s ease-out forwards}.header-top-row{display:flex;justify-content:space-between;align-items:center}.navigation-buttons{display:flex;gap:8px}.explanation-container{text-align:center;padding:40px 24px;animation:fadeInUp .5s ease-out forwards}.explanation-title{font-family:var(--font-heading);font-size:2.5rem;font-weight:700;background:linear-gradient(135deg,#2563eb,#1e40af);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:32px;letter-spacing:-.02em}.explanation-list{display:flex;flex-direction:column;gap:16px;max-width:500px;margin:0 auto 40px;text-align:left}.explanation-item{display:flex;align-items:flex-start;gap:12px;padding:16px 20px;background:#fff;border-radius:12px;box-shadow:0 2px 8px #0000000d;border:1px solid rgba(0,0,0,.05);opacity:0;animation:fadeInUp .4s ease-out forwards}.explanation-item:nth-child(1){animation-delay:.1s}.explanation-item:nth-child(2){animation-delay:.15s}.explanation-item:nth-child(3){animation-delay:.2s}.explanation-item:nth-child(4){animation-delay:.25s}.explanation-number{display:flex;align-items:center;justify-content:center;width:28px;height:28px;background:linear-gradient(135deg,#2563eb,#1e40af);color:#fff;border-radius:8px;font-weight:700;font-size:.9rem;flex-shrink:0}.explanation-text{color:#475569;line-height:1.5;font-weight:500}.good-luck-text{font-size:1.1rem;color:#64748b;margin-bottom:24px;font-weight:500}.start-button{padding:16px 48px!important;font-size:1.1rem!important;font-family:var(--font-heading)!important;border-radius:16px!important;background:linear-gradient(135deg,#2563eb,#1e40af)!important;box-shadow:0 4px 14px #2563eb59!important;transition:all .2s cubic-bezier(.4,0,.2,1)!important;animation:fadeInUp .4s ease-out .3s backwards,pulse-glow 2s ease-in-out .7s infinite;text-transform:uppercase!important;letter-spacing:.02em!important;color:#fff!important}.start-button:hover{transform:translateY(-3px)!important;box-shadow:0 8px 25px #2563eb73!important;background:linear-gradient(135deg,#1e40af,#1e3a8a)!important;color:#fff!important;animation:none!important}.results-container{animation:fadeIn .4s ease-out forwards}.score-display{font-size:4rem;font-family:var(--font-heading);font-weight:800;background:linear-gradient(135deg,#2563eb,#1e40af);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:scaleIn .4s cubic-bezier(.34,1.56,.64,1) forwards}.result-card{background:#fff;border-radius:16px;padding:20px;margin-bottom:12px;border:1px solid #e2e8f0;transition:all .3s ease;animation:fadeInUp .4s ease-out backwards}.result-card:hover{border-color:#2563eb;box-shadow:0 4px 15px #2563eb1f}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:300px;gap:16px}.loading-text{color:#64748b;font-size:.95rem;animation:pulse 1.5s infinite}.countdown-container{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#ffffffe6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:1000}.countdown-number{font-size:15rem;font-weight:900;color:#2563eb;font-family:var(--font-heading);animation:countdownPop .9s cubic-bezier(.4,0,.2,1) forwards;text-shadow:0 10px 30px rgba(37,99,235,.3)}@media (max-width: 768px){.explanation-title{font-size:1.8rem}.explanation-item{padding:14px 16px}.score-display{font-size:3rem}}@media (max-width: 480px){.explanation-title{font-size:1.5rem}.start-button{padding:14px 36px!important;font-size:1rem!important}.countdown-number{font-size:8rem}}.quiz-layout-wrapper{padding-top:16px;padding-bottom:24px;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}@media (max-width: 768px){.quiz-layout-wrapper{padding-top:8px;padding-bottom:12px}}@media (max-width: 480px){.quiz-layout-wrapper{padding-top:4px;padding-bottom:8px}}@media (max-width: 380px){.quiz-layout-wrapper{padding-top:2px;padding-bottom:4px}}.quiz-viewport{display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden}@media (max-width: 768px){body{padding:0!important;overflow-x:hidden}.header-modern{padding:4px 0;gap:4px}.header-top-row{padding:0}.progress-container{padding:4px 0}.progress-bar-modern{height:5px}.navigation-buttons .MuiIconButton-root{padding:4px!important}.timer-container{padding:4px 10px;font-size:.8rem;gap:4px;border-radius:8px}.header-top-row .MuiBox-root{gap:6px!important}.question-card{padding:6px!important;margin-bottom:6px!important;border-radius:12px!important}.MuiGrid-container{margin-top:0!important}.stepper-container{display:none!important}}@media (max-width: 480px){.header-modern{padding:2px 0;gap:2px}.progress-container{padding:2px 0}.progress-bar-modern{height:4px}.question-card{padding:4px!important;margin-bottom:4px!important;border-radius:10px!important;box-shadow:none!important;border:1px solid rgba(0,0,0,.06)!important}.answer-title-mobile{font-size:.8rem!important;margin-bottom:6px!important}.timer-container{padding:3px 8px;font-size:.75rem;border-radius:6px}}@media (max-width: 380px){.header-modern{padding:1px 0;gap:1px}.progress-container{padding:1px 0}.progress-bar-modern{height:3px}.question-card{padding:3px!important;margin-bottom:3px!important;border-radius:8px!important}.timer-container{padding:2px 6px;font-size:.7rem}}@media (max-width: 768px){.MuiCard-root .MuiCardActionArea-root{padding:8px!important}.MuiCard-root .MuiCardActionArea-root>div:first-child{font-size:12px!important;margin-bottom:4px!important}}@media (max-width: 480px){.MuiCard-root .MuiCardActionArea-root{padding:6px!important}.MuiCard-root .MuiCardActionArea-root>div:first-child{font-size:11px!important;margin-bottom:2px!important}.answer-card,.MuiCard-root{border-width:1.5px!important;border-radius:10px!important}}@media (max-width: 380px){.MuiCard-root .MuiCardActionArea-root{padding:4px!important}.MuiCard-root .MuiCardActionArea-root>div:first-child{font-size:10px!important;margin-bottom:1px!important}}@media (max-width: 768px){.MuiGrid-container.MuiGrid-spacing-xs-2{margin:-4px!important}.MuiGrid-container.MuiGrid-spacing-xs-2>.MuiGrid-item{padding:4px!important}}@media (max-width: 480px){.MuiGrid-container.MuiGrid-spacing-xs-2{margin:-3px!important}.MuiGrid-container.MuiGrid-spacing-xs-2>.MuiGrid-item{padding:3px!important}.MuiGrid-container.MuiGrid-spacing-xs-3,.MuiGrid-container.MuiGrid-spacing-xs-4{margin:-4px!important}.MuiGrid-container.MuiGrid-spacing-xs-3>.MuiGrid-item,.MuiGrid-container.MuiGrid-spacing-xs-4>.MuiGrid-item{padding:4px!important}}@media (max-width: 380px){.MuiGrid-container.MuiGrid-spacing-xs-2{margin:-2px!important}.MuiGrid-container.MuiGrid-spacing-xs-2>.MuiGrid-item{padding:2px!important}}@media (max-width: 768px){.MuiContainer-root{padding-left:8px!important;padding-right:8px!important}}@media (max-width: 480px){.MuiContainer-root{padding-left:4px!important;padding-right:4px!important}}@media (max-width: 380px){.MuiContainer-root{padding-left:3px!important;padding-right:3px!important}}@media (max-width: 480px){.MuiCard-root{border-radius:8px!important}.MuiCardActionArea-root{padding:3px!important}}@media (max-width: 380px){.MuiCard-root{border-radius:6px!important}.MuiCardActionArea-root{padding:2px!important}}