.landing-back-to-top {
    position: fixed;
    right: max(var(--spacing-xl, 16px), env(safe-area-inset-right, 0px));
    bottom: max(var(--spacing-xl, 16px), env(safe-area-inset-bottom, 0px));
    z-index: 1200;
    display: grid;
    place-items: center;
    inline-size: var(--control-height-mobile, 42px);
    block-size: var(--control-height-mobile, 42px);
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--color-text-primary, #eeeeee) 14%, transparent);
    border-radius: var(--radius-full, 9999px);
    color: var(--color-text-primary, #eeeeee);
    background: color-mix(in srgb, var(--color-bg-canvas, #020203) 76%, transparent);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--color-text-primary, #eeeeee) 10%, transparent),
        0 0.75rem 2rem rgba(0, 0, 0, 0.28);
    -webkit-backdrop-filter: blur(16px) saturate(1.08);
    backdrop-filter: blur(16px) saturate(1.08);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(0.5rem) scale(0.94);
    transition:
        opacity var(--transition-base, 0.2s),
        visibility var(--transition-base, 0.2s),
        transform var(--transition-base, 0.2s),
        border-color var(--transition-base, 0.2s),
        background-color var(--transition-base, 0.2s);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.landing-back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.landing-back-to-top svg {
    inline-size: 1rem;
    block-size: 1rem;
}

@media (hover: hover) and (pointer: fine) {
    .landing-back-to-top.is-visible:hover {
        border-color: color-mix(in srgb, var(--color-text-primary, #eeeeee) 26%, transparent);
        background: color-mix(in srgb, var(--color-bg-canvas, #020203) 62%, var(--color-text-primary, #eeeeee) 8%);
        transform: translateY(-0.15rem) scale(1);
    }
}

.landing-back-to-top:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--color-text-primary, #eeeeee) 56%, transparent);
    outline-offset: 3px;
}

body.landing-mobile-nav-open .landing-back-to-top {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

@media (max-width: 560px) {
    .landing-back-to-top {
        right: max(var(--spacing-md, 12px), env(safe-area-inset-right, 0px));
        bottom: max(var(--spacing-md, 12px), env(safe-area-inset-bottom, 0px));
    }
}

@media (prefers-reduced-motion: reduce) {
    .landing-back-to-top {
        transition: none;
    }
}