:root
    {
    --cream:#ffffff;
    --paper:#ffffff;
    --ink:#273047;
    --wine:#5b50a6;
    --coral:#ff7062;
    --sun:#ffc857;
    --aqua:#75ced0;
    --lavender:#b9a7ea;
    --mint:#a9dec0;
    --playful:#7465dc;
    --card-pink:#ff9fc8;
    --card-blue:#8fcbff;
    --card-lavender:#c7b7ff;
    --card-aqua:#8de1de;
    --card-yellow:#ffd86b;
    --card-peach:#ffb38a;
    --soft-ink:#61677a;
    --line:#e5e9f0;
    --display:"Arial Rounded MT Bold","Trebuchet MS",Arial,sans-serif;
    --body:"Trebuchet MS",Arial,sans-serif;
    }

body
    {
    background:#fff;
    color:var(--ink);
    font-family:var(--body);
    }

header
    {
    border-color:var(--line);
    }

.logo
    {
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:var(--ink);
    font:700 18px/1 var(--display);
    font-style:normal;
    letter-spacing:-.035em;
    }

.logo b
    {
    color:var(--playful);
    font-style:normal;
    }

.brand-blocks
    {
    display:inline-flex;
    align-items:flex-end;
    height:34px;
    }

.brand-blocks i
    {
    display:grid;
    width:27px;
    height:27px;
    place-items:center;
    border:2px solid #fff;
    border-radius:9px;
    color:#fff;
    font:800 12px/1 var(--display);
    font-style:normal;
    box-shadow:0 3px 0 #27304724;
    transform:rotate(-6deg);
    }

.brand-blocks i:nth-child(1)
    {
    background:var(--playful);
    }

.brand-blocks i:nth-child(2)
    {
    margin-left:-5px;
    background:var(--sun);
    color:#594417;
    transform:translateY(3px) rotate(5deg);
    }

.brand-blocks i:nth-child(3)
    {
    margin-left:-5px;
    background:var(--aqua);
    color:#234b59;
    transform:translateY(-1px) rotate(-2deg);
    }

nav a
    {
    font-weight:700;
    }

nav button,
.filters button
    {
    border-color:#d4cce8;
    border-radius:999px;
    font-weight:700;
    }

.hero
    {
    position:relative;
    isolation:isolate;
    min-height:630px;
    overflow:hidden;
    }

.hero::before,
.hero::after
    {
    position:absolute;
    z-index:-1;
    border-radius:44% 56% 57% 43% / 53% 42% 58% 47%;
    content:"";
    }

.hero::before
    {
    top:70px;
    left:-110px;
    width:250px;
    height:250px;
    background:#bde5d5;
    transform:rotate(18deg);
    }

.hero::after
    {
    right:-90px;
    bottom:55px;
    width:215px;
    height:215px;
    background:#d9ccf5;
    transform:rotate(-14deg);
    }

.hero small,
.heading small,
.flow small,
.saved>small,
#detail small,
.profile-hero>div>small,
.section-heading small,
.profile-missing small,
.couples>small,
.legal-page>small
    {
    color:var(--wine);
    font-family:var(--display);
    letter-spacing:.11em;
    }

.hero h1
    {
    max-width:880px;
    margin:22px 0;
    font:800 clamp(52px,8vw,92px)/.98 var(--display);
    letter-spacing:-.055em;
    }

.hero h1 em
    {
    position:relative;
    color:var(--playful);
    font-style:normal;
    white-space:nowrap;
    }

.hero h1 em::after
    {
    position:absolute;
    right:2%;
    bottom:-8px;
    left:2%;
    height:9px;
    border-radius:50%;
    background:var(--sun);
    content:"";
    opacity:.85;
    transform:rotate(-1deg);
    }

.hero>p
    {
    color:var(--soft-ink);
    font:18px/1.6 var(--body);
    }

.hero form
    {
    border:2px solid #fff;
    border-radius:24px;
    box-shadow:0 18px 0 #5b50a614,0 25px 55px #27304718;
    }

.hero input
    {
    background:#f3f6fa;
    border-radius:14px;
    font:16px var(--body);
    }

.hero form button,
.tester button,
.profile-actions button,
.primary-link,
.saved-tools button,
.saved-actions button,
.couples button,
.account-dialog button,
.account-card button,
.error-page a
    {
    border-radius:999px;
    background:var(--wine);
    box-shadow:0 4px 0 #40377f;
    transition:transform .16s ease,box-shadow .16s ease;
    }

.hero form button:hover,
.tester button:hover,
.profile-actions button:hover,
.primary-link:hover,
.saved-tools button:hover,
.saved-actions button:hover,
.couples button:hover,
.account-dialog button:hover,
.account-card button:hover,
.error-page a:hover
    {
    box-shadow:0 2px 0 #40377f;
    transform:translateY(2px);
    }

.heading h2,
.saved h2,
.flow h2,
.couples>h2,
.section-heading h2,
.legal-page h1,
.legal-page h2,
.account-page h1,
.account-card h2,
.error-page h1,
#detail h2,
.auth-grid h3,
.couple-setup h3,
.couples-panel h3,
.shared-list>h1
    {
    font-family:var(--display);
    font-weight:800;
    letter-spacing:-.035em;
    }

.card,
.related-grid a
    {
    overflow:hidden;
    border:2px solid #ffffffaa;
    border-radius:25px;
    box-shadow:0 7px 0 #27304712;
    transition:transform .18s ease,box-shadow .18s ease;
    }

.card:nth-child(6n+1),
.related-grid a:nth-child(6n+1)
    {
    background:var(--card-pink);
    }

.card:nth-child(6n+2),
.related-grid a:nth-child(6n+2)
    {
    background:var(--card-blue);
    }

.card:nth-child(6n+3),
.related-grid a:nth-child(6n+3)
    {
    background:var(--card-lavender);
    }

.card:nth-child(6n+4),
.related-grid a:nth-child(6n+4)
    {
    background:var(--card-aqua);
    }

.card:nth-child(6n+5),
.related-grid a:nth-child(6n+5)
    {
    background:var(--card-yellow);
    }

.card:nth-child(6n+6),
.related-grid a:nth-child(6n+6)
    {
    background:var(--card-peach);
    }

.card:hover,
.related-grid a:hover
    {
    box-shadow:0 11px 0 #27304714;
    transform:translateY(-4px) rotate(-.35deg);
    }

.card::after
    {
    position:absolute;
    right:-22px;
    bottom:-25px;
    width:75px;
    height:75px;
    border:12px solid #ffffff2e;
    border-radius:50%;
    content:"";
    pointer-events:none;
    }

.name h3,
.related-grid strong,
.profile-hero h1,
.profile-stats strong,
.profile-meaning,
.shared-grid h2,
.saved-item h4,
.couple-candidate h4,
#shortlistTitle
    {
    font-family:var(--display);
    font-weight:800;
    letter-spacing:-.04em;
    }

.card>p,
.related-grid span,
.saved-item p,
.profile-hero>div>p:last-of-type
    {
    font-family:var(--body);
    }

.heart
    {
    display:grid;
    width:40px;
    height:40px;
    place-items:center;
    border:2px solid #fff;
    box-shadow:0 3px 0 #27304718;
    }

.heart:hover
    {
    transform:scale(1.08) rotate(6deg);
    }

.flow
    {
    position:relative;
    overflow:hidden;
    background:#5850a2;
    }

.flow::after
    {
    position:absolute;
    right:6%;
    bottom:-85px;
    width:210px;
    height:210px;
    border:35px solid #ffffff12;
    border-radius:50%;
    content:"";
    pointer-events:none;
    }

.flow aside,
.couples-panel,
.account-card,
.saved-item,
.shared-grid article,
dialog
    {
    border-radius:25px;
    }

.flow aside
    {
    background:#ffe3d5;
    box-shadow:15px 15px #40377f;
    }

.hero form,
.couples-panel,
.account-card,
.saved-item,
.shared-grid article,
dialog
    {
    background:#fff;
    border-color:#e3e7ee;
    }

.couples
    {
    background:#e7dcfa;
    }

.match-list span,
.saved span
    {
    border-radius:999px;
    background:var(--coral);
    }

.profile-hero h1
    {
    font-size:clamp(68px,11vw,132px);
    line-height:.88;
    }

.profile-hero aside
    {
    border:2px solid #fff;
    border-radius:28px;
    background:#bfe5e2;
    box-shadow:14px 14px var(--wine);
    }

.profile-popularity
    {
    background:#fff;
    }

.profile-history i
    {
    background:var(--coral);
    }

.site-footer
    {
    border-color:var(--line);
    color:var(--soft-ink);
    }

.legal-page p,
.account-page p,
.saved-heading p,
.couples>p
    {
    color:var(--soft-ink);
    }

@media(max-width:760px)
    {
    .logo
        {
        font-size:15px;
        }

    .brand-blocks i
        {
        width:24px;
        height:24px;
        font-size:10px;
        }

    .hero::before
        {
        top:35px;
        left:-105px;
        }

    .hero::after
        {
        right:-125px;
        bottom:30px;
        }
    }

@media(max-width:480px)
    {
    .logo>span:last-child
        {
        display:none;
        }

    .hero h1 em
        {
        white-space:normal;
        }
    }

@media(prefers-reduced-motion:reduce)
    {
    .card,
    .related-grid a,
    .hero form button,
    .tester button,
    .profile-actions button,
    .primary-link
        {
        transition:none;
        }
    }