@import"https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@700;800&display=swap";:root{font-family:DM Sans,sans-serif;color:#38242a;background:#f8e8e7;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh}button,input{font:inherit}main{min-height:100vh;display:grid;place-items:center;padding:42px 18px;position:relative;overflow:hidden;background:radial-gradient(circle at 15% 20%,#fff8f5 0 8%,transparent 32%),radial-gradient(circle at 85% 80%,#edbdc0 0,transparent 35%),linear-gradient(135deg,#f8e8e7,#f4d8d8)}main:before,main:after{content:"";position:absolute;border:1px solid rgba(164,73,100,.12);border-radius:50%;width:420px;height:420px}main:before{left:-220px;bottom:-80px}main:after{right:-250px;top:-100px}.card{width:min(100%,560px);min-height:690px;position:relative;z-index:2;background:#fffaf8e6;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.8);border-radius:30px;padding:42px 64px;box-shadow:0 28px 80px #6b2c4229,0 2px 10px #6b2c420f}.brand{display:flex;justify-content:center;align-items:center;gap:8px;color:#9b234d;font-size:12px;letter-spacing:2.8px;font-weight:700}.brand span{display:grid;place-items:center;color:#fff;background:#bd295d;width:25px;height:25px;transform:rotate(-8deg);border-radius:50% 50% 45% 45%}header{text-align:center;margin:42px 0 34px}.eyebrow{color:#b7486f;font-size:11px;font-weight:700;letter-spacing:3.2px;margin:0 0 15px}h1{font:800 clamp(37px,8vw,53px)/.98 "Playfair Display",serif;color:#38242a;margin:0;letter-spacing:-1.8px}.subtitle{color:#866c73;font-size:14px;line-height:1.6;max-width:330px;margin:20px auto 0}label{display:block;font-size:10px;letter-spacing:1.8px;font-weight:700;color:#785b64}.input-wrap{margin-top:9px;position:relative}.input-wrap span{position:absolute;left:17px;top:50%;transform:translateY(-50%);color:#bd3c68;font-size:24px}input{width:100%;border:1px solid #ead4d3;border-radius:12px;padding:15px 15px 15px 51px;background:#fffdfc;outline:none;color:#3e2a30;transition:.2s}input:focus{border-color:#bd3c68;box-shadow:0 0 0 3px #bd3c681a}input::placeholder{color:#b9a5aa}.connector{display:flex;align-items:center;gap:8px;margin:13px 0;color:#d2a6ad}.connector i{height:1px;background:#ead8d8;flex:1}.connector span{font-size:11px}button{width:100%;border:0;border-radius:12px;margin-top:25px;padding:16px 20px;background:linear-gradient(110deg,#a91f50,#cf376b);color:#fff;font-size:11px;letter-spacing:1.6px;font-weight:700;cursor:pointer;box-shadow:0 10px 24px #ae20523b;transition:transform .2s,box-shadow .2s}button:hover{transform:translateY(-2px);box-shadow:0 14px 30px #ae20524d}button:disabled{opacity:.7;cursor:wait}button span{margin-left:7px}form small{display:block;text-align:center;color:#ae989d;font-size:10px;margin-top:18px}.result{text-align:center;animation:appear .5s ease both}.names{color:#9b234d;font-weight:700;font-size:16px;margin:-10px 0 23px;text-transform:capitalize}.names span{padding:0 7px}.meter{width:190px;height:190px;border-radius:50%;display:grid;place-items:center;margin:0 auto 24px;background:conic-gradient(#c5265d var(--score),#f0d9dc 0);position:relative;box-shadow:0 12px 28px #9c264e24}.meter:after{content:"";position:absolute;top:10px;right:10px;bottom:10px;left:10px;border-radius:50%;background:#fffaf8}.meter div{position:relative;z-index:1;display:flex;flex-direction:column}.meter strong{font:800 51px/1 Playfair Display,serif;color:#a91f50}.meter span{color:#9b7b84;letter-spacing:2px;font-size:9px;margin-top:7px}.result h2{font:700 27px Playfair Display,serif;margin:0 0 10px}.result>p:not(.names):not(.notice){color:#806970;font-size:14px;line-height:1.55;margin:0 auto;max-width:350px}.notice{background:#fff0d8;color:#8b611e;padding:9px;border-radius:8px;font-size:11px}.particles span{position:absolute;z-index:1;color:#ac305626;font-size:calc(10px + (var(--i) % 4) * 5px);left:calc((var(--i) * 19 + 7) % 100 * 1%);top:calc((var(--i) * 31 + 11) % 100 * 1%);transform:rotate(calc(var(--i) * 28deg))}@keyframes appear{0%{opacity:0;transform:translateY(12px) scale(.98)}}@media(max-width:600px){main{padding:0;place-items:stretch}.card{min-height:100vh;border-radius:0;padding:28px 24px 30px;display:flex;flex-direction:column;justify-content:center}header{margin:32px 0 30px}h1{font-size:39px}.result{margin-top:30px}}@media(max-height:720px)and (min-width:601px){main{padding:20px}.card{min-height:auto;padding-top:28px;padding-bottom:28px}header{margin:24px 0}}