.app{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;background:linear-gradient(135deg,#667eea,#764ba2,#f093fb);position:relative;overflow:hidden}.app:before{content:"";position:absolute;width:500px;height:500px;background:radial-gradient(circle,rgba(255,255,255,.1) 0%,transparent 70%);border-radius:50%;top:-250px;right:-250px;animation:float 8s ease-in-out infinite}.app:after{content:"";position:absolute;width:400px;height:400px;background:radial-gradient(circle,rgba(255,255,255,.08) 0%,transparent 70%);border-radius:50%;bottom:-200px;left:-200px;animation:float 10s ease-in-out infinite reverse}@keyframes float{0%,to{transform:translateY(0) scale(1)}50%{transform:translateY(-20px) scale(1.05)}}.start-page{width:100%;max-width:600px;animation:fadeIn .5s ease-in;position:relative;z-index:1}.start-content{background:#fffffff2;border-radius:32px;padding:56px 40px;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 20px 60px #0000004d;border:2px solid rgba(255,255,255,.8)}.title-section{margin-bottom:48px}.main-title{font-size:2.8em;margin-bottom:16px;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:800;letter-spacing:-1px}.subtitle{font-size:1.2em;color:#666;margin:0;font-weight:500}.intro-section{display:flex;gap:20px;margin-bottom:48px;flex-wrap:wrap;justify-content:center}.intro-card{flex:1;min-width:150px;padding:24px;background:linear-gradient(135deg,#667eea1a,#764ba21a);border-radius:20px;border:2px solid rgba(102,126,234,.2);transition:transform .3s,box-shadow .3s}.intro-card:hover{transform:translateY(-5px);box-shadow:0 10px 30px #667eea33}.intro-card .emoji{font-size:2.5em;margin-bottom:12px}.intro-card p{margin:0;font-size:.95em;color:#555;font-weight:500}.start-button{width:100%;padding:18px 40px;font-size:1.3em;font-weight:700;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:16px;cursor:pointer;transition:all .3s;display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:32px;box-shadow:0 10px 30px #667eea66}.start-button:hover{transform:translateY(-3px);box-shadow:0 15px 40px #667eea80}.start-button:active{transform:translateY(-1px)}.start-button .arrow{transition:transform .3s;font-size:1.2em}.start-button:hover .arrow{transform:translate(6px)}.footer-info{display:flex;flex-direction:column;gap:10px;color:#888;font-size:1em}.question-page{width:100%;max-width:750px;animation:fadeIn .5s ease-in;position:relative;z-index:1}.question-content{background:#fffffff2;border-radius:32px;padding:48px 40px;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 20px 60px #0000004d;border:2px solid rgba(255,255,255,.8)}.progress-section{margin-bottom:40px}.progress-bar{height:10px;background:#667eea33;border-radius:10px;overflow:hidden;margin-bottom:16px;box-shadow:inset 0 2px 4px #0000001a}.progress-fill{height:100%;background:linear-gradient(90deg,#667eea,#764ba2);transition:width .4s ease;border-radius:10px;box-shadow:0 2px 10px #667eea80}.progress-text{text-align:center;color:#666;font-size:1em;font-weight:600}.question-section{margin-bottom:40px}.question-title{font-size:1.6em;line-height:1.5;margin:0;color:#2d3748;font-weight:700;text-align:center}.options-section{display:flex;flex-direction:column;gap:20px;margin-bottom:32px}.option-button{width:100%;padding:24px 28px;background:linear-gradient(135deg,#ffffffe6,#fffc);border:3px solid rgba(102,126,234,.3);border-radius:20px;cursor:pointer;transition:all .3s;display:flex;align-items:center;gap:20px;text-align:left;color:#2d3748;font-size:1.1em;font-weight:600;box-shadow:0 4px 15px #0000001a}.option-button:hover{background:linear-gradient(135deg,#667eea33,#764ba233);border-color:#667eea;transform:translate(8px) scale(1.02);box-shadow:0 8px 25px #667eea4d}.option-button:active{transform:translate(4px) scale(1)}.option-letter{width:40px;height:40px;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0;color:#fff;font-size:1.1em;box-shadow:0 4px 15px #667eea66}.option-text{flex:1;line-height:1.5}.back-button{padding:14px 28px;background:#fffc;border:2px solid rgba(102,126,234,.3);border-radius:14px;color:#667eea;cursor:pointer;transition:all .3s;font-weight:600;font-size:1em}.back-button:hover{background:#667eea1a;border-color:#667eea;transform:translate(-4px)}.result-page{width:100%;max-width:750px;animation:fadeIn .5s ease-in;position:relative;z-index:1}.result-content{background:#fffffff2;border-radius:32px;padding:56px 40px;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 20px 60px #0000004d;border:2px solid rgba(255,255,255,.8)}.result-header{text-align:center;margin-bottom:48px;padding:32px;background:linear-gradient(135deg,#667eea1a,#764ba21a);border-radius:24px;border:2px solid rgba(102,126,234,.2)}.animal-emoji{font-size:6em;margin-bottom:20px;animation:bounceIn .8s ease-out;filter:drop-shadow(0 8px 20px rgba(0,0,0,.15))}.animal-name{font-size:2.8em;margin:0 0 16px;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:800}.mbti-badge{display:inline-block;padding:10px 24px;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:24px;font-weight:700;font-size:1.2em;margin-bottom:16px;box-shadow:0 6px 20px #667eea66;letter-spacing:2px}.personality-title{font-size:1.4em;color:#555;margin:12px 0 0;font-weight:600}.result-section{margin-bottom:40px;text-align:left;padding:24px;background:linear-gradient(135deg,#fff9,#fff6);border-radius:20px;border:2px solid rgba(102,126,234,.15)}.section-title{font-size:1.4em;margin-bottom:20px;display:flex;align-items:center;gap:12px;color:#2d3748;font-weight:700}.description{font-size:1.1em;line-height:1.9;color:#4a5568;margin:0;font-weight:500}.traits-grid{display:flex;flex-wrap:wrap;gap:14px}.trait-tag{padding:10px 20px;background:linear-gradient(135deg,#667eea40,#764ba240);border:2px solid rgba(102,126,234,.4);border-radius:24px;font-size:1em;color:#667eea;font-weight:700;box-shadow:0 4px 12px #667eea33;transition:all .3s}.trait-tag:hover{transform:translateY(-3px);box-shadow:0 6px 18px #667eea4d}.list{margin:0;padding-left:28px;line-height:2;color:#4a5568}.list li{margin-bottom:12px;font-size:1.05em;font-weight:500}.careers-grid{display:flex;flex-wrap:wrap;gap:14px}.career-tag{padding:10px 20px;background:#667eea1a;border:2px solid rgba(102,126,234,.25);border-radius:24px;font-size:1em;color:#555;font-weight:600;transition:all .3s}.career-tag:hover{background:#667eea33;border-color:#667eea66;transform:translateY(-2px)}.result-actions{margin:40px 0 32px;display:flex;justify-content:center}.restart-button{padding:16px 40px;font-size:1.2em;font-weight:700;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:16px;cursor:pointer;transition:all .3s;box-shadow:0 10px 30px #667eea66}.restart-button:hover{transform:translateY(-3px);box-shadow:0 15px 40px #667eea80}.restart-button:active{transform:translateY(-1px)}.share-tip{text-align:center;color:#888;font-size:1em;padding-top:32px;border-top:2px solid rgba(102,126,234,.2)}.share-tip p{margin:0;font-weight:600}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes bounceIn{0%{transform:scale(0)}50%{transform:scale(1.1)}to{transform:scale(1)}}@media (max-width: 768px){.start-content,.question-content,.result-content{padding:32px 24px}.main-title{font-size:2em}.animal-emoji{font-size:4em}.animal-name{font-size:2em}.intro-section{flex-direction:column}.intro-card{min-width:100%}}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}