.tape-page{--tape-gutter:calc((100vw - 80rem)/2 - 28px)}.tape-seg,.tape-end,.tape-head{display:none}@media (min-width:1380px){.tape-seg,.tape-end,.tape-head{display:block}}.tape-seg{top:0;bottom:0;left:var(--tape-gutter);pointer-events:none;width:0;position:absolute}.tape-seg__ahead,.tape-seg__played{z-index:4;width:2px;position:absolute;top:0;bottom:0;left:-1px;-webkit-mask-image:linear-gradient(#000 56px,#0000 56px 124px,#000 124px);mask-image:linear-gradient(#000 56px,#0000 56px 124px,#000 124px)}.tape-seg--plain .tape-seg__ahead,.tape-seg--plain .tape-seg__played{-webkit-mask-image:none;mask-image:none}.tape-seg--first .tape-seg__ahead,.tape-seg--first .tape-seg__played{-webkit-mask-image:linear-gradient(#0000 10px,#000 10px 56px,#0000 56px 124px,#000 124px);mask-image:linear-gradient(#0000 10px,#000 10px 56px,#0000 56px 124px,#000 124px)}.tape-seg__ahead{opacity:.7;background-image:radial-gradient(circle,currentColor 1px,#0000 1.2px);background-size:2px 9px}.tape-seg__played{background:linear-gradient(currentColor 45vh,#0000 45vh) fixed}.tape-seg__elbow{border-top:2px solid;border-left:2px solid;border-top-left-radius:10px;width:30px;height:12px;position:absolute;top:-2px;left:-1px}.tape-seg__stop,.tape-end__stop{width:34px;height:34px;position:absolute;translate:-50%}.tape-seg__stop{z-index:7;top:64px;left:0}.tape-seg__stop:before{content:"";background:var(--tape-bg,var(--canvas));border-radius:6px;position:absolute;inset:-6px -6px -26px}[data-tape-bg=band]{--tape-bg:var(--color-haze-100)}.tape-seg__stop svg,.tape-end__stop svg{width:100%;height:100%;position:absolute;inset:0}.tape-seg__stop:has(svg[viewBox="0 0 70 26"]) svg{height:14px;inset:10px 0}.tape-seg__on{opacity:0}[data-on]>.tape-seg__stop .tape-seg__on,[data-on]>.tape-end__stop .tape-seg__on{opacity:1}[data-on]>.tape-seg__stop .tape-seg__off,[data-on]>.tape-end__stop .tape-seg__off{opacity:0}[data-tape-motion] [data-on]>.tape-seg__stop .tape-seg__on,[data-tape-motion] [data-on]>.tape-end__stop .tape-seg__on{animation:.52s cubic-bezier(.3,1.6,.5,1) both tape-pop}@keyframes tape-pop{0%{scale:.5}}.tape-seg__no{letter-spacing:.08em;color:currentColor;opacity:.45;font-size:10px;position:absolute;top:40px;left:50%;translate:-50%}[data-on]>.tape-seg__stop .tape-seg__no{opacity:1}.tape-head{top:45vh;left:var(--tape-gutter);z-index:6;background:var(--color-pink-500);border:3px solid var(--color-haze-950);opacity:0;pointer-events:none;border-radius:999px;width:20px;height:20px;transition:opacity .15s,border-color .15s;position:fixed;translate:-50% -50%}.tape-head[data-show]{opacity:1}.tape-head[data-dark]{border-color:var(--color-paper)}.tape-head__tag{letter-spacing:.1em;color:var(--color-haze-950);background:var(--color-gold-200);border:2px solid var(--color-haze-950);padding:2px 6px;font-size:10px;font-weight:700;position:absolute;top:50%;right:18px;translate:0 -50%}.tape-end{height:96px;position:relative}.tape-end__drop{top:0;left:calc(var(--tape-gutter) - 1px);width:2px;height:48px;opacity:calc(.25 + var(--p,0)*.75);background:currentColor;position:absolute}.tape-end__track{top:47px;left:var(--tape-gutter);right:calc(var(--tape-gutter) + 40px);opacity:.85;background-image:radial-gradient(circle,currentColor 1px,#0000 1.2px);background-size:9px 2px;height:2px;position:absolute}.tape-end__played{width:calc(var(--p,0)*100%);background:currentColor;position:absolute;inset:0 auto 0 0}.tape-end__stop{top:31px;right:var(--tape-gutter);translate:50%}.tape-end__label{top:72px;right:calc(var(--tape-gutter) - 6px);color:currentColor;opacity:calc(.35 + var(--p,0)*.65);font-size:10px;position:absolute}[data-tape-instant] .tape-seg__on{animation:none!important}[data-tape-motion] [data-m]:not([data-played]):not([data-played] [data-m]){opacity:0}[data-tape-motion=page] section:not(:has(section)):not(footer section):not([data-played]):not([data-played] section){opacity:0}[data-tape-motion] :is([data-m=sticker][data-played],[data-played] [data-m=sticker]){animation:.65s cubic-bezier(.3,1.5,.5,1) both tape-slap}@keyframes tape-slap{0%{opacity:0;transform:scale(1.7)rotate(-12deg)}50%{opacity:1}}[data-tape-motion] :is([data-m=rise][data-played],[data-played] [data-m=rise]){animation:.65s cubic-bezier(.2,.8,.2,1) both tape-rise;animation-delay:calc(var(--i,0)*.11s + .15s)}@keyframes tape-rise{0%{opacity:0;transform:translateY(28px)}}[data-tape-motion=page] section:not(:has(section)):not(footer section):is([data-played],[data-played] section){animation:.7s cubic-bezier(.2,.8,.2,1) both tape-rise}[data-m=wipe]{display:inline-block;position:relative}[data-tape-motion] :is([data-m=wipe][data-played],[data-played] [data-m=wipe]){animation:.72s cubic-bezier(.65,0,.35,1) .12s both tape-wipe-text}[data-tape-motion] :is([data-m=wipe][data-played],[data-played] [data-m=wipe]):after{content:"";background:var(--color-pink-500);border:3px solid var(--color-haze-950);border-radius:3px;width:.45em;animation:.72s cubic-bezier(.65,0,.35,1) .12s both tape-wipe-bar;position:absolute;top:4%;bottom:4%}@keyframes tape-wipe-text{0%{clip-path:inset(-10% 100% -10% 0)}to{clip-path:inset(-10% 0)}}@keyframes tape-wipe-bar{0%{opacity:1;left:0}85%{opacity:1;left:calc(100% - .45em)}to{opacity:0;left:calc(100% - .45em)}}[data-tape-motion] :is([data-m=drop][data-played],[data-played] [data-m=drop]){animation:.75s cubic-bezier(.3,1.4,.5,1) both tape-drop;animation-delay:calc(var(--n,0)*80ms + .1s)}li[data-m=drop]:nth-child(4n+2){--n:1}li[data-m=drop]:nth-child(4n+3){--n:2}li[data-m=drop]:nth-child(4n+4){--n:3}@keyframes tape-drop{0%{opacity:0;transform:translateY(-56px)rotate(-4deg)}55%{opacity:1}}[data-tape-motion] :is([data-m=drop][data-played],[data-played] [data-m=drop]) svg g[style*=transform-origin]{animation:1.1s cubic-bezier(.2,.8,.2,1) .4s both tape-reel}@keyframes tape-reel{0%{rotate:-360deg}}[data-tape-motion] [data-m=rise][data-played] [data-step-glyph]{animation:.52s cubic-bezier(.3,1.6,.5,1) both tape-pop;animation-delay:calc(var(--i,0)*.11s + .5s)}[data-tape-motion] [data-scrub=tilt]{transform:rotate(calc((1 - var(--t,1))*-4deg))scale(calc(.9 + var(--t,1)*.1));transform-origin:50% 0;will-change:transform}[data-tape-motion] [data-locked]{--t:1!important}
/*# sourceMappingURL=3cf091a559abdbd9.css.map*/