.rf{--ink:var(--editorial-ink);--mute:var(--editorial-secondary);--hair:#d3d1ca;--grey:#a6a9a1;--pale:#dcddd7;--move:cubic-bezier(.65, 0, .35, 1);--out:cubic-bezier(.2, .8, .2, 1);border-top:1px solid var(--ink);color:var(--ink);margin:0 0 56px;padding-top:16px}.rf.is-instant,.rf.is-instant *{transition:none!important;animation:none!important}.rf-top{justify-content:space-between;align-items:baseline;gap:24px;margin-bottom:14px;display:flex}.rf-step{color:var(--mute);font:400 13px/1.4 var(--font-geist-mono), monospace;letter-spacing:normal}.rf-replay{min-height:0;color:var(--mute);font:400 13px/1.4 var(--font-geist-mono), monospace;letter-spacing:normal;cursor:pointer;background:0 0;border:0;border-radius:0;flex:none;padding:0}.rf-replay:hover{color:var(--ink)}.rf-replay:focus-visible{outline-offset:4px;outline:2px solid}.rf-field{position:relative}.rf .rf-count{text-align:right;width:28%;animation:rf-rise .55s var(--out) both;flex-direction:column;align-items:flex-end;gap:6px;margin:0;display:flex;position:absolute;top:-4px;right:0}.rf-count-n{letter-spacing:-.04em;font-size:clamp(64px,7vw,104px);font-weight:400;line-height:1}.rf-count-unit{color:var(--mute);text-wrap:balance;font-size:16px;line-height:1.5}@keyframes rf-rise{0%{opacity:0;transform:translateY(12px)}}.rf-art{width:100%;height:auto;display:block;overflow:visible}.rf .rf-narrow{display:none}.rf-art text{font:400 11px var(--font-geist-mono), monospace;letter-spacing:.02em}.rf-narrow text{letter-spacing:0;font-size:8.5px}.rf-art .rf-code{fill:var(--mute);opacity:0;transition:opacity .4s,fill .4s}.s1 .rf-code{opacity:1}.rf-art .s4 .rf-code.is-chosen,.s4 .rf-art .rf-code.is-chosen{fill:var(--ink);font-weight:500}.rf-ghost{fill:none;stroke:var(--hair);stroke-width:1px;opacity:0;transition:opacity .4s .4s,stroke .4s}.s3 .rf-ghost{opacity:1}.s4 .rf-ghost.is-chosen{stroke:var(--ink)}.rf-dot{transform:translate(var(--x), var(--y));transition:transform 1s var(--move), opacity .4s ease}.rf-dot rect{fill:var(--grey);opacity:0;transform-box:fill-box;transform-origin:50%;transition:transform .45s var(--out), opacity .3s ease, fill .5s ease;transform:scale(0)}.s1 .rf-dot.is-first rect{opacity:1;transition-delay:calc(var(--i) * 28ms);transform:none}.s2 .rf-dot rect{opacity:1;transition-delay:calc(var(--i) * 22ms);transform:none}.s3 .rf-wide .rf-dot:not(.is-rest){transform:translate(var(--to-x), var(--to-y));transition-delay:calc(var(--k) * 18ms)}.s3 .rf-dot.is-rest{opacity:0}.s4 .rf-dot rect{fill:var(--pale);transition-delay:0s}.s4 .rf-dot.is-chosen rect{fill:var(--ink)}.rf .rf-patterns{grid-template-columns:repeat(4,minmax(0,1fr));margin:4px 0 0;display:grid}.rf-patterns li{min-width:0;color:var(--mute);opacity:0;transition:opacity .5s ease, transform .6s var(--out), color .4s ease;flex-direction:column;gap:6px;padding:0 24px 0 0;display:flex;transform:translateY(10px)}.s3 .rf-patterns li{opacity:1;transition-delay:calc(.6s + var(--k) * 90ms), calc(.6s + var(--k) * 90ms), 0s;transform:none}.s4 .rf-patterns li.is-chosen{color:var(--ink)}.rf-key{height:18px;font:400 13px/18px var(--font-geist-mono), monospace;letter-spacing:normal}.rf-name{letter-spacing:-.01em;font-size:16px;font-weight:500;line-height:1.4}.rf-size{font-size:13px;line-height:1.5}.rf-tokens{display:none}.rf .rf-note{color:var(--mute);opacity:0;margin:20px 0 0;font-size:13px;line-height:1.6;transition:opacity .5s}.s3 .rf-note{opacity:1;transition-delay:1s}@media (max-width:1000px){.rf .rf-wide{display:none}.rf .rf-narrow{max-width:460px;display:block}.rf .rf-count{text-align:left;align-items:flex-start;width:auto;margin-bottom:18px;position:static}.rf .rf-patterns{border-top:1px solid var(--editorial-line);grid-template-columns:minmax(0,1fr);margin-top:22px}.rf-patterns li{border-bottom:1px solid var(--editorial-line);padding:12px 0}.rf-tokens{flex-wrap:wrap;gap:3px;margin-top:2px;display:flex}.rf-tokens i{background:var(--grey);border-radius:2px;width:9px;height:9px;transition:background-color .5s}.s4 .rf-tokens i{background:var(--pale)}.s4 .is-chosen .rf-tokens i{background:var(--ink)}.rf-size{display:none}.s3 .rf-narrow .rf-dot.is-rest{opacity:1}.s3 .rf-narrow .rf-dot.is-rest rect,.s4 .rf-narrow .rf-dot:not(.is-chosen) rect{fill:var(--pale)}}@media (prefers-reduced-motion:reduce){.rf,.rf *{transition:none!important;animation:none!important}}