#thanks {
    margin-top: 2.2rem;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--text-secondary);
    text-shadow: var(--text-shadow-soft);
}

#thanks .letter {
    display: inline-block;
}

#share {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1.25rem;
}

#share a {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.9rem 2.2rem;
    background-color: color-mix(in srgb, var(--c-bg) calc(var(--panel-tint) - 6%), color-mix(in srgb, var(--c-glass) 20%, transparent));
    backdrop-filter: blur(12px) saturate(var(--saturation));
    -webkit-backdrop-filter: blur(12px) saturate(var(--saturation));
    color: var(--c-content);
    text-decoration: none;
    border-radius: 50px;
    font-weight: 500;
    font-size: 1rem;
    text-shadow: var(--text-shadow-soft);
    transition: transform 0.4s var(--ease-out), background-color 0.3s, box-shadow 0.3s;
    box-shadow:
            inset 0 0 0 1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 15%), transparent),
            inset 1.8px 3px 0px -2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 90%), transparent),
            inset -2px -2px 0px -2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 80%), transparent),
            inset -3px -8px 1px -6px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 60%), transparent),
            0px 4px 12px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent);
}

@media (hover: hover) {
    #share a:hover {
        transform: translateY(-3px);
        background-color: color-mix(in srgb, var(--c-bg) var(--panel-tint), color-mix(in srgb, var(--c-glass) 30%, transparent));
        box-shadow: var(--glass-shadow-hover);
    }
}

#share a:active {
    transform: translateY(-1px);
}

#share a svg {
    width: 20px;
    height: 20px;
    fill: var(--c-action);
    filter: drop-shadow(0 1px 2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 14%), transparent));
}

@media (max-width: 768px) {
    #thanks {
        font-size: 1.3rem;
    }

    #share a {
        padding: 0.8rem 1.8rem;
        font-size: 0.95rem;
    }

    #share {
        gap: 0.8rem;
    }
}

@media (max-width: 480px) {
    #share {
        flex-direction: column;
        gap: 0.7rem;
    }
}