.spw-link {
    position: fixed;
    z-index: 45;
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(44px, calc(var(--spw-size, 64px) * 0.8), 56px);
    height: clamp(44px, calc(var(--spw-size, 64px) * 0.8), 56px);
    border-radius: 50%;
    background: #25d366;
    box-shadow: 0 4px 14px rgba(7, 94, 84, 0.35);
    line-height: 0;
    text-decoration: none;
}

.spw-link:hover { background: #1ebe57; }

.spw-link:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

.spw-link svg {
    width: 58%;
    height: 58%;
    display: block;
    fill: #fff;
}

.spw-br { right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); }
.spw-bl { left: 16px; bottom: max(16px, env(safe-area-inset-bottom)); }
.spw-tr { right: 16px; top: 88px; }
.spw-tl { left: 16px; top: 88px; }

@media (min-width: 768px) {
    .spw-link {
        width: var(--spw-size, 64px);
        height: var(--spw-size, 64px);
    }

    .spw-br { right: 24px; bottom: 24px; }
    .spw-bl { left: 24px; bottom: 24px; }
    .spw-tr { right: 24px; top: 24px; }
    .spw-tl { left: 24px; top: 24px; }
}