@font-face{font-family:Geist Sans;src:url(https://assets.codepen.io/605876/GeistVF.ttf) format("truetype")}*,*:after,*:before{box-sizing:border-box;transform-style:preserve-3d}:root{--line: hsl(0 0% 95% / .25);--basic: ease;--back: linear( 0, -.0077 5.2%, -.0452 16.98%, -.0493 22.35%, -.0418 25.57%, -.0258 28.57%, -.0007 31.42%, .0335 34.15%, .1242 39.03%, .2505 43.65%, .3844 47.35%, .656 53.68%, .81 58.37%, .9282 63.52%, .9719 66.23%, 1.0055 69.04%, 1.0255 71.4%, 1.0396 73.87%, 1.0477 76.48%, 1.05 79.27%, 1.0419 84.36%, 1.0059 95.49%, 1 );--expo: linear( 0, .0053 17.18%, .0195 26.59%, .0326 30.31%, .0506 33.48%, .0744 36.25%, .1046 38.71%, .1798 42.62%, .2846 45.93%, .3991 48.37%, .6358 52.29%, .765 55.45%, .8622 59.3%, .8986 61.51%, .9279 63.97%, .9481 66.34%, .9641 69.01%, .9856 75.57%, .9957 84.37%, 1 );--sine: linear( 0, .007 5.35%, .0282 10.75%, .0638 16.26%, .1144 21.96%, .1833 28.16%, .2717 34.9%, .6868 62.19%, .775 68.54%, .8457 74.3%, .9141 81.07%, .9621 87.52%, .9905 93.8%, 1 );--power: linear( 0, .0012 14.95%, .0089 22.36%, .0297 28.43%, .0668 33.43%, .0979 36.08%, .1363 38.55%, .2373 43.07%, .3675 47.01%, .5984 52.15%, .7121 55.23%, .8192 59.21%, .898 63.62%, .9297 66.23%, .9546 69.06%, .9733 72.17%, .9864 75.67%, .9982 83.73%, 1 );--circ: linear( -0, .0033 5.75%, .0132 11.43%, .0296 16.95%, .0522 22.25%, .0808 27.25%, .1149 31.89%, .1542 36.11%, .1981 39.85%, .2779 44.79%, .3654 48.15%, .4422 49.66%, .5807 50.66%, .6769 53.24%, .7253 55.37%, .7714 58.01%, .8142 61.11%, .8536 64.65%, .9158 72.23%, .9619 80.87%, .9904 90.25%, 1 );--bounce: linear( 0, .0039, .0157, .0352, .0625 9.09%, .1407, .25, .3908, .5625, .7654, 1, .8907, .8125 45.45%, .7852, .7657, .7539, .75, .7539, .7657, .7852, .8125 63.64%, .8905, 1 72.73%, .9727, .9532, .9414, .9375, .9414, .9531, .9726, 1, .9883, .9844, .9883, 1 );--elastic: linear( 0, .0009 8.51%, -.0047 19.22%, .0016 22.39%, .023 27.81%, .0237 30.08%, .0144 31.81%, -.0051 33.48%, -.1116 39.25%, -.1181 40.59%, -.1058 41.79%, -.0455, .0701 45.34%, .9702 55.19%, 1.0696 56.97%, 1.0987 57.88%, 1.1146 58.82%, 1.1181 59.83%, 1.1092 60.95%, 1.0057 66.48%, .986 68.14%, .9765 69.84%, .9769 72.16%, .9984 77.61%, 1.0047 80.79%, .9991 91.48%, 1 );--ease: var(--back)}body{display:grid;place-items:center;min-height:100vh;font-family:Geist Sans,SF Pro Text,SF Pro Icons,AOS Icons,Helvetica Neue,Helvetica,Arial,sans-serif,system-ui;font-weight:80;overflow:hidden}#app{display:grid;place-items:center;gap:4rem}h2{font-weight:160;margin:0;transform-style:flat}[aria-hidden=true]{-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none}[type=range]{accent-color:var(--line)}.counter{padding:1rem 2rem;border:2px solid var(--line);background:#050505;border-radius:12px;display:grid;place-items:center}fieldset .sr-only{position:absolute;font-size:var(--font-size);line-height:var(--line-height);z-index:2;letter-spacing:2px;font-variant:tabular-nums;color:transparent}fieldset{--mask-size: .25;--font-size: clamp(2rem, 4vw + 1rem, 8rem);--line-height: calc(var(--font-size) * 1.5);padding:0}legend{color:red;border:0;font-weight:120;font-size:calc(var(--font-size) * .25)}fieldset{margin:0;border:0}.character{display:grid;height:1lh;line-height:var(--line-height);font-variant:tabular-nums;font-size:var(--font-size);overflow:hidden;-webkit-mask:linear-gradient(transparent,white calc(1lh * var(--mask-size)) calc(100% - (1lh * var(--mask-size))),transparent);mask:linear-gradient(transparent,white calc(1lh * var(--mask-size)) calc(100% - (1lh * var(--mask-size))),transparent);transform-style:flat}.character__track span{height:1lh;font-weight:120;transform-style:flat}.character,.character__track span{background:linear-gradient(#fafafa 50%,#737373);background-attachment:fixed;-webkit-background-clip:text;background-clip:text;color:transparent;transform-style:flat}.character{font-weight:20}.character__track{display:grid;translate:0 calc((var(--v) + 1) * (var(--line-height) * -1));transition:translate calc(var(--transition) * 1s) var(--ease, var(--basic))}.character:first-of-type{margin-right:.2ch;opacity:.75;font-size:calc(var(--font-size) * .8)}.characters{display:flex;gap:2px;transform-style:flat}.fraction{font-size:calc(var(--font-size) * .75);opacity:.75;font-weight:40;height:var(--line-height)}.fraction .character__track span{display:flex;flex-direction:column;align-items:end;padding:calc((var(--line-height) - var(--font-size)) * .2) 0}.counter:last-of-type{position:absolute;opacity:0;pointer-events:none}.counter:last-of-type [data-value]{position:relative}.counter:last-of-type [data-value]:after{content:attr(data-value);position:absolute;bottom:0%;left:0%;font-family:Geist Sans,sans-serif;font-weight:120;background:linear-gradient(#fafafa 50%,#737373);background-attachment:fixed;-webkit-background-clip:text;background-clip:text;color:transparent}.counter:last-of-type .fraction[data-value]:after{display:flex;flex-direction:column;align-items:end;padding:calc((var(--line-height) - var(--font-size)) * .2) 0;height:var(--line-height)}.dg.ac{z-index:9999!important;transform:translateZ(100vmin)}[data-explode=true] #app{transform:rotateX(-24deg) rotateY(-40deg)}.counter:first-of-type{transform:translateZ(calc(var(--depth) * 1))}.counter:last-of-type{transform:translateZ(calc(var(--depth) * -1))}[data-explode=true] .counter:last-of-type{opacity:1}[data-explode=true] #app{--depth: 100px;transition:transform .5s}#app{--depth: 0;transition:transform .5s 3s}[data-explode=true] .counter{transition:transform .5s 1s}.counter{transition:transform .5s 2s}[data-explode=true] .counter:last-of-type{transition:transform .5s 1s ease,opacity .5s 1s steps(1,start),background .5s 2s,border-color .5s 2s}.counter:last-of-type{transition:transform .5s 2s ease,opacity .5s 2s steps(1,end),background .5s 1s,border-color .5s 1s}.counter:last-of-type .character{-webkit-mask:unset;mask:unset;overflow:visible}.counter:last-of-type .character__track span{opacity:0}[data-explode=true] .counter:last-of-type .character--symbol,[data-explode=true] .counter:last-of-type .character__track span{transition:opacity .5s 3s;opacity:.5}[data-explode=true] .counter:last-of-type [data-value]:after{transition:opacity .5s 3s;opacity:0}.counter:last-of-type .character--symbol,.counter:last-of-type .character__track span{transition:opacity .5s}.counter:last-of-type [data-value]:after{transition:opacity .5s}.counter:last-of-type legend{transition:color .5s 1s}[data-explode=true] .counter:last-of-type{background:#00000026;border-color:#f2f2f226}[data-explode=true] .counter:last-of-type legend{transition:color .5s 2s;color:#ffffff40}div.tp-dfwv{width:300px}