:root {































































    --bg-dark: #050505;































































    --bg-light: #fafafa;































































    --text-primary: #0f0f0f;































































    --text-secondary: #ffffff;































































    --accent: #ff6b81;































































    --accent-soft: rgba(255, 107, 129, 0.4);































































    --glass: rgba(255, 255, 255, 0.08);































































    /* Gallery sizing */
    --gallery-image-height-one: clamp(300px, 48vh, 460px);
    --gallery-image-height-two: clamp(110px, 46vh, 440px);
    --gallery-image-height-three: clamp(320px, 52vh, 500px);
    --gallery-image-height-one-mobile: clamp(220px, 48vh, 340px);
    --gallery-image-height-two-mobile: clamp(220px, 50vh, 330px);
    --gallery-image-height-three-mobile: clamp(230px, 52vh, 360px);
}































































































































* {































































    box-sizing: border-box;































































}































































































































html,































































body {































































    margin: 0;































































    padding: 0;































































    font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;































































    background: var(--bg-dark);































































    color: var(--text-secondary);































































    height: 100%;































































}































































































































body.locked {































































    overflow: hidden;































































}































































































































body.unlocked {































































    background-color: var(--page-tail-color, #050505);































































    background-image: none;































































    background-size: cover;































































    background-repeat: no-repeat;































































    background-position: top center;































































    background-attachment: fixed;































































}































































































































































































main {































































    position: relative;































































    background: transparent;































































    min-height: 100vh;































































    scroll-behavior: smooth;































































}































































































































#lock-screen {































































    position: fixed;































































    inset: 0;































































    display: flex;































































    align-items: flex-start;































































    justify-items: flex-start;































    text-align: left;































































    justify-content: center;































































    background: radial-gradient(circle at top, rgba(255, 255, 255, 0.12), rgba(5, 5, 5, 0.96)),































































                url('https://www.transparenttextures.com/patterns/cubes.png');































































    backdrop-filter: blur(12px);































































    z-index: 10;































































    transition: opacity 600ms ease, visibility 600ms ease;































































}































































































































body.unlocked #lock-screen {































































    opacity: 0;































































    visibility: hidden;































































    pointer-events: none;































































}































































































































.lock-content {































































    width: min(420px, 90vw);































































    padding: 3rem;































































    border-radius: 32px;































































    background: rgba(0, 0, 0, 0.72);































































    box-shadow: 0 40px 65px rgba(0, 0, 0, 0.45);































































    border: 1px solid rgba(255, 255, 255, 0.08);































































    text-align: center;































































    animation: fadeIn 900ms ease forwards;































































}































































































































.lock-content h1 {































































    font-family: 'Playfair Display', serif;































































    font-weight: 600;































































    font-size: clamp(2rem, 3vw + 1rem, 3rem);































































    margin: 0 0 0.75rem;































































}































































































































.lock-subtitle {































































    margin: 0 0 2rem;































































    color: rgba(255, 255, 255, 0.72);































































    font-size: 0.95rem;































































}































































































































#unlock-form {































































    display: grid;































































    gap: 1rem;































































}































































































































#unlock-key {































































    padding: 0.9rem 1.1rem;































































    border-radius: 999px;































































    border: 1px solid rgba(255, 255, 255, 0.18);































































    background: rgba(255, 255, 255, 0.08);































































    color: var(--text-secondary);































































    font-size: 1rem;































































    letter-spacing: 0.05em;































































    outline: none;































































    transition: border-color 200ms ease, transform 200ms ease;































































}































































































































#unlock-key:focus {































































    border-color: var(--accent);































































    transform: translateY(-2px);































































}































































































































#unlock-form button {































































    padding: 0.9rem 1.2rem;































































    border: none;































































    border-radius: 999px;































































    background: linear-gradient(135deg, var(--accent) 0%, #ff8fa3 100%);































































    color: #fff;































































    font-size: 1rem;































































    font-weight: 600;































































    letter-spacing: 0.05em;































































    cursor: pointer;































































    transition: transform 200ms ease, box-shadow 200ms ease;































































    box-shadow: 0 18px 35px rgba(255, 117, 132, 0.35);































































}































































































































#unlock-form button:hover,































































#unlock-form button:focus-visible {































































    transform: translateY(-1px) scale(1.01);































































    box-shadow: 0 24px 45px rgba(255, 117, 132, 0.45);































































}































































































































.lock-error {































































    min-height: 1.2rem;































































    font-size: 0.9rem;































































    color: #ff9292;































































    margin-top: 0.25rem;































































}































































































































.shake {































































    animation: shake 400ms ease;































































}































































































































.hint {































































    margin: 0;































































    font-size: 0.8rem;































































    color: rgba(255, 255, 255, 0.45);































































}































































































































.visually-hidden {































































    position: absolute;































































    width: 1px;































































    height: 1px;































































    padding: 0;































































    margin: -1px;































































    overflow: hidden;































































    clip: rect(0, 0, 0, 0);































































    border: 0;































































}































































































































.panel {































































    --parallax-offset: 0px;































































    position: relative;































































    min-height: 100vh;































































    display: grid;































































    align-items: center;































































    padding: clamp(3rem, 8vw, 8rem) clamp(1.5rem, 8vw, 9rem);































































    opacity: 0;































































    transform: translateY(calc(60px + var(--parallax-offset)));































































    transition: opacity 900ms ease, transform 900ms ease;































































    will-change: transform, opacity;































































}































































































































.panel.visible {































































    opacity: 1;































































    transform: translateY(var(--parallax-offset));































































}































































































































.background-panel {































































    position: relative;































































    isolation: isolate;































































    background-color: var(--panel-bg-color, #05050f);































































    background-image: var(--panel-bg-image, url('../images/space-texture.png'));































































    background-position: center;































































    background-repeat: no-repeat;































































    background-size: cover;































































    color: var(--text-secondary);































































}































































































































.background-panel::before {































































    content: '';































































    position: absolute;































































    inset: 0;































































    background: linear-gradient(180deg, rgba(5, 5, 10, 0.78) 0%, rgba(5, 5, 15, 0.55) 52%, rgba(5, 5, 20, 0.8) 100%);































































    opacity: 0.82;































































    pointer-events: none;































































    z-index: 0;































































    transition: opacity 350ms ease;































































}































































































































.background-panel.visible::before {































































    opacity: 0.68;































































}































































































































.background-panel > * {































































    position: relative;































































    z-index: 1;































































}































































































































.background-panel .content {































































    max-width: min(760px, 92vw);































































}































































































































.background-panel.background-stars {































































    --panel-bg-color: #05050f;































































    --panel-bg-image: url('../images/space-texture.png');































































}































































































































.background-panel.background-dawn {































































    --panel-bg-color: #1b0a17;































































    --panel-bg-image: url('../images/photo-1.jpg');































































    background-position: center 40%;































































}































































































































.hero {































































    text-align: left;































































}































































































































.hero .eyebrow {































































    letter-spacing: 0.3em;































































    text-transform: uppercase;































































    color: rgba(255, 255, 255, 0.55);































































    font-size: 0.85rem;































































    margin: 0 0 1rem;































































}































































































































.hero h2 {































































    font-family: 'Playfair Display', serif;































































    font-size: clamp(2.6rem, 4vw + 1rem, 4.5rem);































































    margin: 0 0 1.2rem;































































    letter-spacing: -0.01em;































































}































































































































.hero p {































































    max-width: 620px;































































    font-size: clamp(1rem, 0.9rem + 0.8vw, 1.35rem);































































    line-height: 1.7;































































    color: rgba(255, 255, 255, 0.78);































































}































































































































.photo-panel {































































    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));































































    gap: clamp(2rem, 6vw, 6rem);































































}































































































































.photo-panel .media {































































    position: relative;































































    border-radius: 28px;































































    overflow: hidden;































































    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.35);































































    transform: translateZ(0);































































}































































































































.photo-panel img {































































    display: block;































































    width: 100%;































































    height: 100%;































































    object-fit: cover;































































    filter: saturate(1.05);































































    transition: transform 1.2s ease;































































}































































































































.photo-panel img:hover {































































    transform: scale(1.05);































































}































































































































.photo-panel .caption {































































    align-self: center;































































    font-size: clamp(1rem, 0.95rem + 0.6vw, 1.3rem);































































    line-height: 1.7;































































    color: rgba(255, 255, 255, 0.75);































































}































































































































.photo-panel.photo-slide-left .media,































































.photo-panel.photo-slide-right .media,































































.photo-panel.photo-slide-left .caption,































































.photo-panel.photo-slide-right .caption {































































    opacity: 0;































































    will-change: transform, opacity;































































}































































































































.photo-panel.photo-slide-left .media {































































    transform: translate3d(-140px, 0, 0);































































}































































































































.photo-panel.photo-slide-right .media {































































    transform: translate3d(140px, 0, 0);































































}































































































































.photo-panel.photo-slide-left .caption,































































.photo-panel.photo-slide-right .caption {































































    transform: translate3d(0, 40px, 0);































































}































































































































.photo-panel.photo-slide-left.visible .media {































































    animation: photoSlideInLeft 900ms cubic-bezier(0.23, 1, 0.32, 1) forwards;































































}































































































































.photo-panel.photo-slide-right.visible .media {































































    animation: photoSlideInRight 900ms cubic-bezier(0.23, 1, 0.32, 1) forwards;































































}































































































































.photo-panel.photo-slide-left.visible .caption,































































.photo-panel.photo-slide-right.visible .caption {































































    animation: captionFadeIn 900ms ease forwards;































































    animation-delay: 200ms;































































}































































































































.gallery-panel {































































    padding: clamp(3rem, 7vw, 7rem) clamp(1.5rem, 6vw, 7rem);































































}































































































































.gallery-shell {































































    --gallery-peek: clamp(48px, 12vw, 160px);































































    --gallery-gap: clamp(1.5rem, 5vw, 3.5rem);































































    position: relative;































































    display: flex;































































    flex-direction: column;































































    gap: clamp(1.5rem, 3vw, 2.6rem);































































    width: 100%;































































    max-width: 1180px;































































    margin: 0 auto;































































    padding: clamp(2rem, 4vw, 3.2rem) clamp(2rem, 5vw, 4rem);































































    border-radius: 36px;































































    background: linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));































































    border: 1px solid rgba(255, 255, 255, 0.08);































































    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);































































    backdrop-filter: blur(18px);































































    overflow: hidden;































































}































































































































.gallery-panel .gallery-shell {































































    opacity: 0;































































    transform: translateY(80px);































































    transition: opacity 900ms ease, transform 900ms ease;































































}































































































































.gallery-panel.visible .gallery-shell {































































    opacity: 1;































































    transform: translateY(0);































































}































































































































.gallery-shell::before {































































    content: '';































































    position: absolute;































































    top: clamp(1.2rem, 2vw, 1.8rem);































































    bottom: clamp(1.2rem, 2vw, 1.8rem);































































    right: clamp(1.2rem, 2vw, 1.8rem);































































    width: var(--gallery-peek);































































    pointer-events: none;































































    background: linear-gradient(270deg, rgba(5, 5, 5, 0.92) 0%, rgba(5, 5, 5, 0) 70%);































































    border-radius: clamp(1.6rem, 4vw, 2.4rem);































































    opacity: 0.6;































































}































































































































.gallery-shell::after {































































    content: '';































































    position: absolute;































































    inset: 0;































































    background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.09), transparent 40%);































































    pointer-events: none;































































}































































































































.gallery-label {































































    margin: 0;































































    text-transform: uppercase;































































    letter-spacing: 0.36em;































































    font-size: 0.78rem;































































    color: rgba(255, 255, 255, 0.52);































































}































































































































.gallery-viewport {































































    width: 100%;































































    padding-right: var(--gallery-peek);































































    overflow: hidden;































































}































































































































.gallery-track {































































    display: flex;































































    gap: var(--gallery-gap);































































    transition: transform 900ms cubic-bezier(0.19, 1, 0.22, 1);































































    will-change: transform;































































}































































































































.gallery-slide {































































    flex: 0 0 calc(100% - var(--gallery-peek));































































    max-width: clamp(540px, 70vw, 820px);































































    border-radius: 28px;































































    overflow: hidden;































































    position: relative;































































    background: rgba(0, 0, 0, 0.46);































































    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);































































    color: rgba(255, 255, 255, 0.78);































































    opacity: 0.55;































































    transform: scale(0.94);































































    transition: opacity 650ms ease, transform 650ms ease;































































    cursor: pointer;































































}































































































































.gallery-slide.is-active {































































    opacity: 1;































































    transform: scale(1);































































    cursor: default;































































}































































































































.gallery-slide img {































































    display: block;































































    width: 100%;































































    object-fit: cover;































































}































































































































img.gallery-image--one {
    height: var(--gallery-image-height-one);
    object-position: 50% 20%;
}
































































































































img.gallery-image--two {
    height: var(--gallery-image-height-two);
    object-position: 50% 20%;
}
































































































































img.gallery-image--three {
    height: var(--gallery-image-height-three);
    object-position: 50% 65%;
}
































































































































.gallery-slide figcaption {































































    margin: 0;































































    padding: clamp(1.2rem, 3vw, 1.8rem) clamp(1.2rem, 3vw, 2.1rem);































































    font-size: clamp(1rem, 0.95rem + 0.4vw, 1.22rem);































































    line-height: 1.65;































































    background: linear-gradient(0deg, rgba(5, 5, 5, 0.8), rgba(5, 5, 5, 0.25));































































}































































































































.gallery-control {































































    position: absolute;































































    top: 50%;































































    width: clamp(44px, 4vw, 56px);































































    height: clamp(44px, 4vw, 56px);































































    display: flex;































































    align-items: center;































































    justify-content: center;































































    border-radius: 999px;































































    background: rgba(0, 0, 0, 0.55);































































    border: 1px solid rgba(255, 255, 255, 0.16);































































    color: #ffffff;































































    cursor: pointer;































































    transform: translateY(-50%);































































    transition: transform 240ms ease, background 240ms ease, opacity 240ms ease;































































    backdrop-filter: blur(12px);































































    z-index: 2;































































}































































































































.gallery-control svg {































































    width: clamp(18px, 2.2vw, 24px);































































    height: auto;































































}































































































































.gallery-control.prev {































































    left: clamp(1rem, 3vw, 2.2rem);































































}































































































































.gallery-control.next {































































    right: clamp(1rem, 3vw, 2.2rem);































































}































































































































.gallery-control:hover,































































.gallery-control:focus-visible {































































    background: rgba(255, 255, 255, 0.2);































































    transform: translateY(-50%) scale(1.05);































































}































































































































.gallery-control[disabled] {































































    opacity: 0.25;































































    cursor: default;































































    pointer-events: none;































































}































































































































.gallery-panel::after {































































    content: '';































































    position: absolute;































































    inset: 0;































































    pointer-events: none;































































}































































































































.gallery-panel.visible::after {































































    opacity: 0;































































}































































































































@media (max-width: 960px) {































































    .gallery-shell {































































        --gallery-peek: clamp(42px, 14vw, 110px);































































        max-width: 960px;































































    }































































}































































































































@media (max-width: 720px) {































































    .gallery-shell {































































        padding: clamp(1.6rem, 6vw, 2.4rem);































































        --gallery-peek: clamp(28px, 18vw, 80px);































































        --gallery-gap: clamp(1rem, 6vw, 1.8rem);































































    }































































































































    .gallery-shell::before {































































        opacity: 0.4;































































    }































































































































    .gallery-slide {































































        max-width: unset;































































    }































































































































    .gallery-slide img {































































        display: block;































































        width: 100%;































































        object-fit: cover;































































    }































































































































    img.gallery-image--one {
        height: var(--gallery-image-height-one-mobile, var(--gallery-image-height-one));
        object-position: 50% 40%;
    }































































































































    img.gallery-image--two {
        height: var(--gallery-image-height-two-mobile, var(--gallery-image-height-two));
        object-position: 50% 25%;
    }































































































































    img.gallery-image--three {
        height: var(--gallery-image-height-three-mobile, var(--gallery-image-height-three));
        object-position: 50% 65%;
    }































































































































    .gallery-control {































































        width: clamp(40px, 8vw, 46px);































































        height: clamp(40px, 8vw, 46px);































































    }































































}































































.story-panel .content {































































    max-width: 720px;































































    justify-self: center;































































}































































































































.story-panel h3 {































































    font-family: 'Playfair Display', serif;































































    font-size: clamp(2rem, 3vw + 1rem, 3.2rem);































































    margin: 0 0 1rem;































































    letter-spacing: -0.01em;































































}































































































































.story-panel p {































































    font-size: clamp(1rem, 0.95rem + 0.6vw, 1.35rem);































































    line-height: 1.8;































































    color: rgba(255, 255, 255, 0.78);































































}































































































































.finale {































































    text-align: center;































































    background: radial-gradient(circle at center, rgba(255, 107, 129, 0.12), transparent 60%);































































}































































































































.finale h2 {































































    font-family: 'Playfair Display', serif;































































    font-size: clamp(2.8rem, 4vw + 1rem, 4.8rem);































































    margin: 0 0 1.4rem;































































}































































































































.finale p {































































    margin: 0 auto 2.4rem;































































    max-width: 640px;































































    font-size: clamp(1.1rem, 1rem + 0.6vw, 1.4rem);































































    line-height: 1.8;































































    color: rgba(255, 255, 255, 0.8);































































}































































































































.finale-content {
    display: grid;
    gap: clamp(2rem, 5vw, 4rem);
    grid-template-columns: repeat(2, minmax(320px, 1fr));
    align-items: center;
    width: min(960px, 92vw);
    margin: 0 auto;
    justify-content: space-between;
    padding: 0 clamp(1rem, 3vw, 2.6rem);
}









































































































































.finale-message {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: clamp(1.2rem, 3vw, 2rem);
    text-align: center;
}
.finale-message h2 {
    font-size: clamp(2.4rem, 4vw + 0.8rem, 3.4rem);
}

.finale-message p {
    font-size: clamp(1rem, 0.9rem + 0.3vw, 1.2rem);
}










































































.finale-message .python-heart {
    justify-self: center;
    margin-top: clamp(0.8rem, 2vw, 1.6rem);
}









































































































































.finale-card {
    width: min(100%, 360px);
    padding: clamp(1.6rem, 3vw, 2.4rem);
    border-radius: 28px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(20px);
    display: grid;
    gap: clamp(1.2rem, 2.6vw, 1.6rem);
    align-self: center;
}


.finale-message-card {
    justify-self: start;
}


.ring-size-card {
    justify-self: end;
}


.ring-card-layer {
    display: grid;
    gap: clamp(1rem, 1.4vw, 1.6rem);
    text-align: center;
    justify-items: center;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 220ms ease, transform 220ms ease;
}

.ring-card-layer[hidden] {
    display: none;
}

.ring-card-layer--active {
    opacity: 1;
    transform: translateY(0);
}

.ring-card-layer--form {
    gap: clamp(1.2rem, 1.8vw, 1.9rem);
    text-align: left;
    justify-items: stretch;
}

.ring-card-message {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.35rem, 1.1rem + 0.6vw, 1.75rem);
    color: var(--text-primary, #ffffff);
    margin: 0;
}

.ring-card-message--love {
    font-size: clamp(1.8rem, 1.4rem + 1vw, 2.45rem);
    color: var(--accent-rose, #ff8fa3);
    font-weight: 600;
    letter-spacing: 0.03em;
}

.ring-layer-button {
    justify-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.85rem 1.6rem;
    min-width: 3.25rem;
    min-height: 3.25rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.32);
    background: rgba(255, 255, 255, 0.1);
    color: inherit;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: transform 220ms ease, box-shadow 220ms ease, background 220ms ease;
    cursor: pointer;
}

.ring-layer-button__icon {
    font-size: clamp(1.4rem, 1.1rem + 0.6vw, 2rem);
    line-height: 1;
}

.ring-layer-button--submit {
    justify-self: center;
}

.ring-layer-button:hover,
.ring-layer-button:focus-visible {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
}

.ring-layer-button:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.75);
    outline-offset: 3px;
}

.ring-layer-button:active {
    transform: translateY(0);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
}

.ring-layer-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}









































































































































.ring-size-card h3 {































































    margin: 0;































































    font-family: 'Playfair Display', serif;































































    font-size: clamp(1.6rem, 1.4rem + 0.8vw, 2.1rem);































































    letter-spacing: 0.02em;































































}































































































































.ring-size-subtitle {































































    margin: 0;































































    color: rgba(255, 255, 255, 0.72);































































    font-size: clamp(0.95rem, 0.9rem + 0.4vw, 1.1rem);































































    line-height: 1.6;































































}































































































































.ring-size-form {































































    display: grid;































































    gap: 0.85rem;































































}































































































































.ring-size-form input {
    padding: 0.85rem 1.1rem;
    border-radius: 0;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(5, 5, 10, 0.5);
    color: var(--text-secondary);
    font-size: 1rem;
    letter-spacing: 0.03em;
    outline: none;
    transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}
































































































































.ring-size-form input:focus {































































    border-color: var(--accent);































































    box-shadow: 0 0 0 3px rgba(255, 107, 129, 0.25);































































    transform: translateY(-1px);































































}































































































































.ring-size-form button:not(.ring-layer-button) {































































    justify-self: start;































































    padding: 0.8rem 1.8rem;































































    border-radius: 999px;































































    border: none;































































    background: linear-gradient(135deg, var(--accent) 0%, #ff8fa3 100%);































































    color: #fff;































































    font-size: 1rem;































































    font-weight: 600;































































    letter-spacing: 0.05em;































































    cursor: pointer;































































    transition: transform 200ms ease, box-shadow 200ms ease;































































    box-shadow: 0 16px 32px rgba(255, 107, 129, 0.35);































































}































































































































.ring-size-form button:not(.ring-layer-button):hover,































































.ring-size-form button:not(.ring-layer-button):focus-visible {































































    transform: translateY(-1px) scale(1.01);































































    box-shadow: 0 24px 46px rgba(255, 107, 129, 0.45);































































}































































































































.ring-size-form button:not(.ring-layer-button):disabled {































































    opacity: 0.6;































































    cursor: default;































































    box-shadow: none;































































}































































































































.ring-size-feedback {































































    min-height: 1.1rem;































































    margin: 0;































































    font-size: 0.92rem;































































    letter-spacing: 0.02em;































































    color: rgba(255, 255, 255, 0.75);































































}































































































































.ring-size-feedback[data-state="error"] {































































    color: #ff9ba8;































































}































































































































.ring-size-feedback[data-state="success"] {































































    color: #9fffc8;































































}































































































































@media (max-width: 920px) {































































    .finale-content {































































        grid-template-columns: 1fr;































































    }































































































































    .ring-size-card {































































        max-width: 420px;































































        justify-self: center;































































    }































































































































    .finale-message {































































        order: -1;































































    }































































































































    .ring-size-form button:not(.ring-layer-button) {































































        justify-self: center;































































    }































































}































































































































@media (max-width: 560px) {































































    .ring-size-card {































































        padding: 1.6rem;































































    }































































































































    .ring-size-form input {































































        font-size: 0.95rem;































































    }































































}































































































































.python-heart {































































    position: relative;































































    width: clamp(160px, 28vw, 260px);































































    margin: clamp(2.5rem, 6vw, 3.75rem) auto 0;































































    display: grid;































































    place-items: center;































































    filter: drop-shadow(0 26px 55px rgba(255, 104, 135, 0.35));































































    pointer-events: none;































































}































































































































.python-heart__svg {































































    width: 100%;































































    height: auto;































































    transform-origin: center 58%;































































    animation: python-heart-beat 2.9s ease-in-out infinite;































































}































































































































.python-heart__shape {































































    filter: drop-shadow(0 20px 45px rgba(255, 109, 143, 0.42));































































}































































































































.python-heart__outline {































































    stroke: rgba(255, 255, 255, 0.82);































































    stroke-width: 2.2;































































    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.35));































































}































































































































.python-heart__glow {































































    stroke: url(#python-heart-glow);































































    stroke-width: 12;































































    opacity: 0.55;































































    mix-blend-mode: screen;































































    animation: python-heart-glimmer 6.2s ease-in-out infinite;































































}































































































































.python-heart__pulse {































































    position: absolute;































































    inset: -14%;































































    border-radius: 50%;































































    border: 2px solid rgba(255, 120, 144, 0.32);































































    opacity: 0;































































    transform: scale(0.65);































































    animation: python-heart-pulse 3.6s ease-out infinite;































































    pointer-events: none;































































}































































































































.python-heart__pulse--secondary {































































    animation-delay: 1.6s;































































    border-color: rgba(255, 120, 144, 0.18);































































}































































































































.python-heart::after {































































    content: '';































































    position: absolute;































































    inset: 14%;































































    border-radius: 50%;































































    background: radial-gradient(circle at 50% 45%, rgba(255, 137, 163, 0.35), transparent 72%);































































    filter: blur(12px);































































    z-index: -1;































































}































































































































































































@media (max-width: 720px) {































































    .panel {































































        padding: clamp(3rem, 12vw, 5rem) clamp(1.2rem, 5vw, 2.5rem);































































    }































































































































    #lock-screen {































































        padding: 0 1rem;































































    }































































































































    .lock-content {































































        padding: 2.5rem 2rem;































































    }































































































































    .python-heart {































































        width: clamp(140px, 60vw, 220px);































































        margin-top: clamp(2rem, 9vw, 3.2rem);































































    }































































}































































































































































































@keyframes fadeIn {































































    from { opacity: 0; transform: translateY(30px); }































































    to { opacity: 1; transform: translateY(0); }































































}































































































































@keyframes shake {































































    10%, 90% { transform: translateX(-2px); }































































    20%, 80% { transform: translateX(4px); }































































    30%, 50%, 70% { transform: translateX(-6px); }































































    40%, 60% { transform: translateX(6px); }































































    100% { transform: translateX(0); }































































}































































































































@keyframes photoSlideInLeft {































































    from { opacity: 0; transform: translate3d(-140px, 0, 0); }































































    to { opacity: 1; transform: translate3d(0, 0, 0); }































































}































































































































@keyframes photoSlideInRight {































































    from { opacity: 0; transform: translate3d(140px, 0, 0); }































































    to { opacity: 1; transform: translate3d(0, 0, 0); }































































}































































































































@keyframes captionFadeIn {































































    from { opacity: 0; transform: translate3d(0, 40px, 0); }































































    to { opacity: 1; transform: translate3d(0, 0, 0); }































































}































































































































@keyframes python-heart-beat {































































    0%, 24%, 68%, 100% { transform: scale(1); }































































    12% { transform: scale(1.18); }































































    36% { transform: scale(0.96); }































































    52% { transform: scale(1.12); }































































    60% { transform: scale(0.99); }































































}































































































































@keyframes python-heart-pulse {































































    0% { opacity: 0; transform: scale(0.65); }































































    10% { opacity: 0.45; }































































    45% { opacity: 0.12; transform: scale(1.35); }































































    100% { opacity: 0; transform: scale(1.6); }































































}































































































































@keyframes python-heart-glimmer {































































    0%, 100% { opacity: 0.35; }































































    25% { opacity: 0.55; }































































    50% { opacity: 0.28; }































































    75% { opacity: 0.6; }































































}
































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































@media (max-width: 920px) {
    .finale-card {
        justify-self: center;
    }

    .finale-message-card {
        order: -1;
    }
}


body.lightbox-open {
    overflow: hidden;
}

.lightbox {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(5, 5, 15, 0.82);
    backdrop-filter: blur(18px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 250ms ease;
    z-index: 200;
    padding: clamp(1.5rem, 4vw, 3rem);
}

.lightbox.is-active {
    opacity: 1;
    pointer-events: auto;
}

.lightbox__content {
    position: relative;
    max-width: min(1040px, 90vw);
    max-height: min(90vh, 90vh);
    display: grid;
    gap: 0.75rem;
    justify-items: center;
}

.lightbox__image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 28px;
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6);
}

.lightbox__caption {
    margin: 0;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
}

.lightbox__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: none;
    border-radius: 50%;
    background: rgba(8, 8, 12, 0.72);
    color: #fff;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    transition: transform 160ms ease, background 160ms ease;
}

.lightbox__close:hover,
.lightbox__close:focus-visible {
    background: rgba(255, 255, 255, 0.14);
    transform: scale(1.05);
}

@media (max-width: 640px) {
    .lightbox__content {
        max-width: 96vw;
        max-height: 84vh;
    }

    .lightbox__image {
        border-radius: 20px;
    }
}

.lightbox__caption:empty {
    display: none;
}