:root{--bg: #FDF4E3;--card-bg: #FFFFFF;--primary: #FF6B6B;--primary-hover: #EE5253;--secondary: #4ECDC4;--accent: #FFE66D;--text: #2D3436;--text-secondary: #636E72;--success: #2ECC71;--error: #FF4757;--border: #2D3436;--shadow: 4px 4px 0px #2D3436;--radius: 20px}body{margin:0;font-family:Comic Sans MS,Chalkboard SE,Comic Neue,sans-serif;background-color:var(--bg);background-image:radial-gradient(var(--secondary) 1.5px,transparent 1.5px);background-size:24px 24px;color:var(--text);line-height:1.6}#root{width:100%;min-height:100vh;display:flex;justify-content:center}.app-container{width:100%;max-width:100%;min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:1rem;box-sizing:border-box}.app-header{margin-bottom:2rem;text-align:center;background:transparent;border:none}.app-header h1{font-size:3rem;margin:0;color:var(--primary);text-shadow:2px 2px 0px #2D3436;letter-spacing:2px;transform:rotate(-2deg)}.main-content{width:100%;max-width:600px;display:flex;flex-direction:column}.card{background:var(--card-bg);border-radius:var(--radius);padding:2rem;border:4px solid var(--border);box-shadow:var(--shadow);transition:transform .2s;position:relative}.card:hover{transform:translateY(-2px)}.progress-bar-container{margin-bottom:1.5rem;background:#fff;padding:.5rem;border:3px solid var(--border);border-radius:15px;box-shadow:2px 2px 0 var(--border)}.progress-info{display:flex;justify-content:space-between;font-size:1rem;font-weight:700;color:var(--text);margin-bottom:.5rem}.progress-track{height:16px;background:#eee;border-radius:8px;overflow:hidden;border:2px solid var(--border)}.progress-fill{height:100%;background:var(--secondary);transition:width .3s cubic-bezier(.175,.885,.32,1.275)}.question-text{font-size:1.5rem;margin-top:0;margin-bottom:2rem;text-align:center;color:var(--text)}.options-grid{display:grid;gap:1rem}.option-btn{width:100%;padding:1rem 1.5rem;text-align:left;border:3px solid var(--border);border-radius:15px;background:#fff;color:var(--text);cursor:pointer;font-size:1.1rem;font-weight:700;font-family:inherit;box-shadow:2px 2px 0 var(--border);transition:all .1s;position:relative;top:0}.option-btn:hover:not(:disabled){background:var(--accent);transform:translateY(-2px);box-shadow:4px 4px 0 var(--border)}.option-btn:active:not(:disabled){transform:translateY(2px);box-shadow:0 0 0 var(--border)}.option-btn.correct{border-color:var(--border);background:var(--success);color:#fff;box-shadow:none;transform:translateY(2px)}.option-btn.incorrect{border-color:var(--border);background:var(--error);color:#fff;box-shadow:none;transform:translateY(2px);opacity:.8}.option-btn:disabled{cursor:default}.footer-actions{margin-top:2rem;padding-top:0;border:none;display:flex;flex-direction:column;gap:1rem;align-items:center}.feedback{font-size:1.5rem;font-weight:800;text-transform:uppercase;letter-spacing:1px;padding:.5rem 1rem;border-radius:10px;border:3px solid var(--border);background:#fff;box-shadow:2px 2px 0 var(--border);margin-bottom:1rem}.text-success{color:var(--success);border-color:var(--success)}.text-error{color:var(--error);border-color:var(--error)}.primary-btn{background:var(--primary);color:#fff;border:3px solid var(--border);padding:1rem 2rem;border-radius:50px;font-weight:800;cursor:pointer;width:auto;min-width:200px;font-size:1.25rem;font-family:inherit;box-shadow:4px 4px 0 var(--border);transition:all .1s;text-transform:uppercase}.primary-btn:hover{background:var(--primary-hover);transform:translateY(-2px);box-shadow:6px 6px 0 var(--border)}.primary-btn:active{transform:translateY(4px);box-shadow:0 0 0 var(--border)}.text-btn{background:none;border:none;padding:.5rem;color:var(--text-secondary);cursor:pointer;font-weight:700;font-size:.9rem;font-family:inherit;text-decoration:none;border-bottom:2px dashed var(--text-secondary)}.text-btn:hover{color:var(--error);border-color:var(--error)}.results-card{text-align:center;border-color:var(--primary)}.score-circle{width:150px;height:150px;border-radius:50%;border:5px solid var(--border);background:var(--accent);display:flex;align-items:center;justify-content:center;margin:2rem auto;font-size:2.5rem;font-weight:900;color:var(--text);box-shadow:6px 6px 0 var(--border);transform:rotate(5deg)}.loading{font-size:2rem;font-weight:700;text-align:center;margin-top:5rem;color:var(--primary);animation:bounce 1s infinite alternate}@keyframes bounce{0%{transform:translateY(0)}to{transform:translateY(-20px)}}