.scroll-hint {
 position:absolute;z-index:3;left:50%;bottom:max(38px,7svh);
 transform:translateX(-50%);display:flex;align-items:center;flex-direction:column;
 gap:10px;width:max-content;max-width:calc(100% - 40px);padding:12px 24px;
 border:0;background:none;color:#eaf8db;cursor:pointer;
 font:18px/1.2 'Pixelify Sans',monospace;text-align:center;
 text-shadow:0 2px 2px #0b1714;
}
.scroll-hint[hidden]{display:none}
.has-scroll-hint .caption{visibility:hidden}
.scroll-hint-arrow{width:36px;height:42px;overflow:visible;image-rendering:pixelated;filter:drop-shadow(0 3px 1px #132b27);animation:scroll-invite 2.6s ease-in-out infinite}
.scroll-hint-arrow path{fill:currentColor}
.scroll-hint-arrow .extra-arrow{opacity:0}
.scroll-hint-label{letter-spacing:1px}
.scroll-hint-subtitle{display:none;font-size:15px;color:#ced8bb}
.scroll-hint[data-level="2"],.scroll-hint[data-level="3"]{
 color:#a8ffdb;background:#152b25ed;border:2px solid #6e9374;
 box-shadow:0 0 0 3px #14211bcc,0 8px 24px #0006;
 clip-path:polygon(8px 0,calc(100% - 8px) 0,calc(100% - 8px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 8px) calc(100% - 4px),calc(100% - 8px) 100%,8px 100%,8px calc(100% - 4px),0 calc(100% - 4px),0 4px,8px 4px);
 padding:18px 28px;
}
.scroll-hint[data-level="2"] .scroll-hint-arrow{width:46px;height:54px;animation-duration:1.8s}
.scroll-hint[data-level="2"] .second-arrow,.scroll-hint[data-level="3"] .extra-arrow{opacity:1}
.scroll-hint[data-level="3"]{border-color:#a8c68a;font-size:22px;gap:12px;padding:22px 30px}
.scroll-hint[data-level="3"] .scroll-hint-arrow{width:58px;height:68px;animation:scroll-insist 1.8s ease-in-out infinite}
.scroll-hint[data-level="3"] .scroll-hint-subtitle{display:block}
.scroll-hint:hover{color:#d9ffe4}
.scroll-hint:focus-visible{outline:3px solid #fff6c8;outline-offset:8px;clip-path:none}
@keyframes scroll-invite{0%,100%{transform:translateY(-3px)}50%{transform:translateY(5px)}}
@keyframes scroll-insist{0%,65%,100%{transform:translateY(-5px)}22%,44%{transform:translateY(9px)}33%{transform:translateY(1px)}}
@media(max-width:600px){
 .scroll-hint{bottom:max(36px,7svh);font-size:17px;padding:12px 18px}
 .scroll-hint[data-level="3"]{font-size:20px;padding:20px 22px}
}
@media(prefers-reduced-motion:reduce){.scroll-hint-arrow,.scroll-hint[data-level="3"] .scroll-hint-arrow{animation:none}}