:root{--chrome-travel:clamp(12rem, 30vh, 18rem)}.chrome-in--left{translate:calc(-1 * var(--chrome-travel)) 0}.chrome-in--right{translate:var(--chrome-travel) 0}.chrome-in--up{translate:0 var(--chrome-travel)}html:not(.js) .chrome-in--left,html:not(.js) .chrome-in--right,html:not(.js) .chrome-in--up{translate:none}@media (prefers-reduced-motion:reduce){.chrome-in--left,.chrome-in--right,.chrome-in--up{translate:none}}.chrome-tap{transition:scale .15s ease-out}.chrome-tap:active{scale:.8}@media (prefers-reduced-motion:reduce){.chrome-tap{transition:none}}[data-hint-tone]{--hint-ink:#a3917a}[data-hint-tone=dark]{--hint-ink:#3a2a18}[data-hint-tone] p,[data-hint-tone] .scroll-cue{transition:color .4s linear}@media (prefers-reduced-motion:reduce){[data-hint-tone] p,[data-hint-tone] .scroll-cue{transition:none}}
.scroll-cue{display:block;overflow:visible}.scroll-cue__shell{fill:none;stroke:currentColor;stroke-width:1.6px;opacity:.75}.scroll-cue__dot{fill:currentColor;transform-box:fill-box;transform-origin:50%;animation:1.9s cubic-bezier(.45,0,.55,1) infinite scroll-cue-fall}@keyframes scroll-cue-fall{0%{opacity:0;transform:translateY(0)}15%{opacity:1}55%{opacity:1;transform:translateY(7px)}80%{opacity:0;transform:translateY(9px)}to{opacity:0;transform:translateY(9px)}}@media (prefers-reduced-motion:reduce){.scroll-cue__dot{opacity:1;animation:none}}