.site-scroll-top-shell {
    position: fixed;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    left: 20px;
    z-index: 40;
    pointer-events: none;
}

.site-scroll-top {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border: 1px solid #cba75e;
    border-radius: 50%;
    background: #17344d;
    color: #f0d39c;
    box-shadow: 0 10px 28px #10283e33, inset 0 1px 0 #ffffff1a;
    text-decoration: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(64px);
    pointer-events: none;
    transition: opacity .3s, transform .3s, visibility .3s, background-color .3s;
}

.site-scroll-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.site-scroll-top:hover { background: #24515a; }
.site-scroll-top:focus-visible { outline: 3px solid #f0d39c; outline-offset: 3px; }
.site-scroll-top-arrow { position: relative; z-index: 1; width: 24px; height: 24px; }
.site-scroll-top-border { position: absolute; inset: 4px; border: 1px solid #f0d39c80; border-radius: 50%; }
.site-scroll-top-progress { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); pointer-events: none; }

@media (max-width: 639px) {
    .site-scroll-top-shell { left: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
    .site-scroll-top { width: 44px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
    .site-scroll-top { transition: none; }
}