.ct{--mx:.5;--my:.5;background:var(--ct-bg,#060918);isolation:isolate;position:absolute;inset:0;overflow:hidden;container-type:size}.ct-film video{object-fit:cover;width:100%;height:100%;display:block;position:absolute;inset:0}.ct-frame{aspect-ratio:16/10;width:min(100cqw,160cqh);position:absolute;top:50%;left:50%;translate:-50% -50%;container-type:inline-size}.ct-stage{transform-origin:70.5cqw 31cqw;position:absolute;inset:0;transform:translate(-20.5cqw)scale(1.16)}.ct-device{left:calc(var(--x) * 1cqw);top:calc(var(--y) * 1cqw);width:calc(var(--w) * 1cqw);translate:calc((var(--mx) - .5) * var(--depth) * -2.6cqw) calc((var(--my) - .5) * var(--depth) * -1.8cqw);z-index:1;position:absolute;container-type:inline-size}.ct-iphone,.ct-android,.ct-card{z-index:2}.ct-device-body{animation:7s ease-in-out infinite ct-float;animation-delay:calc(var(--depth) * -4.5s);animation-play-state:paused;position:relative}.ct-playing .ct-device-body{animation-play-state:running}@keyframes ct-float{0%,to{transform:translateY(0)}50%{transform:translateY(-1.6cqw)}}.ct-display{aspect-ratio:var(--ratio);background:#fff;position:relative;overflow:hidden}.ct-browser .ct-device-body{background:#fff;border-radius:1.6cqw;overflow:hidden;box-shadow:0 3cqw 7cqw -2.5cqw #0a0c1473,0 0 0 1px #00000014}.ct-bar{background:#f6f6f4;border-bottom:1px solid #00000012;align-items:center;gap:.75cqw;height:4.4cqw;padding:0 1.6cqw;display:flex}.ct-bar i{background:#dcdad5;border-radius:50%;width:1.05cqw;height:1.05cqw}.ct-bar span{font:400 1.5cqw/1 var(--font-sans);color:#77746d;white-space:nowrap;background:#ecebe7;border-radius:.8cqw;margin:0 auto;padding:.5cqw 2.4cqw;translate:-2.2cqw}.ct-is-accordio .ct-browser .ct-device-body,.ct-is-firsttouch .ct-browser .ct-device-body{background:#111}.ct-is-accordio .ct-bar,.ct-is-firsttouch .ct-bar{background:#161816;border-color:#ffffff0f}.ct-is-accordio .ct-bar i,.ct-is-firsttouch .ct-bar i{background:#333632}.ct-is-accordio .ct-bar span,.ct-is-firsttouch .ct-bar span{color:#8a9188;background:#232622}.ct-iphone .ct-device-body{background:linear-gradient(150deg,#3b3b40,#0c0c0e 35%);border-radius:15cqw;padding:3.4cqw;box-shadow:0 4cqw 9cqw -3cqw #0a0c148c,inset 0 0 0 .6cqw #050506}.ct-iphone .ct-display{border-radius:11.8cqw}.ct-island{z-index:4;background:#050506;border-radius:99px;width:30cqw;height:8.6cqw;position:absolute;top:2.4cqw;left:50%;translate:-50%}.ct-android .ct-device-body{background:#18191b;border-radius:10cqw;padding:2.6cqw;box-shadow:0 4cqw 9cqw -3cqw #0a0c148c,inset 0 0 0 .4cqw #2a2b2e}.ct-android .ct-display{border-radius:8cqw}.ct-punch{z-index:4;background:#050506;border-radius:50%;width:4.6cqw;height:4.6cqw;position:absolute;top:2.6cqw;left:50%;translate:-50%}.ct-card .ct-device-body{border-radius:6cqw;overflow:hidden;rotate:4deg;box-shadow:0 4cqw 8cqw -3cqw #3c1e1466}.ct-screen{opacity:0;transition:opacity .7s,transform .9s cubic-bezier(.22,1,.36,1);position:absolute;inset:0;overflow:hidden;transform:translateY(8%)}.ct-screen[data-active]{opacity:1;z-index:1;transform:none}.ct-screen>*{object-fit:cover;object-position:top;width:100%;height:100%;display:block;position:absolute;inset:0}.ct-still{transform-origin:50% 0;animation:9s ease-in-out infinite alternate paused ct-still}.ct-playing .ct-still{animation-play-state:running}@keyframes ct-still{0%{transform:scale(1.02)translate(0)}to{transform:scale(1.14)translate(-2%,-5%)}}.ct-bg,.ct-bg span{pointer-events:none;position:absolute;inset:0}.ct-bg span{animation-play-state:paused}.ct-playing .ct-bg span{animation-play-state:running}.ct-is-onist .ct-bg-a{opacity:.22;-webkit-mask-image:radial-gradient(28cqw 28cqw at calc(var(--mx) * 100%) calc(var(--my) * 100%), #000, transparent 75%);mask-image:radial-gradient(28cqw 28cqw at calc(var(--mx) * 100%) calc(var(--my) * 100%), #000, transparent 75%);background:radial-gradient(circle,#111114 1.1px,#0000 1.4px) 0 0/22px 22px}.ct-is-onist .ct-bg-b{aspect-ratio:1;width:26cqw;inset:auto;left:calc(8cqw + var(--mx) * 10cqw);top:calc(62% + var(--my) * 6cqw);opacity:.5;filter:blur(1.2cqw);background:radial-gradient(circle at 32% 30%,#fff 0,#b8aeff 22%,#5b4df2 70%);border-radius:50%;animation:14s ease-in-out infinite ct-orb}.ct-is-onist .ct-bg-c{background:radial-gradient(60% 50% at 80% 10%,#b8aeff59,#0000 70%)}@keyframes ct-orb{0%,to{transform:translate(0)scale(1)}50%{transform:translate(4cqw,-5cqw)scale(1.08)}}.ct-is-accordio .ct-bg-a{opacity:.16;background:radial-gradient(circle,#2fd572 1px,#0000 1.3px) 0 0/16px 16px}.ct-is-accordio .ct-bg-b{-webkit-mask-image:radial-gradient(22cqw 22cqw at calc(var(--mx) * 100%) calc(var(--my) * 100%), #000, transparent 70%);mask-image:radial-gradient(22cqw 22cqw at calc(var(--mx) * 100%) calc(var(--my) * 100%), #000, transparent 70%);opacity:.7;background:radial-gradient(circle,#6ef0a0 1.2px,#0000 1.5px) 0 0/16px 16px}.ct-is-accordio .ct-bg-c{background:radial-gradient(45% 55% at 70% 60%,#2fd57238,#0000 70%);animation:9s ease-in-out infinite ct-breathe}@keyframes ct-breathe{0%,to{opacity:.7;transform:translate(0)}50%{opacity:1;transform:translate(-4%,3%)}}.ct-is-firsttouch .ct-bg-a{background:linear-gradient(#9be5641f,#9be5641f) 50% 0/1px 100% no-repeat,radial-gradient(circle,#0000 15cqh,#9be5641f calc(15cqh + 1px),#0000 calc(15cqh + 2px)),repeating-linear-gradient(90deg,#ffffff05 0 8cqw,#0000 8cqw 16cqw);animation:30s linear infinite ct-pan}.ct-is-firsttouch .ct-bg-b{background:radial-gradient(30cqw 30cqw at calc(var(--mx) * 100%) calc(var(--my) * 100%), #9be5642e, transparent 70%)}.ct-is-firsttouch .ct-bg-c{background:radial-gradient(70% 60% at 50% 120%,#f2a93b24,#0000 70%)}@keyframes ct-pan{0%{background-position:50% 0,0 0,0 0}to{background-position:50% 0,0 0,16cqw 0}}.ct-is-workproof .ct-bg-a{background:repeating-radial-gradient(circle at 30% 70%,#0000 0 2.2cqw,#0f766e17 2.2cqw calc(2.2cqw + 1px));animation:26s ease-in-out infinite alternate ct-drift;inset:-20%}.ct-is-workproof .ct-bg-b{background:radial-gradient(28cqw 28cqw at calc(var(--mx) * 100%) calc(var(--my) * 100%), #0f766e24, transparent 70%)}.ct-is-workproof .ct-bg-c{background:linear-gradient(#ffffff80,#0000 40%,#ffffff59)}@keyframes ct-drift{0%{transform:translate(-3%,2%)rotate(0)}to{transform:translate(3%,-2%)rotate(6deg)}}.ct-is-golden-egg .ct-bg span{filter:blur(4cqw);opacity:.7;border-radius:50%;animation:16s ease-in-out infinite ct-blob;inset:auto}.ct-is-golden-egg .ct-bg-a{aspect-ratio:1;width:34cqw;left:calc(52% + var(--mx) * 8cqw);top:calc(-10% + var(--my) * 6cqw);background:#f7b7d0}.ct-is-golden-egg .ct-bg-b{aspect-ratio:1;width:28cqw;left:calc(-6% + var(--mx) * 6cqw);top:calc(55% + var(--my) * 6cqw);background:#f9d77e;animation-delay:-6s!important}.ct-is-golden-egg .ct-bg-c{aspect-ratio:1;width:22cqw;left:calc(78% - var(--mx) * 6cqw);top:calc(62% - var(--my) * 5cqw);background:#bccbf6;animation-delay:-11s!important}@keyframes ct-blob{0%,to{transform:translate(0)scale(1)}33%{transform:translate(3cqw,-2cqw)scale(1.06)}66%{transform:translate(-2cqw,2cqw)scale(.95)}}@media (max-width:767px){.ct:not(.ct-wide) .ct-frame{aspect-ratio:4/5;width:min(100cqw,80cqh)}.ct:not(.ct-wide) .ct-stage{transform-origin:50cqw 88cqw;transform:translateY(-26cqw)scale(1.04)}}@media (prefers-reduced-motion:reduce){.ct-device-body,.ct-still,.ct-bg span{animation:none!important}.ct-device{translate:none}}
