:root{--primary:#0f172a;--primary-blue:#2563eb;--accent:#4f46e5;--bg-light:#f8fafc;--card-bg:#fffffff2;--border:#0f172a1a;--text-main:#1e293b;--text-muted:#64748b;--success:#059669;--error:#dc2626;--warning:#f59e0b;--shadow-premium:0 10px 15px -3px #0000000d, 0 4px 6px -2px #00000005, 0 20px 25px -5px #00000008;--shadow-light:0 1px 3px #0000000d;--mouse-x:0px;--mouse-y:0px}*{box-sizing:border-box;margin:0;padding:0;font-family:Outfit,sans-serif}body{background:var(--bg-light);color:var(--text-main);touch-action:manipulation;justify-content:center;align-items:center;min-height:100vh;padding:16px;display:flex;position:relative;overflow-x:hidden}.hero-highlight{pointer-events:none;z-index:0;width:100%;height:100%;position:fixed;inset:0}.dots-base{opacity:.4;background-image:radial-gradient(circle,#d4d4d4 1px,#0000 1px);background-size:16px 16px;position:absolute;inset:0}.dots-highlight{background-image:radial-gradient(circle, var(--primary-blue) 1px, transparent 1px);opacity:0;-webkit-mask-image:radial-gradient(250px circle at var(--mouse-x) var(--mouse-y), black 0%, transparent 100%);-webkit-mask-image:radial-gradient(250px circle at var(--mouse-x) var(--mouse-y), black 0%, transparent 100%);mask-image:radial-gradient(250px circle at var(--mouse-x) var(--mouse-y), black 0%, transparent 100%);background-size:16px 16px;transition:opacity .3s;position:absolute;inset:0}body:hover .dots-highlight{opacity:1}@media (hover:none) and (pointer:coarse){.dots-highlight{display:none}.dots-base{opacity:.15}}#app{z-index:10;width:100%;max-width:900px;position:relative}.glass-container{background:var(--card-bg);-webkit-backdrop-filter:blur(12px);box-shadow:var(--shadow-premium);border:1px solid #fffc;border-radius:24px;min-height:600px;padding:48px;animation:.6s ease-out slideUp;position:relative;overflow:hidden}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.glass-container:before{content:"";background:linear-gradient(90deg, var(--primary-blue), var(--accent));width:100%;height:5px;position:absolute;top:0;left:0}.step{display:none}.step.active{flex-direction:column;animation:.5s ease-out forwards fadeIn;display:flex}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.form-header{text-align:center;margin-bottom:40px}.logo{width:280px;height:auto;margin-bottom:24px;display:block}h1{color:var(--primary);letter-spacing:-.03em;margin-bottom:8px;font-size:2.25rem;font-weight:800;line-height:1.2}p{color:var(--text-muted);max-width:500px;margin:0 auto;font-size:1rem;line-height:1.6}.form-grid{grid-template-columns:repeat(2,1fr);gap:20px;margin-bottom:32px;display:grid}.input-group{flex-direction:column;gap:6px;min-height:75px;display:flex}.full-width{grid-column:span 2}label{color:var(--primary);text-transform:uppercase;letter-spacing:.04em;font-size:.8rem;font-weight:600}input,select{border:1.5px solid var(--border);color:var(--text-main);width:100%;box-shadow:var(--shadow-light);background:#fff;border-radius:12px;padding:12px 14px;font-size:1rem;transition:all .25s cubic-bezier(.4,0,.2,1)}input:focus,select:focus{border-color:var(--primary-blue);background:#fafbff;outline:none;box-shadow:0 0 0 3px #2563eb1a}input:invalid:not(:placeholder-shown){border-color:var(--error);box-shadow:0 0 0 4px #dc26260d}.btn-primary,.btn-secondary{cursor:pointer;box-shadow:var(--shadow-light);text-align:center;border:2px solid #0000;border-radius:12px;width:100%;margin-top:8px;padding:14px 28px;font-size:1rem;font-weight:600;transition:all .25s cubic-bezier(.4,0,.2,1);display:inline-block}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover:not(:disabled){background:var(--primary-blue);transform:translateY(-2px);box-shadow:0 10px 15px -3px #2563eb4d}.btn-primary:active:not(:disabled){transform:translateY(0)}.btn-secondary{color:var(--primary-blue);border:2px solid var(--primary-blue);background:0 0}.btn-secondary:hover:not(:disabled){background:#2563eb0d}.btn-primary:disabled,.btn-secondary:disabled{opacity:.6;cursor:not-allowed}.quiz-header{flex-wrap:wrap;align-items:center;gap:20px;margin-bottom:40px;display:flex}.timer{color:var(--primary-blue);border:1.5px solid var(--border);box-shadow:var(--shadow-light);white-space:nowrap;text-align:center;background:#fff;border-radius:12px;min-width:100px;padding:10px 18px;font-size:1.25rem;font-weight:800}.timer.warning{color:var(--warning);border-color:var(--warning)}.timer.danger{color:var(--error);border-color:var(--error)}.progress-container{min-width:150px;height:8px;box-shadow:var(--shadow-light);background:#e2e8f0;border-radius:10px;flex:1;overflow:hidden}.progress-bar{background:var(--primary-blue);width:0%;height:100%;transition:width .4s}.question-text{color:var(--primary);margin-bottom:32px;font-size:1.5rem;font-weight:700;line-height:1.4}.options-grid{flex-direction:column;gap:12px;display:flex}.option-card{border:2px solid var(--border);cursor:pointer;box-shadow:var(--shadow-light);background:#fff;border-radius:14px;align-items:center;gap:15px;padding:16px 20px;transition:all .25s cubic-bezier(.4,0,.2,1);display:flex}.option-card:hover{border-color:var(--primary-blue);background:#f0f7ff;transform:translate(4px)}.option-card.selected{border-color:var(--primary-blue);background:#2563eb14;box-shadow:0 0 0 3px #2563eb1a}.option-card:active{transform:translate(2px)}.option-circle{border:2px solid var(--border);border-radius:50%;width:20px;height:20px;transition:all .2s}.selected .option-circle{border-color:var(--primary-blue);background:var(--primary-blue);border-width:2px}#step-completion{text-align:center;padding:40px 0}.success-icon{background:linear-gradient(135deg, var(--success), #10b981);color:#fff;border-radius:24px;justify-content:center;align-items:center;width:100px;height:100px;margin:0 auto 30px;font-size:50px;animation:.6s cubic-bezier(.34,1.56,.64,1) scaleIn;display:flex;box-shadow:0 10px 30px #0596694d}@keyframes scaleIn{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}@keyframes slideInRight{0%{opacity:0;transform:translate(400px)}to{opacity:1;transform:translate(0)}}.score-preview{color:var(--text-main);background:#2563eb0d;border:1.5px solid #2563eb33;border-radius:16px;margin:20px 0;padding:24px;font-size:1.1rem}.quiz-footer{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin-top:40px;display:flex}#question-number{color:var(--text-muted);font-size:.95rem;font-weight:500}.instructions-content{border:1.5px solid var(--border);background:#f8fafc;border-radius:16px;margin-bottom:40px;padding:32px}.instructions-content ul{color:var(--text-main);flex-direction:column;gap:16px;padding:0;font-size:1rem;line-height:1.7;list-style:none;display:flex}.instructions-content li{gap:12px;padding-left:0;display:flex}.instructions-content li:before{content:"✓";color:var(--success);flex-shrink:0;font-weight:700}@media (width<=768px){.glass-container{border-radius:20px;min-height:auto;padding:32px 24px}.form-grid{gap:16px}.logo{width:240px}h1{margin-bottom:12px;font-size:2rem}p{font-size:.95rem}.question-text{font-size:1.3rem}.form-header{margin-bottom:32px}.quiz-header{gap:16px}}@media (width<=640px){#app{width:100%;max-width:100%;padding:0}body{justify-content:flex-start;align-items:flex-start;padding:12px 8px 8px}.glass-container{border-radius:16px;min-height:auto;padding:24px 16px;box-shadow:0 4px 6px #0000001a}.form-grid{grid-template-columns:1fr;gap:14px}.input-group{gap:5px;min-height:68px}.full-width{grid-column:span 1}.logo{width:200px;margin-bottom:16px}h1{letter-spacing:-.02em;margin-bottom:8px;font-size:1.6rem}p{font-size:.9rem;line-height:1.5}.form-header{margin-bottom:24px}label{letter-spacing:.03em;font-size:.75rem}input,select{border-radius:10px;padding:11px 12px;font-size:16px}.btn-primary,.btn-secondary{width:100%;padding:12px 20px;font-size:.95rem}.quiz-header{flex-direction:column;gap:12px;margin-bottom:28px}.timer{width:100%;padding:12px 16px;font-size:1.1rem}.progress-container{width:100%;min-width:unset}.question-text{margin-bottom:24px;font-size:1.2rem}.option-card{border-radius:12px;gap:12px;padding:14px 16px}.option-circle{width:18px;height:18px}.quiz-footer{flex-direction:column-reverse;margin-top:28px}#question-number{text-align:center;width:100%;font-size:.85rem}.instructions-content{border-radius:14px;margin-bottom:24px;padding:20px}.instructions-content ul{gap:12px;font-size:.95rem}.instructions-content li{gap:10px}.success-icon{width:80px;height:80px;margin-bottom:24px;font-size:40px}}@media (width<=480px){.glass-container{border-radius:14px;padding:20px 12px}h1{font-size:1.4rem}.form-header{margin-bottom:20px}.logo{width:180px;margin-bottom:12px}p{font-size:.85rem}.btn-primary,.btn-secondary{padding:11px 16px;font-size:.9rem}}