:root{--bg-color: #0f172a;--text-color: #f8fafc;--card-bg: rgba(30, 41, 59, .7);--primary: #8b5cf6;--secondary: #ec4899;--accent: #38bdf8;--font-main: "Inter", system-ui, -apple-system, sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-main);background-color:var(--bg-color);color:var(--text-color);line-height:1.6;display:flex;justify-content:center;align-items:center;min-height:100vh;margin:0;overflow-x:hidden;background-image:radial-gradient(circle at 20% 20%,rgba(139,92,246,.15) 0%,transparent 40%),radial-gradient(circle at 80% 80%,rgba(236,72,153,.15) 0%,transparent 40%)}#root{width:100%;max-width:600px;padding:20px}.container{width:100%;display:flex;flex-direction:column;align-items:center}.card{background:var(--card-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:24px;border:1px solid rgba(255,255,255,.1);padding:2rem;width:100%;box-shadow:0 8px 32px #0000004d;animation:fadeIn .6s ease-out;display:flex;flex-direction:column;align-items:center}.card-image{width:100%;height:250px;object-fit:cover;border-radius:16px;margin-bottom:1.5rem;box-shadow:0 4px 12px #0003;transition:transform .3s ease}.card-image:hover{transform:scale(1.02)}.story-text{font-size:1.1rem;margin-bottom:1rem;text-align:center;color:#e2e8f0}.question-text{font-size:1.3rem;font-weight:700;margin-bottom:2rem;text-align:center;background:linear-gradient(135deg,#fff,#cbd5e1);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}.options-grid{display:grid;grid-template-columns:1fr;gap:1rem;width:100%}.option-btn{background:#ffffff0d;border:1px solid rgba(255,255,255,.1);padding:1.2rem;border-radius:12px;color:#fff;font-size:1rem;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);text-align:left}.option-btn:hover{background:#8b5cf633;border-color:var(--primary);transform:translateY(-2px);box-shadow:0 4px 12px #8b5cf633}.option-btn:active{transform:translateY(0)}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.start-screen{text-align:center}.title{font-size:3rem;font-weight:800;margin-bottom:1rem;background:linear-gradient(to right,#8b5cf6,#ec4899);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;line-height:1.2}.subtitle{font-size:1.2rem;color:#94a3b8;margin-bottom:3rem}.start-btn{background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff;border:none;padding:1rem 3rem;font-size:1.2rem;font-weight:700;border-radius:50px;cursor:pointer;box-shadow:0 4px 15px #ec489966;transition:transform .2s,box-shadow .2s}.start-btn:hover{transform:scale(1.05);box-shadow:0 6px 20px #ec489999}.result-card{text-align:center}.mbti-result{font-size:4.5rem;font-weight:900;margin:1rem 0;color:transparent;background:linear-gradient(to right,#38bdf8,#8b5cf6);background-clip:text;-webkit-background-clip:text;text-shadow:0 0 30px rgba(56,189,248,.3)}.result-desc{font-size:1.5rem;margin-bottom:2rem}.restart-btn{background:transparent;border:2px solid rgba(255,255,255,.2);color:#fff;padding:.8rem 2rem;border-radius:50px;font-size:1rem;cursor:pointer;transition:all .3s}.restart-btn:hover{background:#ffffff1a;border-color:#fff}