.scroll-hint{position:fixed;left:50%;bottom:22px;z-index:40;display:flex;align-items:center;gap:16px;min-width:280px;padding:11px 12px 11px 19px;border:1px solid #5597cf88;border-radius:999px;background:linear-gradient(110deg,rgba(3,16,31,.94),rgba(19,22,61,.94));color:#eef8ff;box-shadow:0 18px 55px #000b,0 0 32px #1688ff33,inset 0 1px #ffffff18;backdrop-filter:blur(16px);transform:translate(-50%,24px);opacity:0;visibility:hidden;transition:opacity .3s ease,transform .3s ease,visibility .3s;overflow:hidden}
.scroll-hint::before{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 22%,#59d7ff15 48%,transparent 72%);transform:translateX(-120%);animation:scrollHintSweep 3.8s ease-in-out infinite}
.scroll-hint.is-visible{transform:translate(-50%,0);opacity:1;visibility:visible}
.scroll-hint>span{position:relative;display:flex;flex-direction:column;gap:2px}
.scroll-hint small{color:#7fcfff;font-size:9px;font-weight:850;letter-spacing:.16em}
.scroll-hint strong{font-size:14px;letter-spacing:-.01em}
.scroll-hint i{position:relative;display:grid;place-items:center;width:38px;height:38px;margin-left:auto;border-radius:50%;background:linear-gradient(145deg,#117bf3,#6546d8);box-shadow:0 0 22px #278cff66;animation:scrollHintBounce 1.7s ease-in-out infinite}
.scroll-hint i svg{width:18px;height:18px}
.scroll-hint:hover{border-color:#69d5ff;box-shadow:0 20px 65px #000c,0 0 42px #267fff55}
@keyframes scrollHintBounce{0%,100%{transform:translateY(-2px)}50%{transform:translateY(3px)}}
@keyframes scrollHintSweep{0%,35%{transform:translateX(-120%)}70%,100%{transform:translateX(120%)}}
@media(max-width:600px){.scroll-hint{bottom:15px;min-width:250px;padding-left:16px}.scroll-hint strong{font-size:13px}}
@media(prefers-reduced-motion:reduce){.scroll-hint::before,.scroll-hint i{animation:none}.scroll-hint{transition:none}}