:root{
    --pink:#ff5f9e;
    --pink2:#ffacd0;
    --purple:#946cff;
    --gold:#ffd98e;
    --white:#fff8fc;
    --muted:#d9c2cf;
    --dark:#0a0408;
    --glass:rgba(255,255,255,.09);
    --line:rgba(255,255,255,.16);
}

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    min-height:100vh;
    overflow-x:hidden;
    color:var(--white);
    font-family:Arial,Helvetica,sans-serif;
    background:
        radial-gradient(circle at 15% 12%,rgba(255,95,158,.18),transparent 31%),
        radial-gradient(circle at 84% 25%,rgba(148,108,255,.17),transparent 32%),
        linear-gradient(180deg,#090407,#190912 52%,#080306);
}

a{
    color:inherit;
    text-decoration:none;
}

button,input{
    font:inherit;
}

#stars,
#confetti{
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
    pointer-events:none;
}

#stars{
    z-index:-4;
}

#confetti{
    z-index:300;
}

.page-bg{
    position:fixed;
    inset:-30px;
    z-index:-6;
    background:center/cover no-repeat;
    filter:blur(14px);
    opacity:.27;
    transform:scale(1.15);
    animation:bgZoom 15s ease-in-out infinite alternate;
}

@keyframes bgZoom{
    to{
        transform:scale(1.24) translate(-1%,-1%);
    }
}

.page-overlay{
    position:fixed;
    inset:0;
    z-index:-5;
    background:linear-gradient(rgba(7,3,6,.63),rgba(8,3,7,.94));
}

.heart-rain{
    position:fixed;
    inset:0;
    z-index:3;
    overflow:hidden;
    pointer-events:none;
}

.falling-heart{
    position:absolute;
    top:-50px;
    color:var(--pink2);
    text-shadow:0 0 15px rgba(255,95,158,.85);
    animation:heartFall linear forwards;
}

@keyframes heartFall{
    0%{
        opacity:0;
        transform:translateY(-60px) rotate(0deg) scale(.7);
    }

    12%{
        opacity:.95;
    }

    100%{
        opacity:0;
        transform:translateY(112vh) rotate(430deg) scale(1.15);
    }
}

.topbar{
    position:fixed;
    top:14px;
    left:50%;
    transform:translateX(-50%);
    z-index:100;
    width:min(94%,1180px);
    min-height:62px;
    padding:10px 17px 10px 22px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    border-radius:999px;
    background:rgba(10,4,8,.72);
    border:1px solid var(--line);
    backdrop-filter:blur(20px);
}

.brand{
    color:var(--pink2);
    font-family:cursive;
    font-size:1.35rem;
}

.nav-actions{
    display:flex;
    gap:9px;
    flex-wrap:wrap;
}

.nav-button{
    padding:10px 15px;
    border-radius:999px;
    color:var(--muted);
    border:1px solid var(--line);
    background:rgba(255,255,255,.06);
}

.page{
    position:relative;
    z-index:5;
    width:min(1160px,92%);
    min-height:100vh;
    margin:auto;
    padding:125px 0 100px;
}

.heading{
    max-width:850px;
    margin:0 auto 45px;
    text-align:center;
}

.eyebrow{
    color:var(--gold);
    text-transform:uppercase;
    letter-spacing:.23em;
    font-weight:700;
    font-size:.71rem;
}

h1,h2,h3{
    font-family:Georgia,"Times New Roman",serif;
}

.heading h1{
    font-size:clamp(3rem,7vw,6rem);
    line-height:.96;
    margin:14px 0 19px;
}

.heading p{
    color:var(--muted);
    line-height:1.8;
}

.glass{
    background:linear-gradient(145deg,rgba(255,255,255,.11),rgba(255,255,255,.03));
    border:1px solid var(--line);
    box-shadow:0 28px 85px rgba(0,0,0,.4);
    backdrop-filter:blur(21px);
}

.primary-button,
.soft-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:15px 23px;
    border-radius:999px;
    border:0;
    color:white;
    cursor:pointer;
}

.primary-button{
    background:linear-gradient(135deg,var(--pink),var(--purple));
    box-shadow:0 15px 38px rgba(255,95,158,.32);
}

.soft-button{
    background:rgba(255,255,255,.08);
    border:1px solid var(--line);
}

.primary-button:disabled,
.soft-button:disabled{
    opacity:.42;
    cursor:not-allowed;
}

.action-row{
    display:flex;
    justify-content:center;
    gap:11px;
    flex-wrap:wrap;
}

.cat-row{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:24px;
    flex-wrap:wrap;
    margin-top:30px;
}

.cat{
    position:relative;
    width:135px;
    height:120px;
    animation:catBob 2.7s ease-in-out infinite;
}

@keyframes catBob{
    50%{
        transform:translateY(-11px) rotate(2deg);
    }
}

.cat-face{
    position:absolute;
    inset:25px 7px 0;
    border-radius:49% 49% 44% 44%;
    background:linear-gradient(145deg,#ffd4df,#eda0ba);
    box-shadow:0 18px 38px rgba(255,95,158,.25);
}

.cat-ear{
    position:absolute;
    top:-25px;
    width:48px;
    height:56px;
    background:#f6b1c7;
    clip-path:polygon(50% 0,100% 100%,0 100%);
}

.cat-ear.left{
    left:1px;
    transform:rotate(-13deg);
}

.cat-ear.right{
    right:1px;
    transform:rotate(13deg);
}

.cat-eye{
    position:absolute;
    top:41px;
    width:11px;
    height:16px;
    border-radius:50%;
    background:#37212d;
    animation:blink 4s infinite;
}

.cat-eye.left{
    left:31px;
}

.cat-eye.right{
    right:31px;
}

@keyframes blink{
    0%,44%,48%,100%{
        transform:scaleY(1);
    }

    46%{
        transform:scaleY(.08);
    }
}

.cat-nose{
    position:absolute;
    top:59px;
    left:50%;
    transform:translateX(-50%);
    width:13px;
    height:9px;
    border-radius:50%;
    background:#c95780;
}

.cat-mouth{
    position:absolute;
    top:67px;
    left:50%;
    transform:translateX(-50%);
    width:23px;
    height:12px;
    border-bottom:2px solid #76354e;
    border-radius:50%;
}

.cat-message{
    width:min(540px,90vw);
    padding:20px 23px;
    border-radius:24px 24px 24px 6px;
    color:var(--muted);
    line-height:1.7;
}

.cat-message strong{
    display:block;
    color:var(--pink2);
    font-family:Georgia,serif;
    font-size:1.25rem;
    margin-bottom:6px;
}

.modal{
    position:fixed;
    inset:0;
    z-index:220;
    display:grid;
    place-items:center;
    padding:18px;
    background:rgba(5,2,4,.9);
    opacity:0;
    visibility:hidden;
    transition:.45s ease;
}

.modal.show{
    opacity:1;
    visibility:visible;
}

.modal-card{
    width:min(94vw,820px);
    max-height:92vh;
    overflow:auto;
    padding:28px;
    border-radius:32px;
    text-align:center;
}

.modal-media{
    display:block;
    width:100%;
    max-height:58vh;
    object-fit:contain;
    border-radius:22px;
    background:#0b0509;
    border:1px solid var(--line);
}

.modal-caption{
    color:var(--muted);
    line-height:1.7;
    margin:18px 0;
}

@media(max-width:650px){
    .brand{
        font-size:1rem;
    }

    .nav-button{
        padding:8px 11px;
        font-size:.76rem;
    }

    .page{
        padding-top:115px;
    }
}