*{box-sizing:border-box;margin:0;padding:0;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}body{background:linear-gradient(135deg,#f5f7fa,#c3cfe2);min-height:100vh;padding:2rem;color:#2d3748}.container{max-width:800px;margin:0 auto;background:#fff;padding:2rem;border-radius:1rem;box-shadow:0 4px 6px #0000001a;animation:fadeIn .5s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}h1{text-align:center;color:#2d3748;margin-bottom:2rem;font-size:2.5rem;font-weight:700;background:linear-gradient(45deg,#2d3748,#4a5568);-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:slideDown .5s ease-out}@keyframes slideDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.intro-text{text-align:center;margin-bottom:2rem;font-size:1.2rem;color:#4a5568;animation:fadeIn .5s ease-out .2s both}.question{background:#f8fafc;padding:1.5rem;border-radius:.5rem;margin-bottom:1.5rem;border:1px solid #e2e8f0;animation:slideIn .5s ease-out;transition:transform .3s ease,box-shadow .3s ease}.question:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}@keyframes slideIn{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}.question p{font-size:1.2rem;font-weight:600;margin-bottom:1rem;color:#1a202c}label{display:block;padding:.75rem;margin:.5rem 0;border-radius:.375rem;cursor:pointer;transition:all .2s ease;border:2px solid transparent;animation:fadeIn .5s ease-out}label:hover{background:#edf2f7;border-color:#4299e1;transform:translate(5px)}input[type=radio]{margin-right:.75rem;cursor:pointer}button{display:block;width:100%;padding:1rem;background:linear-gradient(45deg,#4299e1,#3182ce);color:#fff;border:none;border-radius:.5rem;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .3s ease;margin-top:2rem;position:relative;overflow:hidden}button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 12px #4299e14d}button:disabled{background:#a0aec0;cursor:not-allowed}button:after{content:"";position:absolute;top:50%;left:50%;width:0;height:0;background:#fff3;border-radius:50%;transform:translate(-50%,-50%);transition:width .6s ease,height .6s ease}button:hover:not(:disabled):after{width:300px;height:300px}.result{text-align:center;padding:2rem;animation:fadeIn .5s ease-out}.result h2{color:#2d3748;margin-bottom:1rem;font-size:2rem;line-height:1.4}.result img{max-width:400px;width:100%;height:auto;margin:2rem 0;border-radius:.5rem;box-shadow:0 4px 6px #0000001a;animation:scaleIn .5s ease-out}@keyframes scaleIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.characteristics{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin:1rem 0}.characteristic{display:inline-block;background:#edf2f7;padding:.5rem 1rem;border-radius:2rem;font-weight:600;color:#4a5568;animation:fadeIn .5s ease-out}.share-button{display:inline-flex;align-items:center;background:#000;color:#fff;padding:.75rem 1.5rem;border-radius:.5rem;text-decoration:none;font-weight:600;margin-top:1rem;transition:all .3s ease;border:none;cursor:pointer}.share-button:hover{background:#1a1a1a;transform:translateY(-2px);box-shadow:0 4px 12px #0003}.share-button svg{width:20px;height:20px;margin-right:.5rem}@media (max-width: 640px){body,.container{padding:1rem}h1{font-size:2rem}.question{padding:1rem}.result img{max-width:100%}}body{margin:0;background:linear-gradient(180deg,#7551c2,#fff);display:flex;font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;height:100vh;width:100vw;justify-content:center;align-items:center}main{display:flex;flex-direction:column;align-items:stretch}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;color:#fff}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}ul{padding-inline-start:0;margin-block-start:0;margin-block-end:0;list-style-type:none;display:flex;flex-direction:column;margin:8px 0;border:1px solid black;gap:1px;background-color:#000;border-radius:8px;overflow:auto}li{background-color:#fff;padding:8px}li:hover{background:#dadbf9}a{font-weight:800;text-decoration:none}
