@property --tp-n{syntax:"<integer>";inherits:true;initial-value:0}.tp-track{--uk-movement-track:240svh}.tp-pane{--c:min(9svh, 13vw);color:#e6ecf5;background:#0d1424;overflow:hidden}.tp-stage{place-items:center;display:grid;position:absolute;inset:0}.tp-title{--k:clamp(0, var(--uk-movement-track-p) / .4, 1);color:inherit;opacity:calc(1 - var(--k));translate:0 calc(var(--k) * -40px);margin:0;font-size:clamp(1.4rem,3vw,2.4rem);font-weight:200;position:absolute;top:14%}.tp-frame{width:calc(var(--c) * 6 + 1px);height:calc(var(--c) * 6 + 1px);position:relative}.tp-frame i{--k:clamp(0, (var(--uk-movement-track-p) - .2 - var(--i) * .02) / (.6 - var(--i) * .02), 1);--e:calc(var(--k) * var(--k) * (3 - 2 * var(--k)));--s:calc((1 + var(--e) * (var(--to) - 1)) / 6);background:#e6ecf580;position:absolute}.tp-frame i.is-h{width:100%;height:1px;transform:scaleX(var(--s))}.tp-frame i.is-v{width:1px;height:100%;transform:scaleY(var(--s))}.tp-frame i.is-tl{top:0;left:0}.tp-frame i.is-tr{top:0;right:0}.tp-frame i.is-br{bottom:0;right:0}.tp-frame i.is-bl{bottom:0;left:0}.tp-frame i.is-h.is-tl,.tp-frame i.is-h.is-bl{transform-origin:0 0}.tp-frame i.is-h.is-tr,.tp-frame i.is-h.is-br{transform-origin:100% 0}.tp-frame i.is-v.is-tl,.tp-frame i.is-v.is-tr{transform-origin:0 0}.tp-frame i.is-v.is-bl,.tp-frame i.is-v.is-br{transform-origin:0 100%}.tp-count{--tp-n:calc(var(--uk-movement-track-p) * 100);counter-reset:tp var(--tp-n);letter-spacing:.08em;font:400 .8rem/1 ui-monospace,Menlo,monospace;position:absolute}.tp-count:before{content:counter(tp) "%"}.tp-bar{inset-inline:10%;background:#e6ecf533;height:1px;position:absolute;bottom:10%}.tp-bar:after{content:"";transform-origin:100%;scale:var(--uk-movement-track-p) 1;background:#5b8cff;position:absolute;inset:0}.tp-bar:not(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)):after{transform-origin:0}.tp-track.is-abc{--uk-movement-track:260svh}.tp-abc{gap:clamp(16px,4vw,48px);display:flex}.tp-cube{aspect-ratio:1;background:color-mix(in srgb, #5b8cff calc(var(--part) * 100%), #e6ecf514);color:#fff;width:clamp(80px,16vw,180px);opacity:calc(.2 + var(--part) * .8);translate:0 calc((1 - var(--part)) * 80px);rotate:calc((1 - var(--part)) * -12deg);border-radius:16px;place-items:center;font-size:clamp(1.6rem,4vw,3rem);font-weight:300;display:grid}.tp-cube.is-a{--part:clamp(0, var(--uk-movement-track-p) / .33, 1)}.tp-cube.is-b{--part:clamp(0, (var(--uk-movement-track-p) - .33) / .33, 1)}.tp-cube.is-c{--part:clamp(0, (var(--uk-movement-track-p) - .66) / .34, 1)}.tp-abc~.tp-count{bottom:18%}