.osk-page-scroll {
    position: fixed;
    right: max(0.85rem, env(safe-area-inset-right));
    bottom: max(0.85rem, env(safe-area-inset-bottom));
    z-index: 90;
    display: grid;
    gap: 0.45rem;
}

.osk-page-scroll[hidden] {
    display: none;
}

.osk-page-scroll__button {
    width: 2.8rem;
    height: 2.8rem;
    display: inline-grid;
    place-items: center;
    padding: 0;
    border: 2px solid #229ecd;
    border-radius: 0.55rem;
    background: rgb(255 255 255 / 96%);
    color: #1b7fa6;
    box-shadow: 0 8px 22px rgb(43 43 43 / 16%);
    cursor: pointer;
    backdrop-filter: blur(8px);
}

.osk-page-scroll__button:hover,
.osk-page-scroll__button:focus-visible {
    background: #e6f4fa;
    color: #1b5e20;
}

.osk-page-scroll__button:disabled {
    opacity: 0.38;
    cursor: default;
    box-shadow: none;
}

.osk-page-scroll__button:focus-visible {
    outline: 3px solid #f4a261;
    outline-offset: 3px;
}

@media (max-width: 36rem) {
    .osk-page-scroll {
        right: max(0.65rem, env(safe-area-inset-right));
        bottom: max(0.65rem, env(safe-area-inset-bottom));
    }

    .osk-page-scroll__button {
        width: 2.65rem;
        height: 2.65rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}