@property --wm-ang{syntax:"<angle>";inherits:false;initial-value:0deg}@property --mx{syntax:"<percentage>";inherits:false;initial-value:50%}@property --my{syntax:"<percentage>";inherits:false;initial-value:50%}.wui-motion-demo{--e-entrance:cubic-bezier(.22, 1, .36, 1);--e-exit:cubic-bezier(.4, 0, 1, 1);--e-move:cubic-bezier(.65, 0, .35, 1);--e-overshoot:cubic-bezier(.34, 1.35, .64, 1);--cyan:#12aff0;--cyan-fg:#17181a;--cyan-deep:#0b5e80;--indigo:#555cf3;--green:#1ad598;--orange:#f3654a;--pink:#fe6bba;--purple:#a584f3;--night:#0c1418;--night-2:#111c22;--page:var(--background);--surface:var(--card);--surface-2:color-mix(in oklab, var(--foreground) 8%, var(--card));--line:var(--border);--line-2:color-mix(in oklab, var(--foreground) 16%, var(--border));--ink:var(--foreground);--ink-2:var(--text-secondary);--ink-3:var(--text-tertiary);--shadow:0 1px 2px #0000000f;--shadow-2:0 14px 36px -16px #00000047, 0 1px 2px #0000000d;--r-sm:6px;--r:12px;--r-lg:16px;--gr-t:#147d5d;--or-t:#ae4b39;--pk-t:#a94a7f;--acc:#10739d;place-items:center;font-size:15px;line-height:1.55;display:grid}.dark .wui-motion-demo{--gr-t:#1ad598;--or-t:#f3654a;--pk-t:#fe6bba;--acc:#12aff0}.wui-motion-demo svg{display:block}.wui-motion-demo ul,.wui-motion-demo ol{margin:0;padding:0;list-style:none}.wui-motion-demo p{margin:0}[data-wm-paused],[data-wm-paused] *,[data-wm-paused]:before,[data-wm-paused]:after,[data-wm-paused] :before,[data-wm-paused] :after{animation-play-state:paused!important}@media (prefers-reduced-motion:reduce){.wui-motion-demo[data-on],.wui-motion-demo[data-on] *,.wui-motion-demo[data-on]:before,.wui-motion-demo[data-on]:after,.wui-motion-demo[data-on] :before,.wui-motion-demo[data-on] :after{animation:none!important}}.wui-motion-demo .e-beam{background:var(--surface);border:1px solid var(--line-2);isolation:isolate;border-radius:11px;align-items:center;height:36px;padding-inline:20px;font-size:13px;font-weight:650;display:inline-flex;position:relative;overflow:hidden}.wui-motion-demo .e-beam:before{content:"";offset-path:rect(0 100% 100% 0 round 11px);offset-distance:0%;offset-rotate:auto;background:linear-gradient(90deg,transparent,var(--cyan));filter:blur(4px);opacity:0;border-radius:999px;width:56px;height:14px;position:absolute}.wui-motion-demo[data-on] .e-beam:before{opacity:1;animation:2.6s linear infinite e-beam}@keyframes e-beam{to{offset-distance:100%}}.wui-motion-demo .e-shineb{background:conic-gradient(from var(--wm-ang,0deg),transparent 0 62%,var(--cyan) 72%,var(--indigo) 80%,transparent 90%);border-radius:13px;padding:2px;display:inline-flex;position:relative}.wui-motion-demo .e-shineb .in{background:var(--surface);border-radius:11px;padding:9px 19px;font-size:13px;font-weight:650}.wui-motion-demo[data-on] .e-shineb{animation:3.4s linear infinite e-shineb}@keyframes e-shineb{to{--wm-ang:360deg}}.wui-motion-demo .e-elec{background:var(--surface);isolation:isolate;border-radius:11px;align-items:center;height:36px;padding-inline:20px;font-size:13px;font-weight:650;display:inline-flex;position:relative}.wui-motion-demo .e-elec:before,.wui-motion-demo .e-elec:after{content:"";background:conic-gradient(from var(--wm-ang,0deg),var(--cyan),var(--indigo),var(--pink),var(--cyan));-webkit-mask-composite:xor;border-radius:13px;padding:2px;position:absolute;inset:-2px;-webkit-mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0;-webkit-mask-size:auto,auto;mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.wui-motion-demo .e-elec:after{filter:blur(7px);opacity:.75;z-index:-1}.wui-motion-demo[data-on] .e-elec:before,.wui-motion-demo[data-on] .e-elec:after{animation:2.2s linear infinite e-elec}@keyframes e-elec{to{--wm-ang:360deg}}.wui-motion-demo .e-star{background:var(--surface-2);border-radius:999px;padding:2px;display:inline-flex;position:relative;overflow:hidden}.wui-motion-demo .e-star .in{z-index:2;background:var(--surface);border-radius:999px;padding:8px 19px;font-size:13px;font-weight:650;position:relative}.wui-motion-demo .e-star i{opacity:.9;background:radial-gradient(circle,var(--cyan),transparent 62%);border-radius:999px;width:150%;height:56%;position:absolute}.wui-motion-demo .e-star .a{bottom:-28%;left:-150%}.wui-motion-demo .e-star .b{top:-28%;right:-150%}.wui-motion-demo[data-on] .e-star .a{animation:3s linear infinite e-star-a}.wui-motion-demo[data-on] .e-star .b{animation:3s linear infinite e-star-b}@keyframes e-star-a{to{left:150%}}@keyframes e-star-b{to{right:150%}}.wui-motion-demo .e-hb{background:var(--line-2);border-radius:999px;padding:1.5px;display:inline-flex;position:relative;overflow:hidden}.wui-motion-demo .e-hb:before{content:"";background:conic-gradient(from var(--wm-ang,0deg),transparent 0 70%,var(--cyan) 85%,transparent 100%);position:absolute;inset:-60%}.wui-motion-demo .e-hb .in{z-index:1;background:var(--surface);border-radius:999px;padding:8px 18px;font-size:12.5px;font-weight:650;position:relative}.wui-motion-demo[data-on] .e-hb:before{animation:2.4s linear infinite e-hb}@keyframes e-hb{to{--wm-ang:360deg}}.wui-motion-demo .e-neon{background:linear-gradient(120deg,var(--cyan),var(--pink),var(--indigo),var(--cyan));isolation:isolate;background-size:300% 300%;border-radius:15px;padding:2px;display:inline-flex;position:relative}.wui-motion-demo .e-neon:after{content:"";z-index:-1;filter:blur(14px);opacity:.5;background:inherit;background-size:300% 300%;border-radius:22px;position:absolute;inset:-8px}.wui-motion-demo .e-neon .in{background:var(--surface);border-radius:13px;gap:6px;width:136px;padding:12px 16px;display:grid}.wui-motion-demo .e-neon b{font-size:12.5px}.wui-motion-demo .e-neon i{background:var(--line-2);border-radius:999px;height:4px;display:block}.wui-motion-demo .e-neon i:last-child{width:62%}.wui-motion-demo[data-on] .e-neon,.wui-motion-demo[data-on] .e-neon:after{animation:4s ease-in-out infinite e-neon}@keyframes e-neon{0%,to{background-position:0%}50%{background-position:100%}}.wui-motion-demo .e-shim{background:var(--cyan);height:36px;color:var(--cyan-fg);border-radius:11px;align-items:center;padding-inline:20px;font-size:13px;font-weight:650;display:inline-flex;position:relative;overflow:hidden}.wui-motion-demo .e-shim i{background:linear-gradient(100deg,#0000 40%,#fffc 50%,#0000 60%) 100% 0/250% 100% no-repeat;position:absolute;inset:0}.wui-motion-demo[data-on] .e-shim i{animation:e-shim 2.2s var(--e-move) infinite}@keyframes e-shim{0%{background-position:100% 0}60%,to{background-position:0 0}}.wui-motion-demo .e-rain{color:#fff;isolation:isolate;background:linear-gradient(90deg,#10739d,#3c42c4,#a94a7f,#ae4b39,#10739d) 0 0/300% 100%;border-radius:11px;align-items:center;height:36px;padding-inline:22px;font-size:13px;font-weight:700;display:inline-flex;position:relative}.wui-motion-demo .e-rain:after{content:"";z-index:-1;filter:blur(10px);opacity:.55;background:inherit;background-size:300% 100%;border-radius:13px;position:absolute;inset:-4px -2px}.wui-motion-demo[data-on] .e-rain,.wui-motion-demo[data-on] .e-rain:after{animation:2.6s linear infinite e-rain}@keyframes e-rain{to{background-position:300% 0}}.wui-motion-demo .e-pulse{background:var(--cyan);height:36px;color:var(--cyan-fg);isolation:isolate;border-radius:11px;align-items:center;padding-inline:20px;font-size:13px;font-weight:650;display:inline-flex;position:relative}.wui-motion-demo .e-pulse:before{content:"";background:var(--cyan);z-index:-1;border-radius:11px;position:absolute;inset:0}.wui-motion-demo[data-on] .e-pulse:before{animation:e-pulse 1.8s var(--e-exit) infinite}@keyframes e-pulse{0%{opacity:.7;transform:scale(1)}to{opacity:0;transform:scale(1.28)}}.wui-motion-demo .e-ripp{background:var(--surface);border:1px solid var(--line-2);border-radius:11px;align-items:center;height:36px;padding-inline:20px;font-size:13px;font-weight:650;display:inline-flex;position:relative;overflow:hidden}.wui-motion-demo .e-ripp i{left:var(--x,30%);top:var(--y,50%);background:color-mix(in oklab,var(--cyan) 55%,transparent);opacity:0;border-radius:999px;width:12px;height:12px;margin:-6px 0 0 -6px;position:absolute}.wui-motion-demo[data-on] .e-ripp i{animation:e-ripp 1.4s var(--e-exit) infinite}@keyframes e-ripp{0%{opacity:.85;transform:scale(1)}to{opacity:0;transform:scale(16)}}.wui-motion-demo .e-ihb{background:var(--surface);border:1px solid var(--line-2);isolation:isolate;border-radius:999px;justify-content:center;align-items:center;width:132px;height:36px;font-size:12.5px;font-weight:650;display:inline-flex;position:relative;overflow:hidden}.wui-motion-demo .e-ihb b{place-items:center;display:grid;position:absolute;inset:0}.wui-motion-demo .e-ihb .t2{color:var(--cyan-fg);opacity:0;transform:translate(16px)}.wui-motion-demo .e-ihb i{background:var(--cyan);z-index:-1;border-radius:999px;width:9px;height:9px;position:absolute;left:10px}.wui-motion-demo[data-on] .e-ihb i{animation:e-ihb-dot 3.2s var(--e-entrance) infinite}.wui-motion-demo[data-on] .e-ihb .t1{animation:e-ihb-out 3.2s var(--e-entrance) infinite}.wui-motion-demo[data-on] .e-ihb .t2{animation:e-ihb-in 3.2s var(--e-entrance) infinite}@keyframes e-ihb-dot{0%,12%{transform:scale(1)}45%,78%{transform:scale(34)}to{transform:scale(1)}}@keyframes e-ihb-out{0%,12%{opacity:1;transform:none}36%,84%{opacity:0;transform:translate(-16px)}to{opacity:1;transform:none}}@keyframes e-ihb-in{0%,22%{opacity:0;transform:translate(16px)}50%,78%{opacity:1;transform:none}92%,to{opacity:0;transform:translate(16px)}}.wui-motion-demo .e-shiny{letter-spacing:-.02em;color:#0000;background:linear-gradient(100deg,var(--ink-3) 40%,var(--ink) 50%,var(--ink-3) 60%);background-position:-140% 0;background-size:260% 100%;-webkit-background-clip:text;background-clip:text;font-size:15px;font-weight:650}.wui-motion-demo[data-on] .e-shiny{animation:2.4s linear infinite e-shiny}@keyframes e-shiny{to{background-position:140% 0}}.wui-motion-demo .e-aur{letter-spacing:-.035em;color:#0000;background:linear-gradient(110deg,var(--cyan),var(--indigo),var(--pink),var(--green),var(--cyan));background-size:300% 100%;-webkit-background-clip:text;background-clip:text;font-size:20px;font-weight:800}.wui-motion-demo[data-on] .e-aur{animation:4s linear infinite e-aur}@keyframes e-aur{to{background-position:300% 0}}.wui-motion-demo .e-gt{background:var(--surface);background-image:linear-gradient(var(--surface),var(--surface)), linear-gradient(90deg,var(--cyan),var(--pink),var(--indigo),var(--cyan));background-size:auto,300% 100%;background-origin:border-box;background-clip:padding-box,border-box;border:1px solid #0000;border-radius:999px;align-items:center;gap:7px;padding:6px 15px;font-size:12.5px;font-weight:650;display:inline-flex;position:relative}.wui-motion-demo .e-gt i{background:var(--cyan);border-radius:999px;width:6px;height:6px}.wui-motion-demo[data-on] .e-gt{animation:3s linear infinite e-gt}@keyframes e-gt{to{background-position:0 0,300% 0}}.wui-motion-demo .e-type{color:var(--ink);min-width:21ch;font-family:JetBrains Mono,monospace;font-size:12.5px}.wui-motion-demo .e-type b{white-space:nowrap;border-right:2px solid var(--cyan);width:0;font-weight:500;display:inline-block;overflow:hidden}.wui-motion-demo[data-on] .e-type b{animation:2.6s steps(21,end) infinite e-type,.7s step-end infinite e-caret}@keyframes e-type{0%{width:0}60%,to{width:21ch}}@keyframes e-caret{50%{border-color:#0000}}.wui-motion-demo .e-scr{letter-spacing:.04em;color:var(--ink);font-family:JetBrains Mono,monospace;font-size:14px;font-weight:600}.wui-motion-demo .e-morph{filter:url(#e-morph-goo);letter-spacing:-.03em;place-items:center;width:150px;height:30px;font-size:22px;font-weight:800;display:grid;position:relative}.wui-motion-demo .e-morph .goo{width:0;height:0;position:absolute;overflow:hidden}.wui-motion-demo .e-morph b{place-items:center;display:grid;position:absolute;inset:0}.wui-motion-demo[data-on] .e-morph b:first-of-type{animation:3.4s ease-in-out infinite e-mo-a}.wui-motion-demo[data-on] .e-morph b:last-of-type{animation:3.4s ease-in-out infinite e-mo-b}@keyframes e-mo-a{0%,38%{opacity:1;filter:blur()}50%,88%{opacity:0;filter:blur(7px)}to{opacity:1;filter:blur()}}@keyframes e-mo-b{0%,38%{opacity:0;filter:blur(7px)}50%,88%{opacity:1;filter:blur()}to{opacity:0;filter:blur(7px)}}.wui-motion-demo .e-spk{letter-spacing:-.03em;color:var(--ink);font-size:20px;font-weight:800;position:relative}.wui-motion-demo .e-spk i{width:9px;height:9px;transform:translate(var(--x),var(--y)) scale(0);background:var(--cyan);clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);position:absolute;top:50%;left:50%}.wui-motion-demo[data-on] .e-spk i{animation:e-spk 1.8s var(--e-entrance) var(--d) infinite}@keyframes e-spk{0%,to{transform:translate(var(--x),var(--y)) scale(0) rotate(0)}50%{transform:translate(var(--x),var(--y)) scale(1) rotate(90deg)}}.wui-motion-demo .e-wr{letter-spacing:-.025em;font-size:17px;font-weight:700}.wui-motion-demo .e-wr .sl{clip-path:inset(0 -.12em);display:inline-grid}.wui-motion-demo .e-wr b{color:var(--acc);white-space:nowrap;grid-area:1/1;line-height:1.3}.wui-motion-demo .e-wr b:not(:first-child){opacity:0}.wui-motion-demo .e-wr b:first-child{--d:0s}.wui-motion-demo .e-wr b:nth-child(2){--d:-3s}.wui-motion-demo .e-wr b:nth-child(3){--d:-1.5s}.wui-motion-demo[data-on] .e-wr b{animation:e-wr 4.5s var(--e-entrance) var(--d) infinite}@keyframes e-wr{0%{opacity:0;transform:translateY(100%)}7%,26%{opacity:1;transform:none}33%,to{opacity:0;transform:translateY(-100%)}}.wui-motion-demo .e-box{padding:2px 0;display:inline-block;position:relative;overflow:hidden}.wui-motion-demo .e-box b{letter-spacing:-.025em;opacity:0;font-size:15px;font-weight:750;display:block}.wui-motion-demo .e-box i{background:var(--cyan);transform-origin:0;position:absolute;inset:0;transform:scaleX(0)}.wui-motion-demo[data-on] .e-box b{animation:e-box-t 2.8s var(--e-entrance) infinite}.wui-motion-demo[data-on] .e-box i{animation:e-box-i 2.8s var(--e-entrance) infinite}@keyframes e-box-i{0%{transform-origin:0;transform:scaleX(0)}28%{transform-origin:0;transform:scaleX(1)}30%{transform-origin:100%;transform:scaleX(1)}58%,to{transform-origin:100%;transform:scaleX(0)}}@keyframes e-box-t{0%,29%{opacity:0}38%,to{opacity:1}}.wui-motion-demo .e-ls{letter-spacing:-.04em;color:var(--ink);isolation:isolate;font-size:30px;font-weight:900;position:relative}.wui-motion-demo .e-ls:after{content:attr(data-txt);color:#0000;z-index:-1;background:repeating-linear-gradient(-45deg,var(--cyan) 0 1px,transparent 1px 5px);background-size:200% 200%;-webkit-background-clip:text;background-clip:text;position:absolute;top:0;left:0;transform:translate(4px,4px)}.wui-motion-demo[data-on] .e-ls:after{animation:1.6s linear infinite e-ls}@keyframes e-ls{to{background-position:28px 28px}}.wui-motion-demo .e-gl{color:var(--ink);font-family:JetBrains Mono,monospace;font-size:17px;font-weight:700;position:relative}.wui-motion-demo .e-gl:before,.wui-motion-demo .e-gl:after{content:attr(data-txt);opacity:.85;width:100%;position:absolute;top:0;left:0}.wui-motion-demo .e-gl:before{color:var(--cyan)}.wui-motion-demo .e-gl:after{color:var(--pink)}.wui-motion-demo[data-on] .e-gl:before{animation:.9s steps(2,end) infinite e-gl-a}.wui-motion-demo[data-on] .e-gl:after{animation:.9s steps(2,end) infinite e-gl-b}@keyframes e-gl-a{0%,to{clip-path:inset(0 0 100%);transform:none}20%{clip-path:inset(12% 0 62%);transform:translate(-3px)}55%{clip-path:inset(48% 0 24%);transform:translate(2px)}}@keyframes e-gl-b{0%,to{clip-path:inset(100% 0 0);transform:none}30%{clip-path:inset(28% 0 48%);transform:translate(3px)}65%{clip-path:inset(66% 0 8%);transform:translate(-2px)}}.wui-motion-demo .e-fz{letter-spacing:-.025em;gap:7px;font-size:18px;font-weight:750;display:inline-flex}.wui-motion-demo .e-fz b{display:inline-block}.wui-motion-demo[data-on] .e-fz b{animation:e-fz 2.6s var(--e-entrance) calc(var(--i)*.16s) infinite}@keyframes e-fz{0%{opacity:0;filter:blur(9px);transform:translateY(7px)}30%,72%{opacity:1;filter:blur();transform:none}to{opacity:0;filter:blur(9px);transform:translateY(-7px)}}.wui-motion-demo .e-ct{place-items:center;width:104px;height:104px;display:grid;position:relative}.wui-motion-demo .e-ct svg{width:104px;height:104px;overflow:visible}.wui-motion-demo .e-ct text{fill:var(--ink-2);font-family:JetBrains Mono,monospace;font-size:11px}.wui-motion-demo .e-ct i{background:var(--cyan);border-radius:999px;width:26px;height:26px;position:absolute}.wui-motion-demo[data-on] .e-ct svg{animation:9s linear infinite e-ct}@keyframes e-ct{to{transform:rotate(360deg)}}.wui-motion-demo .e-aurbg{background:var(--night);border-radius:12px;width:200px;height:112px;position:relative;overflow:hidden}.wui-motion-demo .e-aurbg i{filter:blur(34px);opacity:.75;mix-blend-mode:screen;border-radius:999px;width:160px;height:160px;position:absolute}.wui-motion-demo .e-aurbg i:first-child{background:var(--cyan);top:-60px;left:-40px}.wui-motion-demo .e-aurbg i:nth-child(2){background:var(--indigo);top:-40px;right:-50px}.wui-motion-demo .e-aurbg i:nth-child(3){background:var(--pink);bottom:-90px;left:40px}.wui-motion-demo[data-on] .e-aurbg i:first-child{animation:7s ease-in-out infinite alternate e-au1}.wui-motion-demo[data-on] .e-aurbg i:nth-child(2){animation:9s ease-in-out infinite alternate e-au2}.wui-motion-demo[data-on] .e-aurbg i:nth-child(3){animation:8s ease-in-out infinite alternate e-au3}@keyframes e-au1{to{transform:translate(70px,40px)scale(1.25)}}@keyframes e-au2{to{transform:translate(-60px,50px)scale(.85)}}@keyframes e-au3{to{transform:translate(50px,-50px)scale(1.2)}}.wui-motion-demo .e-retro{background:linear-gradient(var(--night),#1a2a33);perspective:180px;border-radius:12px;width:200px;height:112px;position:relative;overflow:hidden}.wui-motion-demo .e-retro i{transform-origin:bottom;background-image:linear-gradient(to right,color-mix(in oklab,var(--cyan) 55%,transparent) 1px,transparent 1px), linear-gradient(to bottom,color-mix(in oklab,var(--cyan) 55%,transparent) 1px,transparent 1px);background-size:26px 26px;position:absolute;inset:-100% 0 0;transform:rotateX(62deg)}.wui-motion-demo[data-on] .e-retro i{animation:2.4s linear infinite e-retro}@keyframes e-retro{to{background-position:0 26px}}.wui-motion-demo .e-dots{background:var(--surface);background-image:radial-gradient(var(--cyan) 1.7px,transparent 1.8px);background-size:15px 15px;border-radius:12px;width:200px;height:112px;position:relative;overflow:hidden;-webkit-mask-image:radial-gradient(76% 76%,#000 20%,#0000);mask-image:radial-gradient(76% 76%,#000 20%,#0000)}.wui-motion-demo[data-on] .e-dots{animation:4s linear infinite e-dots}@keyframes e-dots{to{background-position:16px 16px}}.wui-motion-demo .e-flick{background:var(--surface-2);border:1px solid var(--line);border-radius:12px;grid-template-columns:repeat(10,1fr);gap:3px;width:200px;height:112px;padding:6px;display:grid}.wui-motion-demo .e-flick i{background:var(--cyan);opacity:.1;border-radius:2px}.wui-motion-demo[data-on] .e-flick i{animation:e-flick 2.6s steps(1) var(--d) infinite}@keyframes e-flick{0%,60%{opacity:.08}70%{opacity:.85}80%{opacity:.25}90%{opacity:.6}to{opacity:.08}}.wui-motion-demo .e-met{background:var(--night);border-radius:12px;width:200px;height:112px;position:relative;overflow:hidden}.wui-motion-demo .e-met i{top:-10px;left:var(--l);opacity:0;background:#fff;border-radius:999px;width:2px;height:2px;position:absolute;transform:rotate(38deg);box-shadow:0 0 6px 1px #ffffffb3}.wui-motion-demo .e-met i:after{content:"";background:linear-gradient(90deg,transparent,color-mix(in oklab,var(--cyan) 85%,transparent));width:54px;height:1px;position:absolute;top:0;right:2px}.wui-motion-demo[data-on] .e-met i{animation:e-met 2.8s linear var(--d) infinite}@keyframes e-met{0%{opacity:0;transform:rotate(38deg)translate(0)}8%{opacity:1}to{opacity:0;transform:rotate(38deg)translate(190px)}}.wui-motion-demo .e-part{background:var(--night);border-radius:12px;width:200px;height:112px;position:relative;overflow:hidden}.wui-motion-demo .e-part i{bottom:-6px;left:var(--l);background:var(--cyan);width:4px;height:4px;transform:scale(var(--s));opacity:0;box-shadow:0 0 8px color-mix(in oklab,var(--cyan) 70%,transparent);border-radius:999px;position:absolute}.wui-motion-demo[data-on] .e-part i{animation:e-part 5s linear var(--d) infinite}@keyframes e-part{0%{transform:translateY(0) scale(var(--s));opacity:0}12%{opacity:.9}88%{opacity:.9}to{transform:translateY(-124px) scale(var(--s));opacity:0}}.wui-motion-demo .e-rip{background:var(--surface-2);border-radius:12px;place-items:center;width:200px;height:112px;display:grid;position:relative;overflow:hidden}.wui-motion-demo .e-rip i{border:1.5px solid var(--cyan);opacity:0;border-radius:999px;width:44px;height:44px;position:absolute}.wui-motion-demo .e-rip b{background:var(--cyan);border-radius:999px;width:16px;height:16px}.wui-motion-demo[data-on] .e-rip i{animation:e-rip 3s var(--e-exit) var(--d) infinite}@keyframes e-rip{0%{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(4.6)}}.wui-motion-demo .e-beams{background:var(--night);border-radius:12px;width:200px;height:112px;position:relative;overflow:hidden}.wui-motion-demo .e-beams i{top:-40px;left:var(--l);background:linear-gradient(transparent,var(--cyan));opacity:.85;width:1px;height:40px;position:absolute}.wui-motion-demo[data-on] .e-beams i{animation:e-beams 3.2s linear var(--d) infinite}@keyframes e-beams{to{transform:translateY(160px)}}.wui-motion-demo .e-lamp{background:var(--night);border-radius:12px;place-items:center;width:200px;height:112px;display:grid;position:relative;overflow:hidden}.wui-motion-demo .e-lamp .cone{background:conic-gradient(from 90deg at 50% 0%,transparent 0 22%,var(--cyan) 50%,transparent 78% 100%);filter:blur(13px);opacity:.75;width:150px;height:66px;margin-left:-75px;position:absolute;top:0;left:50%}.wui-motion-demo .e-lamp .bar{background:var(--cyan);width:108px;height:2px;box-shadow:0 0 16px 3px var(--cyan);border-radius:999px;margin-left:-54px;position:absolute;top:30px;left:50%}.wui-motion-demo .e-lamp b{color:#fff;letter-spacing:-.02em;margin-top:26px;font-size:13px;font-weight:700;position:relative}.wui-motion-demo[data-on] .e-lamp .cone,.wui-motion-demo[data-on] .e-lamp .bar{animation:3.4s ease-in-out infinite alternate e-lamp}@keyframes e-lamp{0%{opacity:.4;transform:scaleX(.72)}to{opacity:1;transform:scaleX(1)}}.wui-motion-demo .e-wavy{background:var(--night);border-radius:12px;width:200px;height:112px;overflow:hidden}.wui-motion-demo .e-wavy svg{width:400px;height:112px}.wui-motion-demo .e-wavy path{fill:color-mix(in oklab,var(--cyan) 55%,transparent)}.wui-motion-demo .e-wavy .p2{fill:color-mix(in oklab,var(--indigo) 50%,transparent)}.wui-motion-demo[data-on] .e-wavy path{animation:4s linear infinite e-wavy}.wui-motion-demo[data-on] .e-wavy .p2{animation-duration:6s;animation-direction:reverse}@keyframes e-wavy{to{transform:translate(-100px)}}.wui-motion-demo .e-warp{background:var(--night);border-radius:12px;place-items:center;width:200px;height:112px;display:grid;position:relative;overflow:hidden}.wui-motion-demo .e-warp i{transform-origin:50% 0;background:linear-gradient(var(--cyan),transparent);opacity:0;border-radius:999px;width:2px;height:54px;position:absolute}.wui-motion-demo[data-on] .e-warp i{animation:e-warp 2.2s linear var(--d) infinite}@keyframes e-warp{0%{transform:rotate(var(--r)) translateY(0) scaleY(.2);opacity:0}20%{opacity:1}to{transform:rotate(var(--r)) translateY(80px) scaleY(1.4);opacity:0}}.wui-motion-demo .e-noise{background:linear-gradient(135deg,var(--cyan),var(--indigo));border-radius:12px;width:200px;height:112px;position:relative;overflow:hidden}.wui-motion-demo .e-noise:after{content:"";opacity:.28;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");position:absolute;inset:-50%}.wui-motion-demo[data-on] .e-noise:after{animation:.6s steps(4,end) infinite e-noise}@keyframes e-noise{0%{transform:translate(0)}25%{transform:translate(-14px,7px)}50%{transform:translate(9px,-11px)}75%{transform:translate(-7px,-6px)}to{transform:translate(0)}}.wui-motion-demo .e-spot{background:var(--surface);border:1px solid var(--line-2);border-radius:13px;gap:5px;width:186px;padding:15px;display:grid;position:relative;overflow:hidden}.wui-motion-demo .e-spot i{left:var(--x,60%);top:var(--y,30%);background:radial-gradient(circle,color-mix(in oklab,var(--cyan) 40%,transparent),transparent 66%);opacity:0;border-radius:999px;width:180px;height:180px;margin:-90px 0 0 -90px;position:absolute}.wui-motion-demo .e-spot b{color:var(--ink-3);font-size:11px;font-weight:600;position:relative}.wui-motion-demo .e-spot .v{letter-spacing:-.035em;font-size:21px;font-weight:800;position:relative}.wui-motion-demo[data-on] .e-spot i{opacity:1;animation:4s ease-in-out infinite alternate e-spot}@keyframes e-spot{0%{top:16%;left:12%}to{top:80%;left:88%}}.wui-motion-demo .e-tilt{perspective:620px;width:170px}.wui-motion-demo .e-tilt .in{background:var(--surface);border:1px solid var(--line-2);box-shadow:var(--shadow-2);transform-style:preserve-3d;border-radius:13px;gap:6px;padding:15px;display:grid}.wui-motion-demo .e-tilt b{font-size:13px;transform:translateZ(22px)}.wui-motion-demo .e-tilt i{background:var(--line-2);border-radius:999px;height:5px;display:block;transform:translateZ(11px)}.wui-motion-demo .e-tilt i:last-child{width:60%}.wui-motion-demo[data-on] .e-tilt .in{animation:5s ease-in-out infinite alternate e-tilt}@keyframes e-tilt{0%{transform:rotateX(9deg)rotateY(-13deg)}to{transform:rotateX(-7deg)rotateY(13deg)}}.wui-motion-demo .e-glow{width:150px;position:relative}.wui-motion-demo .e-glow .in{z-index:1;background:var(--surface);border:1px solid var(--line-2);border-radius:13px;gap:3px;padding:15px;display:grid;position:relative}.wui-motion-demo .e-glow b{color:var(--ink-3);font-size:11px}.wui-motion-demo .e-glow span span{letter-spacing:-.03em;font-size:20px;font-weight:800}.wui-motion-demo .e-glow:before{content:"";filter:blur(20px);opacity:.6;background:conic-gradient(from var(--wm-ang,0deg),var(--cyan),var(--indigo),var(--pink),var(--cyan));border-radius:26px;position:absolute;inset:-14px}.wui-motion-demo[data-on] .e-glow:before{animation:5s linear infinite e-glow}@keyframes e-glow{to{--wm-ang:360deg}}.wui-motion-demo .e-stack{width:150px;height:96px;position:relative}.wui-motion-demo .e-stack i{background:var(--surface);border:1px solid var(--line-2);box-shadow:var(--shadow);transform:translateY(calc(var(--i)*8px)) scale(calc(1 - var(--i)*.055));border-radius:12px;position:absolute;inset:0}.wui-motion-demo[data-on] .e-stack i{animation:e-stack 4.5s var(--e-entrance) calc(var(--i)*-3s) infinite}@keyframes e-stack{0%,20%{opacity:1;z-index:3;transform:translateY(0)scale(1)}20.1%{opacity:1;z-index:4;transform:translateY(0)scale(1)}30%{opacity:0;z-index:4;transform:translateY(-46px)scale(1)}30.1%{opacity:0;z-index:1;transform:translateY(22px)scale(.89)}40%,53.3%{opacity:1;z-index:1;transform:translateY(16px)scale(.89)}63.3%,86.7%{opacity:1;z-index:2;transform:translateY(8px)scale(.945)}96.7%,to{opacity:1;z-index:3;transform:translateY(0)scale(1)}}.wui-motion-demo .e-cmp{border:1px solid var(--line-2);border-radius:12px;width:186px;height:104px;position:relative;overflow:hidden}.wui-motion-demo .e-cmp i{position:absolute;inset:0}.wui-motion-demo .e-cmp .a{background:linear-gradient(135deg,var(--surface-2),var(--line))}.wui-motion-demo .e-cmp .b{background:linear-gradient(135deg,var(--cyan),var(--indigo));clip-path:inset(0 50% 0 0)}.wui-motion-demo .e-cmp .h{background:#fff;width:2px;position:absolute;top:0;bottom:0;left:50%;box-shadow:0 0 0 1px #00000026}.wui-motion-demo[data-on] .e-cmp .b{animation:4s ease-in-out infinite alternate e-cmp-b}.wui-motion-demo[data-on] .e-cmp .h{animation:4s ease-in-out infinite alternate e-cmp-h}@keyframes e-cmp-b{0%{clip-path:inset(0 78% 0 0)}to{clip-path:inset(0 14% 0 0)}}@keyframes e-cmp-h{0%{left:22%}to{left:86%}}.wui-motion-demo .e-pb{border:1px solid var(--line-2);border-radius:12px;width:186px;height:104px;position:relative;overflow:hidden}.wui-motion-demo .e-pb .img{background:linear-gradient(135deg,var(--cyan),var(--indigo),var(--pink));position:absolute;inset:0}.wui-motion-demo .e-pb .fade{-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);height:62px;position:absolute;inset:auto 0 0;-webkit-mask-image:linear-gradient(#0000,#000 70%);mask-image:linear-gradient(#0000,#000 70%)}.wui-motion-demo .e-pb .fade:after{content:"";background:linear-gradient(#0000,#060e129e);position:absolute;inset:0}.wui-motion-demo .e-pb b{color:#fff;z-index:1;font-size:12px;font-weight:700;position:absolute;bottom:11px;left:13px}.wui-motion-demo[data-on] .e-pb .fade{animation:3.6s ease-in-out infinite alternate e-pb}@keyframes e-pb{0%{height:18px}to{height:74px}}.wui-motion-demo .e-px{background:linear-gradient(135deg,var(--cyan),var(--indigo));border-radius:12px;grid-template-columns:repeat(8,1fr);width:152px;height:114px;display:grid;position:relative;overflow:hidden}.wui-motion-demo .e-px i{background:var(--surface-2)}.wui-motion-demo[data-on] .e-px i{animation:e-px 4s linear var(--d) infinite}@keyframes e-px{0%,7.5%{opacity:1}7.6%,65%{opacity:0}65.1%,to{opacity:1}}.wui-motion-demo .e-sc{background:linear-gradient(135deg,#10739d,#3c42c4);border-radius:12px;place-items:center;width:150px;height:74px;display:grid;position:relative;overflow:hidden}.wui-motion-demo .e-sc b{color:#fff;letter-spacing:-.02em;font-size:17px;font-weight:800}.wui-motion-demo .e-sc i{-webkit-mask-image:radial-gradient(circle 30px at var(--mx,20%) var(--my,50%),transparent 98%,#000 100%);-webkit-mask-image:radial-gradient(circle 30px at var(--mx,20%) var(--my,50%),transparent 98%,#000 100%);mask-image:radial-gradient(circle 30px at var(--mx,20%) var(--my,50%),transparent 98%,#000 100%);background:#4a5a63;position:absolute;inset:0}.wui-motion-demo[data-on] .e-sc i{animation:4s ease-in-out infinite alternate e-sc}@keyframes e-sc{0%{--mx:14%;--my:36%}to{--mx:84%;--my:64%}}.wui-motion-demo .e-glass{border-radius:13px;width:186px;height:104px;position:relative;overflow:hidden}.wui-motion-demo .e-glass .bg{aspect-ratio:1;background:conic-gradient(from 0deg,var(--cyan),var(--pink),var(--indigo),var(--cyan));width:150%;position:absolute;top:50%;left:50%;translate:-50% -50%}.wui-motion-demo .e-glass .pane{-webkit-backdrop-filter:blur(9px)saturate(1.5);backdrop-filter:blur(9px)saturate(1.5);background:#08101457;border:1px solid #ffffff4d;border-radius:11px;place-items:center;display:grid;position:absolute;inset:22px 18px;box-shadow:inset 0 1px #ffffff73}.wui-motion-demo .e-glass b{color:#fff;text-shadow:0 1px 3px #0000004d;font-size:13px;font-weight:700}.wui-motion-demo[data-on] .e-glass .bg{animation:7s linear infinite e-glass}@keyframes e-glass{to{transform:rotate(360deg)}}.wui-motion-demo .e-bento{grid-template-columns:repeat(3,1fr);grid-auto-rows:34px;gap:6px;width:186px;display:grid}.wui-motion-demo .e-bento i{background:var(--surface);border:1px solid var(--line-2);border-radius:9px}.wui-motion-demo .e-bento i:first-child,.wui-motion-demo .e-bento i:nth-child(4){grid-column:span 2}.wui-motion-demo[data-on] .e-bento i{animation:e-bento 4s var(--e-entrance) calc(var(--i)*.35s) infinite}@keyframes e-bento{0%,55%,to{background:var(--surface);box-shadow:none;transform:none}20%,35%{background:color-mix(in oklab,var(--cyan) 13%,var(--surface));box-shadow:var(--shadow-2);transform:translateY(-4px)}}.wui-motion-demo .e-dock{background:var(--surface);border:1px solid var(--line-2);height:76px;box-shadow:var(--shadow-2);border-radius:15px;align-items:flex-end;gap:7px;padding:8px 12px;display:flex}.wui-motion-demo .e-dock i{background:linear-gradient(140deg,var(--cyan),var(--indigo));transform-origin:bottom;border-radius:8px;width:26px;height:26px}.wui-motion-demo[data-on] .e-dock i{animation:e-dock 3.6s var(--e-entrance) calc(var(--i)*.18s) infinite}@keyframes e-dock{0%,70%,to{transform:scale(1)}18%{transform:scale(1.85)}34%{transform:scale(1.25)}}.wui-motion-demo .e-mq{width:200px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#0000,#000 14% 86%,#0000);mask-image:linear-gradient(90deg,#0000,#000 14% 86%,#0000)}.wui-motion-demo .e-mq .tr{gap:10px;width:max-content;display:flex}.wui-motion-demo .e-mq i{background:var(--surface);border:1px solid var(--line-2);border-radius:9px;flex:none;width:34px;height:34px}.wui-motion-demo[data-on] .e-mq .tr{animation:5s linear infinite e-mq}@keyframes e-mq{to{transform:translate(-50%)}}.wui-motion-demo .e-orb{place-items:center;width:112px;height:112px;display:grid;position:relative}.wui-motion-demo .e-orb b{background:linear-gradient(140deg,var(--cyan),var(--indigo));border-radius:9px;width:26px;height:26px}.wui-motion-demo .e-orb i{border:1px dashed var(--line-2);border-radius:999px;position:absolute}.wui-motion-demo .e-orb .r1{inset:22px}.wui-motion-demo .e-orb .r2{inset:2px}.wui-motion-demo .e-orb s{background:var(--cyan);border-radius:999px;width:10px;height:10px;margin-left:-5px;text-decoration:none;position:absolute;top:-5px;left:50%}.wui-motion-demo .e-orb .r2 s{background:var(--pink)}.wui-motion-demo[data-on] .e-orb .r1{animation:4.5s linear infinite e-orb}.wui-motion-demo[data-on] .e-orb .r2{animation:7s linear infinite reverse e-orb}@keyframes e-orb{to{transform:rotate(360deg)}}.wui-motion-demo .e-tick{letter-spacing:-.04em;font-variant-numeric:tabular-nums;align-items:baseline;font-size:30px;font-weight:800;display:inline-flex}.wui-motion-demo .e-tick .col{width:.62em;height:1.1em;display:inline-block;overflow:hidden}.wui-motion-demo .e-tick .col b{text-align:center;height:1.1em;line-height:1.1em;display:block}.wui-motion-demo .e-tick em{color:var(--ink-3);margin-left:2px;font-size:16px;font-style:normal}.wui-motion-demo[data-on] .e-tick .col b{animation:e-tick 2.4s var(--e-entrance) infinite}.wui-motion-demo[data-on] .e-tick .c2 b{animation-duration:2.6s}.wui-motion-demo[data-on] .e-tick .c3 b{animation-duration:2.9s}@keyframes e-tick{0%{transform:translateY(0)}70%,to{transform:translateY(-4.4em)}}.wui-motion-demo .e-av{display:flex}.wui-motion-demo .e-av i{background:var(--cyan);width:32px;height:32px;color:var(--cyan-fg);border:2px solid var(--surface-2);border-radius:999px;place-items:center;margin-left:-9px;font-size:12px;font-style:normal;font-weight:800;display:grid}.wui-motion-demo .e-av i:first-child{margin-left:0}.wui-motion-demo .e-av i:nth-child(2){background:var(--indigo);color:#fff}.wui-motion-demo .e-av i:nth-child(3){background:var(--green)}.wui-motion-demo .e-av i:nth-child(4){background:var(--pink)}.wui-motion-demo .e-av i:last-child{background:var(--line-2);color:var(--ink)}.wui-motion-demo[data-on] .e-av i:not(:last-child){animation:e-av 3.4s linear calc(var(--i)*.13s) infinite}@keyframes e-av{0%,10%{z-index:0;animation-timing-function:cubic-bezier(.34,1.35,.64,1);transform:none}11%{z-index:2}26%,42%{z-index:2;animation-timing-function:cubic-bezier(.4,0,.2,1);transform:translateY(-9px)scale(1.12)}58%,59%{z-index:2;transform:none}60%,to{z-index:0;transform:none}}.wui-motion-demo .e-ab{width:186px;height:96px;position:relative}.wui-motion-demo .e-ab .n{background:var(--surface);border:1px solid var(--line-2);width:26px;height:26px;box-shadow:var(--shadow);z-index:1;border-radius:9px;position:absolute}.wui-motion-demo .e-ab .a{top:7px;left:15px}.wui-motion-demo .e-ab .b{top:63px;left:15px}.wui-motion-demo .e-ab .c{background:linear-gradient(140deg,var(--cyan),var(--indigo));border-color:#0000;top:35px;right:15px}.wui-motion-demo .e-ab svg{width:186px;height:96px;position:absolute;inset:0;overflow:visible}.wui-motion-demo .e-ab path{fill:none;stroke:var(--line-2);stroke-width:1.5px;stroke-dasharray:9 300;stroke-dashoffset:0}.wui-motion-demo[data-on] .e-ab path{stroke:var(--cyan);stroke-width:2.2px;animation:2.2s linear infinite e-ab}.wui-motion-demo[data-on] .e-ab path:last-child{animation-delay:.6s}@keyframes e-ab{to{stroke-dashoffset:-309px}}.wui-motion-demo .e-tb{gap:14px;width:186px;height:104px;padding:8px 0;display:flex}.wui-motion-demo .e-tb .rail{background:var(--line-2);border-radius:999px;flex:none;width:2px;position:relative;overflow:hidden}.wui-motion-demo .e-tb .rail b{inset-inline:0;background:linear-gradient(transparent,var(--cyan));border-radius:999px;height:34%;position:absolute;top:0}.wui-motion-demo .e-tb .txt{flex:1;align-content:start;gap:9px;display:grid}.wui-motion-demo .e-tb .txt i{background:var(--line-2);border-radius:999px;height:6px;display:block}.wui-motion-demo .e-tb .txt i:nth-child(2){width:82%}.wui-motion-demo .e-tb .txt i:nth-child(3){width:64%}.wui-motion-demo .e-tb .txt i:nth-child(4){width:74%}.wui-motion-demo[data-on] .e-tb .rail b{animation:e-tb 3.4s var(--e-move) infinite}@keyframes e-tb{0%{top:-34%}to{top:100%}}.wui-motion-demo .e-sp{background:var(--surface);border:1px solid var(--line-2);border-radius:12px;width:186px;height:104px;position:relative;overflow:hidden}.wui-motion-demo .e-sp .bar{background:var(--cyan);z-index:2;width:0;height:3px;position:absolute;top:0;left:0}.wui-motion-demo .e-sp .pg{gap:8px;padding:14px 13px;display:grid}.wui-motion-demo .e-sp .pg i{background:var(--line-2);border-radius:999px;height:6px;display:block}.wui-motion-demo .e-sp .pg i:nth-child(2){width:78%}.wui-motion-demo .e-sp .pg i:nth-child(3){width:58%}.wui-motion-demo[data-on] .e-sp .bar{animation:3s linear infinite e-sp}@keyframes e-sp{0%{width:0}85%,to{width:100%}}.wui-motion-demo .e-cs{place-items:center;width:96px;height:96px;display:grid;position:relative}.wui-motion-demo .e-cs b{background:var(--surface);border:1px solid var(--line-2);border-radius:13px;place-items:center;width:44px;height:44px;font-size:12px;font-weight:650;display:grid}.wui-motion-demo .e-cs i{background:var(--cyan);width:2px;height:11px;transform:rotate(var(--r)) translateY(-24px) scale(0);opacity:0;border-radius:999px;position:absolute}.wui-motion-demo[data-on] .e-cs i{animation:e-cs 1.6s var(--e-exit) infinite}@keyframes e-cs{0%{transform:rotate(var(--r)) translateY(-20px) scale(0);opacity:1}60%,to{transform:rotate(var(--r)) translateY(-40px) scale(1);opacity:0}}.wui-motion-demo .e-fp{background:var(--surface);border:1px solid var(--line-2);border-radius:12px;width:186px;height:96px;position:relative;overflow:hidden}.wui-motion-demo .e-fp .dot{background:var(--cyan);border-radius:999px;width:8px;height:8px;margin:-4px;position:absolute;top:30%;left:20%}.wui-motion-demo .e-fp .ring{border:1.5px solid color-mix(in oklab,var(--cyan) 55%,transparent);border-radius:999px;width:28px;height:28px;margin:-14px;position:absolute;top:30%;left:20%}.wui-motion-demo[data-on] .e-fp .dot{animation:4s ease-in-out infinite alternate e-fp}.wui-motion-demo[data-on] .e-fp .ring{animation:4s ease-in-out .12s infinite alternate e-fp}@keyframes e-fp{0%{top:28%;left:18%}50%{top:66%;left:74%}to{top:24%;left:56%}}.wui-motion-demo .e-conf{place-items:center;width:110px;height:96px;display:grid;position:relative}.wui-motion-demo .e-conf b{z-index:1;background:var(--cyan);height:32px;color:var(--cyan-fg);border-radius:10px;place-items:center;padding-inline:18px;font-size:12.5px;font-weight:700;display:grid;position:relative}.wui-motion-demo .e-conf i{background:var(--c);opacity:0;border-radius:1px;width:5px;height:8px;position:absolute}.wui-motion-demo[data-on] .e-conf i{animation:e-conf 2.2s var(--e-exit) var(--d) infinite}@keyframes e-conf{0%{transform:rotate(var(--r)) translateY(0) rotate(0);opacity:1}to{transform:rotate(var(--r)) translateY(-54px) rotate(420deg);opacity:0}}.wui-motion-demo .e-sub{border-radius:11px;place-items:center;width:138px;height:36px;font-size:12.5px;font-weight:700;display:inline-grid;position:relative;overflow:hidden}.wui-motion-demo .e-sub b{place-items:center;display:grid;position:absolute;inset:0}.wui-motion-demo .e-sub .s1{background:var(--ink);color:var(--page)}.wui-motion-demo .e-sub .s2{background:var(--green);color:#17181a}.wui-motion-demo[data-on] .e-sub .s1{animation:e-sub-a 3.6s var(--e-entrance) infinite}.wui-motion-demo[data-on] .e-sub .s2{animation:e-sub-b 3.6s var(--e-entrance) infinite}@keyframes e-sub-a{0%,40%{transform:none}50%,90%{transform:translateY(-100%)}to{transform:none}}@keyframes e-sub-b{0%,40%{transform:translateY(100%)}50%,90%{transform:none}to{transform:translateY(100%)}}.wui-motion-demo .e-term{background:var(--night);border:1px solid var(--night-2);border-radius:11px;width:212px;overflow:hidden}.wui-motion-demo .e-term .hd{background:#16242b;gap:5px;padding:8px 10px;display:flex}.wui-motion-demo .e-term .hd i{background:#3b4f59;border-radius:999px;width:8px;height:8px}.wui-motion-demo .e-term .bd{gap:5px;padding:10px;font-family:JetBrains Mono,monospace;font-size:12px;display:grid}.wui-motion-demo .e-term b{color:#9fbac6;opacity:0;white-space:nowrap;font-weight:400;overflow:hidden}.wui-motion-demo .e-term b:first-child{color:var(--cyan)}.wui-motion-demo[data-on] .e-term b{animation:e-term 4s steps(1) calc(var(--i)*.75s) infinite}@keyframes e-term{0%{opacity:0}12%,88%{opacity:1}to{opacity:0}}.wui-motion-demo .e-ph{background:var(--ink);width:64px;height:118px;box-shadow:var(--shadow-2);border-radius:14px;padding:3px}.wui-motion-demo .e-ph .scr{background:var(--surface);border-radius:11px;align-content:start;gap:5px;width:100%;height:100%;padding:14px 7px 7px;display:grid;position:relative;overflow:hidden}.wui-motion-demo .e-ph .notch{background:var(--ink);border-radius:0 0 5px 5px;width:24px;height:7px;margin-left:-12px;position:absolute;top:0;left:50%}.wui-motion-demo .e-ph i:not(.notch){background:var(--surface-2);border-radius:4px;height:12px}.wui-motion-demo[data-on] .e-ph .a{animation:e-ph 3s var(--e-entrance) 0s infinite}.wui-motion-demo[data-on] .e-ph .b{animation:e-ph 3s var(--e-entrance) .12s infinite}.wui-motion-demo[data-on] .e-ph .c{animation:e-ph 3s var(--e-entrance) .24s infinite}@keyframes e-ph{0%{opacity:0;transform:translateY(7px)}20%,80%{opacity:1;transform:none}to{opacity:0}}.wui-motion-demo .e-ft{background:var(--surface);border:1px solid var(--line-2);width:176px;color:var(--ink-2);border-radius:11px;gap:5px;padding:11px;font-family:JetBrains Mono,monospace;font-size:12px;display:grid}.wui-motion-demo .e-ft b{opacity:0;white-space:nowrap;align-items:center;gap:5px;font-weight:400;display:flex}.wui-motion-demo .e-ft svg{width:12px;height:12px;color:var(--ink-3);flex:none}.wui-motion-demo .e-ft .in{color:var(--ink-3);padding-left:15px}.wui-motion-demo[data-on] .e-ft b{animation:e-ft 3.6s var(--e-entrance) calc(var(--i)*.16s) infinite}@keyframes e-ft{0%{opacity:0;transform:translate(-7px)}18%,84%{opacity:1;transform:none}to{opacity:0}}.wui-motion-demo .e-rsw{gap:5px;width:196px;display:grid}.wui-motion-demo .e-rsw i{background:var(--surface);border:1px solid var(--line);border-radius:7px;align-items:center;gap:8px;height:22px;padding-inline:9px;display:flex}.wui-motion-demo .e-rsw b{background:var(--cyan);border-radius:3px;flex:none;width:9px;height:9px}.wui-motion-demo .e-rsw s{background:var(--line-2);border-radius:999px;flex:1;height:5px;text-decoration:none}.wui-motion-demo[data-on] .e-rsw i{animation:e-rsw .9s var(--e-entrance) calc(var(--i)*80ms) infinite alternate}@keyframes e-rsw{0%{opacity:.35;transform:translate(-9px)}to{opacity:1;transform:none}}.wui-motion-demo .e-sortw{gap:4px;width:186px;display:grid}.wui-motion-demo .e-sortw .hd{color:var(--acc);padding-inline:2px;font-family:JetBrains Mono,monospace;font-size:12px}.wui-motion-demo .e-sortw i{background:var(--surface);border:1px solid var(--line);border-radius:6px;height:19px;display:block}.wui-motion-demo[data-on] .e-sortw i{animation:e-sortw 2.4s var(--e-entrance) calc(var(--i)*90ms) infinite}@keyframes e-sortw{0%,60%,to{background:var(--surface)}18%,34%{background:color-mix(in oklab,var(--cyan) 17%,var(--surface))}}.wui-motion-demo .e-cf{grid-template-columns:1fr 1fr;gap:5px;width:170px;display:grid}.wui-motion-demo .e-cf .c{background:var(--surface);border:1px solid var(--line);height:30px;color:var(--ink-2);border-radius:7px;place-items:center;font-family:JetBrains Mono,monospace;font-size:11.5px;display:grid}.wui-motion-demo[data-on] .e-cf .hot{animation:e-cf 2.2s var(--e-exit) infinite}@keyframes e-cf{0%{background:color-mix(in oklab,var(--green) 40%,var(--surface));box-shadow:0 0 0 2px color-mix(in oklab,var(--green) 40%,transparent)}45%,to{background:var(--surface);box-shadow:0 0 #0000}}.wui-motion-demo .e-kb{gap:9px;width:190px;display:flex}.wui-motion-demo .e-kb .col{background:var(--surface-2);border:1px solid var(--line);border-radius:9px;flex:1;align-content:start;gap:6px;min-height:96px;padding:7px;display:grid}.wui-motion-demo .e-kb .card{background:var(--surface);border:1px solid var(--line-2);border-radius:7px;height:30px;display:block}.wui-motion-demo .e-kb .slot{border:1.5px dashed var(--line-2);opacity:0;border-radius:7px;height:30px;display:block}.wui-motion-demo[data-on] .e-kb .drag{animation:e-kb 3s var(--e-move) infinite}.wui-motion-demo[data-on] .e-kb .slot{animation:e-kb-s 3s var(--e-move) infinite}@keyframes e-kb{0%,10%{box-shadow:none;transform:none}30%,60%{box-shadow:var(--shadow-2);transform:translate(96px,-6px)rotate(3deg)}80%,to{box-shadow:none;transform:none}}@keyframes e-kb-s{0%,18%{opacity:0}30%,62%{opacity:1}75%,to{opacity:0}}.wui-motion-demo .e-tree{width:172px;color:var(--ink-2);gap:5px;font-family:JetBrains Mono,monospace;font-size:12px;display:grid}.wui-motion-demo .e-tree>b{align-items:center;gap:5px;font-weight:500;display:flex}.wui-motion-demo .e-tree svg{width:12px;height:12px;color:var(--ink-3);flex:none}.wui-motion-demo .e-tree .br{--i:0;align-items:center;padding-left:20px;display:flex;position:relative}.wui-motion-demo .e-tree .br:nth-child(2){--i:0}.wui-motion-demo .e-tree .br:nth-child(3){--i:1}.wui-motion-demo .e-tree .br:nth-child(4){--i:2}.wui-motion-demo .e-tree .ln{border-left:1px solid var(--line-2);border-bottom:1px solid var(--line-2);clip-path:inset(0 100% 0 0);border-bottom-left-radius:4px;width:11px;height:16px;position:absolute;top:-6px;left:5px}.wui-motion-demo .e-tree .br b{opacity:0;font-weight:400}.wui-motion-demo[data-on] .e-tree .ln{animation:e-tree-l 3s var(--e-entrance) calc(var(--i)*.22s) infinite}.wui-motion-demo[data-on] .e-tree .br b{animation:e-tree-b 3s var(--e-entrance) calc(var(--i)*.22s + .12s) infinite}@keyframes e-tree-l{0%{clip-path:inset(0 100% 0 0)}22%,88%{clip-path:inset(0)}to{clip-path:inset(0 100% 0 0)}}@keyframes e-tree-b{0%{opacity:0;transform:translate(-5px)}20%,88%{opacity:1;transform:none}to{opacity:0}}.wui-motion-demo .e-heat{grid-template-columns:repeat(5,1fr);gap:4px;width:150px;display:grid}.wui-motion-demo .e-heat i{aspect-ratio:1;opacity:0;background:color-mix(in oklab,var(--cyan) calc(var(--v) * 100%),var(--surface-2));border-radius:4px}.wui-motion-demo[data-on] .e-heat i{animation:e-heat 2.8s var(--e-entrance) calc(var(--i)*45ms) infinite}@keyframes e-heat{0%{opacity:0;transform:scale(.6)}25%,85%{opacity:1;transform:none}to{opacity:0;transform:scale(.6)}}.wui-motion-demo .e-bar{align-items:flex-end;gap:7px;height:96px;padding:0 4px;display:flex}.wui-motion-demo .e-bar i{width:19px;height:var(--h);transform-origin:bottom;background:linear-gradient(var(--cyan),color-mix(in oklab,var(--cyan) 55%,var(--indigo)));border-radius:4px 4px 0 0}.wui-motion-demo[data-on] .e-bar i{animation:e-bar 2.6s var(--e-entrance) calc(var(--i)*70ms) infinite}@keyframes e-bar{0%{transform:scaleY(0)}30%,82%{transform:scaleY(1)}to{transform:scaleY(0)}}.wui-motion-demo .e-lt svg{width:186px;height:92px;overflow:visible}.wui-motion-demo .e-lt .ln{fill:none;stroke:var(--cyan);stroke-width:2.4px;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:260;stroke-dashoffset:260px}.wui-motion-demo .e-lt .ar{fill:color-mix(in oklab,var(--cyan) 18%,transparent);opacity:0}.wui-motion-demo .e-lt .dot{fill:var(--cyan);offset-path:path("M6,74 L42,56 L78,64 L114,30 L150,42 L180,16");offset-distance:0%;opacity:0}.wui-motion-demo[data-on] .e-lt .ln{animation:e-lt 3.2s var(--e-move) infinite}.wui-motion-demo[data-on] .e-lt .ar{animation:e-lt-a 3.2s var(--e-entrance) infinite}.wui-motion-demo[data-on] .e-lt .dot{animation:e-lt-d 3.2s var(--e-move) infinite}@keyframes e-lt{0%{stroke-dashoffset:260px}45%,84%{stroke-dashoffset:0}to{stroke-dashoffset:260px}}@keyframes e-lt-a{0%,20%{opacity:0}55%,84%{opacity:1}to{opacity:0}}@keyframes e-lt-d{0%{offset-distance:0%;opacity:1}45%{offset-distance:100%;opacity:1}55%,to{offset-distance:100%;opacity:0}}.wui-motion-demo .e-gauge{place-items:center;width:104px;height:104px;display:grid;position:relative}.wui-motion-demo .e-gauge .ring{background:conic-gradient(from 135deg,var(--cyan) var(--wm-ang,0deg),var(--surface-2) 0 270deg,transparent 0);border-radius:999px;position:absolute;inset:0;-webkit-mask:radial-gradient(circle,#0000 62%,#000 63%);mask:radial-gradient(circle,#0000 62%,#000 63%)}.wui-motion-demo .e-gauge b{letter-spacing:-.04em;font-size:24px;font-weight:800}.wui-motion-demo[data-on] .e-gauge .ring{animation:e-gauge 2.8s var(--e-overshoot) infinite}@keyframes e-gauge{0%{--wm-ang:0deg}40%{--wm-ang:205deg}52%{--wm-ang:188deg}62%,88%{--wm-ang:194deg}to{--wm-ang:0deg}}.wui-motion-demo .e-fan{width:96px;height:96px;position:relative}.wui-motion-demo .e-fan i{transform-origin:50%;border-radius:999px;position:absolute;inset:0}.wui-motion-demo .e-fan i:first-child{background:conic-gradient(var(--cyan) 0 118deg,transparent 0)}.wui-motion-demo .e-fan i:nth-child(2){background:conic-gradient(transparent 0 118deg,var(--indigo) 0 212deg,transparent 0)}.wui-motion-demo .e-fan i:nth-child(3){background:conic-gradient(transparent 0 212deg,var(--pink) 0 360deg,transparent 0)}.wui-motion-demo[data-on] .e-fan i{animation:e-fan 3s var(--e-entrance) calc(var(--i)*.14s) infinite}@keyframes e-fan{0%{opacity:0;transform:rotate(-40deg)scale(.6)}28%,82%{opacity:1;transform:none}to{opacity:0;transform:rotate(-40deg)scale(.6)}}.wui-motion-demo .e-rad svg{width:104px;height:104px}.wui-motion-demo .e-rad .g{fill:none;stroke:var(--line-2);stroke-width:1px}.wui-motion-demo .e-rad .v{fill:color-mix(in oklab,var(--cyan) 28%,transparent);stroke:var(--cyan);stroke-width:2px;transform-origin:52px 52px}.wui-motion-demo[data-on] .e-rad .v{animation:e-rad 3s var(--e-overshoot) infinite}@keyframes e-rad{0%{opacity:0;transform:scale(0)}30%{opacity:1;transform:scale(1.06)}40%,84%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0)}}.wui-motion-demo .e-cdl{align-items:flex-start;gap:7px;height:76px;padding-top:6px;display:flex}.wui-motion-demo .e-cdl i{width:9px;height:var(--h);margin-top:var(--t);transform-origin:50%;background:var(--cyan);border-radius:2px;position:relative}.wui-motion-demo .e-cdl i[style*=--up\:0]{background:var(--pink)}.wui-motion-demo .e-cdl i:before{content:"";background:inherit;opacity:.55;width:1.5px;margin-left:-.75px;position:absolute;top:-6px;bottom:-6px;left:50%}.wui-motion-demo[data-on] .e-cdl i{animation:e-cdl 2.6s var(--e-entrance) calc(var(--i)*60ms) infinite}@keyframes e-cdl{0%{opacity:0;transform:scaleY(0)}26%,84%{opacity:1;transform:scaleY(1)}to{opacity:0;transform:scaleY(0)}}.wui-motion-demo .e-fn{justify-items:center;gap:4px;width:170px;display:grid}.wui-motion-demo .e-fn i{height:16px;width:var(--w);transform-origin:top;background:linear-gradient(90deg,var(--cyan),var(--indigo));border-radius:4px}.wui-motion-demo[data-on] .e-fn i{animation:e-fn 2.8s var(--e-entrance) calc(var(--i)*.13s) infinite}@keyframes e-fn{0%{opacity:0;transform:scaleY(0)}24%,84%{opacity:1;transform:scaleY(1)}to{opacity:0;transform:scaleY(0)}}.wui-motion-demo .e-ts .bub{background:var(--surface);border:1px solid var(--line-2);border-radius:11px 11px 11px 3px;align-items:center;gap:3px;padding:9px 11px;font-size:12px;line-height:1.45;display:inline-flex}.wui-motion-demo .e-ts b{color:var(--ink-2);white-space:nowrap;max-width:0;font-weight:400;overflow:hidden}.wui-motion-demo .e-ts .cur{background:var(--cyan);border-radius:1px;flex:none;width:2px;height:12px}.wui-motion-demo[data-on] .e-ts b{animation:4s steps(12,end) infinite e-ts}.wui-motion-demo[data-on] .e-ts .cur{animation:.8s step-end infinite e-ts-c}@keyframes e-ts{0%{max-width:0}62%,92%{max-width:224px}to{max-width:0}}@keyframes e-ts-c{50%{opacity:0}}.wui-motion-demo .e-orb2{place-items:center;width:84px;height:84px;display:grid;position:relative}.wui-motion-demo .e-orb2 .core{background:conic-gradient(from var(--wm-ang,0deg),var(--cyan),var(--indigo),var(--pink),var(--cyan));filter:blur(1px);border-radius:999px;width:34px;height:34px}.wui-motion-demo .e-orb2 .halo{background:inherit;background:conic-gradient(from var(--wm-ang,0deg),var(--cyan),var(--pink),var(--cyan));filter:blur(13px);opacity:.6;border-radius:999px;width:52px;height:52px;position:absolute}.wui-motion-demo[data-on] .e-orb2 .core{animation:3s linear infinite e-orb2-a,2.2s ease-in-out infinite alternate e-orb2-b}.wui-motion-demo[data-on] .e-orb2 .halo{animation:4.5s linear infinite reverse e-orb2-a,2.6s ease-in-out infinite alternate e-orb2-b}@keyframes e-orb2-a{to{--wm-ang:360deg}}@keyframes e-orb2-b{0%{transform:scale(.88)}to{transform:scale(1.08)}}.wui-motion-demo .e-tf{gap:6px;width:200px;display:grid}.wui-motion-demo .e-tf .chip{background:var(--surface);border:1px solid var(--line-2);height:26px;color:var(--ink-2);border-radius:7px;align-items:center;padding-inline:10px;font-family:JetBrains Mono,monospace;font-size:12px;display:flex;position:relative;overflow:hidden}.wui-motion-demo .e-tf .fill{background:color-mix(in oklab,var(--cyan) 17%,transparent);transform-origin:0;position:absolute;inset:0;transform:scaleX(0)}.wui-motion-demo .e-tf .f2{background:color-mix(in oklab,var(--green) 22%,transparent)}.wui-motion-demo .e-tf b{font-weight:400;position:relative}.wui-motion-demo .e-tf .ok{opacity:0}.wui-motion-demo[data-on] .e-tf .fill{animation:e-tf 3.4s var(--e-move) infinite}.wui-motion-demo[data-on] .e-tf .ok{animation:e-tf-ok 3.4s var(--e-entrance) infinite}@keyframes e-tf{0%{transform:scaleX(0)}45%,88%{transform:scaleX(1)}to{transform:scaleX(0)}}@keyframes e-tf-ok{0%,45%{opacity:0;transform:translateY(6px)}58%,88%{opacity:1;transform:none}to{opacity:0}}.wui-motion-demo .e-ho{align-items:center;gap:0;width:198px;display:flex}.wui-motion-demo .e-ho .lane{background:var(--surface);border:1px solid var(--line-2);height:44px;color:var(--ink-2);border-radius:9px;flex:1;place-items:center;font-size:12px;font-weight:650;display:grid}.wui-motion-demo .e-ho .wire{background:var(--line-2);width:38px;height:2px;position:relative}.wui-motion-demo .e-ho .wire i{background:var(--cyan);width:9px;height:9px;box-shadow:0 0 0 4px color-mix(in oklab,var(--cyan) 22%,transparent);opacity:0;border-radius:999px;margin:-4.5px 0 0 -4.5px;position:absolute;top:50%;left:0}.wui-motion-demo[data-on] .e-ho .wire i{animation:e-ho 2.6s var(--e-move) infinite}.wui-motion-demo[data-on] .e-ho .lane:first-child{animation:e-ho-a 2.6s var(--e-entrance) infinite}.wui-motion-demo[data-on] .e-ho .lane:last-child{animation:e-ho-b 2.6s var(--e-entrance) infinite}@keyframes e-ho{0%{opacity:0;left:0}12%{opacity:1}72%{opacity:1;left:100%}80%,to{opacity:0;left:100%}}@keyframes e-ho-a{0%,20%{box-shadow:0 0 0 2px var(--cyan)}40%,to{box-shadow:0 0 #0000}}@keyframes e-ho-b{0%,60%{box-shadow:0 0 #0000}78%,to{box-shadow:0 0 0 2px var(--cyan)}}.wui-motion-demo .e-log{background:var(--night);border-radius:9px;align-content:start;gap:3px;width:196px;height:114px;padding:9px 11px;display:grid;overflow:hidden}.wui-motion-demo .e-log b{color:#8fa9b5;white-space:nowrap;opacity:0;font-family:JetBrains Mono,monospace;font-size:12px;font-weight:400;line-height:16px}.wui-motion-demo .e-log b:last-child{color:var(--cyan)}.wui-motion-demo[data-on] .e-log b{animation:e-log 4s var(--e-entrance) calc(var(--i)*.5s) infinite}@keyframes e-log{0%{opacity:0;transform:translateY(8px)}10%,88%{opacity:1;transform:none}to{opacity:0;transform:translateY(-4px)}}.wui-motion-demo .e-pc{gap:7px;width:180px;display:grid}.wui-motion-demo .e-pc .st{align-items:center;gap:9px;display:flex}.wui-motion-demo .e-pc .bx{border:1.5px solid var(--line-2);border-radius:5px;flex:none;width:16px;height:16px;position:relative}.wui-motion-demo .e-pc .bx:after{content:"";background:var(--cyan);border-radius:3px;position:absolute;inset:2px;transform:scale(0)}.wui-motion-demo .e-pc b{background:var(--line-2);border-radius:999px;flex:1;height:5px}.wui-motion-demo[data-on] .e-pc .bx:after{animation:e-pc 3.6s var(--e-overshoot) calc(var(--i)*.34s) infinite}.wui-motion-demo[data-on] .e-pc b{animation:e-pc-b 3.6s var(--e-entrance) calc(var(--i)*.34s) infinite}@keyframes e-pc{0%{transform:scale(0)}22%,88%{transform:scale(1)}to{transform:scale(0)}}@keyframes e-pc-b{0%{opacity:.4}22%,88%{opacity:1}to{opacity:.4}}.wui-motion-demo .e-sf2{justify-content:center;align-items:center;width:180px;height:74px;display:flex;position:relative}.wui-motion-demo .e-sf2 i{background:var(--surface);border:1px solid var(--line-2);width:48px;height:60px;box-shadow:var(--shadow);border-radius:8px;align-content:start;gap:4px;padding:7px;display:grid;position:absolute}.wui-motion-demo .e-sf2 b{background:var(--line-2);border-radius:999px;height:3px;display:block}.wui-motion-demo .e-sf2 b:last-child{width:62%}.wui-motion-demo[data-on] .e-sf2 i{animation:e-sf2 3.4s var(--e-entrance) calc(var(--i)*.1s) infinite}@keyframes e-sf2{0%{opacity:0;transform:translate(0)rotate(0)}26%,84%{transform:translateX(calc((var(--i) - 1.5) * 42px)) rotate(calc((var(--i) - 1.5) * 5deg));opacity:1}to{opacity:0;transform:translate(0)rotate(0)}}.wui-motion-demo .e-cw{gap:5px;width:174px;display:grid}.wui-motion-demo .e-cw .lab{color:var(--ink-3);justify-content:space-between;font-size:12px;display:flex}.wui-motion-demo .e-cw .v{font-family:JetBrains Mono,monospace}.wui-motion-demo .e-cw .bar{background:var(--surface-2);border:1px solid var(--line);border-radius:999px;height:8px;overflow:hidden}.wui-motion-demo .e-cw .bar i{background:var(--cyan);border-radius:999px;width:0;height:100%;display:block}.wui-motion-demo[data-on] .e-cw .bar i{animation:e-cw 3.6s var(--e-move) infinite}@keyframes e-cw{0%{background:var(--cyan);width:0}55%{background:var(--cyan);width:62%}75%{background:var(--orange);width:82%}88%{background:#d42a2d;width:92%}to{background:#d42a2d;width:92%}}.wui-motion-demo .e-otp{gap:7px;display:flex}.wui-motion-demo .e-otp i{border:1.5px solid var(--line-2);background:var(--surface);color:#0000;border-radius:9px;place-items:center;width:34px;height:42px;font-family:JetBrains Mono,monospace;font-size:17px;font-style:normal;font-weight:600;display:grid}.wui-motion-demo[data-on] .e-otp i{animation:e-otp 3.2s var(--e-entrance) calc(var(--i)*.28s) infinite}@keyframes e-otp{0%{color:#0000;border-color:var(--line-2);box-shadow:0 0 #0000}10%{border-color:var(--cyan);box-shadow:0 0 0 3px color-mix(in oklab,var(--cyan) 30%,transparent)}22%,84%{color:var(--ink);border-color:var(--cyan);box-shadow:0 0 #0000}to{color:#0000;border-color:var(--line-2)}}.wui-motion-demo .e-ma{width:176px;height:76px;color:var(--acc);background:color-mix(in oklab,var(--cyan) 7%,var(--surface));background-image:repeating-linear-gradient(90deg,var(--cyan) 0 7px,transparent 7px 14px), repeating-linear-gradient(180deg,var(--cyan) 0 7px,transparent 7px 14px), repeating-linear-gradient(90deg,var(--cyan) 0 7px,transparent 7px 14px), repeating-linear-gradient(180deg,var(--cyan) 0 7px,transparent 7px 14px);background-position:0 0,100% 0,0 100%,0 0;background-repeat:no-repeat;background-size:100% 1.5px,1.5px 100%,100% 1.5px,1.5px 100%;border-radius:11px;place-items:center;font-size:11.5px;font-weight:600;display:grid}.wui-motion-demo[data-on] .e-ma{animation:1.1s linear infinite e-ma}@keyframes e-ma{to{background-position:14px 0,100% 14px,-14px 100%,0 -14px}}.wui-motion-demo .e-str{gap:6px;width:170px;display:grid}.wui-motion-demo .e-str .segs{gap:5px;display:flex}.wui-motion-demo .e-str i{background:var(--line-2);transform-origin:0;border-radius:999px;flex:1;height:5px}.wui-motion-demo .e-str .lb{display:grid}.wui-motion-demo .e-str b{grid-area:1/1;font-size:12px;font-weight:650}.wui-motion-demo .e-str .w{color:var(--or-t)}.wui-motion-demo .e-str .f{color:var(--ink-2);opacity:0}.wui-motion-demo .e-str .s{color:var(--gr-t);opacity:0}.wui-motion-demo[data-on] .e-str i{animation:e-str 3.2s var(--e-entrance) calc(var(--i)*.22s) infinite}.wui-motion-demo[data-on] .e-str .w{animation:3.2s linear infinite e-str-w}.wui-motion-demo[data-on] .e-str .f{animation:3.2s linear infinite e-str-f}.wui-motion-demo[data-on] .e-str .s{animation:3.2s linear infinite e-str-s}@keyframes e-str{0%{background:var(--line-2)}18%,86%{background:var(--cyan)}to{background:var(--line-2)}}@keyframes e-str-w{0%,15.9%{opacity:1}16%,97.9%{opacity:0}98%,to{opacity:1}}@keyframes e-str-f{0%,15.9%{opacity:0}16%,31.9%{opacity:1}32%,to{opacity:0}}@keyframes e-str-s{0%,31.9%{opacity:0}32%,97.9%{opacity:1}98%,to{opacity:0}}.wui-motion-demo .e-dr{grid-template-columns:repeat(7,1fr);gap:4px;width:158px;display:grid}.wui-motion-demo .e-dr i{aspect-ratio:1;background:var(--surface-2);border-radius:5px;display:block}.wui-motion-demo[data-on] .e-dr .sel{animation:e-dr 3s var(--e-entrance) calc((var(--i) - 8)*70ms) infinite}@keyframes e-dr{0%{background:var(--surface-2);transform:scale(1)}14%{background:var(--cyan);transform:scale(1.14)}24%,86%{background:var(--cyan);transform:scale(1)}to{background:var(--surface-2)}}.wui-motion-demo .e-sc2{color:var(--line-2);gap:5px;display:flex}.wui-motion-demo .e-sc2 i{width:22px;height:22px;display:block}.wui-motion-demo .e-sc2 svg{width:100%;height:100%}.wui-motion-demo[data-on] .e-sc2 i{animation:e-sc2 3s var(--e-overshoot) calc(var(--i)*.11s) infinite}@keyframes e-sc2{0%{color:var(--line-2);transform:scale(1)}16%{color:var(--cyan);transform:scale(1.35)rotate(-14deg)}28%,84%{color:var(--cyan);transform:none}to{color:var(--line-2);transform:scale(1)}}.wui-motion-demo .e-ink{gap:7px;width:190px;display:grid}.wui-motion-demo .e-ink .tabs{color:var(--ink-3);gap:16px;padding-inline:2px;font-size:11.5px;font-weight:650;display:flex}.wui-motion-demo .e-ink .bar{background:var(--cyan);border-radius:999px;width:52px;height:2.5px;margin-left:2px}.wui-motion-demo[data-on] .e-ink .bar{animation:e-ink 3.6s var(--e-move) infinite}@keyframes e-ink{0%,14%{width:52px;transform:translate(0)}32%,46%{width:44px;transform:translate(68px)}64%,78%{width:28px;transform:translate(128px)}to{width:52px;transform:translate(0)}}.wui-motion-demo .e-tst{width:190px;height:86px;position:relative}.wui-motion-demo .e-tst i{inset-inline:calc(var(--i) * 7px);top:calc(var(--i) * 9px);background:var(--surface);border:1px solid var(--line-2);height:38px;box-shadow:var(--shadow);z-index:calc(3 - var(--i));border-radius:9px;position:absolute}.wui-motion-demo[data-on] .e-tst i{animation:e-tst 3.2s var(--e-overshoot) infinite}@keyframes e-tst{0%{opacity:0;transform:translateY(34px)scale(.92)}18%,86%{opacity:1;transform:none}to{opacity:0;transform:translateY(34px)scale(.92)}}.wui-motion-demo .e-sh{display:inline-block}.wui-motion-demo .e-sh .frame{background:var(--surface-2);border:1px solid var(--line-2);border-radius:13px;width:118px;height:108px;display:block;position:relative;overflow:hidden}.wui-motion-demo .e-sh .pane{inset-inline:0;background:var(--surface);border:1px solid var(--line-2);height:78px;box-shadow:var(--shadow-2);border-bottom:0;border-radius:13px 13px 0 0;justify-items:center;padding-top:7px;display:grid;position:absolute;bottom:0}.wui-motion-demo .e-sh .grab{background:var(--line-2);border-radius:999px;width:32px;height:4px}.wui-motion-demo[data-on] .e-sh .pane{animation:e-sh 3.6s var(--e-overshoot) infinite}@keyframes e-sh{0%{transform:translateY(100%)}20%,36%{transform:translateY(46%)}50%,84%{transform:translateY(0)}to{transform:translateY(100%)}}.wui-motion-demo .e-cmd{background:var(--surface);border:1px solid var(--line-2);width:194px;box-shadow:var(--shadow-2);border-radius:12px;gap:3px;padding:6px;display:grid}.wui-motion-demo .e-cmd .q{background:var(--surface-2);height:28px;color:var(--ink-3);border-radius:8px;align-items:center;padding-inline:10px;font-family:JetBrains Mono,monospace;font-size:12px;display:flex}.wui-motion-demo .e-cmd i{border-radius:7px;align-items:center;height:22px;padding-inline:10px;display:flex}.wui-motion-demo .e-cmd i:first-of-type{background:color-mix(in oklab,var(--cyan) 13%,transparent)}.wui-motion-demo .e-cmd b{background:var(--line-2);border-radius:999px;width:64%;height:5px}.wui-motion-demo[data-on] .e-cmd{animation:e-cmd-w 3.4s var(--e-entrance) infinite}.wui-motion-demo[data-on] .e-cmd i{animation:e-cmd 3.4s var(--e-entrance) calc(.1s + var(--i)*55ms) infinite}@keyframes e-cmd-w{0%{opacity:0;filter:blur(4px);transform:scale(.96)}14%,88%{opacity:1;filter:blur();transform:none}to{opacity:0;filter:blur(4px);transform:scale(.96)}}@keyframes e-cmd{0%{opacity:0;transform:translateY(7px)}22%,88%{opacity:1;transform:none}to{opacity:0}}.wui-motion-demo .e-tt{justify-items:center;gap:8px;display:grid}.wui-motion-demo .e-tt .bub{background:var(--ink);color:var(--page);opacity:0;border-radius:7px;padding:5px 10px;font-size:12px;font-style:normal;font-weight:600}.wui-motion-demo .e-tt .tgt{background:var(--surface);border:1px solid var(--line-2);border-radius:10px;width:34px;height:34px}.wui-motion-demo[data-on] .e-tt .bub{animation:e-tt 3.4s var(--e-entrance) infinite}@keyframes e-tt{0%,26%{opacity:0;transform:translateY(5px)}34%,84%{opacity:1;transform:none}90%,to{opacity:0;transform:translateY(5px)}}.wui-motion-demo .e-al{background:color-mix(in oklab,var(--orange) 10%,var(--surface));border:1px solid color-mix(in oklab,var(--orange) 40%,transparent);border-radius:10px;align-items:center;gap:10px;width:194px;padding:11px 13px;display:flex;position:relative;overflow:hidden}.wui-motion-demo .e-al:before{content:"";left:0;background:var(--orange);transform-origin:top;width:3px;position:absolute;inset-block:0;transform:scaleY(0)}.wui-motion-demo .e-al .ic{background:var(--orange);color:#17181a;border-radius:999px;flex:none;place-items:center;width:19px;height:19px;font-size:11px;font-style:normal;font-weight:800;display:grid}.wui-motion-demo .e-al .tx{flex:1;gap:5px;display:grid}.wui-motion-demo .e-al b{background:color-mix(in oklab,var(--orange) 30%,var(--line-2));border-radius:999px;height:5px}.wui-motion-demo .e-al b:last-child{width:58%}.wui-motion-demo[data-on] .e-al{animation:e-al 3.2s var(--e-entrance) infinite}.wui-motion-demo[data-on] .e-al:before{animation:e-al-b 3.2s var(--e-move) infinite}@keyframes e-al{0%{opacity:0;transform:translate(-16px)}16%,86%{opacity:1;transform:none}to{opacity:0}}@keyframes e-al-b{0%,10%{transform:scaleY(0)}28%,86%{transform:scaleY(1)}to{transform:scaleY(0)}}.wui-motion-demo .e-ptr{background:var(--surface-2);border:1px solid var(--line);border-radius:11px;width:176px;height:104px;position:relative;overflow:hidden}.wui-motion-demo .e-ptr .spin{border:2.2px solid var(--line-2);border-top-color:var(--cyan);opacity:0;border-radius:999px;width:18px;height:18px;margin-left:-9px;position:absolute;top:10px;left:50%}.wui-motion-demo .e-ptr .list{background:var(--surface);align-content:start;gap:7px;padding:11px;display:grid;position:absolute;inset:0}.wui-motion-demo .e-ptr b{background:var(--surface-2);border-radius:5px;height:14px;display:block}.wui-motion-demo[data-on] .e-ptr .list{animation:e-ptr 3.4s var(--e-overshoot) infinite}.wui-motion-demo[data-on] .e-ptr .spin{animation:3.4s linear infinite e-ptr-s}@keyframes e-ptr{0%{transform:translateY(0)}22%{transform:translateY(38px)}40%{transform:translateY(30px)}62%,to{transform:translateY(0)}}@keyframes e-ptr-s{0%{opacity:0;transform:rotate(0)}18%{opacity:1}58%{opacity:1;transform:rotate(720deg)}68%,to{opacity:0;transform:rotate(900deg)}}.wui-motion-demo .e-eb{place-items:center;width:86px;height:86px;display:grid;position:relative}.wui-motion-demo .e-eb b{background:var(--surface);border:1px solid var(--line-2);border-radius:999px;place-items:center;width:38px;height:38px;font-size:17px;display:grid}.wui-motion-demo .e-eb i{background:var(--cyan);opacity:0;border-radius:999px;width:7px;height:7px;position:absolute}.wui-motion-demo[data-on] .e-eb b{animation:e-eb-b 2s var(--e-overshoot) infinite}.wui-motion-demo[data-on] .e-eb i{animation:e-eb 2s var(--e-exit) var(--d) infinite}@keyframes e-eb-b{0%,60%,to{transform:scale(1)}18%{transform:scale(1.22)}34%{transform:scale(.97)}}@keyframes e-eb{0%{transform:rotate(var(--r)) translateY(-14px) scale(.4);opacity:1}70%,to{transform:rotate(var(--r)) translateY(-38px) scale(0);opacity:0}}.wui-motion-demo .e-trf{align-items:center;gap:11px;display:flex}.wui-motion-demo .e-trf .kpi{gap:1px;display:grid}.wui-motion-demo .e-trf .k{color:var(--ink-3);text-transform:uppercase;letter-spacing:.07em;font-size:11px}.wui-motion-demo .e-trf .v{letter-spacing:-.035em;font-size:21px;font-weight:800}.wui-motion-demo .e-trf .chip{background:color-mix(in oklab,var(--green) 16%,var(--surface));height:22px;color:var(--gr-t);border-radius:999px;align-items:center;gap:4px;padding-inline:9px;font-size:12px;font-weight:700;display:inline-flex}.wui-motion-demo .e-trf .chip i{border-left:4px solid #0000;border-right:4px solid #0000;border-bottom:6px solid var(--gr-t);width:0;height:0}.wui-motion-demo[data-on] .e-trf .chip{animation:e-trf 2.8s var(--e-overshoot) infinite}.wui-motion-demo[data-on] .e-trf .chip i{animation:e-trf-i 2.8s var(--e-overshoot) infinite}@keyframes e-trf{0%{opacity:0;transform:translateY(8px)}22%,84%{opacity:1;transform:none}to{opacity:0}}@keyframes e-trf-i{0%,14%{transform:translateY(5px)}30%{transform:translateY(-2px)}40%,to{transform:none}}.wui-motion-demo .e-kp{gap:6px;display:flex}.wui-motion-demo .e-kp b{background:var(--surface);border:1px solid var(--line-2);min-width:28px;height:28px;color:var(--ink-2);border-bottom-width:3px;border-radius:7px;place-items:center;padding-inline:8px;font-family:JetBrains Mono,monospace;font-size:11.5px;display:grid}.wui-motion-demo[data-on] .e-kp b{animation:e-kp 2.2s var(--e-entrance) calc(var(--i)*.1s) infinite}@keyframes e-kp{0%,40%,to{border-bottom-width:3px;transform:none}18%,30%{background:color-mix(in oklab,var(--cyan) 14%,var(--surface));border-bottom-width:1px;transform:translateY(2px)}}.wui-motion-demo .e-ks{width:180px;height:70px;position:relative}.wui-motion-demo .e-ks .sk,.wui-motion-demo .e-ks .rl{align-content:start;gap:8px;padding:2px;display:grid;position:absolute;inset:0}.wui-motion-demo .e-ks .sk i{background:color-mix(in oklab,var(--ink) 12%,transparent);border-radius:5px;height:11px;display:block}.wui-motion-demo .e-ks .sk i:nth-child(2){width:78%}.wui-motion-demo .e-ks .sk i:nth-child(3){width:54%}.wui-motion-demo .e-ks .rl{opacity:0}.wui-motion-demo .e-ks .rl b{letter-spacing:-.02em;font-size:13px;font-weight:700}.wui-motion-demo .e-ks .rl i{background:var(--line-2);border-radius:999px;height:6px;display:block}.wui-motion-demo .e-ks .rl i:last-child{width:58%}.wui-motion-demo[data-on] .e-ks .sk{animation:e-ks-a 3.4s var(--e-entrance) infinite}.wui-motion-demo[data-on] .e-ks .rl{animation:e-ks-b 3.4s var(--e-entrance) infinite}@keyframes e-ks-a{0%,42%{opacity:1;filter:blur()}54%,92%{opacity:0;filter:blur(4px)}to{opacity:1;filter:blur()}}@keyframes e-ks-b{0%,42%{opacity:0;filter:blur(4px)}54%,92%{opacity:1;filter:blur()}to{opacity:0;filter:blur(4px)}}.wui-motion-demo .e-ef{justify-items:center;gap:8px;width:170px;display:grid}.wui-motion-demo .e-ef .ic{background:var(--surface-2);border:1px solid var(--line-2);border-radius:12px;width:40px;height:40px;display:block}.wui-motion-demo .e-ef .t{background:var(--line-2);border-radius:999px;width:104px;height:7px}.wui-motion-demo .e-ef .s{background:var(--line);border-radius:999px;width:140px;height:5px}.wui-motion-demo .e-ef .btn{background:var(--cyan);border-radius:8px;width:82px;height:26px;display:block}.wui-motion-demo[data-on] .e-ef .ic{animation:e-ef-f 3.2s ease-in-out infinite alternate,e-ef-in 3.2s var(--e-entrance) infinite}.wui-motion-demo[data-on] .e-ef .t{animation:e-ef-in 3.2s var(--e-entrance) 80ms infinite}.wui-motion-demo[data-on] .e-ef .s{animation:e-ef-in 3.2s var(--e-entrance) .16s infinite}.wui-motion-demo[data-on] .e-ef .btn{animation:e-ef-in 3.2s var(--e-entrance) .24s infinite}@keyframes e-ef-f{0%{transform:translateY(-3px)}to{transform:translateY(3px)}}@keyframes e-ef-in{0%{opacity:0}16%,88%{opacity:1}to{opacity:0}}.wui-motion-demo .e-stf{align-items:center;width:190px;display:flex}.wui-motion-demo .e-stf .n{background:var(--surface);border:1.5px solid var(--line-2);width:24px;height:24px;color:var(--ink-3);border-radius:999px;flex:none;place-items:center;font-size:12px;font-style:normal;font-weight:800;display:grid}.wui-motion-demo .e-stf .n:first-child{--i:0}.wui-motion-demo .e-stf .n:nth-child(3){--i:1}.wui-motion-demo .e-stf .n:last-child{--i:2}.wui-motion-demo .e-stf .ln{background:var(--line-2);flex:1;height:2px;position:relative;overflow:hidden}.wui-motion-demo .e-stf .ln:first-of-type{--i:0}.wui-motion-demo .e-stf .ln:nth-of-type(2){--i:1}.wui-motion-demo .e-stf .ln b{background:var(--cyan);transform-origin:0;position:absolute;inset:0;transform:scaleX(0)}.wui-motion-demo[data-on] .e-stf .n{animation:e-stf-n 4s var(--e-overshoot) calc(var(--i)*1.1s) infinite}.wui-motion-demo[data-on] .e-stf .ln b{animation:e-stf-l 4s var(--e-move) calc(.4s + var(--i)*1.1s) infinite}@keyframes e-stf-n{0%{background:var(--surface);border-color:var(--line-2);color:var(--ink-3);transform:scale(1)}8%{transform:scale(1.2)}16%,88%{background:var(--cyan);border-color:var(--cyan);color:var(--cyan-fg);transform:scale(1)}to{background:var(--surface);border-color:var(--line-2);color:var(--ink-3)}}@keyframes e-stf-l{0%{transform:scaleX(0)}18%,88%{transform:scaleX(1)}to{transform:scaleX(0)}}.wui-motion-demo .e-ar svg{width:190px;height:96px}.wui-motion-demo .e-ar .fill{fill:url(#wm-ag);transform-origin:bottom;transform:scaleY(0)}.wui-motion-demo .e-ar .ln{fill:none;stroke:var(--cyan);stroke-width:2.4px;stroke-linecap:round;stroke-dasharray:230;stroke-dashoffset:230px}.wui-motion-demo[data-on] .e-ar .ln{animation:e-ar-l 3.4s var(--e-move) infinite}.wui-motion-demo[data-on] .e-ar .fill{animation:e-ar-f 3.4s var(--e-entrance) .25s infinite}@keyframes e-ar-l{0%{stroke-dashoffset:230px}42%,86%{stroke-dashoffset:0}to{stroke-dashoffset:230px}}@keyframes e-ar-f{0%{transform:scaleY(0)}46%,86%{transform:scaleY(1)}to{transform:scaleY(0)}}.wui-motion-demo .e-bub{width:186px;height:96px;position:relative}.wui-motion-demo .e-bub i{left:var(--x);top:var(--y);width:var(--s);height:var(--s);margin:calc(var(--s)/-2);background:var(--c);opacity:.68;border-radius:999px;position:absolute;transform:scale(0)}.wui-motion-demo[data-on] .e-bub i{animation:e-bub 3.2s var(--e-overshoot) calc(var(--i)*90ms) infinite}@keyframes e-bub{0%{opacity:0;transform:scale(0)}26%,84%{opacity:.68;transform:scale(1)}to{opacity:0;transform:scale(0)}}.wui-motion-demo .e-stk{align-items:flex-end;gap:8px;height:92px;display:flex}.wui-motion-demo .e-stk .col{flex-direction:column-reverse;gap:2px;width:20px;display:flex}.wui-motion-demo .e-stk i{height:var(--h);background:var(--cyan);opacity:var(--o);transform-origin:bottom;border-radius:3px;transform:scaleY(0)}.wui-motion-demo[data-on] .e-stk i{animation:e-stk 3.4s var(--e-entrance) calc(var(--i)*45ms) infinite}@keyframes e-stk{0%{transform:scaleY(0)}30%,86%{transform:scaleY(1)}to{transform:scaleY(0)}}.wui-motion-demo .e-sp2{align-items:center;gap:14px;display:flex}.wui-motion-demo .e-sp2 .kpi{gap:1px;display:grid}.wui-motion-demo .e-sp2 .k{color:var(--ink-3);text-transform:uppercase;letter-spacing:.07em;font-size:11px}.wui-motion-demo .e-sp2 .v{letter-spacing:-.035em;font-size:20px;font-weight:800}.wui-motion-demo .e-sp2 svg{width:90px;height:34px;overflow:visible}.wui-motion-demo .e-sp2 .ln{fill:none;stroke:var(--cyan);stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:120;stroke-dashoffset:120px}.wui-motion-demo .e-sp2 .end{fill:var(--cyan);opacity:0;transform-box:fill-box;transform-origin:50%}.wui-motion-demo[data-on] .e-sp2 .ln{animation:e-sp2-l 2.8s var(--e-move) infinite}.wui-motion-demo[data-on] .e-sp2 .end{animation:e-sp2-e 2.8s var(--e-exit) infinite}@keyframes e-sp2-l{0%{stroke-dashoffset:120px}40%,86%{stroke-dashoffset:0}to{stroke-dashoffset:120px}}@keyframes e-sp2-e{0%,38%{opacity:0;transform:scale(.4)}48%{opacity:1;transform:scale(1.5)}56%,86%{opacity:1;transform:scale(1)}to{opacity:0}}.wui-motion-demo .e-ch2{width:190px;height:96px;position:relative}.wui-motion-demo .e-ch2 svg{width:190px;height:96px}.wui-motion-demo .e-ch2 .ln{fill:none;stroke:var(--cyan);stroke-width:2.2px;stroke-linecap:round;stroke-linejoin:round;opacity:.5}.wui-motion-demo .e-ch2 .vline{background:var(--line-2);width:1px;position:absolute;top:8px;bottom:8px;left:36px}.wui-motion-demo .e-ch2 .dot{background:var(--cyan);width:9px;height:9px;box-shadow:0 0 0 3px var(--surface-2),0 0 0 4.5px var(--cyan);border-radius:999px;margin:-4.5px;position:absolute;top:52px;left:36px}.wui-motion-demo .e-ch2 .tip{background:var(--ink);color:var(--page);white-space:nowrap;border-radius:6px;padding:3px 7px;font-family:JetBrains Mono,monospace;font-size:12px;font-weight:700;line-height:16px;position:absolute;top:-22px;left:36px;transform:translate(-50%)}.wui-motion-demo .e-ch2 .vals{height:16px;display:block;overflow:hidden}.wui-motion-demo .e-ch2 .vals u{height:16px;text-decoration:none;display:block}.wui-motion-demo[data-on] .e-ch2 .vline,.wui-motion-demo[data-on] .e-ch2 .tip{animation:e-ch2-x 4.4s var(--e-move) infinite alternate}.wui-motion-demo[data-on] .e-ch2 .dot{animation:e-ch2-d 4.4s var(--e-move) infinite alternate}.wui-motion-demo[data-on] .e-ch2 .vals u{animation:4.4s step-end infinite alternate e-ch2-v}@keyframes e-ch2-x{0%{left:36px}25%{left:66px}50%{left:96px}75%{left:126px}to{left:156px}}@keyframes e-ch2-d{0%{top:52px;left:36px}25%{top:60px;left:66px}50%{top:34px;left:96px}75%{top:44px;left:126px}to{top:22px;left:156px}}@keyframes e-ch2-v{0%{transform:translateY(0)}12.5%{transform:translateY(-16px)}37.5%{transform:translateY(-32px)}62.5%{transform:translateY(-48px)}87.5%,to{transform:translateY(-64px)}}.wui-motion-demo .e-lf2{gap:8px;width:190px;display:grid}.wui-motion-demo .e-lf2 .lg{gap:10px;font-size:12px;font-weight:650;display:flex}.wui-motion-demo .e-lf2 .lg b{color:var(--ink-3);align-items:center;gap:4px;display:inline-flex}.wui-motion-demo .e-lf2 .lg b:before{content:"";border-radius:2px;width:7px;height:7px}.wui-motion-demo .e-lf2 .lg .a:before{background:var(--cyan)}.wui-motion-demo .e-lf2 .lg .b:before{background:var(--indigo)}.wui-motion-demo .e-lf2 .lg .c:before{background:var(--pink)}.wui-motion-demo .e-lf2 svg{width:186px;height:70px}.wui-motion-demo .e-lf2 path{fill:none;stroke-width:2.2px;stroke-linecap:round;stroke-linejoin:round}.wui-motion-demo .e-lf2 .s1{stroke:var(--cyan)}.wui-motion-demo .e-lf2 .s2{stroke:var(--indigo)}.wui-motion-demo .e-lf2 .s3{stroke:var(--pink)}.wui-motion-demo[data-on] .e-lf2 .s2,.wui-motion-demo[data-on] .e-lf2 .s3,.wui-motion-demo[data-on] .e-lf2 .lg .b,.wui-motion-demo[data-on] .e-lf2 .lg .c{animation:e-lf2 3.6s var(--e-entrance) infinite}.wui-motion-demo[data-on] .e-lf2 .s1{animation:e-lf2-up 3.6s var(--e-entrance) infinite}@keyframes e-lf2{0%,18%{opacity:1}36%,74%{opacity:.16}92%,to{opacity:1}}@keyframes e-lf2-up{0%,18%{stroke-width:2.2px}36%,74%{stroke-width:3.2px}92%,to{stroke-width:2.2px}}.wui-motion-demo .e-ax{width:186px;height:108px;padding-bottom:20px;position:relative}.wui-motion-demo .e-ax .g{background:var(--line-2);transform-origin:0;height:1px;left:0;right:0;top:calc(var(--i) * 22px + 4px);position:absolute;transform:scaleX(0)}.wui-motion-demo .e-ax .bars{align-items:flex-end;gap:10px;padding-inline:6px;display:flex;position:absolute;inset:4px 0 20px}.wui-motion-demo .e-ax .bars b{height:var(--h);background:var(--cyan);transform-origin:bottom;border-radius:3px 3px 0 0;flex:1;transform:scaleY(0)}.wui-motion-demo .e-ax .lbl{gap:10px;padding-inline:6px;line-height:16px;display:flex;position:absolute;inset:auto 0 0}.wui-motion-demo .e-ax .lbl u{text-align:center;color:var(--ink-3);opacity:0;flex:1;font-family:JetBrains Mono,monospace;font-size:11px;text-decoration:none}.wui-motion-demo[data-on] .e-ax .g{animation:e-ax-g 3.8s var(--e-entrance) calc(var(--i)*60ms) infinite}.wui-motion-demo[data-on] .e-ax .bars b{animation:e-ax-b 3.8s var(--e-entrance) calc(.35s + var(--i)*60ms) infinite}.wui-motion-demo[data-on] .e-ax .lbl u{animation:e-ax-l 3.8s var(--e-entrance) calc(.75s + var(--i)*50ms) infinite}@keyframes e-ax-g{0%{transform:scaleX(0)}16%,88%{transform:scaleX(1)}to{transform:scaleX(0)}}@keyframes e-ax-b{0%{transform:scaleY(0)}24%,88%{transform:scaleY(1)}to{transform:scaleY(0)}}@keyframes e-ax-l{0%{opacity:0}18%,88%{opacity:1}to{opacity:0}}.wui-motion-demo .e-lv{background:var(--surface);border:1px solid var(--line);border-radius:9px;width:186px;height:90px;padding:10px;position:relative;overflow:hidden}.wui-motion-demo .e-lv .track,.wui-motion-demo .e-lv .belt{align-items:flex-end;gap:5px;width:max-content;height:100%;display:flex}.wui-motion-demo .e-lv i{width:12px;height:var(--h);background:var(--cyan);border-radius:3px 3px 0 0;flex:none}.wui-motion-demo .e-lv .live{color:var(--pk-t);letter-spacing:.04em;font-family:JetBrains Mono,monospace;font-size:11px;font-weight:700;position:absolute;top:6px;right:9px}.wui-motion-demo[data-on] .e-lv .track{animation:e-lv 1.6s var(--e-move) infinite}.wui-motion-demo[data-on] .e-lv .belt{animation:9.6s steps(6,end) infinite e-lv-b}.wui-motion-demo[data-on] .e-lv .live{animation:1.6s ease-in-out infinite e-lv-p}@keyframes e-lv{0%{transform:translate(0)}to{transform:translate(-17px)}}@keyframes e-lv-b{to{transform:translate(-102px)}}@keyframes e-lv-p{0%,to{opacity:1}50%{opacity:.35}}.wui-motion-demo .e-th{align-items:flex-end;gap:7px;width:186px;height:96px;padding:0 4px;display:flex;position:relative}.wui-motion-demo .e-th .limit{background:repeating-linear-gradient(90deg,var(--orange) 0 5px,transparent 5px 10px);z-index:1;height:1.5px;position:absolute;bottom:72%;left:0;right:0}.wui-motion-demo .e-th b{height:var(--h);background:var(--cyan);transform-origin:bottom;border-radius:3px 3px 0 0;flex:1;transform:scaleY(0)}.wui-motion-demo[data-on] .e-th b{animation:e-th 3.4s var(--e-entrance) calc(var(--i)*70ms) infinite}.wui-motion-demo[data-on] .e-th .over{animation:e-th 3.4s var(--e-entrance) calc(var(--i)*70ms) infinite, e-th-o 3.4s var(--e-exit) calc(.6s + var(--i)*70ms) infinite}@keyframes e-th{0%{transform:scaleY(0)}28%,86%{transform:scaleY(1)}to{transform:scaleY(0)}}@keyframes e-th-o{0%,10%{background:var(--cyan)}22%{background:#d42a2d}40%,86%{background:var(--orange)}to{background:var(--cyan)}}.wui-motion-demo .e-rg{gap:12px;display:flex}.wui-motion-demo .e-rg .r{place-items:center;width:56px;height:56px;display:grid;position:relative}.wui-motion-demo .e-rg i{background:conic-gradient(var(--c) var(--wm-ang,0deg),var(--surface-2) 0);border-radius:999px;position:absolute;inset:0;-webkit-mask:radial-gradient(circle,#0000 66%,#000 67%);mask:radial-gradient(circle,#0000 66%,#000 67%)}.wui-motion-demo .e-rg b{letter-spacing:-.03em;font-variant-numeric:tabular-nums;font-size:11px;font-weight:800}.wui-motion-demo[data-on] .e-rg i{animation:e-rg 3.2s var(--e-entrance) calc(var(--i)*.13s) infinite}@keyframes e-rg{0%{--wm-ang:0deg}38%,86%{--wm-ang:var(--to)}to{--wm-ang:0deg}}.wui-motion-demo .e-br{gap:7px;width:190px;height:96px;display:grid;position:relative}.wui-motion-demo .e-br .row{height:19px;inset-inline:0;top:calc(var(--i) * 26px);align-items:center;gap:8px;display:flex;position:absolute}.wui-motion-demo .e-br .lb{width:58px;color:var(--ink-2);text-align:right;flex:none;font-size:12px;font-weight:650}.wui-motion-demo .e-br i{height:15px;width:calc(var(--w) * 1.24px);background:var(--cyan);transform-origin:0;border-radius:0 4px 4px 0;flex:none}.wui-motion-demo .e-br .row:nth-child(2) i{background:var(--indigo)}.wui-motion-demo .e-br .row:nth-child(3) i{background:var(--pink)}.wui-motion-demo .e-br .row:nth-child(4) i{background:var(--green)}.wui-motion-demo[data-on] .e-br .row{animation:e-br 4s var(--e-move) infinite alternate}.wui-motion-demo[data-on] .e-br .row:nth-child(4){animation-name:e-br-up}.wui-motion-demo[data-on] .e-br .row:nth-child(2){animation-name:e-br-down}.wui-motion-demo .e-br i{transform:scaleX(var(--f))}.wui-motion-demo[data-on] .e-br i{animation:e-br-w 4s var(--e-move) infinite alternate}@keyframes e-br{0%,to{transform:translateY(0)}}@keyframes e-br-up{0%,30%{transform:translateY(0)}55%,to{transform:translateY(-52px)}}@keyframes e-br-down{0%,30%{transform:translateY(0)}55%,to{transform:translateY(52px)}}@keyframes e-br-w{0%{transform:scaleX(var(--f))}45%,to{transform:scaleX(1)}}.wui-motion-demo .e-sct{width:186px;height:90px;position:relative}.wui-motion-demo .e-sct i{left:var(--x);top:var(--y);background:var(--c);opacity:0;border-radius:999px;width:8px;height:8px;margin:-4px;position:absolute;transform:scale(0)}.wui-motion-demo .e-sct svg{width:186px;height:90px;position:absolute;inset:0}.wui-motion-demo .e-sct .fit{stroke:var(--ink-3);stroke-width:1.5px;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1px;fill:none;opacity:.7}.wui-motion-demo[data-on] .e-sct i{animation:e-sct 3.4s var(--e-overshoot) calc(var(--i)*50ms) infinite}.wui-motion-demo[data-on] .e-sct .fit{animation:e-sct-f 3.4s var(--e-move) .7s infinite}@keyframes e-sct{0%{opacity:0;transform:scale(0)}22%,86%{opacity:.85;transform:scale(1)}to{opacity:0;transform:scale(0)}}@keyframes e-sct-f{0%{stroke-dashoffset:1px}40%,80%{stroke-dashoffset:0}to{stroke-dashoffset:1px}}.wui-motion-demo .e-bru{background:var(--surface);border:1px solid var(--line);border-radius:9px;width:190px;height:78px;padding:9px;position:relative;overflow:hidden}.wui-motion-demo .e-bru .chart{align-items:flex-end;gap:4px;height:100%;display:flex}.wui-motion-demo .e-bru i{height:var(--h);background:var(--line-2);border-radius:2px 2px 0 0;flex:1}.wui-motion-demo .e-bru .sel{background:color-mix(in oklab,var(--cyan) 16%,transparent);border-inline:2px solid var(--cyan);width:38%;position:absolute;top:0;bottom:0;left:30%}.wui-motion-demo .e-bru .hl,.wui-motion-demo .e-bru .hr{background:var(--cyan);border-radius:3px;width:5px;height:18px;margin-top:-9px;position:absolute;top:50%}.wui-motion-demo .e-bru .hl{left:-3.5px}.wui-motion-demo .e-bru .hr{right:-3.5px}.wui-motion-demo[data-on] .e-bru .sel{animation:e-bru 4.4s var(--e-move) infinite alternate}@keyframes e-bru{0%{width:30%;left:12%}50%{width:46%;left:38%}to{width:34%;left:56%}}.wui-motion-demo .e-wf{align-items:flex-end;gap:8px;height:96px;padding:0 4px;display:flex;position:relative}.wui-motion-demo .e-wf i{width:22px;height:var(--h);margin-bottom:var(--b);background:var(--c);transform-origin:var(--o);border-radius:3px;position:relative;transform:scaleY(0)}.wui-motion-demo .e-wf i:not(:last-child):after{content:"";left:100%;top:var(--e);border-top:1px dashed var(--ink-3);opacity:.6;width:8px;position:absolute}.wui-motion-demo[data-on] .e-wf i{animation:e-wf 3.6s var(--e-entrance) calc(var(--i)*.13s) infinite}@keyframes e-wf{0%{opacity:0;transform:scaleY(0)}24%,86%{opacity:1;transform:scaleY(1)}to{opacity:0;transform:scaleY(0)}}.wui-motion-demo .e-dc{place-items:center;width:110px;height:110px;display:grid;position:relative}.wui-motion-demo .e-dc .ring{background:conic-gradient(var(--cyan) var(--wm-ang,0deg),var(--surface-2) 0);border-radius:999px;position:absolute;inset:0;-webkit-mask:radial-gradient(circle,#0000 68%,#000 69%);mask:radial-gradient(circle,#0000 68%,#000 69%)}.wui-motion-demo .e-dc .mid{align-items:baseline;gap:1px;display:flex}.wui-motion-demo .e-dc .num{letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:#0000;height:1em;font-size:26px;font-weight:800;line-height:1;display:inline-block;position:relative;overflow:hidden}.wui-motion-demo .e-dc .num:after{content:"0\a 17\a 34\a 51\a 68";white-space:pre;color:var(--ink);text-align:center;line-height:1;display:block;position:absolute;top:0;left:0;right:0}.wui-motion-demo .e-dc u{color:var(--ink-3);font-size:13px;text-decoration:none}.wui-motion-demo[data-on] .e-dc .ring{animation:e-dc-r 3.2s var(--e-entrance) infinite}.wui-motion-demo[data-on] .e-dc .num:after{animation:3.2s steps(4,end) infinite e-dc-n}@keyframes e-dc-r{0%{--wm-ang:0deg}44%,86%{--wm-ang:245deg}to{--wm-ang:0deg}}@keyframes e-dc-n{0%{transform:translateY(0)}44%,86%{transform:translateY(-4em)}to{transform:translateY(0)}}.wui-motion-demo .e-ea b{background:var(--surface);border:1px solid var(--line-2);height:34px;box-shadow:var(--shadow);border-radius:10px;align-items:center;padding-inline:18px;font-size:12.5px;font-weight:650;display:inline-flex}.wui-motion-demo[data-on] .e-ea b{animation:e-ea 2.8s var(--e-entrance) infinite}@keyframes e-ea{0%{transform-origin:-100%;opacity:0;transform:translate(-140px)rotateY(30deg)scale(0)}36%,84%{transform-origin:1800px;opacity:1;transform:translate(0)rotateY(0)scale(1)}to{transform-origin:-100%;opacity:0;transform:translate(-140px)rotateY(30deg)scale(0)}}.wui-motion-demo .e-sw2 b{background:linear-gradient(140deg,var(--cyan),var(--indigo));border-radius:15px;width:56px;height:56px;display:block}.wui-motion-demo[data-on] .e-sw2 b{animation:e-sw2 2.4s var(--e-entrance) infinite}@keyframes e-sw2{0%{opacity:0;transform:rotate(-540deg)scale(0)}34%,84%{opacity:1;transform:rotate(0)scale(1)}to{opacity:0;transform:rotate(-540deg)scale(0)}}.wui-motion-demo .e-sl2{perspective:800px}.wui-motion-demo .e-sl2 b{background:var(--surface);border:1px solid var(--line-2);width:150px;box-shadow:var(--shadow-2);border-radius:12px;gap:6px;padding:14px;display:grid}.wui-motion-demo .e-sl2 i{background:var(--line-2);border-radius:999px;height:6px;display:block}.wui-motion-demo .e-sl2 i:last-child{width:62%}.wui-motion-demo[data-on] .e-sl2 b{animation:e-sl2 3.2s var(--e-entrance) infinite}@keyframes e-sl2{0%{opacity:0;transform:translateZ(-760px)rotateY(90deg)}36%{opacity:1;transform:translateZ(-140px)rotateY(87deg)}56%,84%{opacity:1;transform:translateZ(0)rotateY(0)}to{opacity:0;transform:translateZ(-760px)rotateY(90deg)}}.wui-motion-demo .e-pf b{background:color-mix(in oklab,var(--cyan) 15%,var(--surface));height:34px;color:var(--acc);border-radius:999px;align-items:center;padding-inline:18px;font-size:12.5px;font-weight:700;display:inline-flex}.wui-motion-demo[data-on] .e-pf b{animation:e-pf 2.6s var(--e-entrance) infinite}@keyframes e-pf{0%{filter:blur(5px);opacity:0;transform:scale(2)}32%,84%{filter:blur();opacity:1;transform:scale(1)}to{filter:blur(5px);opacity:0;transform:scale(2)}}.wui-motion-demo .e-rb b{background:conic-gradient(var(--cyan),var(--indigo),var(--pink),var(--cyan));border-radius:999px;width:48px;height:48px;display:block}.wui-motion-demo[data-on] .e-rb b{animation:e-rb 2.8s var(--e-entrance) infinite}@keyframes e-rb{0%{filter:blur(14px);opacity:0;transform:translate(-150px)rotate(-720deg)}38%,84%{filter:blur();opacity:1;transform:none}to{filter:blur(14px);opacity:0;transform:translate(-150px)rotate(-720deg)}}.wui-motion-demo .e-fl{perspective:900px}.wui-motion-demo .e-fl b{background:var(--surface);border:1px solid var(--line-2);width:140px;box-shadow:var(--shadow-2);border-radius:11px;gap:5px;padding:13px;display:grid}.wui-motion-demo .e-fl i{background:var(--line-2);border-radius:999px;height:5px;display:block}.wui-motion-demo .e-fl i:nth-child(2){width:80%}.wui-motion-demo .e-fl i:last-child{width:55%}.wui-motion-demo[data-on] .e-fl b{animation:e-fl 3s var(--e-entrance) infinite}@keyframes e-fl{0%{opacity:0;transform:rotateY(22deg)rotateX(34deg)translate(220px,-220px)skew(-32deg,8deg)}36%,84%{opacity:1;transform:none}to{opacity:0;transform:rotateY(22deg)rotateX(34deg)translate(220px,-220px)skew(-32deg,8deg)}}.wui-motion-demo .e-fs{perspective:700px}.wui-motion-demo .e-fs b{background:linear-gradient(140deg,var(--indigo),#2a2fa8);color:#fff;border-radius:12px;place-items:center;width:100px;height:62px;font-size:12.5px;font-weight:700;display:grid}.wui-motion-demo[data-on] .e-fs b{animation:3.6s linear infinite e-fs}@keyframes e-fs{0%,14%{animation-timing-function:cubic-bezier(.55,0,.9,.45);transform:scale(1)rotateX(0)}34%{animation-timing-function:linear;transform:scale(1.6)rotateX(-90deg)}44%{animation-timing-function:cubic-bezier(.1,.55,.45,1);transform:scale(1.6)rotateX(-270deg)}66%,to{transform:scale(1)rotateX(-360deg)}}.wui-motion-demo .e-te{color:var(--ink);font-family:JetBrains Mono,monospace;font-size:14px;font-weight:600}.wui-motion-demo[data-on] .e-te{animation:e-te 3s var(--e-entrance) infinite}@keyframes e-te{0%{letter-spacing:-.5em;opacity:0}40%{opacity:.5}64%,86%{letter-spacing:.14em;opacity:1}to{letter-spacing:-.5em;opacity:0}}.wui-motion-demo .e-shp{background:var(--surface);border:1.5px solid var(--ink);height:36px;color:var(--ink);border-radius:10px;align-items:center;padding-inline:19px;font-size:12.5px;font-weight:700;display:inline-flex}.wui-motion-demo[data-on] .e-shp{animation:e-shp 2.6s var(--e-entrance) infinite}@keyframes e-shp{0%,to{box-shadow:0 0 var(--ink),0 0 var(--ink),0 0 var(--ink),0 0 var(--ink), 0 0 var(--ink),0 0 var(--ink),0 0 var(--ink),0 0 var(--ink);transform:translate(0)}40%,80%{box-shadow:1px -1px var(--ink),2px -2px var(--ink),3px -3px var(--ink),4px -4px var(--ink), 5px -5px var(--ink),6px -6px var(--ink),7px -7px var(--ink),8px -8px var(--ink);transform:translate(-8px,8px)}}.wui-motion-demo .e-ip{background:var(--surface-2);width:166px;height:62px;color:var(--ink-3);border-radius:11px;place-items:center;font-size:11.5px;font-weight:600;display:grid}.wui-motion-demo[data-on] .e-ip{animation:e-ip 2.8s var(--e-entrance) infinite}@keyframes e-ip{0%,to{box-shadow:inset 0 0 #0a111600}40%,82%{box-shadow:inset 0 16px 14px -10px #0a111666}}.wui-motion-demo .e-fsh{background:var(--surface);border:1px solid var(--line-2);isolation:isolate;border-radius:11px;align-items:center;height:38px;padding-inline:20px;font-size:12.5px;font-weight:650;display:inline-flex;position:relative}.wui-motion-demo .e-fsh:after{content:"";opacity:0;z-index:-1;background:radial-gradient(#0a111666,#0000 72%);border-radius:999px;height:9px;position:absolute;bottom:-9px;left:8%;right:8%}.wui-motion-demo[data-on] .e-fsh{animation:e-fsh-l 2.8s var(--e-entrance) infinite}.wui-motion-demo[data-on] .e-fsh:after{animation:e-fsh-s 2.8s var(--e-entrance) infinite}@keyframes e-fsh-l{0%,to{transform:none}40%,82%{transform:translateY(-7px)}}@keyframes e-fsh-s{0%,to{opacity:0;transform:scaleX(.7)}40%,82%{opacity:1;transform:scaleX(1)}}.wui-motion-demo .e-de{display:inline-block;position:relative}.wui-motion-demo .e-de b{background:var(--surface);border:1px solid var(--line-2);border-radius:9px;place-items:center;width:112px;height:70px;font-size:12px;font-weight:650;display:grid}.wui-motion-demo .e-de i{background:linear-gradient(225deg,var(--surface-2) 45%,var(--line-2) 50%,var(--line) 56%,var(--surface) 80%);border-top-right-radius:9px;width:0;height:0;position:absolute;top:0;right:0;box-shadow:-1px 1px 2px #0a111638}.wui-motion-demo[data-on] .e-de i{animation:e-de 2.8s var(--e-entrance) infinite}@keyframes e-de{0%,to{width:0;height:0}40%,82%{width:28px;height:28px}}.wui-motion-demo .e-sht{background:color-mix(in oklab,var(--cyan) 12%,#fff);border:1px solid var(--line-2);border-radius:10px;place-items:center;width:126px;height:38px;display:inline-grid;position:relative;overflow:hidden}.wui-motion-demo .e-sht i{background:var(--cyan);height:50%;position:absolute;inset-inline:0;transform:scaleY(0)}.wui-motion-demo .e-sht .a{transform-origin:top;top:0}.wui-motion-demo .e-sht .b{transform-origin:bottom;bottom:0}.wui-motion-demo .e-sht b{z-index:1;color:#17181a;font-size:12.5px;font-weight:700;position:relative}.wui-motion-demo[data-on] .e-sht i{animation:e-sht 2.6s var(--e-move) infinite}@keyframes e-sht{0%,to{transform:scaleY(0)}42%,80%{transform:scaleY(1)}}.wui-motion-demo .e-if{background:var(--surface);border:1px solid var(--line-2);border-radius:10px;place-items:center;width:126px;height:38px;display:inline-grid;position:relative;overflow:hidden}.wui-motion-demo .e-if i{background:var(--cyan);border-radius:100%;position:absolute;inset:0;transform:scale(0)}.wui-motion-demo .e-if b{z-index:1;font-size:12.5px;font-weight:700;position:relative}.wui-motion-demo[data-on] .e-if i{animation:e-if 2.6s var(--e-move) infinite}@keyframes e-if{0%,to{transform:scale(0)}44%,80%{transform:scale(2.1)}}.wui-motion-demo .e-hl{background:var(--cyan);height:38px;color:var(--cyan-fg);border-radius:10px;align-items:center;padding-inline:22px;font-size:12.5px;font-weight:700;display:inline-flex}.wui-motion-demo[data-on] .e-hl{animation:e-hl 3s var(--e-entrance) infinite}@keyframes e-hl{0%,to{background:var(--cyan);color:var(--cyan-fg);box-shadow:inset 0 0 0 0 var(--cyan)}42%,80%{color:var(--acc);box-shadow:inset 0 0 0 2px var(--cyan);background:0 0}}.wui-motion-demo .e-tr{background:var(--surface);border:1px solid var(--line-2);border-radius:11px;place-items:center;width:130px;height:42px;display:inline-grid;position:relative}.wui-motion-demo .e-tr i{border:1.5px solid var(--cyan);opacity:0;border-radius:8px;position:absolute;inset:4px}.wui-motion-demo .e-tr b{font-size:12.5px;font-weight:650}.wui-motion-demo[data-on] .e-tr i{animation:e-tr 2.4s var(--e-entrance) infinite}@keyframes e-tr{0%,to{opacity:0;transform:scale(1.06)}38%,80%{opacity:1;transform:none}}.wui-motion-demo .e-ro{background:var(--surface);border:1px solid var(--line-2);border-radius:999px;place-items:center;width:34px;height:34px;display:inline-grid;position:relative}.wui-motion-demo .e-ro b{color:var(--ink);font-size:12px;font-weight:800}.wui-motion-demo .e-ro i{border:3px solid var(--cyan);opacity:0;border-radius:999px;position:absolute;inset:0}.wui-motion-demo .e-ro .d{animation-delay:.8s!important}.wui-motion-demo[data-on] .e-ro i{animation:e-ro 2.4s var(--e-exit) infinite}@keyframes e-ro{0%{opacity:1;inset:0}to{opacity:0;inset:-16px}}.wui-motion-demo .e-bb{background:var(--surface-2);border:1px solid var(--line-2);border-radius:12px;align-items:center;gap:6px;height:74px;padding:7px;display:inline-flex}.wui-motion-demo .e-bb u{background:var(--surface);border:1px solid var(--line-2);border-radius:8px;width:56px;height:100%}.wui-motion-demo .e-bb i{background:var(--line-2);border-radius:999px;width:8px;height:40px;display:block}.wui-motion-demo[data-on] .e-bb i{animation:e-bb-lift .3s var(--e-entrance) forwards,e-bb-osc 1.5s .3s ease-in-out infinite alternate}@keyframes e-bb-lift{to{transform:translateY(-7px)}}@keyframes e-bb-osc{0%{transform:translateY(-7px)}to{transform:translateY(-3px)}}.wui-motion-demo .e-ws{background:var(--surface);border:1px solid var(--line-2);border-radius:10px;align-items:center;height:38px;padding-inline:20px;font-size:12.5px;font-weight:650;display:inline-flex}.wui-motion-demo[data-on] .e-ws{animation:1.6s ease-in-out infinite e-ws}@keyframes e-ws{0%,to{transform:skew(0deg)}16%{transform:skew(-11deg)}32%{transform:skew(8deg)}48%{transform:skew(-5deg)}64%{transform:skew(3deg)}80%{transform:skew(-1.5deg)}}.wui-motion-demo .e-bo .fld{background:color-mix(in oklab,#d42a2d 8%,var(--surface));width:150px;height:38px;color:color-mix(in oklab,#d42a2d 72%,var(--ink));border:1.5px solid #d42a2d;border-radius:10px;place-items:center;font-size:12px;font-style:normal;font-weight:650;display:grid}.wui-motion-demo[data-on] .e-bo .fld{animation:2.4s linear infinite e-bo}@keyframes e-bo{0%{transform:none}4%{transform:translate(3px)rotate(2deg)}8%{transform:translate(-3px)rotate(-2deg)}12%{transform:translate(3px)rotate(2deg)}16%{transform:translate(-3px)rotate(-2deg)}20%{transform:translate(2px)rotate(1deg)}24%{transform:translate(-2px)rotate(-1deg)}28%{transform:translate(1px)rotate(0)}32%,to{transform:none}}.wui-motion-demo .e-jl b{background:color-mix(in oklab,var(--green) 18%,var(--surface));height:36px;color:var(--gr-t);border-radius:10px;align-items:center;padding-inline:20px;font-size:12.5px;font-weight:700;display:inline-flex}.wui-motion-demo[data-on] .e-jl b{animation:2.4s linear infinite e-jl}@keyframes e-jl{0%,40%,to{transform:scale(1)}6%{transform:scale(1.25,.75)}12%{transform:scale(.75,1.25)}18%{transform:scale(1.15,.85)}24%{transform:scale(.95,1.05)}30%{transform:scale(1.05,.95)}35%{transform:scale(1)}}.wui-motion-demo .e-ne{justify-items:center;gap:10px;display:grid;position:relative}.wui-motion-demo .e-ne .tgt{background:var(--surface);border:1px solid var(--line-2);border-radius:9px;align-items:center;height:30px;padding-inline:15px;font-size:11.5px;font-weight:650;display:inline-flex}.wui-motion-demo .e-ne .pop{background:var(--surface);border:1px solid var(--line-2);width:132px;box-shadow:var(--shadow-2);transform-origin:bottom;border-radius:11px;gap:5px;padding:11px;display:grid}.wui-motion-demo .e-ne b{background:var(--line-2);border-radius:999px;height:5px;display:block}.wui-motion-demo .e-ne b:last-child{width:58%}.wui-motion-demo[data-on] .e-ne .pop{animation:e-ne 3s var(--e-entrance) infinite}@keyframes e-ne{0%{opacity:0;transform:scale(.92)translateY(8px)}18%,74%{opacity:1;transform:none}88%,to{opacity:0;transform:scale(.96)translateY(4px)}}.wui-motion-demo .e-ha{background:var(--surface);border:1px solid var(--line-2);border-radius:11px;width:176px;overflow:hidden}.wui-motion-demo .e-ha .hd{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;padding:10px 12px;font-size:12px;font-weight:650;display:flex}.wui-motion-demo .e-ha .hd i{border-right:1.5px solid var(--ink-3);border-bottom:1.5px solid var(--ink-3);width:8px;height:8px;transform:rotate(45deg)}.wui-motion-demo .e-ha .bd{gap:7px;height:0;padding:0 12px;display:grid;overflow:hidden}.wui-motion-demo .e-ha b{background:var(--line-2);border-radius:999px;height:6px;display:block}.wui-motion-demo[data-on] .e-ha .bd{animation:e-ha 3.2s var(--e-move) infinite}.wui-motion-demo[data-on] .e-ha .hd i{animation:e-ha-i 3.2s var(--e-move) infinite}@keyframes e-ha{0%{height:0;padding-block:0}22%,80%{height:58px;padding-block:11px}to{height:0;padding-block:0}}@keyframes e-ha-i{0%,to{transform:rotate(45deg)}22%,80%{transform:rotate(-135deg)}}.wui-motion-demo .e-ss{background:var(--surface);border:1px solid var(--line-2);border-radius:11px;width:176px;height:104px;position:relative;overflow:hidden}.wui-motion-demo .e-ss .pane{gap:8px;padding:11px;display:grid}.wui-motion-demo .e-ss b{background:var(--surface-2);border-radius:5px;height:15px;display:block}.wui-motion-demo .e-ss i{pointer-events:none;z-index:1;height:18px;position:absolute;inset-inline:0}.wui-motion-demo .e-ss .top{background:linear-gradient(var(--surface),transparent);opacity:0;top:0}.wui-motion-demo .e-ss .bot{background:linear-gradient(transparent,var(--surface));opacity:1;bottom:0}.wui-motion-demo[data-on] .e-ss .pane{animation:e-ss 4s var(--e-move) infinite alternate}.wui-motion-demo[data-on] .e-ss .top{animation:e-ss-t 4s var(--e-move) infinite alternate}.wui-motion-demo[data-on] .e-ss .bot{animation:e-ss-b 4s var(--e-move) infinite alternate}@keyframes e-ss{to{transform:translateY(-44px)}}@keyframes e-ss-t{0%{opacity:0}18%,to{opacity:1}}@keyframes e-ss-b{0%,82%{opacity:1}to{opacity:0}}.wui-motion-demo .e-fil{gap:7px;width:176px;display:grid}.wui-motion-demo .e-fil b{background:var(--surface);border:1px solid var(--line-2);border-radius:6px;height:19px;display:block}.wui-motion-demo[data-on] .e-fil b{animation:e-fil 3.4s var(--e-move) calc(var(--i)*.13s) infinite}@keyframes e-fil{0%{opacity:0;transform:translateY(22px)scale(.94)}22%,62%{opacity:1;transform:none}86%,to{opacity:0;transform:translateY(-22px)scale(.94)}}.wui-motion-demo .e-shd{background:var(--surface);border:1px solid var(--line-2);border-radius:11px;width:180px;height:104px;position:relative;overflow:hidden}.wui-motion-demo .e-shd .hd{background:var(--surface);z-index:1;border-bottom:1px solid #0000;justify-content:space-between;align-items:center;height:38px;padding:0 11px;display:flex;position:absolute;inset:0 0 auto}.wui-motion-demo .e-shd .logo{background:var(--cyan);border-radius:999px;width:44px;height:11px}.wui-motion-demo .e-shd .nav{background:var(--line-2);border-radius:999px;width:52px;height:5px}.wui-motion-demo .e-shd .pg{gap:7px;padding:46px 11px 11px;display:grid}.wui-motion-demo .e-shd u{background:var(--surface-2);border-radius:5px;height:16px;text-decoration:none;display:block}.wui-motion-demo[data-on] .e-shd .hd{animation:e-shd 4s var(--e-move) infinite alternate}.wui-motion-demo[data-on] .e-shd .logo{animation:e-shd-l 4s var(--e-move) infinite alternate}.wui-motion-demo[data-on] .e-shd .pg{animation:e-shd-p 4s var(--e-move) infinite alternate}@keyframes e-shd{to{border-bottom-color:var(--line);height:26px;box-shadow:0 4px 10px -6px #00000059}}@keyframes e-shd-l{to{width:30px;height:8px}}@keyframes e-shd-p{to{transform:translateY(-38px)}}.wui-motion-demo .e-sks{width:170px;height:112px;position:relative}.wui-motion-demo .e-sks i{inset-inline:calc(var(--i)*8px);top:calc(var(--i)*13px);background:var(--surface);border:1px solid var(--line-2);height:64px;box-shadow:var(--shadow);z-index:calc(3 - var(--i));border-radius:12px;position:absolute}.wui-motion-demo[data-on] .e-sks i{animation:e-sks 4s var(--e-move) calc(var(--i)*.16s) infinite alternate}@keyframes e-sks{0%{transform:translateY(34px)scale(1)}to{transform:none;scale:calc(1 - var(--i)*.05)}}.wui-motion-demo .e-sgs{align-items:flex-end;gap:6px;height:74px;display:flex}.wui-motion-demo .e-sgs b{background:var(--cyan);transform-origin:bottom;border-radius:5px;width:17px;height:100%;display:block}.wui-motion-demo .e-sgs b:first-child{--i:0}.wui-motion-demo .e-sgs b:nth-child(2){--i:1}.wui-motion-demo .e-sgs b:nth-child(3){--i:2}.wui-motion-demo .e-sgs b:nth-child(4){--i:3}.wui-motion-demo .e-sgs b:nth-child(5){--i:4}.wui-motion-demo .e-sgs b:nth-child(6){--i:5}.wui-motion-demo .e-sgs b:nth-child(7){--i:6}.wui-motion-demo[data-on] .e-sgs b{animation:e-sgs 2.4s var(--e-entrance) calc(var(--i)*70ms) infinite alternate}@keyframes e-sgs{0%{opacity:.45;transform:scaleY(.25)}to{opacity:1;transform:scaleY(1)}}.wui-motion-demo .e-spr{gap:9px;width:186px;display:grid}.wui-motion-demo .e-spr .ln{background:var(--surface-2);border:1px solid var(--line);border-radius:7px;height:22px;position:relative}.wui-motion-demo .e-spr i{background:var(--cyan);border-radius:4px;width:16px;height:14px;position:absolute;top:3px;left:3px}.wui-motion-demo .e-spr .b{background:var(--indigo)}.wui-motion-demo .e-spr .c{background:var(--pink)}.wui-motion-demo[data-on] .e-spr i{animation:2.4s infinite alternate e-spr}.wui-motion-demo[data-on] .e-spr .a{animation-timing-function:cubic-bezier(.22,1,.36,1)}.wui-motion-demo[data-on] .e-spr .b{animation-timing-function:linear(0,.35 9%,.78 19%,1.04 27%,1.1 32%,1.03 41%,.98 50%,1.01 62%,1)}.wui-motion-demo[data-on] .e-spr .c{animation-timing-function:linear(0,.28 8%,.72 17%,1.12 26%,1.18 31%,.96 42%,1.06 55%,.98 68%,1.01 82%,1)}@keyframes e-spr{to{left:calc(100% - 19px)}}.wui-motion-demo .e-pr2{width:186px;height:88px;position:relative}.wui-motion-demo .e-pr2 svg{width:186px;height:88px}.wui-motion-demo .e-pr2 .rail{fill:none;stroke:var(--line-2);stroke-width:2px;stroke-dasharray:5 5}.wui-motion-demo .e-pr2 .ship{border-left:11px solid var(--cyan);offset-path:path("M10,70 C48,70 44,18 92,18 C140,18 136,70 176,70");offset-rotate:auto;offset-distance:0%;offset-anchor:0% 50%;border-top:6px solid #0000;border-bottom:6px solid #0000;width:0;height:0;position:absolute;top:0;left:0}.wui-motion-demo[data-on] .e-pr2 .ship{animation:e-pr2 3.4s var(--e-move) infinite}@keyframes e-pr2{to{offset-distance:100%}}.wui-motion-demo .e-brt i{background:linear-gradient(140deg,var(--cyan),var(--indigo));border-radius:12px;width:40px;height:40px;display:block}.wui-motion-demo[data-on] .e-brt i{animation:3s ease-in-out infinite e-brt}@keyframes e-brt{0%,to{opacity:.6;transform:scale(.88)}50%{opacity:1;transform:scale(1.04)}}.wui-motion-demo .e-vc{align-items:flex-end;gap:5px;height:44px;display:flex}.wui-motion-demo .e-vc i{background:var(--cyan);opacity:.18;border-radius:999px;width:9px;display:block}.wui-motion-demo .e-vc i:first-child{height:34%}.wui-motion-demo .e-vc i:nth-child(2){height:52%}.wui-motion-demo .e-vc i:nth-child(3){height:70%}.wui-motion-demo .e-vc i:nth-child(4){height:86%}.wui-motion-demo .e-vc i:nth-child(5){height:100%}.wui-motion-demo[data-on] .e-vc i{animation:e-vc 2.2s steps(1) calc(var(--i)*.22s) infinite}@keyframes e-vc{0%{opacity:.18}20%,82%{opacity:1}to{opacity:.18}}.wui-motion-demo .e-sfb i{background:var(--surface);border:1px solid var(--line-2);width:38px;height:38px;color:var(--acc);border-radius:11px;place-items:center;display:grid;position:relative}.wui-motion-demo .e-sfb svg{width:18px;height:18px}.wui-motion-demo[data-on] .e-sfb svg{animation:e-sfb 1.5s var(--e-overshoot) infinite}@keyframes e-sfb{0%,55%,to{transform:translateY(0)}22%{transform:translateY(5px)}38%{transform:translateY(-2px)}}.wui-motion-demo .e-isp b{background:var(--surface);border:1px solid var(--line-2);border-radius:10px;align-items:center;gap:8px;height:34px;padding-inline:16px;font-size:12.5px;font-weight:650;display:inline-flex}.wui-motion-demo .e-isp svg{width:14px;height:14px;color:var(--acc)}.wui-motion-demo[data-on] .e-isp svg{animation:e-isp 1.4s var(--e-move) infinite}@keyframes e-isp{0%{transform:rotate(0)}70%,to{transform:rotate(360deg)}}.wui-motion-demo .e-idr b{background:var(--surface);border:1px solid var(--line-2);border-radius:10px;align-items:center;gap:9px;height:34px;padding-inline:16px;font-size:12.5px;font-weight:650;display:inline-flex;overflow:hidden}.wui-motion-demo .e-idr i{border-inline:5px solid #0000;border-top:8px solid var(--acc);width:0;height:0}.wui-motion-demo[data-on] .e-idr i{animation:e-idr 1.8s var(--e-entrance) infinite}@keyframes e-idr{0%{opacity:0;transform:translateY(-16px)}28%{opacity:1;transform:translateY(0)}64%{opacity:1;transform:translateY(0)}84%,to{opacity:0;transform:translateY(16px)}}.wui-motion-demo .e-ifa b{background:var(--surface);border:1px solid var(--line-2);border-radius:10px;align-items:center;gap:9px;height:34px;padding-inline:16px;font-size:12.5px;font-weight:650;display:inline-flex;position:relative}.wui-motion-demo .e-ifa svg{width:15px;height:15px;color:var(--acc);flex:none}.wui-motion-demo[data-on] .e-ifa svg{animation:e-ifa 2.4s var(--e-exit) infinite}@keyframes e-ifa{0%,30%{opacity:1;transform:none}62%{opacity:0;transform:translate(26px,-16px)scale(.6)}63%{opacity:0;animation-timing-function:cubic-bezier(.22,1,.36,1);transform:translate(-6px,4px)scale(.8)}84%,to{opacity:1;transform:none}}.wui-motion-demo .e-hs i{background:linear-gradient(140deg,var(--cyan),var(--indigo));border-radius:12px;place-items:center;width:152px;height:96px;display:grid}.wui-motion-demo[data-on] .e-hs i{animation:e-hs 3.2s var(--e-move) infinite}@keyframes e-hs{0%{clip-path:circle(0%)}26%{clip-path:circle(34%)}44%{clip-path:circle(36%)}66%,88%{clip-path:circle(78%)}to{clip-path:circle(0%)}}.wui-motion-demo .e-cin i{background:linear-gradient(140deg,var(--night),#1b3742);border-radius:12px;place-items:center;width:172px;height:96px;display:grid}.wui-motion-demo .e-cin b{color:#fff;font-size:12.5px;font-weight:700}.wui-motion-demo[data-on] .e-cin i{animation:e-cin 3.6s var(--e-move) infinite}@keyframes e-cin{0%{clip-path:inset(0)}22%{clip-path:inset(11% 0)}70%{clip-path:inset(11% 0)}92%,to{clip-path:inset(0)}}.wui-motion-demo .e-dw i{background:linear-gradient(140deg,var(--pink),var(--indigo));border-radius:12px;width:140px;height:96px;display:block}.wui-motion-demo[data-on] .e-dw i{animation:e-dw 3s var(--e-move) infinite}@keyframes e-dw{0%{clip-path:polygon(50% 50%,50% 50%,50% 50%,50% 50%)}40%,84%{clip-path:polygon(50% -60%,160% 50%,50% 160%,-60% 50%)}to{clip-path:polygon(50% 50%,50% 50%,50% 50%,50% 50%)}}.wui-motion-demo .e-slc{border-radius:11px;width:160px;height:96px;position:relative;overflow:hidden}.wui-motion-demo .e-slc i{background:linear-gradient(140deg,var(--cyan),var(--indigo),var(--pink));clip-path:inset(calc(var(--i)*16.667%) 0 calc((5 - var(--i))*16.667%) 0);position:absolute;inset:0}.wui-motion-demo[data-on] .e-slc i{animation:e-slc 3.2s var(--e-entrance) calc(var(--i)*70ms) infinite}@keyframes e-slc{0%{transform:translateX(calc((var(--i) % 2) * 200% - 100%));opacity:0}30%,84%{opacity:1;transform:none}to{transform:translateX(calc((var(--i) % 2) * 200% - 100%));opacity:0}}.wui-motion-demo .e-ec{place-items:center;width:150px;height:60px;display:grid;position:relative}.wui-motion-demo .e-ec b{letter-spacing:-.04em;color:var(--acc);font-size:27px;font-weight:800;position:absolute}.wui-motion-demo .e-ec b:first-child{--i:3}.wui-motion-demo .e-ec b:nth-child(2){--i:2}.wui-motion-demo .e-ec b:nth-child(3){--i:1}.wui-motion-demo .e-ec b:nth-child(4){--i:0}.wui-motion-demo[data-on] .e-ec b{animation:e-ec 2.6s var(--e-entrance) calc(var(--i)*55ms) infinite}@keyframes e-ec{0%{opacity:0;transform:translate(-26px)scale(.9)}34%,80%{opacity:calc(1 - var(--i)*.27);transform:none}to{opacity:0;transform:translate(-26px)scale(.9)}}.wui-motion-demo .e-mr{background:var(--surface-2);border:1px solid var(--line-2);border-radius:12px;place-items:center;width:172px;height:96px;display:grid;position:relative;overflow:hidden}.wui-motion-demo .e-mr .under,.wui-motion-demo .e-mr .over{place-items:center;display:grid;position:absolute;inset:0}.wui-motion-demo .e-mr .under{background:color-mix(in oklab,var(--cyan) 16%,var(--surface));background-image:repeating-linear-gradient(0deg,color-mix(in oklab,var(--cyan) 22%,transparent) 0 2px,transparent 2px 5px)}.wui-motion-demo .e-mr .over{background:var(--surface-2);-webkit-mask-image:radial-gradient(circle 34px at var(--mx,50%) var(--my,50%),transparent 98%,#000 100%);-webkit-mask-image:radial-gradient(circle 34px at var(--mx,50%) var(--my,50%),transparent 98%,#000 100%);mask-image:radial-gradient(circle 34px at var(--mx,50%) var(--my,50%),transparent 98%,#000 100%)}.wui-motion-demo .e-mr b{color:var(--ink);white-space:nowrap;font-family:JetBrains Mono,monospace;font-size:12px;font-weight:650}.wui-motion-demo .e-mr .over b{color:var(--ink-3)}.wui-motion-demo[data-on] .e-mr .over{animation:4.2s ease-in-out infinite alternate e-mr}@keyframes e-mr{0%{--mx:16%;--my:28%}50%{--mx:78%;--my:70%}to{--mx:40%;--my:22%}}.wui-motion-demo .e-qt{background:conic-gradient(from 0deg,transparent 0 25%,var(--cyan) 92%,var(--cyan));border-radius:999px;width:34px;height:34px;-webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - 3.5px),#000 calc(100% - 3.5px));mask:radial-gradient(farthest-side,#0000 calc(100% - 3.5px),#000 calc(100% - 3.5px))}.wui-motion-demo[data-on] .e-qt{animation:.9s linear infinite e-qt}@keyframes e-qt{to{transform:rotate(360deg)}}.wui-motion-demo .e-cr{width:38px;height:38px;position:relative}.wui-motion-demo .e-cr i{border:3px solid #0000;border-radius:999px;position:absolute}.wui-motion-demo .e-cr i:first-child{border-top-color:var(--cyan);border-right-color:var(--cyan);inset:0}.wui-motion-demo .e-cr i:last-child{border-bottom-color:var(--indigo);border-left-color:var(--indigo);inset:8px}.wui-motion-demo[data-on] .e-cr i:first-child{animation:1.1s linear infinite e-cr}.wui-motion-demo[data-on] .e-cr i:last-child{animation:.8s linear infinite reverse e-cr}@keyframes e-cr{to{transform:rotate(360deg)}}.wui-motion-demo .e-tkh{border:2px solid var(--line-2);border-radius:999px;place-items:center;width:38px;height:38px;display:grid;position:relative}.wui-motion-demo .e-tkh i{background:var(--cyan);transform-origin:50% 100%;border-radius:999px;width:2px;height:13px;margin-left:-1px;position:absolute;top:6px;left:50%}.wui-motion-demo[data-on] .e-tkh i{animation:1.2s steps(12,end) infinite e-tkh}@keyframes e-tkh{to{transform:rotate(360deg)}}.wui-motion-demo .e-td{align-items:center;gap:7px;height:22px;display:flex}.wui-motion-demo .e-td i{background:var(--acc);border-radius:999px;width:8px;height:8px;display:block}.wui-motion-demo .e-td i:nth-child(2){animation-delay:.16s!important}.wui-motion-demo .e-td i:nth-child(3){animation-delay:.32s!important}.wui-motion-demo[data-on] .e-td i{animation:e-td 1.1s var(--e-move) infinite}@keyframes e-td{0%,60%,to{opacity:.45;transform:translateY(0)}30%{opacity:1;transform:translateY(-7px)}}.wui-motion-demo .e-bq{align-items:center;gap:4px;height:30px;display:flex}.wui-motion-demo .e-bq i{background:var(--acc);border-radius:999px;width:5px;height:100%;display:block;transform:scaleY(.35)}.wui-motion-demo .e-bq i:nth-child(2){animation-delay:.1s!important}.wui-motion-demo .e-bq i:nth-child(3){animation-delay:.2s!important}.wui-motion-demo .e-bq i:nth-child(4){animation-delay:.3s!important}.wui-motion-demo .e-bq i:nth-child(5){animation-delay:.4s!important}.wui-motion-demo[data-on] .e-bq i{animation:1s ease-in-out infinite e-bq}@keyframes e-bq{0%,to{transform:scaleY(.35)}50%{transform:scaleY(1)}}.wui-motion-demo .e-cv{place-items:center;width:40px;height:40px;display:grid;position:relative}.wui-motion-demo .e-cv i{background:var(--cyan);border-radius:999px;width:8px;height:8px;display:block;position:absolute}.wui-motion-demo[data-on] .e-cv i{animation:e-cv 1.6s var(--e-move) infinite}@keyframes e-cv{0%,to{transform:rotate(var(--r)) translateY(-15px) scale(1)}50%{transform:rotate(var(--r)) translateY(0) scale(.55)}}.wui-motion-demo .e-ct2{perspective:220px}.wui-motion-demo .e-ct2 i{background:linear-gradient(140deg,var(--cyan),var(--indigo));border-radius:6px;width:26px;height:26px;display:block}.wui-motion-demo[data-on] .e-ct2 i{animation:e-ct2 1.8s var(--e-move) infinite}@keyframes e-ct2{0%{transform:rotateX(0)rotateY(0)}50%{transform:rotateX(180deg)rotateY(0)}to{transform:rotateX(180deg)rotateY(180deg)}}.wui-motion-demo .e-trs{background:var(--surface-2);border-radius:999px;width:170px;height:5px;position:relative;overflow:hidden}.wui-motion-demo .e-trs i{background:var(--acc);border-radius:999px;width:38%;display:block;position:absolute;inset-block:0}.wui-motion-demo[data-on] .e-trs i{animation:e-trs 1.5s var(--e-move) infinite}@keyframes e-trs{0%{left:-40%}to{left:100%}}.wui-motion-demo .e-op{width:38px;height:38px;position:relative}.wui-motion-demo .e-op i{transform-origin:50% 211%;border-radius:999px;width:9px;height:9px;margin-left:-4.5px;position:absolute;top:0;left:50%}.wui-motion-demo .e-op i:first-child{background:var(--cyan)}.wui-motion-demo .e-op i:last-child{background:var(--indigo);animation-delay:-.45s!important}.wui-motion-demo[data-on] .e-op i{animation:1.3s linear infinite e-op}@keyframes e-op{to{transform:rotate(360deg)}}.wui-motion-demo .e-br2{border:3px solid var(--acc);border-radius:999px;width:34px;height:34px}.wui-motion-demo[data-on] .e-br2{animation:1.6s ease-in-out infinite e-br2}@keyframes e-br2{0%,to{opacity:.55;border-width:3px;transform:scale(.86)}50%{opacity:1;border-width:6px;transform:scale(1)}}.wui-motion-demo .e-tkd{color:var(--ink-2);align-items:center;gap:10px;font-size:12.5px;font-weight:600;display:inline-flex}.wui-motion-demo .e-tkd .bx{border:1.5px solid var(--line-2);background:var(--surface);width:20px;height:20px;color:var(--cyan-fg);border-radius:6px;flex:none;place-items:center;display:grid;position:relative}.wui-motion-demo .e-tkd svg{stroke-dasharray:18;stroke-dashoffset:18px;width:13px;height:13px}.wui-motion-demo[data-on] .e-tkd .bx{animation:e-tkd-b 3s var(--e-overshoot) infinite}.wui-motion-demo[data-on] .e-tkd svg{animation:e-tkd-s 3s var(--e-move) infinite}@keyframes e-tkd-b{0%,10%{background:var(--surface);border-color:var(--line-2);transform:scale(1)}20%{transform:scale(.88)}30%,84%{background:var(--cyan);border-color:var(--cyan);transform:scale(1)}to{background:var(--surface);border-color:var(--line-2);transform:scale(1)}}@keyframes e-tkd-s{0%,22%{stroke-dashoffset:18px}42%,84%{stroke-dashoffset:0}to{stroke-dashoffset:18px}}.wui-motion-demo .e-dlg{background:var(--surface-2);border:1px solid var(--line);border-radius:12px;place-items:center;width:186px;height:110px;display:grid;position:relative;overflow:hidden}.wui-motion-demo .e-dlg .scrim{opacity:0;background:#060e1273;position:absolute;inset:0}.wui-motion-demo .e-dlg .panel{background:var(--surface);border:1px solid var(--line-2);width:132px;box-shadow:var(--shadow-2);opacity:0;border-radius:11px;gap:7px;padding:12px;display:grid;position:relative}.wui-motion-demo .e-dlg .t{background:var(--line-2);border-radius:999px;width:66%;height:7px}.wui-motion-demo .e-dlg .l{background:var(--line-2);border-radius:999px;height:5px}.wui-motion-demo .e-dlg .btn{background:var(--cyan);border-radius:6px;justify-self:end;width:52px;height:20px}.wui-motion-demo[data-on] .e-dlg .scrim{animation:e-dlg-s 3.4s var(--e-move) infinite}.wui-motion-demo[data-on] .e-dlg .panel{animation:e-dlg-p 3.4s var(--e-overshoot) infinite}@keyframes e-dlg-s{0%,to{opacity:0}14%,82%{opacity:1}}@keyframes e-dlg-p{0%{opacity:0;transform:translateY(12px)scale(.94)}18%,80%{opacity:1;transform:none}94%,to{opacity:0;transform:translateY(6px)scale(.97)}}.wui-motion-demo .e-edg{place-items:center;width:186px;height:118px;display:grid;position:relative}.wui-motion-demo .e-edg .tgt{color:var(--acc);text-underline-offset:3px;font-size:12px;font-weight:650;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}.wui-motion-demo .e-edg .card{background:var(--surface);border:1px solid var(--line-2);width:144px;box-shadow:var(--shadow-2);transform-origin:50% 100%;opacity:0;border-radius:10px;gap:9px;margin-left:-72px;padding:10px;display:flex;position:absolute;bottom:calc(50% + 16px);left:50%}.wui-motion-demo .e-edg .av{background:linear-gradient(140deg,var(--cyan),var(--indigo));border-radius:999px;flex:none;width:26px;height:26px}.wui-motion-demo .e-edg .tx{flex:1;align-content:center;gap:5px;display:grid}.wui-motion-demo .e-edg .tx b{background:var(--line-2);border-radius:999px;height:5px;display:block}.wui-motion-demo .e-edg .tx b:last-child{width:62%}.wui-motion-demo[data-on] .e-edg .card{animation:e-edg 3.6s var(--e-entrance) infinite}@keyframes e-edg{0%,18%{opacity:0;transform:translateY(6px)scale(.96)}30%,80%{opacity:1;transform:none}90%,to{opacity:0;transform:translateY(4px)scale(.98)}}.wui-motion-demo .e-anc{place-items:start center;width:186px;height:118px;padding-top:8px;display:grid;position:relative}.wui-motion-demo .e-anc .btn{background:var(--surface);border:1px solid var(--line-2);border-radius:9px;width:30px;height:30px}.wui-motion-demo .e-anc .pop{background:var(--surface);border:1px solid var(--line-2);width:124px;box-shadow:var(--shadow-2);transform-origin:50% -10px;opacity:0;border-radius:10px;gap:6px;margin-left:-62px;padding:10px;display:grid;position:absolute;top:46px;left:50%}.wui-motion-demo .e-anc .arw{background:var(--surface);border-left:1px solid var(--line-2);border-top:1px solid var(--line-2);width:9px;height:9px;margin-left:-5px;position:absolute;top:-5px;left:50%;rotate:45deg}.wui-motion-demo .e-anc .pop b{background:var(--line-2);border-radius:999px;height:5px;display:block}.wui-motion-demo .e-anc .pop b:nth-child(3){width:78%}.wui-motion-demo .e-anc .pop b:last-child{width:54%}.wui-motion-demo[data-on] .e-anc .pop{animation:e-anc 3.2s var(--e-overshoot) infinite}@keyframes e-anc{0%,12%{opacity:0;transform:scale(.88)}26%,80%{opacity:1;transform:none}92%,to{opacity:0;transform:scale(.94)}}.wui-motion-demo .e-pns{gap:8px;width:186px;display:grid}.wui-motion-demo .e-pns .tabs{color:var(--ink-3);gap:14px;padding-inline:2px;font-size:11.5px;font-weight:650;display:flex}.wui-motion-demo .e-pns .tabs .on{color:var(--ink)}.wui-motion-demo .e-pns .stage{background:var(--surface);border:1px solid var(--line-2);border-radius:10px;height:62px;position:relative;overflow:hidden}.wui-motion-demo .e-pns i{align-content:start;gap:7px;padding:11px;display:grid;position:absolute;inset:0}.wui-motion-demo .e-pns s{background:var(--line-2);border-radius:999px;height:6px;text-decoration:none;display:block}.wui-motion-demo .e-pns s:last-child{width:58%}.wui-motion-demo .e-pns .p2 s{background:color-mix(in oklab,var(--cyan) 40%,var(--line-2))}.wui-motion-demo[data-on] .e-pns .p1{animation:e-pns-a 3.6s var(--e-move) infinite}.wui-motion-demo[data-on] .e-pns .p2{animation:e-pns-b 3.6s var(--e-move) infinite}@keyframes e-pns-a{0%,34%{opacity:1;transform:none}48%,86%{opacity:0;transform:translate(-18px)}to{opacity:1;transform:none}}@keyframes e-pns-b{0%,34%{opacity:0;transform:translate(18px)}48%,86%{opacity:1;transform:none}to{opacity:0;transform:translate(18px)}}.wui-motion-demo .e-ffl{perspective:600px}.wui-motion-demo .e-ffl .in{width:124px;height:36px;transform-style:preserve-3d;display:grid;position:relative}.wui-motion-demo .e-ffl b{backface-visibility:hidden;border-radius:10px;grid-area:1/1;place-items:center;font-size:12.5px;font-weight:650;display:grid}.wui-motion-demo .e-ffl .f{background:var(--surface);border:1px solid var(--line-2);color:var(--ink)}.wui-motion-demo .e-ffl .b{background:var(--ink);color:var(--page);transform:rotateX(180deg)}.wui-motion-demo[data-on] .e-ffl .in{animation:e-ffl 3.2s var(--e-move) infinite}@keyframes e-ffl{0%,26%{transform:rotateX(0)}44%,80%{transform:rotateX(180deg)}to{transform:rotateX(0)}}.wui-motion-demo .e-stc{align-items:center;gap:9px;font-size:12.5px;font-weight:600;display:inline-flex}.wui-motion-demo .e-stc .gly{flex:none;align-items:flex-end;gap:2px;height:12px;display:flex}.wui-motion-demo .e-stc .gly b{background:var(--acc);border-radius:1px;width:3px;height:100%;transform:scaleY(.3)}.wui-motion-demo .e-stc .gly b:nth-child(2){animation-delay:.14s!important}.wui-motion-demo .e-stc .gly b:nth-child(3){animation-delay:.28s!important}.wui-motion-demo .e-stc .sl{clip-path:inset(0 -.12em);vertical-align:baseline;display:inline-grid}.wui-motion-demo .e-stc .sl b{white-space:nowrap;color:#0000;background:linear-gradient(100deg,var(--ink-3) 42%,var(--ink) 50%,var(--ink-3) 58%);background-size:260% 100%;-webkit-background-clip:text;background-clip:text;grid-area:1/1}.wui-motion-demo .e-stc .sl b:not(:first-child){opacity:0}.wui-motion-demo .e-stc .sl b:nth-child(2){animation-delay:-5.2s,0s!important}.wui-motion-demo .e-stc .sl b:nth-child(3){animation-delay:-2.6s,0s!important}.wui-motion-demo[data-on] .e-stc .gly b{animation:.9s ease-in-out infinite alternate e-stc-g}.wui-motion-demo[data-on] .e-stc .sl b{animation:7.8s linear infinite e-stc-p,2.2s linear infinite e-stc-s}@keyframes e-stc-g{to{transform:scaleY(1)}}@keyframes e-stc-p{0%{opacity:0;transform:translateY(60%)}3%,30%{opacity:1;transform:none}33%,to{opacity:0;transform:translateY(-60%)}}@keyframes e-stc-s{to{background-position:-160% 0}}.wui-motion-demo .e-qsw{max-width:200px;color:var(--ink-2);isolation:isolate;font-size:12px;font-weight:550;line-height:1.5;display:inline-block;position:relative}.wui-motion-demo .e-qsw i{pointer-events:none;mix-blend-mode:plus-lighter;background:linear-gradient(100deg,transparent 42%,color-mix(in oklab,var(--cyan) 42%,transparent) 50%,transparent 58%);background-position:-120% 0;background-size:220% 100%;position:absolute;inset:0}.wui-motion-demo[data-on] .e-qsw i{animation:2.4s linear infinite e-qsw}@keyframes e-qsw{to{background-position:120% 0}}.wui-motion-demo .e-wgl{background:var(--surface);border:1px solid var(--line-2);border-radius:9px;align-items:center;gap:10px;height:28px;padding-inline:11px;font-size:11.5px;display:inline-flex}.wui-motion-demo .e-wgl .grid{flex:none;grid-template-columns:repeat(3,3px);gap:2px;display:grid}.wui-motion-demo .e-wgl .grid b{background:var(--acc);opacity:.22;border-radius:1px;width:3px;height:3px;display:block}.wui-motion-demo .e-wgl .verb{color:var(--ink-2);font-weight:650}.wui-motion-demo .e-wgl .clk{font-variant-numeric:tabular-nums;color:var(--ink-3);align-items:baseline;margin-left:auto;font-family:JetBrains Mono,monospace;display:inline-flex}.wui-motion-demo .e-wgl .col{width:.62em;height:1.25em;line-height:1.25em;display:inline-block;overflow:hidden}.wui-motion-demo .e-wgl .col s{text-align:center;height:1.25em;line-height:1.25em;text-decoration:none;display:block}.wui-motion-demo .e-wgl .unit{font-weight:400}.wui-motion-demo[data-on] .e-wgl .grid b{animation:e-wgl-g 1.8s steps(1) calc(var(--i)*90ms) infinite}.wui-motion-demo[data-on] .e-wgl .u s{animation:10s steps(10,end) infinite e-wgl-u}.wui-motion-demo[data-on] .e-wgl .t s{animation:60s steps(6,end) infinite e-wgl-t}@keyframes e-wgl-g{0%,55%{opacity:.22}62%,88%{opacity:1}to{opacity:.22}}@keyframes e-wgl-u{to{transform:translateY(-12.5em)}}@keyframes e-wgl-t{to{transform:translateY(-7.5em)}}.wui-motion-demo .e-stgm{border:1px solid var(--line-2);background:var(--surface);width:106px;height:36px;color:var(--ink);border-radius:11px;justify-content:center;align-items:center;font-size:13px;font-weight:650;display:inline-flex;position:relative;overflow:hidden}.wui-motion-demo .e-stgm .st{white-space:nowrap;opacity:0;align-items:center;gap:7px;display:inline-flex;position:absolute;transform:translateY(7px)}.wui-motion-demo .e-stgm .s1{opacity:1;transform:none}.wui-motion-demo .e-stgm .ring{border:2px solid color-mix(in oklab,var(--ink) 20%,transparent);border-top-color:var(--ink);border-radius:50%;flex:none;width:13px;height:13px}.wui-motion-demo .e-stgm .tick{flex:none;width:14px;height:14px}.wui-motion-demo .e-stgm .tick path{stroke-dasharray:18;stroke-dashoffset:18px}.wui-motion-demo[data-on] .e-stgm{animation:e-stgm-w 4.4s var(--e-move) infinite}.wui-motion-demo[data-on] .e-stgm .s1{animation:e-stgm-1 4.4s var(--e-move) infinite}.wui-motion-demo[data-on] .e-stgm .s2{animation:e-stgm-2 4.4s var(--e-move) infinite}.wui-motion-demo[data-on] .e-stgm .s3{animation:e-stgm-3 4.4s var(--e-move) infinite}.wui-motion-demo[data-on] .e-stgm .ring{animation:.8s linear infinite e-stgm-sp}.wui-motion-demo[data-on] .e-stgm .tick path{animation:e-stgm-tk 4.4s var(--e-move) infinite}@keyframes e-stgm-w{0%,13%{background:var(--surface);border-color:var(--line-2);width:106px}22%,48%{background:var(--surface);border-color:var(--line-2);width:132px}58%,88%{background:color-mix(in oklab,var(--green) 16%,var(--surface));border-color:color-mix(in oklab,var(--green) 36%,var(--line-2));width:124px}97%,to{background:var(--surface);border-color:var(--line-2);width:106px}}@keyframes e-stgm-1{0%,11%{opacity:1;transform:translateY(0)}18%,91%{opacity:0;transform:translateY(-7px)}97%,to{opacity:1;transform:translateY(0)}}@keyframes e-stgm-2{0%,13%{opacity:0;transform:translateY(7px)}22%,46%{opacity:1;transform:translateY(0)}54%,to{opacity:0;transform:translateY(-7px)}}@keyframes e-stgm-3{0%,50%{opacity:0;transform:translateY(7px)}58%,88%{opacity:1;color:var(--gr-t);transform:translateY(0)}95%,to{opacity:0;color:var(--gr-t);transform:translateY(-7px)}}@keyframes e-stgm-sp{to{transform:rotate(1turn)}}@keyframes e-stgm-tk{0%,57%{stroke-dashoffset:18px}70%,90%{stroke-dashoffset:0}to{stroke-dashoffset:18px}}.wui-motion-demo .e-tly{align-items:flex-end;gap:24px;display:inline-flex}.wui-motion-demo .e-tly .st{flex-direction:column;gap:2px;display:flex}.wui-motion-demo .e-tly .k{letter-spacing:.03em;text-transform:uppercase;color:var(--ink-3);font-size:12px;font-weight:650}.wui-motion-demo .e-tly .v{color:var(--ink);font-variant-numeric:tabular-nums;opacity:0;font-size:23px;font-weight:700;line-height:1.12;display:inline-flex}.wui-motion-demo .e-tly .col{height:1.12em;display:inline-block;overflow:hidden}.wui-motion-demo .e-tly .col b{height:1.12em;display:block}.wui-motion-demo .e-tly .n1{--n:1}.wui-motion-demo .e-tly .n2{--n:2}.wui-motion-demo .e-tly .n4{--n:4}.wui-motion-demo .e-tly .n6{--n:6}.wui-motion-demo .e-tly .n8{--n:8}.wui-motion-demo .e-tly .n9{--n:9}.wui-motion-demo[data-on] .e-tly .v{animation:5.2s linear infinite e-tly-f}.wui-motion-demo[data-on] .e-tly .col b{animation:5.2s step-end infinite e-tly}.wui-motion-demo[data-on] .e-tly .n1 b{animation-timing-function:step-end}.wui-motion-demo[data-on] .e-tly .n2 b{animation-timing-function:steps(2,end)}.wui-motion-demo[data-on] .e-tly .n4 b{animation-timing-function:steps(4,end)}.wui-motion-demo[data-on] .e-tly .n6 b{animation-timing-function:steps(6,end)}.wui-motion-demo[data-on] .e-tly .n8 b{animation-timing-function:steps(8,end)}.wui-motion-demo[data-on] .e-tly .n9 b{animation-timing-function:steps(9,end)}.wui-motion-demo .e-tly .st:nth-child(2) .v,.wui-motion-demo .e-tly .st:nth-child(2) .col b{animation-delay:.1s!important}.wui-motion-demo .e-tly .st:nth-child(3) .v,.wui-motion-demo .e-tly .st:nth-child(3) .col b{animation-delay:.2s!important}@keyframes e-tly-f{0%,4%{opacity:0}10%,86%{opacity:1}92%,to{opacity:0}}@keyframes e-tly{0%,5%{transform:translateY(0)}36%,88%{transform:translateY(calc(var(--n) * -1.12em))}93%,to{transform:translateY(0)}}.wui-motion-demo .e-lvp{border:1px solid var(--line);background:var(--surface);width:200px;box-shadow:var(--shadow);border-radius:13px;flex-direction:column;gap:7px;padding:13px 14px 9px;display:flex;position:relative}.wui-motion-demo .e-lvp .hd{letter-spacing:.03em;text-transform:uppercase;color:var(--ink-3);align-items:center;gap:6px;font-size:12px;font-weight:650;display:inline-flex}.wui-motion-demo .e-lvp .dot{background:var(--green);border-radius:999px;flex:none;width:6px;height:6px}.wui-motion-demo .e-lvp .rw{justify-content:space-between;align-items:baseline;gap:10px;display:flex}.wui-motion-demo .e-lvp .v{color:var(--ink);font-variant-numeric:tabular-nums;font-size:22px;font-weight:700;line-height:1.12;display:inline-flex}.wui-motion-demo .e-lvp .col{height:1.12em;display:inline-block;overflow:hidden}.wui-motion-demo .e-lvp .col b{height:1.12em;display:block}.wui-motion-demo .e-lvp .chip{background:color-mix(in oklab,var(--green) 16%,var(--surface));height:20px;color:var(--gr-t);border-radius:999px;place-items:center;padding-inline:7px;font-size:12px;font-weight:700;display:inline-grid;position:relative}.wui-motion-demo .e-lvp .chip b{white-space:nowrap;grid-area:1/1;align-items:center;gap:4px;display:inline-flex}.wui-motion-demo .e-lvp .chip i{border-inline:3.5px solid #0000;border-bottom:6px solid;width:0;height:0}.wui-motion-demo .e-lvp .d2{opacity:0}.wui-motion-demo .e-lvp .sp{width:100%;height:36px;overflow:visible}.wui-motion-demo .e-lvp .ln{stroke:var(--acc);stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1px}.wui-motion-demo .e-lvp .hd2{fill:var(--acc);stroke:color-mix(in oklab,var(--acc) 26%,transparent);stroke-width:3px;offset-path:path("M4,28 L22,21 L40,25 L58,13 L76,18 L94,9 L112,14 L128,5");offset-distance:0%;offset-rotate:0deg;opacity:0}.wui-motion-demo[data-on] .e-lvp .dot{animation:e-lvp-d 2.2s var(--e-move) infinite}.wui-motion-demo[data-on] .e-lvp .col b{animation:4.6s steps(5,end) infinite e-lvp-c}.wui-motion-demo[data-on] .e-lvp .d1{animation:e-lvp-a 4.6s var(--e-move) infinite}.wui-motion-demo[data-on] .e-lvp .d2{animation:e-lvp-b 4.6s var(--e-move) infinite}.wui-motion-demo[data-on] .e-lvp .ln{animation:e-lvp-l 4.6s var(--e-move) infinite}.wui-motion-demo[data-on] .e-lvp .hd2{animation:e-lvp-h 4.6s var(--e-move) infinite}@keyframes e-lvp-d{0%,to{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}@keyframes e-lvp-c{to{transform:translateY(-5.6em)}}@keyframes e-lvp-a{0%,44%{opacity:1;transform:translateY(0)}54%,to{opacity:0;transform:translateY(-8px)}}@keyframes e-lvp-b{0%,46%{opacity:0;transform:translateY(8px)}56%,to{opacity:1;transform:translateY(0)}}@keyframes e-lvp-l{0%,6%{stroke-dashoffset:1px}62%,88%{stroke-dashoffset:0}to{stroke-dashoffset:1px}}@keyframes e-lvp-h{0%,6%{offset-distance:0%;opacity:0}14%{opacity:1}62%,82%{offset-distance:100%;opacity:1}90%,to{offset-distance:100%;opacity:0}}.wui-motion-demo .e-pcm{width:228px;box-shadow:var(--shadow-2);background:linear-gradient(var(--surface),var(--surface)) padding-box, conic-gradient(from var(--wm-ang,0deg),var(--line-2) 0deg,var(--line-2) 200deg,var(--pink) 250deg, var(--indigo) 290deg,var(--orange) 320deg,var(--line-2) 360deg) border-box;border:1px solid #0000;border-radius:16px;gap:8px;padding:11px 12px 10px;display:grid;position:relative;overflow:hidden}.wui-motion-demo .e-pcm .hd{align-items:center;gap:7px;display:flex}.wui-motion-demo .e-pcm .orb{background:conic-gradient(from var(--wm-ang,0deg),var(--indigo),var(--purple),var(--pink),var(--orange),var(--cyan),var(--indigo));border-radius:999px;flex:none;width:18px;height:18px;box-shadow:inset 0 0 5px #ffffff80}.wui-motion-demo .e-pcm .chip{background:var(--surface-2);height:20px;color:var(--ink-2);border-radius:6px;align-items:center;padding-inline:7px;font-family:JetBrains Mono,monospace;font-size:11px;font-weight:500;display:inline-flex}.wui-motion-demo .e-pcm .tx{min-height:19px;color:var(--ink);white-space:pre;font-size:12.5px;line-height:19px}.wui-motion-demo .e-pcm .tx u{text-decoration:none}.wui-motion-demo .e-pcm .ft{justify-content:space-between;align-items:center;display:flex}.wui-motion-demo .e-pcm .add{width:22px;height:22px;color:var(--ink-3);border:1px solid var(--line-2);border-radius:999px;place-items:center;font-size:14px;font-style:normal;line-height:1;display:grid}.wui-motion-demo .e-pcm .go{background:var(--ink);width:24px;height:24px;color:var(--page);border-radius:999px;place-items:center;display:grid}.wui-motion-demo .e-pcm .go svg{width:13px;height:13px}.wui-motion-demo .e-pcm .line{inset-inline:0;opacity:0;height:2px;position:absolute;bottom:0;overflow:hidden}.wui-motion-demo .e-pcm .line:after{content:"";background:linear-gradient(90deg,transparent,var(--indigo),var(--pink),transparent);position:absolute;inset:0}.wui-motion-demo[data-on] .e-pcm,.wui-motion-demo[data-on] .e-pcm .orb{animation:5s linear infinite e-pcm-r}.wui-motion-demo[data-on] .e-pcm .tx u{animation:e-pcm-l 5.2s var(--e-entrance) calc(var(--i) * 45ms) infinite backwards}.wui-motion-demo[data-on] .e-pcm .line{animation:5.2s linear infinite e-pcm-s}.wui-motion-demo[data-on] .e-pcm .line:after{animation:e-pcm-w 1.2s var(--e-move) infinite}@keyframes e-pcm-r{to{--wm-ang:360deg}}@keyframes e-pcm-l{0%{opacity:0;filter:blur(3px)}8%,84%{opacity:1;filter:blur()}92%,to{opacity:0;filter:blur(3px)}}@keyframes e-pcm-s{0%,58%{opacity:0}62%,86%{opacity:1}90%,to{opacity:0}}@keyframes e-pcm-w{0%{transform:translate(-100%)}to{transform:translate(100%)}}