.compat-hero{background:radial-gradient(circle at 15% 15%,rgba(244,114,182,.2),transparent 34%),radial-gradient(circle at 88% 15%,rgba(96,165,250,.2),transparent 32%),linear-gradient(180deg,#fff7fb,#fff)}.compat-wrap{max-width:780px;margin:0 auto}.compat-form{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:end}.compat-result{margin-top:28px;scroll-margin-top:24px}.compat-result[hidden]{display:none}.compat-score-card{padding:30px;border-radius:26px;color:#fff;text-align:center;background:linear-gradient(135deg,#be185d,#7c3aed 55%,#2563eb);box-shadow:0 22px 60px rgba(76,29,149,.22)}.compat-score{font-size:76px;line-height:1;font-weight:900}.compat-score-card h2{margin:10px 0 4px;font-size:34px}.compat-score-card p{margin:0 auto;max-width:620px;color:#f5f3ff}.compat-meter{height:14px;margin:22px auto 0;max-width:540px;border-radius:999px;background:rgba(255,255,255,.2);overflow:hidden}.compat-meter span{display:block;height:100%;width:0;border-radius:inherit;background:#fff;transition:width .6s ease}.compat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:16px}.compat-card{padding:18px;border:1px solid var(--border);border-radius:18px;background:#fff}.compat-card strong{display:block;margin-bottom:6px}.compat-card p{margin:0;color:var(--muted)}.compat-note{padding:14px 16px;border-left:4px solid #db2777;background:#fdf2f8;color:#831843}.compat-method{max-width:780px}.heart-mark{font-size:56px;line-height:1}@media(max-width:760px){.compat-form{grid-template-columns:1fr}.compat-form .button{width:100%}.compat-grid{grid-template-columns:1fr}.compat-score{font-size:64px}}