*{margin:0;padding:0;box-sizing:border-box}:root{--color-primary: #6366f1;--color-primary-dark: #4f46e5;--color-primary-light: #818cf8;--color-primary-ultra-light: #c7d2fe;--color-secondary: #14b8a6;--color-secondary-dark: #0f766e;--color-secondary-light: #5eead4;--color-accent-purple: #a855f7;--color-accent-pink: #ec4899;--color-accent-orange: #f97316;--color-success: #10b981;--color-success-light: #d1fae5;--color-error: #ef4444;--color-error-light: #fee2e2;--color-warning: #f59e0b;--color-warning-light: #fef3c7;--color-info: #3b82f6;--color-info-light: #dbeafe;--color-text: #0f172a;--color-text-secondary: #475569;--color-text-tertiary: #94a3b8;--color-text-light: #cbd5e1;--color-bg: #ffffff;--color-bg-secondary: #f8fafc;--color-bg-tertiary: #f1f5f9;--color-bg-dark: #1e293b;--color-border: #e2e8f0;--color-border-medium: #cbd5e1;--color-border-dark: #94a3b8;--gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--gradient-secondary: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);--gradient-success: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);--gradient-purple-blue: linear-gradient(135deg, #a855f7 0%, #6366f1 100%);--gradient-teal-blue: linear-gradient(135deg, #14b8a6 0%, #06b6d4 100%);--gradient-warm: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);--gradient-cool: linear-gradient(135deg, #22d3ee 0%, #3b82f6 100%);--gradient-bg-purple: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--gradient-bg-blue: linear-gradient(135deg, #60a5fa 0%, #2563eb 100%);--gradient-bg-orange: linear-gradient(135deg, #fb923c 0%, #ea580c 100%);--gradient-bg-pink: linear-gradient(135deg, #f472b6 0%, #db2777 100%);--spacing-xs: .375rem;--spacing-sm: .625rem;--spacing-md: .875rem;--spacing-lg: 1.25rem;--spacing-2xl: 2.5rem;--spacing-3xl: 3.25rem;--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Inter", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;--font-size-xs: .6875rem;--font-size-sm: .8125rem;--font-size-base: .9375rem;--font-size-lg: 1.0625rem;--font-size-xl: 1.125rem;--font-size-2xl: 1.375rem;--font-size-3xl: 1.625rem;--font-size-4xl: 2rem;--font-size-5xl: 2.5rem;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--font-weight-extrabold: 800;--line-height-tight: 1.25;--line-height-snug: 1.375;--line-height-normal: 1.5;--line-height-relaxed: 1.625;--line-height-loose: 2;--radius-sm: .3125rem;--radius-md: .4375rem;--radius-lg: .625rem;--radius-xl: .875rem;--radius-2xl: 1.25rem;--radius-full: 9999px;--shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, .25);--shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, .05);--shadow-primary: 0 10px 40px -10px rgba(99, 102, 241, .4);--shadow-success: 0 10px 40px -10px rgba(16, 185, 129, .4);--shadow-error: 0 10px 40px -10px rgba(239, 68, 68, .4);--transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--transition-base: .2s cubic-bezier(.4, 0, .2, 1);--transition-medium: .3s cubic-bezier(.4, 0, .2, 1);--transition-slow: .5s cubic-bezier(.4, 0, .2, 1);--transition-bounce: .4s cubic-bezier(.68, -.55, .265, 1.55);--max-width-sm: 640px;--max-width-md: 768px;--max-width-lg: 1024px;--max-width-xl: 1280px;--z-base: 1;--z-dropdown: 100;--z-sticky: 200;--z-modal: 1000;--z-popover: 1100;--z-tooltip: 1200}html{font-size:15px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth;scrollbar-gutter:stable}body{font-family:var(--font-family),serif;font-size:var(--font-size-base);line-height:var(--line-height-normal);color:var(--color-text);background-color:var(--color-bg-secondary);min-height:100vh;overflow-x:hidden;overflow-y:scroll;user-select:none;-webkit-user-select:none;-ms-user-select:none}h1,h2,h3,h4,h5,h6{font-weight:var(--font-weight-bold);line-height:var(--line-height-tight);color:var(--color-text);margin:0}h1{font-size:var(--font-size-4xl);font-weight:var(--font-weight-extrabold);letter-spacing:-.02em}h2{font-size:var(--font-size-3xl);font-weight:var(--font-weight-bold);letter-spacing:-.01em}h3{font-size:var(--font-size-2xl);font-weight:var(--font-weight-semibold)}h4{font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold)}p{margin:0;line-height:var(--line-height-relaxed)}button{font-family:inherit;font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);padding:var(--spacing-sm) var(--spacing-lg);border:none;border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-base);background-color:var(--color-primary);color:#fff;position:relative;overflow:hidden;outline:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}button:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:#ffffff4d;transform:translate(-50%,-50%);transition:width .6s,height .6s}button:active:before{width:300px;height:300px}button:hover:not(:disabled){background-color:var(--color-primary-dark);transform:translateY(-2px);box-shadow:var(--shadow-lg),var(--shadow-primary)}button:active:not(:disabled){transform:translateY(0) scale(.98)}button:disabled{opacity:.6;cursor:not-allowed;transform:none;box-shadow:none}button:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}button *,button *:before,button *:after,button:before,button:after,a *,a *:before,a *:after,[role=button] *,[role=button] *:before,[role=button] *:after{pointer-events:none!important}button,a,[role=button]{pointer-events:auto!important}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInScale{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes slideInRight{0%{opacity:0;transform:translate(30px)}to{opacity:1;transform:translate(0)}}@keyframes slideInLeft{0%{opacity:0;transform:translate(-30px)}to{opacity:1;transform:translate(0)}}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(.98)}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.fade-in{animation:fadeIn var(--transition-medium) ease-out}.fade-in-up{animation:fadeInUp var(--transition-medium) ease-out}.fade-in-scale{animation:fadeInScale var(--transition-medium) ease-out}.slide-in-right{animation:slideInRight var(--transition-medium) ease-out}.slide-in-left{animation:slideInLeft var(--transition-medium) ease-out}.stagger-1{animation-delay:.1s}.stagger-2{animation-delay:.2s}.stagger-3{animation-delay:.3s}.stagger-4{animation-delay:.4s}.stagger-5{animation-delay:.5s}.glass{background:#ffffff1a;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2)}.card-elevated{background:#fff;border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);transition:all var(--transition-base)}.card-elevated:hover{transform:translateY(-4px);box-shadow:var(--shadow-2xl)}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--color-bg-tertiary);transition:none!important}::-webkit-scrollbar-thumb{background:var(--color-border-medium);border-radius:var(--radius-full);transition:none!important}::-webkit-scrollbar-thumb:hover{background:var(--color-border-dark)}::selection{background-color:var(--color-primary-ultra-light);color:var(--color-primary-dark)}::-moz-selection{background-color:var(--color-primary-ultra-light);color:var(--color-primary-dark)}*:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;border-radius:var(--radius-sm)}@media(max-width:768px){:root{--font-size-4xl: 1.75rem;--font-size-3xl: 1.5rem;--font-size-2xl: 1.25rem;--font-size-xl: 1.0625rem}}@media(max-width:480px){:root{--font-size-4xl: 1.5rem;--font-size-3xl: 1.375rem}html{font-size:14px}}[data-theme=dark]{--color-primary: #818cf8;--color-primary-dark: #6366f1;--color-primary-light: #a5b4fc;--color-primary-ultra-light: #4f46e5;--color-secondary: #2dd4bf;--color-secondary-dark: #14b8a6;--color-secondary-light: #5eead4;--color-success: #34d399;--color-success-light: #064e3b;--color-error: #f87171;--color-error-light: #7f1d1d;--color-warning: #fbbf24;--color-warning-light: #78350f;--color-text: #f1f5f9;--color-text-secondary: #cbd5e1;--color-text-tertiary: #94a3b8;--color-text-light: #64748b;--color-bg: #1e293b;--color-bg-secondary: #0f172a;--color-bg-tertiary: #334155;--color-bg-dark: #020617;--color-border: #334155;--color-border-medium: #475569;--color-border-dark: #64748b;--gradient-primary: linear-gradient(135deg, #4338ca 0%, #6b21a8 100%);--gradient-secondary: linear-gradient(135deg, #be185d 0%, #e11d48 100%);--gradient-success: linear-gradient(135deg, #059669 0%, #047857 100%);--gradient-purple-blue: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%);--gradient-teal-blue: linear-gradient(135deg, #0d9488 0%, #0891b2 100%);--gradient-bg-purple: linear-gradient(135deg, #4338ca 0%, #6b21a8 100%);--gradient-bg-blue: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);--gradient-bg-orange: linear-gradient(135deg, #f97316 0%, #c2410c 100%);--gradient-bg-pink: linear-gradient(135deg, #ec4899 0%, #be185d 100%);--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .3);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .4), 0 2px 4px -1px rgba(0, 0, 0, .3);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .5), 0 4px 6px -2px rgba(0, 0, 0, .3);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .5), 0 10px 10px -5px rgba(0, 0, 0, .3);--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, .6);--shadow-primary: 0 10px 40px -10px rgba(99, 102, 241, .5);--shadow-success: 0 10px 40px -10px rgba(16, 185, 129, .5);--shadow-error: 0 10px 40px -10px rgba(239, 68, 68, .5)}body,button,.app-container,.feature-card,.question-area,.choice-button,.nav-button,.home-button,.dialog-content,.sidebar-section,.pagination-container,.pagination-item{transition:background-color var(--transition-base),color var(--transition-base),border-color var(--transition-base)}.no-transition,.no-transition *{transition:none!important}[data-theme=dark] body{background-color:var(--color-bg-secondary);color:var(--color-text)}[data-theme=dark] .app-container{background:linear-gradient(180deg,#0f172a,#1e293b)}[data-theme=dark] .home-screen{background:var(--gradient-primary)}[data-theme=dark] .quiz-container{background:linear-gradient(180deg,#0f172a,#1e293b)}[data-theme=dark] .question-area{background:var(--color-bg);border-color:var(--color-border)}[data-theme=dark] .question-text{color:var(--color-text);background:var(--color-bg-tertiary)}[data-theme=dark] .question-text:hover{background:var(--color-bg);border-color:var(--color-primary)}[data-theme=dark] .choice-button{background-color:var(--color-bg);border-color:var(--color-border);color:var(--color-text)}[data-theme=dark] .choice-button:hover:not(:disabled){border-color:var(--color-primary);background-color:var(--color-bg-tertiary)}[data-theme=dark] .choice-button:before{background:linear-gradient(90deg,color-mix(in srgb,var(--color-primary) 15%,transparent) 0%,transparent 100%)}[data-theme=dark] .choice-button.selected{background:linear-gradient(135deg,color-mix(in srgb,var(--color-primary) 20%,transparent),color-mix(in srgb,var(--color-primary) 30%,transparent));border-color:var(--color-primary);color:var(--color-text)}[data-theme=dark] .choice-button.correct{background:linear-gradient(135deg,#10b98133,#10b9814d);border-color:var(--color-success);color:var(--color-text)}[data-theme=dark] .choice-button.incorrect{background:linear-gradient(135deg,#ef444433,#ef44444d);border-color:var(--color-error);color:var(--color-text)}[data-theme=dark] .choice-text{color:var(--color-text)}[data-theme=dark] .choice-radio{background:var(--color-bg-tertiary);border-color:var(--color-border-medium)}[data-theme=dark] .nav-button-previous{background:var(--color-bg-tertiary);color:var(--color-text);border-color:var(--color-border)}[data-theme=dark] .nav-button-previous:hover:not(:disabled){background:var(--color-bg);border-color:var(--color-border-medium)}[data-theme=dark] .home-button{background:var(--color-bg);color:var(--color-text);border-color:var(--color-border)}[data-theme=dark] .home-button:hover{background:var(--color-bg-tertiary);border-color:var(--color-primary);color:var(--color-primary-light)}[data-theme=dark] .pagination-container{background:var(--color-bg);border:1px solid var(--color-border)}[data-theme=dark] .pagination-item{background-color:var(--color-bg-tertiary);color:var(--color-text)}[data-theme=dark] .dialog-content{background:var(--color-bg);border-color:var(--color-border)}[data-theme=dark] .dialog-title{color:var(--color-text);background:var(--gradient-purple-blue);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}[data-theme=dark] .dialog-message{color:var(--color-text-secondary)}[data-theme=dark] .hint-content{background:linear-gradient(135deg,color-mix(in srgb,var(--color-primary) 15%,transparent),color-mix(in srgb,var(--color-accent-purple) 15%,transparent));border-color:var(--color-primary)}[data-theme=dark] .hint-text{color:var(--color-text)}[data-theme=dark] .sidebar-section{background:var(--color-bg);border:1px solid var(--color-border)}[data-theme=dark] .sidebar-tips{background:linear-gradient(135deg,color-mix(in srgb,var(--color-primary) 10%,transparent),color-mix(in srgb,var(--color-accent-purple) 10%,transparent));border-color:var(--color-primary)}[data-theme=dark] .tips-list li{color:var(--color-text-secondary)}[data-theme=dark] .feature-card{background:var(--color-bg);border:1px solid var(--color-border)}[data-theme=dark] .feature-card:hover{background:var(--color-bg-tertiary);border-color:var(--color-primary)}[data-theme=dark] .feature-title{color:var(--color-text)}[data-theme=dark] .feature-card:hover .feature-title{color:var(--color-primary-light)}[data-theme=dark] .glass{background:#ffffff0d;border:1px solid rgba(255,255,255,.1)}[data-theme=dark] .dialog-overlay{background-color:#000c}[data-theme=dark] img{opacity:.9}[data-theme=dark] .banner-overlay{background:linear-gradient(0deg,rgba(0,0,0,.9) 0%,transparent 100%)}[data-theme=dark] .banner-cta{color:#fff}[data-theme=dark] .choice-indicator{background:#0000004d}:root,[data-gradient=purple]{--gradient-primary: var(--gradient-bg-purple)}[data-gradient=blue]{--gradient-primary: var(--gradient-bg-blue);--gradient-purple-blue: linear-gradient(135deg, #3b82f6 0%, #0ea5e9 100%);--color-primary: #3b82f6;--color-primary-dark: #2563eb;--color-primary-light: #60a5fa;--color-primary-ultra-light: #dbeafe;--color-secondary: #06b6d4;--color-secondary-dark: #0891b2;--color-secondary-light: #22d3ee;--color-accent-purple: #6366f1;--shadow-primary: 0 10px 40px -10px rgba(59, 130, 246, .4)}[data-gradient=orange]{--gradient-primary: var(--gradient-bg-orange);--gradient-purple-blue: linear-gradient(135deg, #f97316 0%, #eab308 100%);--color-primary: #f97316;--color-primary-dark: #ea580c;--color-primary-light: #fb923c;--color-primary-ultra-light: #ffedd5;--color-secondary: #eab308;--color-secondary-dark: #ca8a04;--color-secondary-light: #facc15;--color-accent-purple: #f59e0b;--shadow-primary: 0 10px 40px -10px rgba(249, 115, 22, .4)}[data-gradient=pink]{--gradient-primary: var(--gradient-bg-pink);--gradient-purple-blue: linear-gradient(135deg, #ec4899 0%, #a855f7 100%);--color-primary: #ec4899;--color-primary-dark: #db2777;--color-primary-light: #f472b6;--color-primary-ultra-light: #fce7f3;--color-secondary: #a855f7;--color-secondary-dark: #9333ea;--color-secondary-light: #c084fc;--color-accent-purple: #d946ef;--shadow-primary: 0 10px 40px -10px rgba(236, 72, 153, .4)}[data-theme=dark][data-gradient=purple],[data-theme=dark]:not([data-gradient]){--gradient-primary: var(--gradient-bg-purple)}[data-theme=dark][data-gradient=blue]{--gradient-primary: var(--gradient-bg-blue);--gradient-purple-blue: linear-gradient(135deg, #60a5fa 0%, #22d3ee 100%);--color-primary: #60a5fa;--color-primary-dark: #3b82f6;--color-primary-light: #93c5fd;--color-primary-ultra-light: #1e40af;--color-secondary: #22d3ee;--color-secondary-dark: #06b6d4;--color-secondary-light: #67e8f9;--shadow-primary: 0 10px 40px -10px rgba(59, 130, 246, .5)}[data-theme=dark][data-gradient=orange]{--gradient-primary: var(--gradient-bg-orange);--gradient-purple-blue: linear-gradient(135deg, #fb923c 0%, #facc15 100%);--color-primary: #fb923c;--color-primary-dark: #f97316;--color-primary-light: #fdba74;--color-primary-ultra-light: #9a3412;--color-secondary: #facc15;--color-secondary-dark: #eab308;--color-secondary-light: #fde047;--shadow-primary: 0 10px 40px -10px rgba(249, 115, 22, .5)}[data-theme=dark][data-gradient=pink]{--gradient-primary: var(--gradient-bg-pink);--gradient-purple-blue: linear-gradient(135deg, #f472b6 0%, #c084fc 100%);--color-primary: #f472b6;--color-primary-dark: #ec4899;--color-primary-light: #f9a8d4;--color-primary-ultra-light: #9d174d;--color-secondary: #c084fc;--color-secondary-dark: #a855f7;--color-secondary-light: #d8b4fe;--shadow-primary: 0 10px 40px -10px rgba(236, 72, 153, .5)}.scroll-to-top{position:fixed;bottom:2rem;right:2rem;width:48px;height:48px;border-radius:var(--radius-full);background:var(--gradient-primary);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-lg),var(--shadow-primary);opacity:0;visibility:hidden;transform:translateY(20px) scale(.8);transition:all var(--transition-medium);z-index:var(--z-sticky);padding:0}.scroll-to-top.visible{opacity:1;visibility:visible;transform:translateY(0) scale(1)}.scroll-to-top:hover:not(:disabled){transform:translateY(-4px) scale(1.05);box-shadow:var(--shadow-xl),var(--shadow-primary)}.scroll-to-top:active:not(:disabled){transform:translateY(-2px) scale(1)}.scroll-to-top svg{width:24px;height:24px;stroke-width:2.5}[data-theme=dark] .scroll-to-top{background:var(--gradient-purple-blue);box-shadow:var(--shadow-lg),0 10px 40px -10px color-mix(in srgb,var(--color-primary) 60%,transparent)}@media(max-width:768px){.scroll-to-top{bottom:1.5rem;right:1.5rem;width:44px;height:44px}.scroll-to-top svg{width:22px;height:22px}}@media(max-width:480px){.scroll-to-top{bottom:1rem;right:1rem;width:40px;height:40px}.scroll-to-top svg{width:20px;height:20px}}