@layer components {

.kn-scroll-top { position: fixed; bottom: 32px; right: 32px; width: 44px; height: 44px; border-radius: 0; background: var(--border-strong); color: #FFFFFF; border: 2px solid var(--border-strong); cursor: pointer; font-size: 1.25rem; line-height: 1; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; z-index: 90; }
.kn-scroll-top.is-visible { opacity: 1; visibility: visible; }
.kn-scroll-top:hover { background: var(--accent-ink); border-color: var(--accent-ink); }

@media (max-width: 900px) {
  .kn-scroll-top { bottom: 20px; right: 20px; width: 40px; height: 40px; font-size: 1.125rem; }
}

}