@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap";:root{--primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);--accent-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);--success-gradient: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);--warning-gradient: linear-gradient(135deg, #fa709a 0%, #fee140 100%);--bg-primary: #0f0f23;--bg-secondary: #1a1a2e;--bg-tertiary: #16213e;--text-primary: #ffffff;--text-secondary: #b8b8d6;--text-muted: #8a8aa8;--border-glow: rgba(102, 126, 234, .4);--shadow-soft: 0 8px 32px rgba(0, 0, 0, .2);--shadow-medium: 0 15px 45px rgba(0, 0, 0, .3);--shadow-large: 0 25px 60px rgba(0, 0, 0, .4);--radius-sm: 12px;--radius-md: 20px;--radius-lg: 28px;--radius-xl: 40px;--transition-fast: .3s cubic-bezier(.4, 0, .2, 1);--transition-slow: .6s cubic-bezier(.4, 0, .2, 1)}*{box-sizing:border-box;margin:0;padding:0}html{font-family:Inter,system-ui,-apple-system,sans-serif;line-height:1.6;color:var(--text-primary);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%;height:100%;scroll-behavior:smooth}body{margin:0;padding:2rem;min-height:100vh;background:radial-gradient(ellipse at 20% 20%,rgba(102,126,234,.15) 0%,transparent 50%),radial-gradient(ellipse at 80% 80%,rgba(245,87,108,.1) 0%,transparent 50%),radial-gradient(ellipse at 40% 40%,rgba(79,172,254,.08) 0%,transparent 60%),linear-gradient(135deg,var(--bg-primary) 0%,var(--bg-secondary) 50%,var(--bg-tertiary) 100%);background-attachment:fixed;position:relative;overflow-x:hidden}body:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 20% 30%,rgba(102,126,234,.1) 0%,transparent 50%),radial-gradient(circle at 80% 70%,rgba(245,87,108,.08) 0%,transparent 50%),radial-gradient(circle at 40% 80%,rgba(79,172,254,.06) 0%,transparent 50%);animation:float 20s ease-in-out infinite;z-index:-1;pointer-events:none}@keyframes float{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-20px) rotate(180deg)}}header{margin:3rem 0;text-align:center;position:relative}header:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:200px;height:200px;background:var(--primary-gradient);border-radius:50%;filter:blur(60px);opacity:.15;z-index:-1}header img{width:4rem;height:4rem;filter:drop-shadow(0 8px 24px rgba(102,126,234,.4));transition:var(--transition-fast)}header img:hover{transform:scale(1.1) rotate(5deg);filter:drop-shadow(0 12px 32px rgba(102,126,234,.6))}header h1{font-family:Inter,sans-serif;font-weight:700;font-size:3.5rem;letter-spacing:.3rem;margin:1.5rem 0 0;text-transform:uppercase;background:var(--primary-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;position:relative;display:inline-block}header h1:after{content:"";position:absolute;bottom:-10px;left:50%;transform:translate(-50%);width:100px;height:3px;background:var(--primary-gradient);border-radius:2px}#last-try{max-width:48rem;margin:3rem auto;font-size:.9rem;font-family:Inter,sans-serif;text-align:center}#last-try h2{margin:0 0 1rem;font-size:1.1rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.1rem;font-weight:500}#last-try ul{list-style:none;margin:0;padding:0;display:flex;justify-content:center;gap:1.5rem;font-size:1.3rem;color:var(--text-muted)}#quiz{max-width:56rem;margin:3rem auto;padding:3rem;background:rgba(255,255,255,.05);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-lg);box-shadow:var(--shadow-large);position:relative;overflow:hidden;transition:var(--transition-slow)}#quiz:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.03),transparent);transition:left .7s ease}#quiz:hover:before{left:100%}#question-overview{font-family:JetBrains Mono,monospace;font-size:.85rem;color:var(--text-muted);margin:0 0 2rem;text-transform:uppercase;letter-spacing:.1rem;font-weight:500}#question progress{width:100%;height:8px;border-radius:var(--radius-xl);background:transparent;margin:1.5rem 0;border:none;overflow:hidden;position:relative}#question progress::-webkit-progress-bar{background:rgba(255,255,255,.1);border-radius:var(--radius-xl)}#question progress::-webkit-progress-value{background:var(--primary-gradient);border-radius:var(--radius-xl);transition:all .8s cubic-bezier(.34,1.56,.64,1);position:relative}#question progress.answered::-webkit-progress-value{background:var(--success-gradient)}#question h2{font-family:Inter,sans-serif;font-size:1.8rem;font-weight:500;margin:2rem 0 3rem;color:var(--text-primary);line-height:1.4;text-align:center}#answers{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:1rem}.answer{position:relative}.answer button{display:flex;align-items:center;width:100%;font-family:Inter,sans-serif;font-size:1rem;font-weight:500;padding:1.5rem 2rem;border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-md);background:rgba(255,255,255,.05);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast);position:relative;overflow:hidden}.answer button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);transition:left .6s ease}.answer button:hover:before{left:100%}.answer button:hover,.answer button:focus{background:rgba(255,255,255,.1);border-color:var(--border-glow);color:var(--text-primary);transform:translateY(-2px);box-shadow:0 8px 32px #667eea33}.answer button.selected{background:var(--primary-gradient);border-color:transparent;color:#fff;transform:translateY(-2px);box-shadow:0 12px 40px #667eea66}.answer button.correct{background:var(--success-gradient);border-color:transparent;color:#fff;transform:translateY(-2px);box-shadow:0 12px 40px #43e97b66;animation:pulse .6s ease-out}.answer button.wrong{background:var(--warning-gradient);border-color:transparent;color:#fff;transform:translateY(-2px);box-shadow:0 12px 40px #fa709a66;animation:shake .5s ease-out}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}#skip-action{margin-top:2.5rem;text-align:center}#skip-action button{font-family:Inter,sans-serif;font-size:1rem;font-weight:500;border:none;background:transparent;color:var(--text-muted);cursor:pointer;padding:1rem 2rem;border-radius:var(--radius-md);transition:all var(--transition-fast);position:relative;overflow:hidden}#skip-action button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent);transition:left .6s ease}#skip-action button:hover:before{left:100%}#skip-action button:hover,#skip-action button:focus{color:var(--text-primary);background:rgba(255,255,255,.05);transform:translateY(-1px)}#summary{max-width:48rem;margin:3rem auto;padding:3rem;background:rgba(255,255,255,.05);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-lg);box-shadow:var(--shadow-large);animation:slide-in-from-bottom .8s cubic-bezier(.34,1.56,.64,1);position:relative;overflow:hidden}#summary:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--primary-gradient)}#summary img{display:block;width:10rem;height:10rem;object-fit:contain;margin:0 auto 2rem;padding:1.5rem;filter:drop-shadow(0 12px 32px rgba(102,126,234,.4));border:2px solid rgba(255,255,255,.1);border-radius:50%;background:rgba(255,255,255,.05);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:var(--transition-slow)}#summary img:hover{transform:scale(1.05) rotate(5deg);border-color:#667eea4d}#summary h2{font-family:Inter,sans-serif;font-size:3.5rem;text-align:center;margin:0 0 2rem;background:var(--primary-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:700}#summary ol{list-style:none;margin:3rem auto;padding:0;text-align:center}#summary li{margin:2.5rem 0;padding:2rem;background:rgba(255,255,255,.03);border-radius:var(--radius-md);border:1px solid rgba(255,255,255,.05);transition:var(--transition-fast)}#summary li:hover{background:rgba(255,255,255,.05);transform:translateY(-2px)}#summary h3{font-family:Inter,sans-serif;font-size:1rem;margin:0 auto 1rem;display:inline-flex;justify-content:center;align-items:center;background:var(--primary-gradient);color:#fff;width:2.5rem;height:2.5rem;border-radius:50%;font-weight:600}#summary .question{margin:.5rem 0;font-size:1.1rem;color:var(--text-primary);font-weight:500}#summary .user-answer{margin:.5rem 0;font-family:Inter,sans-serif;font-weight:600;font-size:1rem}#summary .user-answer.correct{color:#43e97b}#summary .user-answer.wrong{color:#fa709a}#summary .user-answer.skipped{color:var(--text-muted);font-weight:500}#summary-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;width:80%;margin:3rem auto;padding:2rem 0;border-top:1px solid rgba(255,255,255,.1)}#summary-stats p{display:flex;flex-direction:column;align-items:center;margin:0;padding:1.5rem;background:rgba(255,255,255,.03);border-radius:var(--radius-md);border:1px solid rgba(255,255,255,.05);transition:var(--transition-fast)}#summary-stats p:hover{background:rgba(255,255,255,.05);transform:translateY(-3px)}#summary-stats .number{font-family:Inter,sans-serif;font-size:3.5rem;font-weight:700;background:var(--primary-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1}#summary-stats .text{font-family:Inter,sans-serif;text-transform:uppercase;font-size:.85rem;color:var(--text-muted);margin-top:.5rem;letter-spacing:.1rem;font-weight:500}@keyframes slide-in-from-bottom{0%{opacity:0;transform:translateY(30px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@media (max-width: 768px){body{padding:1rem}header h1{font-size:2.5rem}#quiz{padding:2rem 1.5rem;margin:2rem auto}#answers{grid-template-columns:1fr}#summary-stats{grid-template-columns:1fr;width:100%}#summary h2{font-size:2.5rem}}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:rgba(255,255,255,.05)}::-webkit-scrollbar-thumb{background:var(--primary-gradient);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--secondary-gradient)}.main_el{margin:3rem 0;text-align:center;position:relative;perspective:1000px}.main_el:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:200px;height:200px;background:var(--primary-gradient);border-radius:50%;filter:blur(60px);opacity:.15;z-index:-1;animation:pulseGlow 4s ease-in-out infinite}@keyframes pulseGlow{0%,to{opacity:.1;transform:translate(-50%,-50%) scale(1)}50%{opacity:.2;transform:translate(-50%,-50%) scale(1.1)}}.main_el img{width:4rem;height:4rem;filter:drop-shadow(0 8px 24px rgba(102,126,234,.4));transition:all .5s cubic-bezier(.34,1.56,.64,1);animation:floatLogo 6s ease-in-out infinite;position:relative;z-index:2}@keyframes floatLogo{0%,to{transform:translate(0) translateY(0) rotate(0) scale(1)}25%{transform:translate(-8px) translateY(-5px) rotate(-2deg) scale(1.05)}50%{transform:translate(0) translateY(-8px) rotate(0) scale(1.1)}75%{transform:translate(8px) translateY(-5px) rotate(2deg) scale(1.05)}}.main_el img:hover{transform:scale(1.15) rotate(8deg);filter:drop-shadow(0 12px 32px rgba(102,126,234,.6));animation-play-state:paused}.main_el h1{font-family:Inter,sans-serif;font-weight:700;font-size:3.5rem;letter-spacing:.3rem;margin:1.5rem 0 0;text-transform:uppercase;background:var(--primary-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;position:relative;display:inline-block;animation:floatTitle 8s ease-in-out infinite;text-shadow:0 0 30px rgba(102,126,234,.3)}@keyframes floatTitle{0%,to{transform:translate(0) translateY(0) scale(1)}33%{transform:translate(5px) translateY(-3px) scale(1.02)}66%{transform:translate(-5px) translateY(3px) scale(.98)}}.main_el h1:after{content:"";position:absolute;bottom:-10px;left:50%;transform:translate(-50%);width:100px;height:3px;background:var(--primary-gradient);border-radius:2px;animation:slideLine 3s ease-in-out infinite}@keyframes slideLine{0%,to{width:100px;opacity:1}50%{width:150px;opacity:.7}}#answers{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:1rem;perspective:1000px}.answer{position:relative;transform-style:preserve-3d}.answer button{display:flex;align-items:center;justify-content:center;width:100%;font-family:Inter,sans-serif;font-size:1rem;font-weight:500;padding:1.5rem 2rem;border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-md);background:rgba(255,255,255,.05);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast);position:relative;overflow:hidden;transform-style:preserve-3d}.answer:nth-child(1) button{animation:answerSlideIn .8s cubic-bezier(.34,1.56,.64,1) .1s both}.answer:nth-child(2) button{animation:answerSlideIn .8s cubic-bezier(.34,1.56,.64,1) .2s both}.answer:nth-child(3) button{animation:answerSlideIn .8s cubic-bezier(.34,1.56,.64,1) .3s both}.answer:nth-child(4) button{animation:answerSlideIn .8s cubic-bezier(.34,1.56,.64,1) .4s both}@keyframes answerSlideIn{0%{opacity:0;transform:translateY(40px) rotateX(-15deg) scale(.9)}to{opacity:1;transform:translateY(0) rotateX(0) scale(1)}}.answer:nth-child(1) button{position:relative}.answer:nth-child(1) button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(102,126,234,.1),transparent);transition:left .6s ease}.answer:nth-child(1):hover button:before{left:100%}.answer:nth-child(2) button{position:relative}.answer:nth-child(2) button:after{content:"";position:absolute;top:-100%;left:0;width:100%;height:100%;background:linear-gradient(180deg,transparent,rgba(245,87,108,.1),transparent);transition:top .6s ease}.answer:nth-child(2):hover button:after{top:100%}.answer:nth-child(3) button{background:radial-gradient(circle at 0% 50%,rgba(79,172,254,.05),transparent 50%),rgba(255,255,255,.05);transition:all .4s ease}.answer:nth-child(3):hover button{background:radial-gradient(circle at 100% 50%,rgba(79,172,254,.1),transparent 50%),rgba(255,255,255,.08)}.answer:nth-child(4) button{background:radial-gradient(circle at 100% 0%,rgba(67,233,123,.05),transparent 50%),rgba(255,255,255,.05);transition:all .4s ease}.answer:nth-child(4):hover button{background:radial-gradient(circle at 0% 100%,rgba(67,233,123,.1),transparent 50%),rgba(255,255,255,.08)}.answer:nth-child(1):hover button{animation:textGlow1 .6s ease-out}.answer:nth-child(2):hover button{animation:textGlow2 .6s ease-out}.answer:nth-child(3):hover button{animation:textGlow3 .6s ease-out}.answer:nth-child(4):hover button{animation:textGlow4 .6s ease-out}@keyframes textGlow1{0%,to{color:var(--text-secondary);text-shadow:0 0 0 rgba(102,126,234,0)}50%{color:#667eea;text-shadow:0 0 15px rgba(102,126,234,.6)}}@keyframes textGlow2{0%,to{color:var(--text-secondary);text-shadow:0 0 0 rgba(245,87,108,0)}50%{color:#f5576c;text-shadow:0 0 15px rgba(245,87,108,.6)}}@keyframes textGlow3{0%,to{color:var(--text-secondary);text-shadow:0 0 0 rgba(79,172,254,0)}50%{color:#4facfe;text-shadow:0 0 15px rgba(79,172,254,.6)}}@keyframes textGlow4{0%,to{color:var(--text-secondary);text-shadow:0 0 0 rgba(67,233,123,0)}50%{color:#43e97b;text-shadow:0 0 15px rgba(67,233,123,.6)}}.answer button{position:relative}.answer:nth-child(1) button{animation:textFloat1 4s ease-in-out infinite}.answer:nth-child(2) button{animation:textFloat2 4s ease-in-out infinite 1s}.answer:nth-child(3) button{animation:textFloat3 4s ease-in-out infinite 2s}.answer:nth-child(4) button{animation:textFloat4 4s ease-in-out infinite 3s}@keyframes textFloat1{0%,to{transform:translateY(0) rotate(0)}25%{transform:translateY(-2px) rotate(-.5deg)}75%{transform:translateY(1px) rotate(.3deg)}}@keyframes textFloat2{0%,to{transform:translateY(0) rotate(0)}25%{transform:translateY(1px) rotate(.4deg)}75%{transform:translateY(-1px) rotate(-.2deg)}}@keyframes textFloat3{0%,to{transform:translateY(0) rotate(0)}25%{transform:translateY(-1px) rotate(.2deg)}75%{transform:translateY(2px) rotate(-.3deg)}}@keyframes textFloat4{0%,to{transform:translateY(0) rotate(0)}25%{transform:translateY(2px) rotate(-.4deg)}75%{transform:translateY(-2px) rotate(.5deg)}}.answer button.selected{animation:selectedPulse .6s ease-out!important;background:var(--primary-gradient);border-color:transparent;color:#fff;transform:translateY(-2px) scale(1.02);box-shadow:0 12px 40px #667eea66}@keyframes selectedPulse{0%{transform:translateY(0) scale(1);box-shadow:0 8px 32px #667eea33}50%{transform:translateY(-4px) scale(1.05);box-shadow:0 16px 48px #667eea99}to{transform:translateY(-2px) scale(1.02);box-shadow:0 12px 40px #667eea66}}.answer button.correct{animation:correctAnswer .8s ease-out!important;background:var(--success-gradient);border-color:transparent;color:#fff}@keyframes correctAnswer{0%{transform:scale(1);filter:hue-rotate(0deg)}25%{transform:scale(1.1) rotate(3deg);filter:hue-rotate(90deg)}50%{transform:scale(1.05) rotate(-2deg);filter:hue-rotate(180deg)}75%{transform:scale(1.08) rotate(1deg);filter:hue-rotate(270deg)}to{transform:scale(1);filter:hue-rotate(360deg)}}.answer button.wrong{animation:wrongAnswer .6s ease-out!important;background:var(--warning-gradient);border-color:transparent;color:#fff}@keyframes wrongAnswer{0%,20%,40%,60%,80%{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-4px)}to{transform:translate(0)}}@media (max-width: 768px){#answers{grid-template-columns:1fr;gap:.8rem}.answer button{padding:1.2rem 1.5rem;font-size:.9rem}@keyframes textFloat1{0%,to{transform:translateY(0) rotate(0)}25%{transform:translateY(-1px) rotate(-.3deg)}75%{transform:translateY(1px) rotate(.2deg)}}@keyframes textFloat2{0%,to{transform:translateY(0) rotate(0)}25%{transform:translateY(-1px) rotate(-.3deg)}75%{transform:translateY(1px) rotate(.2deg)}}@keyframes textFloat3{0%,to{transform:translateY(0) rotate(0)}25%{transform:translateY(-1px) rotate(-.3deg)}75%{transform:translateY(1px) rotate(.2deg)}}@keyframes textFloat4{0%,to{transform:translateY(0) rotate(0)}25%{transform:translateY(-1px) rotate(-.3deg)}75%{transform:translateY(1px) rotate(.2deg)}}}