:root{--color-wood: #8faa7f;--color-fire: #d49494;--color-earth: #c9b690;--color-metal: #a8b5c1;--color-water: #98b4c4;--color-primary: #96a389;--color-secondary: #d8b4b8;--color-accent: #e0ccb0;--color-soft-pink: #f0e8ea;--color-sage: #b8c0b2;--color-cream: #faf8f4;--color-lavender: #eae6f0;--color-bg: linear-gradient(135deg, #faf8f4 0%, #f0e8ea 30%, #eae6f0 70%, #e8f0ec 100%);--color-card-bg: rgba(255, 255, 255, .95);--color-text: #3d4a41;--color-text-light: #5a6b5e;--color-text-dark: #2a3a2e;--border-radius: 20px;--border-radius-small: 14px;--box-shadow: 0 6px 25px rgba(150, 163, 137, .2);--box-shadow-hover: 0 10px 35px rgba(150, 163, 137, .28);--transition-normal: all .4s cubic-bezier(.25, .46, .45, .94);--transition-bounce: all .6s cubic-bezier(.68, -.6, .32, 1.6)}*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:Inter,Georgia,Times New Roman,serif;background:var(--color-bg);color:var(--color-text);line-height:1.7;min-height:100vh;display:flex;flex-direction:column;padding:1.5rem;position:relative}body:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background-image:radial-gradient(circle at 25% 75%,rgba(150,163,137,.06) 0%,transparent 60%),radial-gradient(circle at 75% 25%,rgba(216,180,184,.06) 0%,transparent 60%),radial-gradient(circle at 50% 50%,rgba(224,204,176,.04) 0%,transparent 70%);pointer-events:none;z-index:-1}.container{max-width:850px;margin:1.5rem auto;padding:0;position:relative}.card{background:var(--color-card-bg);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:var(--border-radius);box-shadow:var(--box-shadow);padding:3rem;margin-bottom:2rem;border:1px solid rgba(150,163,137,.15);transition:var(--transition-normal);animation:fadeInUp .6s ease-out;position:relative;overflow:hidden}.card:before{content:"";position:absolute;top:-25px;right:-25px;width:80px;height:80px;background:radial-gradient(circle,rgba(150,163,137,.05) 0%,transparent 70%);border-radius:50%;pointer-events:none}.card:after{content:"";position:absolute;bottom:-15px;left:-15px;width:50px;height:50px;background:radial-gradient(circle,rgba(216,180,184,.05) 0%,transparent 70%);border-radius:50%;pointer-events:none}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.card:hover{transform:translateY(-3px);box-shadow:var(--box-shadow-hover)}button{cursor:pointer;background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-sage) 100%);color:#fff;border:none;padding:1rem 2rem;border-radius:var(--border-radius);font-size:1rem;font-weight:500;transition:var(--transition-normal);box-shadow:0 4px 15px #96a3894d;position:relative;overflow:hidden;letter-spacing:.3px;font-family:inherit}button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #96a38966;background:linear-gradient(135deg,var(--color-sage) 0%,var(--color-primary) 100%)}button:active{transform:translateY(0)}button:after{content:"";position:absolute;top:50%;left:50%;width:5px;height:5px;background:#ffffff80;opacity:0;border-radius:100%;transform:scale(1) translate(-50%);transform-origin:50% 50%}button:hover:after{animation:ripple 1s ease-out}@keyframes ripple{0%{transform:scale(0);opacity:.5}to{transform:scale(100);opacity:0}}input,textarea{width:100%;padding:1rem;margin-bottom:1.5rem;border:1px solid rgba(150,163,137,.25);border-radius:var(--border-radius-small);font-family:inherit;font-size:1rem;transition:var(--transition-normal);background:#fffffff2;color:var(--color-text)}input:focus,textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px #96a38926;background:#fff}h1{font-size:2.4rem;margin-bottom:2rem;color:var(--color-text-dark);font-weight:600;background:linear-gradient(135deg,var(--color-primary),var(--color-sage));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-align:center;letter-spacing:-.3px;font-family:Georgia,serif}h2{font-size:1.6rem;margin-bottom:2rem;font-weight:500;color:var(--color-text-dark);text-align:center;line-height:1.4}h3{font-size:1.3rem;margin-bottom:1.5rem;font-weight:500;color:var(--color-text)}p{margin-bottom:1.5rem;color:var(--color-text-light);line-height:1.8;font-size:1.05rem}.quiz-option{display:block;padding:1.5rem;margin-bottom:1rem;border:1px solid rgba(150,163,137,.2);border-radius:var(--border-radius-small);cursor:pointer;transition:var(--transition-normal);position:relative;overflow:hidden;background:#fffc;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);font-size:1rem;line-height:1.6;color:var(--color-text)}.quiz-option:hover{background:var(--color-soft-pink);transform:translateY(-1px);box-shadow:0 4px 15px #96a38926;border-color:var(--color-secondary)}.quiz-option.selected{background:linear-gradient(135deg,var(--color-primary),var(--color-sage));color:#fff;border-color:var(--color-primary);transform:translateY(-2px);box-shadow:0 6px 20px #96a3894d}.progress-container{margin-bottom:2.5rem;position:relative}.progress-bar{height:10px;background:#96a38926;border-radius:100px;overflow:hidden;position:relative}.progress-bar:before{content:"";position:absolute;top:0;left:0;height:100%;width:var(--progress, 0%);background:linear-gradient(to right,var(--color-primary),var(--color-sage),var(--color-secondary));border-radius:100px;transition:width .6s ease}.progress-text{text-align:center;font-size:.95rem;color:var(--color-text-light);margin-bottom:1.5rem;font-weight:500}.options-container{display:flex;flex-direction:column;gap:.8rem;margin-top:1.5rem}.question-container{transition:var(--transition-normal);margin-bottom:1rem}.fade-in{opacity:1;transform:translateY(0)}.fade-out{opacity:0;transform:translateY(15px)}.user-form{animation:fadeInUp .6s ease-out;text-align:center}.form-group{margin-bottom:1.8rem;text-align:left}.form-group label{display:block;margin-bottom:.7rem;font-weight:500;color:var(--color-text-dark);font-size:1rem}.results-button-container{display:flex;justify-content:space-between;margin-top:2.5rem;gap:1.5rem}.secondary-button{background:linear-gradient(135deg,var(--color-text-light),var(--color-text))!important;box-shadow:0 4px 15px #5a6b5e4d!important}.secondary-button:hover{box-shadow:0 6px 20px #5a6b5e66!important;background:linear-gradient(135deg,var(--color-text),var(--color-text-light))!important}@media (max-width: 768px){.container{margin:1rem auto;padding:0}.card{padding:2rem;margin-bottom:1.5rem}h1{font-size:2rem}h2{font-size:1.4rem}.quiz-option{padding:1.3rem;font-size:.95rem}.results-button-container{flex-direction:column;gap:1rem}.results-button-container button{width:100%}}