:root{--radius: 20;--time-scale: 3;--line-width: .2;--num-line-segments: 80;--animation-duration: 99999;--ease-in-quad: cubic-bezier(.55, .085, .68, .53);--ease-in-cubic: cubic-bezier(.55, .055, .675, .19);--ease-in-quart: cubic-bezier(.895, .03, .685, .22);--ease-in-quint: cubic-bezier(.755, .05, .855, .06);--ease-in-sine: cubic-bezier(.47, 0, .745, .715);--ease-in-expo: cubic-bezier(.95, .05, .795, .035);--ease-in-circ: cubic-bezier(.6, .04, .98, .335);--ease-in-back: cubic-bezier(.6, -.28, .735, .045);--ease-out-quad: cubic-bezier(.25, .46, .45, .94);--ease-out-cubic: cubic-bezier(.215, .61, .355, 1);--ease-out-quart: cubic-bezier(.165, .84, .44, 1);--ease-out-quint: cubic-bezier(.23, 1, .32, 1);--ease-out-sine: cubic-bezier(.39, .575, .565, 1);--ease-out-expo: cubic-bezier(.19, 1, .22, 1);--ease-out-circ: cubic-bezier(.075, .82, .165, 1);--ease-out-back: cubic-bezier(.175, .885, .32, 1.275);--ease-in-out-quad: cubic-bezier(.455, .03, .515, .955);--ease-in-out-cubic: cubic-bezier(.645, .045, .355, 1);--ease-in-out-quart: cubic-bezier(.77, 0, .175, 1);--ease-in-out-quint: cubic-bezier(.86, 0, .07, 1);--ease-in-out-sine: cubic-bezier(.445, .05, .55, .95);--ease-in-out-expo: cubic-bezier(1, 0, 0, 1);--ease-in-out-circ: cubic-bezier(.785, .135, .15, .86);--ease-in-out-back: cubic-bezier(.68, -.55, .265, 1.55)}@property --time{syntax: "<number>"; inherits: true; initial-value: 0;}@property --line-width{syntax: "<number>"; inherits: true; initial-value: .2;}@property --phase-diff{syntax: "<number>"; inherits: true; initial-value: 45;}@property --n{syntax: "<number>"; inherits: true; initial-value: 6;}@property --h{syntax: "<number>"; inherits: true; initial-value: 1;}@property --hover{syntax: "<number>"; inherits: true; initial-value: 0;}@keyframes time{0%{--time: 0}to{--time: var(--animation-duration)}}@keyframes h{0%{--h: calc(.1 + var(--hover) * 3)}to{--h: calc(3 + var(--hover) * 6)}}@keyframes phase-diff{0%{--phase-diff: 1}to{--phase-diff: 120}}@keyframes line-width{0%{--line-width: calc(.1 + var(--hover) * .3)}to{--line-width: calc(8 + var(--hover) * 1)}}@keyframes n{0%{--n: 3}10%{--n: 4}20%{--n: 5}30%{--n: 6}40%{--n: 7}50%{--n: 8}60%{--n: 9}70%{--n: 10}80%{--n: 11}90%{--n: 12}to{--n: 13}}html,body,.main,.loading{position:fixed;top:0;right:0;bottom:0;left:0;padding:0;margin:0;overflow:hidden}html *,*:before,*:after{box-sizing:border-box;-webkit-user-select:none;user-select:none}html{background-color:#000}.loading{visibility:hidden;background-color:#000}.loading.is-loaded{opacity:0;transition:opacity .4s linear,visibility .4s linear}.container{position:relative;display:flex;flex-direction:column;flex-wrap:nowrap;align-items:center;justify-content:center;width:100%;height:100%}.lines{position:relative;width:calc(var(--radius) * 2vmin);height:auto;aspect-ratio:1;transition:--phase-diff .8s var(--ease-out-expo),--hover .8s var(--ease-out-expo);animation:time calc(var(--animation-duration) / var(--time-scale) * 1s) linear infinite,n 10s var(--ease-in-out-expo) infinite alternate,h 1s var(--ease-in-out-expo) infinite alternate,phase-diff 3s var(--ease-in-out-cubic) infinite alternate,line-width 5s var(--ease-in-out-sine) infinite alternate}.lines:before{position:absolute;top:-50%;left:-50%;width:200%;height:200%;content:"";cursor:pointer}.lines:hover{--hover: 1}.lines:active{animation-play-state:paused}.group{position:absolute;left:50%;top:50%;--radius-by-group: calc(var(--radius) * (1 + var(--group-index)));--rot-direction: calc(mod(var(--group-index), 2)*2 - 1) ;--rot: calc(var(--time) * var(--time-scale) * var(--rot-direction) * 2deg);pointer-events:none}.lineSegment{--line-width-half: calc(var(--line-width) / 2);--n-1: calc(var(--n) - 1);--t0: calc( ( 360 / var(--num-line-segments) * var(--index) + var(--time) * var(--time-scale) ) * var(--rot-direction) );--t1: calc( ( 360 / var(--num-line-segments) * var(--index) + var(--time) * var(--time-scale) + var(--phase-diff) ) * var(--rot-direction) );--x0: calc( var(--radius-by-group) * .5 * ( var(--n-1) * cos(var(--t0) * 1deg - 90deg) + var(--h) * cos(var(--n-1) * var(--t0) * 1deg - 90deg) ) / var(--n) );--y0: calc( var(--radius-by-group) * .5 * ( var(--n-1) * sin(var(--t0) * 1deg - 90deg) - var(--h) * sin(var(--n-1) * var(--t0) * 1deg - 90deg) ) / var(--n) * -1 );--x1: calc( var(--radius-by-group) * .5 * ( var(--n-1) * cos(var(--t1) * 1deg - 90deg) + var(--h) * cos(var(--n-1) * var(--t1) * 1deg - 90deg) ) / var(--n) );--y1: calc( var(--radius-by-group) * .5 * ( var(--n-1) * sin(var(--t1) * 1deg - 90deg) - var(--h) * sin(var(--n-1) * var(--t1) * 1deg - 90deg) ) / var(--n) * -1 );--dx: calc(var(--x1) - var(--x0));--dy: calc(var(--y1) - var(--y0));--x: calc(var(--x0) + var(--x0) * .5);--y: calc(var(--y0) + var(--y0) * .5);--width: sqrt(var(--dx) * var(--dx) + var(--dy) * var(--dy)) ;--theta: calc(atan2(var(--dy), var(--dx))*1) ;--scale-x: calc(var(--width) / 10);position:absolute;border-radius:9999vmin;height:calc(var(--line-width) * 1vmin);width:10vmin;left:-5vmin;top:calc(var(--line-width-half) * -1vmin);background:linear-gradient(90deg,hsl(calc(var(--t0) + var(--time) * 3) 100% 0%),hsl(calc(var(--t1) + var(--time) * 2) calc(60% + var(--hover) * 40%) calc(60% + var(--hover) * 30%)));box-sizing:border-box;transform-origin:center;backface-visibility:hidden;will-change:transform;mix-blend-mode:screen;z-index:calc(100 - var(--group-index));transform:rotate(var(--rot)) translate(calc(var(--x) * 1vmin),calc(var(--y) * 1vmin)) rotate(var(--theta)) scaleX(var(--scale-x))}.tp-dfwv{width:350px!important}