/* Scroll hints shared by the panel and the landing page: round arrows that appear only when there is something to scroll to */
.scroll-hint { position: fixed; z-index: 40; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line, #e7e9ee); background: rgba(255,255,255,.92); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 6px 20px rgba(16,17,20,.14); display: grid; place-items: center; cursor: pointer; color: var(--blue, #1f6bff); padding: 0;
  opacity: 0; transform: translateY(6px); transition: opacity .18s ease, transform .18s ease, background .15s, color .15s; }
.scroll-hint[hidden] { display: none; }
.scroll-hint.on { opacity: 1; transform: none; }
.scroll-up { transform: translateY(-6px); }
.scroll-up.on { transform: none; }
.scroll-hint svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.scroll-hint:hover { background: var(--blue, #1f6bff); color: #fff; border-color: var(--blue, #1f6bff); }
.scroll-hint:focus-visible { outline: 2px solid var(--blue, #1f6bff); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .scroll-hint { transition: none; } }