.scroll-frame{position:relative;min-width:0}
.scroll-hint{position:absolute;z-index:50;display:grid;place-items:center;width:30px;height:30px;padding:0;border:1px solid var(--mh-accent);border-radius:50%;background:var(--mh-surface);color:var(--mh-accent);font:900 17px/1 system-ui;box-shadow:0 4px 16px var(--mh-shadow-strong);cursor:pointer;opacity:0;pointer-events:none;transition:opacity .15s,transform .15s}
.scroll-hint.visible{opacity:1;pointer-events:auto}
.scroll-hint:hover{background:var(--mh-accent-solid);color:var(--mh-on-accent)}
.scroll-hint-left{left:7px;top:50%;transform:translateY(-50%)}.scroll-hint-left:hover{transform:translateY(-50%) scale(1.08)}
.scroll-hint-right{right:7px;top:50%;transform:translateY(-50%)}.scroll-hint-right:hover{transform:translateY(-50%) scale(1.08)}
.scroll-hint-up{left:50%;top:7px;transform:translateX(-50%)}.scroll-hint-up:hover{transform:translateX(-50%) scale(1.08)}
.scroll-hint-down{left:50%;bottom:7px;transform:translateX(-50%)}.scroll-hint-down:hover{transform:translateX(-50%) scale(1.08)}
@media(max-width:520px){.scroll-hint{width:28px;height:28px}}