.quiz-container{min-height:100vh;display:flex;flex-direction:column;background:linear-gradient(135deg,#667eea,#764ba2);padding:0}.progress-bar{height:16px;background:rgba(255,255,255,.2);position:relative;overflow:hidden;border-radius:0 0 8px 8px}.progress-fill{height:100%;background:linear-gradient(90deg,#58cc02,#58cc02);transition:width .5s ease;box-shadow:0 2px 8px rgba(88,204,2,.4)}.question-counter{text-align:center;color:white;font-size:14px;font-weight:600;padding:20px 0 10px;letter-spacing:.5px;text-transform:uppercase;opacity:.9}.content{flex:1 1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;max-width:800px;width:100%;margin:0 auto;position:relative}.hero-container{position:absolute;top:-100px;left:-140px;z-index:10;transition:opacity .3s ease}.hero-container svg{filter:drop-shadow(0 4px 8px rgba(0,0,0,.1))}.hero-speech-bubble{position:absolute;top:20px;left:230px;background:white;padding:12px 18px;border-radius:20px;font-size:16px;font-weight:700;color:#3c3c3c;box-shadow:0 4px 12px rgba(0,0,0,.15);white-space:nowrap;z-index:5}.hero-speech-bubble:before{content:"";position:absolute;left:-10px;top:50%;transform:translateY(-50%);width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent;border-right:10px solid white}.question-section{width:100%;margin-bottom:40px}.question{color:white;font-size:32px;font-weight:700;text-align:center;line-height:1.4;margin:0;text-shadow:0 2px 4px rgba(0,0,0,.1)}.answers-section{flex-direction:column}.answer-option,.answers-section{width:100%;display:flex;gap:16px}.answer-option{align-items:center;padding:20px 24px;background:white;border:3px solid #e5e5e5;border-radius:16px;cursor:pointer;transition:all .2s ease;font-size:18px;font-weight:600;color:#3c3c3c;text-align:left;position:relative;overflow:hidden}.answer-option:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.15);border-color:#d0d0d0}.answer-option:active:not(:disabled){transform:translateY(0)}.answer-option.selected{border-color:#1cb0f6;background:#e3f2fd}.answer-option.correct{border-color:#58cc02;background:#d7f7c2;animation:correctPulse .4s ease}.answer-option.incorrect{border-color:#ff4b4b;background:#ffd5d5;animation:shake .4s ease}.answer-option:disabled{cursor:not-allowed}.answer-letter{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:#e5e5e5;border-radius:12px;font-weight:700;font-size:16px;color:#3c3c3c;flex-shrink:0}.answer-option.selected .answer-letter{background:#1cb0f6;color:white}.answer-option.correct .answer-letter{background:#58cc02;color:white}.answer-option.incorrect .answer-letter{background:#ff4b4b;color:white}.answer-text{flex:1 1;font-size:20px}.answer-icon{font-size:28px;font-weight:700;margin-left:auto}.bottom-section{background:white;border-top:2px solid #e5e5e5;padding:24px}.feedback{display:flex;gap:16px;align-items:center;padding:20px;border-radius:16px;margin-bottom:20px;animation:slideUp .3s ease}.correct-feedback{background:#d7f7c2;border:2px solid #58cc02}.incorrect-feedback{background:#ffd5d5;border:2px solid #ff4b4b}.feedback-icon{font-size:48px}.feedback-text h3{margin:0 0 8px;font-size:24px;font-weight:700;color:#3c3c3c}.feedback-text p{margin:0;font-size:16px;color:#5c5c5c}.explanation{margin-top:12px}.correct-answer{margin:0 0 12px!important;padding:10px 14px;background:rgba(255,255,255,.6);border-radius:8px;font-size:16px!important;color:#2c3e50!important;border-left:4px solid #ff4b4b}.correct-answer strong{color:#dc2626}.explanation-text{margin:0!important;padding:12px 14px;background:rgba(255,255,255,.4);border-radius:8px;font-size:15px!important;line-height:1.6;color:#3c3c3c!important;border-left:4px solid #94a3b8;overflow:auto;max-width:100%;word-wrap:break-word;overflow-wrap:break-word}.explanation-text img{max-width:100%!important;height:auto!important;display:block;margin:.5em 0}.explanation-text *{max-width:100%;overflow-wrap:break-word;word-wrap:break-word}.action-buttons{display:flex;justify-content:flex-end;max-width:800px;margin:0 auto}.check-button,.continue-button{padding:16px 48px;border:none;border-radius:16px;font-size:16px;font-weight:700;text-transform:uppercase;cursor:pointer;transition:all .2s ease;letter-spacing:1px;min-width:180px}.check-button{background:#58cc02;color:white;box-shadow:0 4px 0 #46a302,0 8px 16px rgba(88,204,2,.3)}.check-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 0 #46a302,0 12px 20px rgba(88,204,2,.4)}.check-button:active:not(:disabled){transform:translateY(2px);box-shadow:0 2px 0 #46a302,0 4px 8px rgba(88,204,2,.3)}.check-button:disabled{background:#e5e5e5;color:#afafaf;cursor:not-allowed;box-shadow:none}.continue-button{background:#1cb0f6;color:white;box-shadow:0 4px 0 #1899d6,0 8px 16px rgba(28,176,246,.3)}.continue-button:hover{transform:translateY(-2px);box-shadow:0 6px 0 #1899d6,0 12px 20px rgba(28,176,246,.4)}.continue-button:active{transform:translateY(2px);box-shadow:0 2px 0 #1899d6,0 4px 8px rgba(28,176,246,.3)}@keyframes correctPulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes shake{0%,to{transform:translateX(0)}20%,60%{transform:translateX(-10px)}40%,80%{transform:translateX(10px)}}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}@media (max-width:768px){.hero-container{top:-80px;left:50%;transform:translateX(-50%) scale(.75)}.hero-container svg{filter:drop-shadow(0 2px 6px rgba(0,0,0,.1))}.hero-speech-bubble{left:50%;transform:translateX(-50%);top:170px;font-size:14px;padding:10px 16px}.hero-speech-bubble:before{left:50%;top:-10px;transform:translateX(-50%) rotate(90deg)}.question{font-size:24px}.answer-option{padding:16px 20px}.answer-text{font-size:18px}.answer-letter{width:36px;height:36px;font-size:14px}.check-button,.continue-button{padding:14px 32px;font-size:14px;min-width:150px}.feedback-icon{font-size:36px}.feedback-text h3{font-size:20px}.feedback-text p{font-size:14px}.correct-answer{font-size:14px!important;padding:8px 12px}.explanation-text{font-size:14px!important;padding:10px 12px}}@media (max-width:480px){.hero-container{top:-70px;left:50%;transform:translateX(-50%) scale(.6)}.hero-speech-bubble{font-size:12px;padding:8px 12px;top:140px}.content{padding:20px 16px}.question{font-size:20px}.answer-option{padding:14px 16px;gap:12px}.answer-text{font-size:16px}.bottom-section{padding:16px}.correct-answer,.explanation-text{font-size:13px!important;padding:8px 10px}}