#refer-play{--dir: 1;--ease: cubic-bezier(.22, 1, .36, 1)}[dir=rtl] #refer-play{--dir: -1}#refer-play .refer-chip[aria-pressed=true] .refer-chip-dot{background-color:var(--color-primary)}#refer-play .refer-range{background:linear-gradient(to right,var(--color-primary) 0 var(--fill),color-mix(in srgb,var(--color-ink) 10%,transparent) var(--fill) 100%)}[dir=rtl] #refer-play .refer-range{background:linear-gradient(to left,var(--color-primary) 0 var(--fill),color-mix(in srgb,var(--color-ink) 10%,transparent) var(--fill) 100%)}#refer-play .refer-range::-webkit-slider-thumb{appearance:none;width:1.5rem;height:1.5rem;border-radius:999px;background:var(--color-surface);border:3px solid var(--color-primary);box-shadow:0 4px 12px -2px #14181f40;cursor:grab;transition:transform .15s var(--ease)}#refer-play .refer-range::-moz-range-thumb{width:1.5rem;height:1.5rem;border-radius:999px;background:var(--color-surface);border:3px solid var(--color-primary);box-shadow:0 4px 12px -2px #14181f40;cursor:grab;transition:transform .15s var(--ease)}#refer-play .refer-range:active::-webkit-slider-thumb{transform:scale(1.12);cursor:grabbing}#refer-play .refer-range:active::-moz-range-thumb{transform:scale(1.12);cursor:grabbing}#refer-play .refer-slot{background:color-mix(in srgb,var(--color-ink) 4%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--color-ink) 8%,transparent);transition:background .28s var(--ease),box-shadow .28s var(--ease),transform .28s var(--ease)}#refer-play .refer-slot[data-on=true]{background:radial-gradient(circle at 34% 28%,color-mix(in srgb,#fff 45%,transparent),transparent 55%),var(--color-primary);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--color-ink) 6%,transparent),0 2px 6px -2px color-mix(in srgb,var(--color-primary) 55%,transparent);transition-delay:calc(var(--i) * 22ms)}#refer-play .refer-slot[data-pop=true]{animation:refer-pop .42s var(--ease) both;animation-delay:calc(var(--i) * 22ms)}@keyframes refer-pop{0%{transform:scale(.4)}55%{transform:scale(1.18)}to{transform:scale(1)}}#refer-play .refer-gain[data-run=true]{animation:refer-gain .85s var(--ease) both}@keyframes refer-gain{0%{opacity:0;transform:translateY(.5rem)}25%{opacity:1;transform:translateY(-.15rem)}to{opacity:0;transform:translateY(-1.4rem)}}#refer-play .refer-flow-track{background:linear-gradient(to right,color-mix(in srgb,var(--color-ink) 14%,transparent),transparent)}[dir=rtl] #refer-play .refer-flow-track{background:linear-gradient(to left,color-mix(in srgb,var(--color-ink) 14%,transparent),transparent)}#refer-play .refer-flow-track:after{content:"";position:absolute;inset-block-start:-2px;inset-inline-start:0;width:5px;height:5px;border-radius:999px;background:var(--color-primary);animation:refer-run 3.6s var(--ease) infinite;animation-delay:calc(var(--i) * .45s)}@keyframes refer-run{0%,18%{opacity:0;transform:translate(0)}26%{opacity:1}48%{opacity:1;transform:translate(calc(var(--dir) * 1.5rem))}58%,to{opacity:0;transform:translate(calc(var(--dir) * 1.5rem))}}#refer-play .refer-flow-icon{animation:refer-beat 3.6s var(--ease) infinite;animation-delay:calc(var(--i) * .45s)}@keyframes refer-beat{0%,12%,40%,to{transform:scale(1)}22%{transform:scale(1.14)}}.refer-page .refer-hero-art{opacity:.75}[dir=rtl] .refer-page .refer-hero-art{transform:scaleX(-1)}.refer-page[data-tone=bloom] .refer-hero-art{background:radial-gradient(38rem 22rem at 82% -10%,color-mix(in srgb,var(--color-primary) 13%,transparent),transparent 70%),radial-gradient(28rem 20rem at 6% 110%,color-mix(in srgb,var(--color-accent) 10%,transparent),transparent 70%)}.refer-page[data-tone=ribbon] .refer-hero-art{background:linear-gradient(104deg,transparent 0 42%,color-mix(in srgb,var(--color-primary) 9%,transparent) 42% 58%,transparent 58%)}.refer-page[data-tone=grid] .refer-hero-art{background-image:radial-gradient(color-mix(in srgb,var(--color-ink) 12%,transparent) 1px,transparent 1px);background-size:22px 22px;mask-image:radial-gradient(60% 70% at 70% 0%,#000,transparent 75%)}.refer-page .refer-rate{background:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--color-primary) 12%,transparent),color-mix(in srgb,var(--color-primary) 4%,transparent) 70%)}.refer-page .refer-rate-ring{border:1.5px dashed color-mix(in srgb,var(--color-primary) 38%,transparent);animation:refer-seal 26s linear infinite}@keyframes refer-seal{to{transform:rotate(360deg)}}