/* Scroll hint, index.html only (html.sh: head script, removed by onerror; html.shr: added by the script once it runs) */
html.sh{--rs:68px}
html.sh .sh-hint{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px) + var(--c,0px) + var(--n,0px));z-index:44;box-sizing:border-box;display:flex;align-items:center;gap:8px;min-height:44px;padding:10px 18px;border:2px solid var(--ink);border-radius:999px;background:var(--lime);color:var(--ink);box-shadow:0 4px 14px color-mix(in srgb,var(--ink) 35%,transparent);font-size:16px;line-height:20px;font-weight:600;white-space:nowrap;pointer-events:none;opacity:0;transform:translate(-50%,8px);transition:opacity .2s,transform .2s}
html.sh .sh-hint[hidden]{display:none}
html.sh .sh-w{background:var(--ink);border-color:var(--ink);color:var(--white);box-shadow:0 0 0 2px var(--white),0 4px 14px color-mix(in srgb,var(--ink) 35%,transparent)} /* the white ring keeps the ink pill visible on the dark hero */
html.sh .sh-on{opacity:1;transform:translateX(-50%)}
html.sh .sh-hint svg{flex:none;width:20px;height:20px}
@media(max-height:599px){html.sh{--rs:52px}html.sh .sh-hint{bottom:calc(8px + env(safe-area-inset-bottom,0px) + var(--c,0px) + var(--n,0px));min-height:36px;padding:6px 14px;gap:6px;font-size:14px}html.sh .sh-hint svg{width:16px;height:16px}}
@media(max-width:899px) and (prefers-reduced-motion:no-preference){
html.sh.shr.hl .heroCopy{padding-bottom:calc(var(--rs) + env(safe-area-inset-bottom,0px) + max(0px,560px - 100svh + var(--hdr)))}
}
@media(prefers-reduced-motion:no-preference){html.sh .sh-on svg{animation:b 1.6s infinite}}
@keyframes b{50%{transform:translateY(3px)}}