@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:var(--ease-entrance,cubic-bezier(.22, 1, .36, 1));--e-exit:var(--ease-exit,cubic-bezier(.4, 0, 1, 1));--e-move:var(--ease-move,cubic-bezier(.65, 0, .35, 1));--e-overshoot:var(--ease-overshoot,cubic-bezier(.34, 1.35, .64, 1));--e-spring:var(--ease-spring,linear(0, .35 9%, .78 19%, 1.04 27%, 1.1 32%, 1.03 41%, .98 50%, 1.01 62%, 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{border-radius:13px;padding:2px;display:inline-flex;position:relative}.wui-motion-demo .e-shineb .rim{border-radius:inherit;contain:paint;position:absolute;inset:0;overflow:hidden;container-type:size}.wui-motion-demo .e-shineb .rim:before{content:"";aspect-ratio:1;background:conic-gradient(transparent 0 62%,var(--cyan) 72%,var(--indigo) 80%,transparent 90%);width:calc(150cqmax + 24px);position:absolute;top:50%;left:50%;translate:-50% -50%}.wui-motion-demo .e-shineb .in{background:var(--surface);border-radius:11px;padding:9px 19px;font-size:13px;font-weight:650;position:relative}.wui-motion-demo[data-on] .e-shineb .rim:before{animation:3.4s linear infinite e-shineb}@keyframes e-shineb{to{rotate:1turn}}.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 i{contain:paint;border-radius:13px;padding:2px;position:absolute;inset:-2px;overflow:hidden;container-type:size}.wui-motion-demo .e-elec i:before{content:"";aspect-ratio:1;background:conic-gradient(var(--cyan),var(--indigo),var(--pink),var(--cyan));width:calc(150cqmax + 24px);position:absolute;top:50%;left:50%;translate:-50% -50%}.wui-motion-demo .e-elec .ring{-webkit-mask-composite:xor;-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 .glow{z-index:-1;filter:blur(7px);opacity:.75}.wui-motion-demo .e-elec:after{content:"";z-index:-1;border-radius:inherit;background:inherit;position:absolute;inset:0}.wui-motion-demo[data-on] .e-elec i:before{animation:2.2s linear infinite e-elec}@keyframes e-elec{to{rotate:1turn}}.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}.wui-motion-demo .e-hb .rim{border-radius:inherit;contain:paint;position:absolute;inset:0;overflow:hidden;container-type:size}.wui-motion-demo .e-hb .rim:before{content:"";aspect-ratio:1;background:conic-gradient(transparent 0 70%,var(--cyan) 85%,transparent 100%);width:calc(150cqmax + 24px);position:absolute;top:50%;left:50%;translate:-50% -50%}.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 .rim:before{animation:2.4s linear infinite e-hb}@keyframes e-hb{to{rotate:1turn}}.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:e-neon 4s var(--e-move) infinite}@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 30%,#fffc 50%,#0000 70%);position:absolute;inset:0;transform:translate(-100%)}.wui-motion-demo[data-on] .e-shim i{animation:e-shim 2.2s var(--e-move) infinite}@keyframes e-shim{0%{transform:translate(-100%)}60%,to{transform:translate(100%)}}.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;opacity:0;border-radius:11px;position:absolute;inset:0}.wui-motion-demo[data-on] .e-pulse:before{animation:e-pulse 1.8s var(--e-entrance) 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-entrance) infinite}@keyframes e-ripp{0%{opacity:.35;transform:scale(1)}32%,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;clip-path:circle(4.5px at 14.5px);position:absolute;inset:0}.wui-motion-demo[data-on] .e-ihb i{animation:e-ihb-dot 1.9s var(--e-entrance) infinite}.wui-motion-demo[data-on] .e-ihb .t1{animation:e-ihb-out 1.9s var(--e-exit) infinite}.wui-motion-demo[data-on] .e-ihb .t2{animation:e-ihb-in 1.9s var(--e-entrance) infinite}@keyframes e-ihb-dot{0%{clip-path:circle(4.5px at 14.5px)}15.8%,86%{clip-path:circle(150% at 14.5px);animation-timing-function:var(--e-exit)}94%,to{clip-path:circle(4.5px at 14.5px)}}@keyframes e-ihb-out{0%{opacity:1;transform:none}7.9%,86%{opacity:0;animation-timing-function:var(--e-entrance);transform:translate(-16px)}94%,to{opacity:1;transform:none}}@keyframes e-ihb-in{0%,2.6%{opacity:0;transform:translate(16px)}15.8%,86%{opacity:1;animation-timing-function:var(--e-exit);transform:none}94%,to{opacity:0;transform:translate(16px)}}.wui-motion-demo .e-shiny{letter-spacing:-.02em;color:#0000;background:linear-gradient(100deg,var(--ink) 40%,color-mix(in oklab,var(--ink) 55%,var(--cyan)) 50%,var(--ink) 60%);background-position:100% 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:0 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:21ch;font-weight:500;display:inline-block;overflow:hidden}.wui-motion-demo[data-on] .e-type b{animation:2.6s steps(21,end) infinite both 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:e-mo-a 3.4s var(--e-move) infinite}.wui-motion-demo[data-on] .e-morph b:last-of-type{animation:e-mo-b 3.4s var(--e-move) infinite}@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;animation-timing-function:var(--e-exit);transform:none}30.4%,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;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) both infinite}.wui-motion-demo[data-on] .e-box i{animation:e-box-i 2.8s var(--e-entrance) both infinite}@keyframes e-box-i{0%{transform-origin:0;transform:scaleX(0)}16.1%{transform-origin:0;transform:scaleX(1)}17%{transform-origin:100%;animation-timing-function:var(--e-exit);transform:scaleX(1)}25.9%,to{transform-origin:100%;transform:scaleX(0)}}@keyframes e-box-t{0%,16.5%{opacity:0}25.9%,90%{opacity:1;animation-timing-function:var(--e-exit)}95%,to{opacity:0}}.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);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);content:attr(data-txt) / "";opacity:.85;clip-path:inset(0 0 100%);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)*60ms) both infinite}@keyframes e-fz{0%{opacity:0;filter:blur(9px);transform:translateY(7px)}13.5%,72%{opacity:1;filter:blur();animation-timing-function:var(--e-exit);transform:none}77.8%,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:e-au1 7s var(--e-move) infinite alternate}.wui-motion-demo[data-on] .e-aurbg i:nth-child(2){animation:e-au2 9s var(--e-move) infinite alternate}.wui-motion-demo[data-on] .e-aurbg i:nth-child(3){animation:e-au3 8s var(--e-move) infinite alternate}@keyframes e-au1{to{transform:translate(35px,20px)scale(1.12)}}@keyframes e-au2{to{transform:translate(-30px,25px)scale(.92)}}@keyframes e-au3{to{transform:translate(25px,-25px)scale(1.1)}}.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:4.8s linear infinite e-retro}@keyframes e-retro{0%{transform:rotateX(62deg)translateY(0)}to{transform:rotateX(62deg)translateY(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-entrance) 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:e-lamp 3.4s var(--e-move) infinite alternate}@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) both 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{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;top:0;left:0;transform:translate(112px,30px)}.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:e-spot 4s var(--e-move) infinite alternate}@keyframes e-spot{0%{transform:translate(22px,12px)}to{transform:translate(164px,62px)}}.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:e-tilt 5s var(--e-move) infinite alternate}@keyframes e-tilt{0%{transform:rotateX(4deg)rotateY(-6deg)}to{transform:rotateX(-3deg)rotateY(6deg)}}.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 .rim{filter:blur(20px);opacity:.6;contain:paint;border-radius:26px;position:absolute;inset:-14px;overflow:hidden;container-type:size}.wui-motion-demo .e-glow .rim:before{content:"";aspect-ratio:1;background:conic-gradient(var(--cyan),var(--indigo),var(--pink),var(--cyan));width:calc(150cqmax + 24px);position:absolute;top:50%;left:50%;translate:-50% -50%}.wui-motion-demo[data-on] .e-glow .rim:before{animation:5s linear infinite e-glow}@keyframes e-glow{to{rotate:1turn}}.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}.wui-motion-demo[data-on] .e-stack:hover i{animation-play-state:paused}@keyframes e-stack{0%,20%{opacity:1;z-index:3;transform:translateY(0)scale(1)}20.1%{opacity:1;z-index:4;animation-timing-function:var(--e-exit);transform:translateY(0)scale(1)}25.7%{opacity:0;z-index:4;transform:translateY(-46px)scale(1)}25.8%{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:-1px;transform:translate(93px);box-shadow:0 0 0 1px #00000026}.wui-motion-demo[data-on] .e-cmp .b{animation:e-cmp-b 4s var(--e-move) infinite alternate}.wui-motion-demo[data-on] .e-cmp .h{animation:e-cmp-h 4s var(--e-move) infinite alternate}@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%{transform:translate(40.9px)}to{transform:translate(160px)}}.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{transform-origin:bottom;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);height:74px;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:e-pb 3.6s var(--e-move) infinite alternate}@keyframes e-pb{0%{transform:scaleY(.25)}to{transform:none}}.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);opacity:0}.wui-motion-demo[data-on] .e-px i{animation:e-px 3.4s steps(1) var(--d) both infinite}@keyframes e-px{0%,10%{opacity:1}55%,to{opacity:0}}.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:e-sc 4s var(--e-move) infinite alternate}@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{isolation:isolate;background:var(--surface);border:1px solid var(--line-2);border-radius:9px;position:relative}.wui-motion-demo .e-bento i:after{content:"";z-index:-1;border-radius:inherit;background:color-mix(in oklab,var(--cyan) 13%,var(--surface));box-shadow:var(--shadow-2);opacity:0;position:absolute;inset:-1px}.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)*50ms) both infinite}.wui-motion-demo[data-on] .e-bento i:after{animation:e-bento-g 4s var(--e-entrance) calc(var(--i)*50ms) both infinite}@keyframes e-bento{0%{transform:none}6%,12%{animation-timing-function:var(--e-exit);transform:translateY(-4px)}24%,to{transform:none}}@keyframes e-bento-g{0%{opacity:0}6%,12%{opacity:1;animation-timing-function:var(--e-exit)}24%,to{opacity:0}}.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.3)}34%{transform:scale(1.1)}}.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;transform:translateY(-4.4em)}.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) both infinite}.wui-motion-demo[data-on] .e-tick .c2 b{animation-delay:.1s}.wui-motion-demo[data-on] .e-tick .c3 b{animation-delay:.2s}@keyframes e-tick{0%{opacity:1;transform:translateY(0)}29.2%,88%{opacity:1;animation-timing-function:var(--e-exit);transform:translateY(-4.4em)}94%{opacity:0;animation-timing-function:step-end;transform:translateY(-4.4em)}95%{opacity:0;animation-timing-function:var(--e-entrance);transform:translateY(0)}to{opacity:1;transform:translateY(0)}}.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 var(--e-entrance) calc(var(--i)*.13s) infinite}@keyframes e-av{0%{z-index:0;transform:none}.5%{z-index:2}4.4%,12%{z-index:2;animation-timing-function:var(--e-exit);transform:translateY(-4px)scale(1.05)}16.4%{z-index:2;transform:none}16.5%,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%{transform:translateY(-100%)}to{transform:translateY(294%)}}.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;transform-origin:0;width:100%;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%{transform:scaleX(0)}85%,to{transform:scaleX(1)}}.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(-40px);opacity:0;border-radius:999px;position:absolute}.wui-motion-demo[data-on] .e-cs i{animation:e-cs 1.6s var(--e-entrance) infinite}@keyframes e-cs{0%{transform:rotate(var(--r)) translateY(-20px) scale(.6);opacity:1}28%,to{transform:rotate(var(--r)) translateY(-40px);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;container-type:size}.wui-motion-demo .e-fp .dot{background:var(--cyan);border-radius:999px;width:8px;height:8px;margin:-4px;position:absolute;top:0;left:0;transform:translate(20cqw,30cqh)}.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:0;left:0;transform:translate(20cqw,30cqh)}.wui-motion-demo[data-on] .e-fp .dot{animation:e-fp 4s var(--e-move) infinite alternate}.wui-motion-demo[data-on] .e-fp .ring{animation:e-fp 4s var(--e-move) .12s infinite alternate}@keyframes e-fp{0%{transform:translate(18cqw,28cqh)}50%{transform:translate(74cqw,66cqh)}to{transform:translate(56cqw,24cqh)}}.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-entrance) var(--d) both infinite}@keyframes e-conf{0%{transform:rotate(var(--r)) translateY(0) rotate(0);opacity:1}60%{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;transform:translateY(100%)}.wui-motion-demo[data-on] .e-sub .s1{animation:e-sub-a 3.6s var(--e-move) infinite}.wui-motion-demo[data-on] .e-sub .s2{animation:e-sub-b 3.6s var(--e-move) infinite}@keyframes e-sub-a{0%,40%{transform:none}46.9%,90%{transform:translateY(-100%)}96.9%,to{transform:none}}@keyframes e-sub-b{0%,40%{transform:translateY(100%)}46.9%,90%{transform:none}96.9%,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;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) both 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 both infinite}.wui-motion-demo[data-on] .e-ph .b{animation:e-ph 3s var(--e-entrance) .12s both infinite}.wui-motion-demo[data-on] .e-ph .c{animation:e-ph 3s var(--e-entrance) .24s both infinite}@keyframes e-ph{0%{opacity:0;transform:translateY(8px)}11.7%,88%{opacity:1;animation-timing-function:var(--e-exit);transform:none}96%,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{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)*60ms) both infinite}@keyframes e-ft{0%{opacity:0;transform:translate(-8px)}10%,84%{opacity:1;animation-timing-function:step-end;transform:none}85%,to{opacity:0;transform:none}}.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 2.4s var(--e-entrance) calc(var(--i)*30ms) both infinite}@keyframes e-rsw{0%{opacity:0;transform:translateY(4px)}10.4%,90%{opacity:1;animation-timing-function:var(--e-exit);transform:none}96.25%,to{opacity:0;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)*15ms) both infinite}@keyframes e-sortw{0%{background:var(--surface)}10.4%{background:color-mix(in oklab,var(--cyan) 17%,var(--surface));animation-timing-function:var(--e-exit)}29.2%,to{background: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) both 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)}27.3%,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;position:relative}.wui-motion-demo .e-kb .drag:after{content:"";border-radius:inherit;box-shadow:var(--shadow-2);opacity:0;position:absolute;inset:-1px}.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 .drag:after{animation:e-kb-sh 3s var(--e-entrance) infinite}.wui-motion-demo[data-on] .e-kb .slot{animation:e-kb-s 3s var(--e-move) infinite}@keyframes e-kb{0%,10%{animation-timing-function:var(--e-entrance);transform:none}15%{transform:scale(1.03)}30%,60%{transform:translate(96px,-6px)rotate(3deg)scale(1.03)}75%{transform:scale(1.03)}83.3%,to{transform:none}}@keyframes e-kb-sh{0%,10%{opacity:0}15%,75%{opacity:1}83.3%,to{opacity:0}}@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);border-bottom-left-radius:4px;width:11px;height:16px;position:absolute;top:-6px;left:5px}.wui-motion-demo .e-tree .br b{font-weight:400}.wui-motion-demo[data-on] .e-tree .ln{animation:e-tree-l 3s var(--e-entrance) calc(var(--i)*30ms) both infinite}.wui-motion-demo[data-on] .e-tree .br b{animation:e-tree-b 3s var(--e-entrance) calc(var(--i)*30ms + .12s) both infinite}@keyframes e-tree-l{0%{clip-path:inset(0 100% 0 0)}6.7%,88%{clip-path:inset(0);animation-timing-function:var(--e-exit)}93%,to{clip-path:inset(0 100% 0 0)}}@keyframes e-tree-b{0%{opacity:0;transform:translate(-5px)}8.3%,88%{opacity:1;animation-timing-function:var(--e-exit);transform:none}93%,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;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) both infinite}@keyframes e-heat{0%{opacity:0;transform:scale(.6)}25%,85%{opacity:1;animation-timing-function:var(--e-exit);transform:none}93.9%,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)*40ms) both infinite}@keyframes e-bar{0%{transform:scaleY(0)}26.9%,88%{animation-timing-function:var(--e-exit);transform:scaleY(1)}97.6%,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:0}.wui-motion-demo .e-lt .ar{fill:color-mix(in oklab,var(--cyan) 18%,transparent)}.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:100%;opacity:0}.wui-motion-demo[data-on] .e-lt .ln{animation:e-lt 3.2s var(--e-entrance) both infinite}.wui-motion-demo[data-on] .e-lt .ar{animation:e-lt-a 3.2s var(--e-entrance) both infinite}.wui-motion-demo[data-on] .e-lt .dot{animation:e-lt-d 3.2s var(--e-entrance) both infinite}@keyframes e-lt{0%{stroke-dashoffset:260px}21.9%,88%{stroke-dashoffset:0;animation-timing-function:var(--e-exit)}95.8%,to{stroke-dashoffset:260px}}@keyframes e-lt-a{0%,7.8%{opacity:0}21.9%,88%{opacity:1;animation-timing-function:var(--e-exit)}95.8%,to{opacity:0}}@keyframes e-lt-d{0%{offset-distance:0%;opacity:1}12%{opacity:1}21.9%{offset-distance:100%;opacity:0}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{--wm-ang:194deg;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-entrance) both infinite}@keyframes e-gauge{0%{--wm-ang:0deg}25%,88%{--wm-ang:194deg;animation-timing-function:var(--e-exit)}96.9%,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) both infinite}@keyframes e-fan{0%{opacity:0;transform:rotate(-40deg)scale(.6)}23.3%,82%{opacity:1;animation-timing-function:var(--e-exit);transform:none}90.3%,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-entrance) both infinite}@keyframes e-rad{0%{opacity:0;transform:scale(.9)}23.3%,88%{opacity:1;animation-timing-function:var(--e-exit);transform:none}96.3%,to{opacity:0;transform:scale(.9)}}.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) both infinite}@keyframes e-cdl{0%{opacity:0;transform:scaleY(0)}26.9%,88%{opacity:1;animation-timing-function:var(--e-exit);transform:scaleY(1)}97.6%,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) both infinite}@keyframes e-fn{0%{opacity:0;transform:scaleY(0)}25%,88%{opacity:1;animation-timing-function:var(--e-exit);transform:scaleY(1)}96.9%,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:224px;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 both 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(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:conic-gradient(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:e-orb2-a 3s linear infinite,e-orb2-b 2.2s var(--e-move) infinite alternate}.wui-motion-demo[data-on] .e-orb2 .halo{animation:e-orb2-a 4.5s linear infinite reverse,e-orb2-b 2.6s var(--e-move) infinite alternate}@keyframes e-orb2-a{to{rotate:1turn}}@keyframes e-orb2-b{0%{scale:.88}to{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}.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[data-on] .e-tf .fill{animation:e-tf 3.4s var(--e-move) both infinite}.wui-motion-demo[data-on] .e-tf .ok{animation:e-tf-ok 3.4s var(--e-entrance) both infinite}@keyframes e-tf{0%{transform:scaleX(0)}45%,88%{animation-timing-function:var(--e-exit);transform:scaleX(1)}92.4%,to{transform:scaleX(0)}}@keyframes e-tf-ok{0%,45%{opacity:0;transform:translateY(6px)}55.3%,88%{opacity:1;animation-timing-function:var(--e-exit);transform:none}92.4%,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;transform:translate(0)}12%{opacity:1}72%{opacity:1;transform:translate(38px)}80%,to{opacity:0;transform:translate(38px)}}@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;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) both infinite}@keyframes e-log{0%{opacity:0;transform:translateY(8px)}8.75%,90%{opacity:1;animation-timing-function:var(--e-exit);transform:none}96.25%,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}.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) both infinite}.wui-motion-demo[data-on] .e-pc b{animation:e-pc-b 3.6s var(--e-entrance) calc(var(--i)*.34s) both infinite}@keyframes e-pc{0%{opacity:0;transform:scale(.6)}6.9%,88%{opacity:1;animation-timing-function:var(--e-exit);transform:none}92.2%,to{opacity:0;transform:scale(.6)}}@keyframes e-pc-b{0%{opacity:.4}6.9%,88%{opacity:1;animation-timing-function:var(--e-exit)}92.2%,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);transform:translateX(calc((var(--i) - 1.5) * 42px)) rotate(calc((var(--i) - 1.5) * 5deg));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)*60ms) both infinite}@keyframes e-sf2{0%{opacity:0;transform:translate(0)rotate(0)}13.2%,84%{transform:translateX(calc((var(--i) - 1.5) * 42px)) rotate(calc((var(--i) - 1.5) * 5deg));opacity:1;animation-timing-function:var(--e-exit)}91.4%,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:#d42a2d;border-radius:999px;width:92%;height:100%;display:block}.wui-motion-demo[data-on] .e-cw .bar i{animation:e-cw 3.6s var(--e-entrance) both infinite}@keyframes e-cw{0%{clip-path:inset(0 100% 0 0 round 999px);background:var(--cyan)}13%{clip-path:inset(0 33% 0 0 round 999px);background:var(--cyan)}17.3%{clip-path:inset(0 11% 0 0 round 999px);background:var(--orange)}19.4%,88%{clip-path:inset(0 round 999px);animation-timing-function:var(--e-exit);background:#d42a2d}95%,to{clip-path:inset(0 100% 0 0 round 999px);background:#d42a2d}}.wui-motion-demo .e-otp{gap:7px;display:flex}.wui-motion-demo .e-otp i{border:1.5px solid var(--cyan);background:var(--surface);width:34px;height:42px;color:var(--ink);border-radius:9px;place-items:center;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)*40ms) both infinite}@keyframes e-otp{0%{color:#0000;border-color:var(--line-2);box-shadow:0 0 #0000}4.7%{color:#0000;border-color:var(--cyan);box-shadow:0 0 0 3px color-mix(in oklab,var(--cyan) 30%,transparent)}9.4%,84%{color:var(--ink);border-color:var(--cyan);animation-timing-function:var(--e-exit);box-shadow:0 0 #0000}88.7%,to{color:#0000;border-color:var(--line-2);box-shadow:0 0 #0000}}.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(--cyan);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);opacity:0}.wui-motion-demo .e-str .f{color:var(--ink-2);opacity:0}.wui-motion-demo .e-str .s{color:var(--gr-t)}.wui-motion-demo[data-on] .e-str i{animation:e-str 3.2s var(--e-entrance) calc(var(--i)*30ms) both infinite}.wui-motion-demo[data-on] .e-str .w{animation:3.2s step-end infinite both e-str-w}.wui-motion-demo[data-on] .e-str .f{animation:3.2s step-end infinite both e-str-f}.wui-motion-demo[data-on] .e-str .s{animation:3.2s step-end infinite both e-str-s}@keyframes e-str{0%{background:var(--line-2)}4.7%,86%{background:var(--cyan);animation-timing-function:var(--e-exit)}90.7%,to{background:var(--line-2)}}@keyframes e-str-w{0%{opacity:1}3.6%,90.7%{opacity:0}91%,to{opacity:1}}@keyframes e-str-f{0%{opacity:0}3.6%{opacity:1}7.2%,to{opacity:0}}@keyframes e-str-s{0%,3.6%{opacity:0}7.2%,90.7%{opacity:1}91%,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 .e-dr .sel{background:var(--cyan)}.wui-motion-demo[data-on] .e-dr .sel{animation:e-dr 3s var(--e-entrance) calc((var(--i) - 8)*20ms) both infinite}@keyframes e-dr{0%{background:var(--surface-2);transform:none}5%{background:var(--cyan);transform:scale(1.05)}7.5%,86%{background:var(--cyan);animation-timing-function:var(--e-exit);transform:none}91%,to{background:var(--surface-2);transform:none}}.wui-motion-demo .e-sc2{color:var(--cyan);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)*40ms) both infinite}@keyframes e-sc2{0%{color:var(--line-2);transform:none}4%{color:var(--cyan);transform:scale(1.15)rotate(-8deg)}8.3%,84%{color:var(--cyan);animation-timing-function:var(--e-exit);transform:none}89%,to{color:var(--line-2);transform:none}}.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);transform-origin:0;border-radius:999px;width:1px;height:2.5px;margin-left:2px;transform:scaleX(52)}.wui-motion-demo[data-on] .e-ink .bar{animation:e-ink 3.6s var(--e-move) infinite}@keyframes e-ink{0%,25%{transform:translate(0)scaleX(52)}31.9%,58%{transform:translate(68px)scaleX(44)}64.9%,91%{transform:translate(128px)scaleX(28)}97.9%,to{transform:translate(0)scaleX(52)}}.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-entrance) calc(var(--i) * -400ms) both infinite}@keyframes e-tst{0%{opacity:0;transform:translateY(100%)}11%,90%{opacity:1;animation-timing-function:var(--e-exit);transform:none}95%,to{opacity:0;transform:translateY(100%)}}.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-entrance) both infinite}@keyframes e-sh{0%{transform:translateY(100%)}12.5%,30%{transform:translateY(46%)}42.5%,86%{animation-timing-function:var(--e-exit);transform:translateY(0)}96%,to{transform:translateY(100%)}}.wui-motion-demo .e-tt{justify-items:center;gap:8px;display:grid}.wui-motion-demo .e-tt .bub{background:var(--ink);color:var(--page);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) both infinite}@keyframes e-tt{0%,15%{opacity:0;transform:translateY(2px)}19.4%,84%{opacity:1;animation-timing-function:var(--e-exit);transform:none}86.4%,to{opacity:0;transform:translateY(2px)}}.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}.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) both infinite}.wui-motion-demo[data-on] .e-al:before{animation:e-al-b 3.2s var(--e-entrance) both infinite}@keyframes e-al{0%{opacity:0;transform:translate(-8px)}11%,90%{opacity:1;animation-timing-function:var(--e-exit);transform:none}95%,to{opacity:0;transform:translate(-8px)}}@keyframes e-al-b{0%,4%{transform:scaleY(0)}14%,to{transform:scaleY(1)}}.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-entrance) both infinite}.wui-motion-demo[data-on] .e-ptr .spin{animation:3.4s linear infinite both e-ptr-s}@keyframes e-ptr{0%{transform:translateY(0)}22%,48%{animation-timing-function:var(--e-spring);transform:translateY(38px)}61.2%,to{transform:translateY(0)}}@keyframes e-ptr-s{0%{opacity:0;transform:rotate(0)}18%{opacity:1}48%{opacity:1;transform:rotate(720deg)}52.4%,to{opacity:0;transform:rotate(800deg)}}.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-entrance) both infinite}.wui-motion-demo[data-on] .e-eb i{animation:e-eb 2s var(--e-entrance) var(--d) both infinite}@keyframes e-eb-b{0%{transform:none}6%{animation-timing-function:var(--e-spring);transform:scale(1.22)}28.5%,to{transform:none}}@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-entrance) both infinite}.wui-motion-demo[data-on] .e-trf .chip i{animation:e-trf-i 2.8s var(--e-spring) both infinite}@keyframes e-trf{0%{opacity:0;transform:translateY(8px)}12.5%,88%{opacity:1;animation-timing-function:var(--e-exit);transform:none}93.4%,to{opacity:0;transform:none}}@keyframes e-trf-i{0%,5%{transform:translateY(5px)}21.4%,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;box-shadow:0 2px 0 var(--line-2);color:var(--ink-2);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) both infinite}@keyframes e-kp{0%{box-shadow:0 2px 0 var(--line-2);transform:none}3.6%,9%{box-shadow:0 0 0 var(--line-2);background:color-mix(in oklab,var(--cyan) 14%,var(--surface));transform:translateY(2px)}15.8%,to{box-shadow:0 2px 0 var(--line-2);transform:none}}.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{opacity: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 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) both infinite}.wui-motion-demo[data-on] .e-ks .rl{animation:e-ks-b 3.4s var(--e-entrance) both infinite}@keyframes e-ks-a{0%,42%{opacity:1;filter:blur()}49.4%,92%{opacity:0;filter:blur(4px)}96.4%,to{opacity:1;filter:blur()}}@keyframes e-ks-b{0%,42%{opacity:0;filter:blur(4px)}49.4%,92%{opacity:1;filter:blur();animation-timing-function:var(--e-exit)}96.4%,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 var(--e-move) infinite alternate,e-ef-in 3.2s var(--e-entrance) both infinite}.wui-motion-demo[data-on] .e-ef .t{animation:e-ef-in 3.2s var(--e-entrance) 80ms both infinite}.wui-motion-demo[data-on] .e-ef .s{animation:e-ef-in 3.2s var(--e-entrance) .16s both infinite}.wui-motion-demo[data-on] .e-ef .btn{animation:e-ef-in 3.2s var(--e-entrance) .24s both infinite}@keyframes e-ef-f{0%{transform:translateY(-3px)}to{transform:translateY(3px)}}@keyframes e-ef-in{0%{opacity:0}11%,90%{opacity:1;animation-timing-function:var(--e-exit)}94.7%,to{opacity:0}}.wui-motion-demo .e-stf{align-items:center;width:190px;display:flex}.wui-motion-demo .e-stf .n{background:var(--cyan);border:1.5px solid var(--cyan);width:24px;height:24px;color:var(--cyan-fg);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}.wui-motion-demo[data-on] .e-stf .n{animation:e-stf-n 4s var(--e-overshoot) calc(var(--i)*.6s) both infinite}.wui-motion-demo[data-on] .e-stf .ln b{animation:e-stf-l 4s var(--e-move) calc(.25s + var(--i)*.6s) both infinite}@keyframes e-stf-n{0%{background:var(--surface);border-color:var(--line-2);color:var(--ink-3);transform:scale(.92)}6.25%,88%{background:var(--cyan);border-color:var(--cyan);color:var(--cyan-fg);animation-timing-function:var(--e-exit);transform:none}91.75%,to{background:var(--surface);border-color:var(--line-2);color:var(--ink-3);transform:none}}@keyframes e-stf-l{0%{transform:scaleX(0)}8.75%,88%{animation-timing-function:var(--e-exit);transform:scaleX(1)}91.75%,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}.wui-motion-demo .e-ar .ln{fill:none;stroke:var(--cyan);stroke-width:2.4px;stroke-linecap:round;stroke-dasharray:230;stroke-dashoffset:0}.wui-motion-demo[data-on] .e-ar .ln{animation:e-ar-l 3.4s var(--e-entrance) both infinite}.wui-motion-demo[data-on] .e-ar .fill{animation:e-ar-f 3.4s var(--e-entrance) .25s both infinite}@keyframes e-ar-l{0%{stroke-dashoffset:230px}20.6%,88%{stroke-dashoffset:0;animation-timing-function:var(--e-exit)}95.4%,to{stroke-dashoffset:230px}}@keyframes e-ar-f{0%{transform:scaleY(0)}20.6%,84%{animation-timing-function:var(--e-exit);transform:scaleY(1)}91.4%,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}.wui-motion-demo[data-on] .e-bub i{animation:e-bub 3.2s var(--e-entrance) calc(var(--i)*60ms) both infinite}@keyframes e-bub{0%{opacity:0;transform:scale(.6)}21.9%,88%{opacity:.68;animation-timing-function:var(--e-exit);transform:none}95.7%,to{opacity:0;transform:scale(.6)}}.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}.wui-motion-demo[data-on] .e-stk i{animation:e-stk 3.4s var(--e-entrance) calc(var(--i)*45ms) both infinite}@keyframes e-stk{0%{transform:scaleY(0)}20.6%,88%{animation-timing-function:var(--e-exit);transform:scaleY(1)}95.4%,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:0}.wui-motion-demo .e-sp2 .end{fill:var(--cyan);transform-box:fill-box;transform-origin:50%}.wui-motion-demo[data-on] .e-sp2 .ln{animation:e-sp2-l 2.8s var(--e-entrance) both infinite}.wui-motion-demo[data-on] .e-sp2 .end{animation:e-sp2-e 2.8s var(--e-entrance) both infinite}@keyframes e-sp2-l{0%{stroke-dashoffset:120px}14.3%,88%{stroke-dashoffset:0;animation-timing-function:var(--e-exit)}93.4%,to{stroke-dashoffset:120px}}@keyframes e-sp2-e{0%,12.5%{opacity:0;transform:scale(.6)}21.4%,88%{opacity:1;animation-timing-function:var(--e-exit);transform:none}93.4%,to{opacity:0;transform:scale(.6)}}.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:4.4s steps(4,end) infinite alternate e-ch2-x}.wui-motion-demo[data-on] .e-ch2 .dot{animation:4.4s linear infinite alternate e-ch2-d}.wui-motion-demo[data-on] .e-ch2 .vals u{animation:4.4s step-end infinite alternate e-ch2-v}@keyframes e-ch2-x{0%{translate:0}to{translate:120px}}@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}22.2%,74%{opacity:.16}78.2%,to{opacity:1}}@keyframes e-lf2-up{0%,18%{stroke-width:2.2px}22.2%,74%{stroke-width:3.2px}78.2%,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}.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}.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);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)*40ms) both infinite}.wui-motion-demo[data-on] .e-ax .bars b{animation:e-ax-b 3.8s var(--e-entrance) calc(.25s + var(--i)*40ms) both infinite}.wui-motion-demo[data-on] .e-ax .lbl u{animation:e-ax-l 3.8s var(--e-entrance) calc(.7s + var(--i)*30ms) both infinite}@keyframes e-ax-g{0%{transform:scaleX(0)}11.8%,88%{animation-timing-function:var(--e-exit);transform:scaleX(1)}94.6%,to{transform:scaleX(0)}}@keyframes e-ax-b{0%{transform:scaleY(0)}18.4%,88%{animation-timing-function:var(--e-exit);transform:scaleY(1)}94.6%,to{transform:scaleY(0)}}@keyframes e-ax-l{0%{opacity:0}6.6%,88%{opacity:1;animation-timing-function:var(--e-exit)}92%,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:e-lv-p 1.6s var(--e-move) infinite}@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}.wui-motion-demo .e-th .over{background:var(--orange)}.wui-motion-demo[data-on] .e-th b{animation:e-th 3.4s var(--e-entrance) calc(var(--i)*40ms) both infinite}.wui-motion-demo[data-on] .e-th .over{animation:e-th 3.4s var(--e-entrance) calc(var(--i)*40ms) both infinite, e-th-o 3.4s var(--e-entrance) calc(.7s + var(--i)*40ms) both infinite}@keyframes e-th{0%{transform:scaleY(0)}20.6%,88%{animation-timing-function:var(--e-exit);transform:scaleY(1)}95.4%,to{transform:scaleY(0)}}@keyframes e-th-o{0%{background:var(--cyan)}7.4%,to{background:var(--orange)}}.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{--wm-ang:var(--to);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) both infinite}@keyframes e-rg{0%{--wm-ang:0deg}21.9%,88%{--wm-ang:var(--to);animation-timing-function:var(--e-exit)}95.8%,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%,7.5%{transform:translateY(0)}25%,to{transform:translateY(-52px)}}@keyframes e-br-down{0%,7.5%{transform:translateY(0)}25%,to{transform:translateY(52px)}}@keyframes e-br-w{0%{transform:scaleX(var(--f))}17.5%,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:.85;border-radius:999px;width:8px;height:8px;margin:-4px;position:absolute}.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:0;fill:none;opacity:.7}.wui-motion-demo[data-on] .e-sct i{animation:e-sct 3.4s var(--e-entrance) calc(var(--i)*30ms) both infinite}.wui-motion-demo[data-on] .e-sct .fit{animation:e-sct-f 3.4s var(--e-entrance) .45s both infinite}@keyframes e-sct{0%{opacity:0;transform:scale(.6)}20.6%,88%{opacity:.85;animation-timing-function:var(--e-exit);transform:none}95.4%,to{opacity:0;transform:scale(.6)}}@keyframes e-sct-f{0%{stroke-dashoffset:1px}20.6%,80%{stroke-dashoffset:0;animation-timing-function:var(--e-exit)}87.4%,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;container-type:inline-size}.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);clip-path:inset(0 10% 0 56%);width:100%;position:absolute;top:0;bottom:0;left:0}.wui-motion-demo .e-bru .ed{background:var(--cyan);width:2px;margin-left:-1px;position:absolute;top:0;bottom:0;left:0}.wui-motion-demo .e-bru .ea{transform:translate(56cqw)}.wui-motion-demo .e-bru .eb{transform:translate(90cqw)}.wui-motion-demo .e-bru .ed b{background:var(--cyan);border-radius:3px;width:5px;height:18px;margin:-9px 0 0 -2.5px;position:absolute;top:50%;left:50%}.wui-motion-demo[data-on] .e-bru .sel{animation:e-bru 4.4s var(--e-move) infinite alternate}.wui-motion-demo[data-on] .e-bru .ea{animation:e-bru-a 4.4s var(--e-move) infinite alternate}.wui-motion-demo[data-on] .e-bru .eb{animation:e-bru-b 4.4s var(--e-move) infinite alternate}@keyframes e-bru{0%{clip-path:inset(0 58% 0 12%)}50%{clip-path:inset(0 16% 0 38%)}to{clip-path:inset(0 10% 0 56%)}}@keyframes e-bru-a{0%{transform:translate(12cqw)}50%{transform:translate(38cqw)}to{transform:translate(56cqw)}}@keyframes e-bru-b{0%{transform:translate(42cqw)}50%{transform:translate(84cqw)}to{transform:translate(90cqw)}}.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}.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) both infinite}@keyframes e-wf{0%{opacity:0;transform:scaleY(0)}19.4%,88%{opacity:1;animation-timing-function:var(--e-exit);transform:scaleY(1)}94.9%,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{--wm-ang:245deg;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;transform:translateY(-4em)}.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:3.2s linear infinite both e-dc-r}.wui-motion-demo[data-on] .e-dc .num:after{animation:3.2s steps(4,end) infinite both e-dc-n}@keyframes e-dc-r{0%{--wm-ang:0deg}21.9%,92%{--wm-ang:245deg}to{--wm-ang:0deg}}@keyframes e-dc-n{0%{transform:translateY(0)}21.9%,92%{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) both infinite}@keyframes e-ea{0%{transform-origin:-100%;opacity:0;transform:translate(-140px)rotateY(30deg)scale(.9)}16%,84%{transform-origin:1800px;opacity:1;animation-timing-function:var(--e-exit);transform:translate(0)rotateY(0)scale(1)}93%,to{transform-origin:-100%;opacity:0;transform:translate(-40px)rotateY(10deg)scale(.96)}}.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) both infinite}@keyframes e-sw2{0%{opacity:0;transform:rotate(-180deg)scale(.9)}19%,84%{opacity:1;animation-timing-function:var(--e-exit);transform:none}94%,to{opacity:0;transform:rotate(-30deg)scale(.96)}}.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) both infinite}@keyframes e-sl2{0%{opacity:0;transform:translateZ(-760px)rotateY(90deg)}7%{opacity:1;transform:translateZ(-140px)rotateY(87deg)}12%{opacity:1;transform:translateZ(-120px)rotateY(86deg)}19%,84%{opacity:1;animation-timing-function:var(--e-exit);transform:translateZ(0)rotateY(0)}92%,to{opacity:0;transform:translateZ(-200px)rotateY(20deg)}}.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) both infinite}@keyframes e-pf{0%{filter:blur(4px);opacity:0;transform:scale(1.04)}13.5%,84%{filter:blur();opacity:1;animation-timing-function:var(--e-exit);transform:none}89.8%,to{filter:blur(4px);opacity:0;transform:scale(1.04)}}.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) both infinite}@keyframes e-rb{0%{filter:blur(6px);opacity:0;transform:translate(-48px)rotate(-360deg)}16.1%,84%{filter:blur();opacity:1;animation-timing-function:var(--e-exit);transform:none}92.9%,to{filter:blur(6px);opacity:0;transform:translate(-48px)rotate(-360deg)}}.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) both infinite}@keyframes e-fl{0%{opacity:0;transform:rotateY(22deg)rotateX(34deg)translate(220px,-220px)skew(-32deg,8deg)}15%,84%{opacity:1;animation-timing-function:var(--e-exit);transform:none}92.3%,to{opacity:0;transform:rotateY(8deg)rotateX(12deg)translate(60px,-60px)skew(-8deg,2deg)}}.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 both e-fs}@keyframes e-fs{0%{animation-timing-function:var(--e-exit);transform:scale(1)rotateX(0)}6.7%{animation-timing-function:linear;transform:scale(1.15)rotateX(-90deg)}10%{animation-timing-function:var(--e-entrance);transform:scale(1.15)rotateX(-270deg)}16.7%,to{transform:scale(1)rotateX(-360deg)}}.wui-motion-demo .e-te{color:var(--ink);letter-spacing:.14em;transform-origin:0;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) both infinite}@keyframes e-te{0%{opacity:0;transform:scaleX(.9)}15%,88%{opacity:1;animation-timing-function:var(--e-exit);transform:none}96.3%,to{opacity:0;transform:scaleX(.96)}}.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%{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);animation-timing-function:var(--e-exit);transform:translate(-8px,8px)}92%,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)}}.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;position:relative}.wui-motion-demo .e-ip:after{content:"";border-radius:inherit;opacity:0;position:absolute;inset:0;box-shadow:inset 0 16px 14px -10px #0a111666}.wui-motion-demo[data-on] .e-ip:after{animation:e-ip 2.8s var(--e-entrance) both infinite}@keyframes e-ip{0%,20%{opacity:0}22.9%,70%{opacity:1;animation-timing-function:var(--e-exit)}75.4%,to{opacity:0}}.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%;transform:scaleX(.7)}.wui-motion-demo[data-on] .e-fsh{animation:e-fsh-l 2.8s var(--e-entrance) both infinite}.wui-motion-demo[data-on] .e-fsh:after{animation:e-fsh-s 2.8s var(--e-entrance) both infinite}@keyframes e-fsh-l{0%,20%{transform:none}25.4%,76%{animation-timing-function:var(--e-exit);transform:translateY(-4px)}81.4%,to{transform:none}}@keyframes e-fsh-s{0%,20%{opacity:0;transform:scaleX(.7)}25.4%,76%{opacity:1;animation-timing-function:var(--e-exit);transform:none}81.4%,to{opacity:0;transform:scaleX(.7)}}.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%);transform-origin:100% 0;border-top-right-radius:9px;width:28px;height:28px;position:absolute;top:0;right:0;transform:scale(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%,20%{transform:scale(0)}28.9%,82%{animation-timing-function:var(--e-exit);transform:none}87.4%,to{transform:scale(0)}}.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-entrance) infinite}@keyframes e-sht{0%,20%{transform:scaleY(0)}29.6%,80%{animation-timing-function:var(--e-exit);transform:scaleY(1)}85.8%,to{transform:scaleY(0)}}.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-entrance) infinite}@keyframes e-if{0%,20%{transform:scale(0)}29.6%,80%{animation-timing-function:var(--e-exit);transform:scale(2.1)}85.8%,to{transform:scale(0)}}.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%,20%{background:var(--cyan);color:var(--cyan-fg);box-shadow:inset 0 0 0 0 var(--cyan)}25%,75%{color:var(--acc);box-shadow:inset 0 0 0 2px var(--cyan);animation-timing-function:var(--e-exit);background:0 0}80%,to{background:var(--cyan);color:var(--cyan-fg);box-shadow:inset 0 0 0 0 var(--cyan)}}.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) both infinite}@keyframes e-tr{0%,20%{opacity:0;transform:scale(1.06)}26.25%,80%{opacity:1;animation-timing-function:var(--e-exit);transform:none}86.25%,to{opacity:0;transform:scale(1.06)}}.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-entrance) 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 2.4s var(--e-entrance) both infinite}@keyframes e-bb{0%{transform:none}14.6%,80%{animation-timing-function:var(--e-exit);transform:translateY(-4px)}86.25%,to{transform:none}}.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:e-ws 1.6s var(--e-move) infinite}@keyframes e-ws{0%,37.5%,to{transform:skew(0deg)}6%{transform:skew(-6deg)}12%{transform:skew(4deg)}18%{transform:skew(-2.5deg)}24%{transform:skew(1.5deg)}30%{transform:skew(-.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 both e-bo}@keyframes e-bo{0%{transform:none}3.3%{transform:translate(4px)}6.7%{transform:translate(-4px)}10%{transform:translate(3px)}13.3%{transform:translate(-2px)}15%{transform:translate(1px)}16.7%,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:e-jl 2.4s var(--e-move) infinite}@keyframes e-jl{0%,40%,to{transform:scale(1)}8%{transform:scale(1.08,.92)}16%{transform:scale(.96,1.04)}24%{transform:scale(1.02,.98)}32%{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) both infinite}@keyframes e-fil{0%{opacity:0;transform:translateY(16px)scale(.96)}22%,62%{opacity:1;transform:none}86%,to{opacity:0;transform:none}}.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;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 .hd:after{content:"";border-bottom:1px solid var(--line);opacity:0;pointer-events:none;position:absolute;inset:0;box-shadow:0 4px 10px -6px #00000059}.wui-motion-demo .e-shd .logo{background:var(--cyan);transform-origin:0;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 .hd>b{animation:e-shd-c 4s var(--e-move) infinite alternate}.wui-motion-demo[data-on] .e-shd .hd:after{animation:e-shd-s 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{transform:translateY(-12px)}}@keyframes e-shd-c{to{translate:0 6px}}@keyframes e-shd-s{to{opacity:1}}@keyframes e-shd-l{to{transform:scale(.72)}}@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);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)*40ms) both infinite}@keyframes e-sgs{0%{opacity:0;transform:translateY(8px)}10.4%,90%{opacity:1;animation-timing-function:var(--e-exit);transform:none}96.25%,to{opacity:0;transform:none}}.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:e-brt 3s var(--e-move) infinite}@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.8s var(--e-entrance) infinite}@keyframes e-sfb{0%{transform:translateY(0)}8.3%{animation-timing-function:var(--e-spring);transform:translateY(5px)}33.3%,to{transform:translateY(0)}}.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) both infinite}@keyframes e-idr{0%{opacity:0;transform:translateY(-16px)}19.4%,64%{opacity:1;animation-timing-function:var(--e-exit);transform:translateY(0)}78%,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 1.8s var(--e-exit) both infinite}@keyframes e-ifa{0%{opacity:1;transform:none}13.9%{opacity:0;transform:translate(26px,-16px)scale(.6)}86.1%{opacity:0;animation-timing-function:var(--e-entrance);transform:translate(-8px,6px)}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) both infinite}@keyframes e-hs{0%{clip-path:circle(0%)}26%{clip-path:circle(34%)}44%{clip-path:circle(36%)}66%,90%{clip-path:circle(78%);animation-timing-function:var(--e-exit)}98%,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-entrance) both infinite}@keyframes e-cin{0%{clip-path:inset(0)}9.7%,70%{clip-path:inset(11% 0);animation-timing-function:var(--e-exit)}77%,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-entrance) both infinite}@keyframes e-dw{0%{clip-path:polygon(50% 50%,50% 50%,50% 50%,50% 50%)}15%,84%{clip-path:polygon(50% -60%,160% 50%,50% 160%,-60% 50%);animation-timing-function:var(--e-exit)}92%,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)*40ms) both infinite}@keyframes e-slc{0%{transform:translateX(calc((var(--i) % 2) * 200% - 100%));opacity:0}14.1%,84%{opacity:1;animation-timing-function:var(--e-exit);transform:none}91.8%,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);opacity:calc(1 - var(--i)*.27);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) both infinite}@keyframes e-ec{0%{opacity:0;transform:translate(-26px)scale(.9)}17.3%,80%{opacity:calc(1 - var(--i)*.27);animation-timing-function:var(--e-exit);transform:none}89.6%,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:e-mr 4.2s var(--e-move) infinite alternate}@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:3s 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:e-bq 1s var(--e-move) infinite}@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{inset-block:0;background:var(--acc);border-radius:999px;width:40%;display:block;position:absolute;left:0}.wui-motion-demo[data-on] .e-trs i{animation:e-trs 1.5s var(--e-move) infinite}@keyframes e-trs{0%{transform:translate(-100%)}to{transform:translate(250%)}}.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:e-br2 1.6s var(--e-move) infinite}@keyframes e-br2{0%,to{opacity:.55;transform:scale(.86)}50%{opacity:1;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(--cyan);background:var(--cyan);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:0;width:13px;height:13px}.wui-motion-demo[data-on] .e-tkd .bx{animation:e-tkd-b 3s var(--e-entrance) both infinite}.wui-motion-demo[data-on] .e-tkd svg{animation:e-tkd-s 3s var(--e-entrance) both infinite}@keyframes e-tkd-b{0%,10%{background:var(--surface);border-color:var(--line-2);transform:none}12.7%{background:var(--surface);border-color:var(--line-2);transform:scale(.97)}17.7%,84%{background:var(--cyan);border-color:var(--cyan);animation-timing-function:var(--e-exit);transform:none}86.7%,to{background:var(--surface);border-color:var(--line-2);transform:none}}@keyframes e-tkd-s{0%,12.7%{stroke-dashoffset:18px}17.7%,84%{stroke-dashoffset:0;animation-timing-function:var(--e-exit)}86.7%,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{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);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-entrance) both infinite}.wui-motion-demo[data-on] .e-dlg .panel{animation:e-dlg-p 3.4s var(--e-overshoot) both infinite}@keyframes e-dlg-s{0%{opacity:0}7.4%,80%{opacity:1;animation-timing-function:var(--e-exit)}84.4%,to{opacity:0}}@keyframes e-dlg-p{0%{opacity:0;transform:translateY(8px)scale(.96)}10.3%,80%{opacity:1;animation-timing-function:var(--e-exit);transform:none}84.4%,to{opacity:0;transform:translateY(4px)scale(.98)}}.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%;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) both infinite}@keyframes e-edg{0%{opacity:0;transform:translateY(4px)scale(.98)}7%,76%{opacity:1;animation-timing-function:var(--e-exit);transform:none}80.2%,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;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-entrance) both infinite}@keyframes e-anc{0%{opacity:0;transform:translateY(-4px)scale(.96)}7.8%,76%{opacity:1;animation-timing-function:var(--e-exit);transform:none}80.7%,to{opacity:0;transform:scale(.96)}}.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 .e-pns .p1{opacity:0}.wui-motion-demo[data-on] .e-pns .p1{animation:e-pns-a 3.6s var(--e-exit) both infinite}.wui-motion-demo[data-on] .e-pns .p2{animation:e-pns-b 3.6s var(--e-entrance) both infinite}@keyframes e-pns-a{0%{opacity:1;transform:none}4.2%,50%{opacity:0;animation-timing-function:var(--e-entrance);transform:translate(-8px)}56.9%,to{opacity:1;transform:none}}@keyframes e-pns-b{0%{opacity:0;transform:translate(8px)}6.9%,50%{opacity:1;animation-timing-function:var(--e-exit);transform:none}54.2%,to{opacity:0;transform:translate(8px)}}.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)}37%,80%{transform:rotateX(180deg)}91%,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:e-stc-g .9s var(--e-move) infinite alternate}.wui-motion-demo[data-on] .e-stc .sl b{animation:e-stc-p 7.8s var(--e-entrance) infinite,e-stc-s 2.2s linear infinite}@keyframes e-stc-g{to{transform:scaleY(1)}}@keyframes e-stc-p{0%{opacity:0;transform:translateY(60%)}3%,30%{opacity:1;animation-timing-function:var(--e-exit);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-exit) infinite}.wui-motion-demo[data-on] .e-stgm .s2{animation:e-stgm-2 4.4s var(--e-entrance) infinite}.wui-motion-demo[data-on] .e-stgm .s3{animation:e-stgm-3 4.4s var(--e-entrance) 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-entrance) infinite}@keyframes e-stgm-w{0%,13%{background:var(--surface);border-color:var(--line-2);width:106px}21%,48%{background:var(--surface);border-color:var(--line-2);width:132px}56%,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}96%,to{background:var(--surface);border-color:var(--line-2);width:106px}}@keyframes e-stgm-1{0%,13%{opacity:1;transform:translateY(0)}16.4%,90.3%{opacity:0;animation-timing-function:var(--e-entrance);transform:translateY(-7px)}96%,to{opacity:1;transform:translateY(0)}}@keyframes e-stgm-2{0%,13%{opacity:0;transform:translateY(7px)}18.7%,48%{opacity:1;animation-timing-function:var(--e-exit);transform:translateY(0)}51.4%,to{opacity:0;transform:translateY(-7px)}}@keyframes e-stgm-3{0%,48%{opacity:0;transform:translateY(7px)}53.7%,88%{opacity:1;color:var(--gr-t);animation-timing-function:var(--e-exit);transform:translateY(0)}91.4%,to{opacity:0;color:var(--gr-t);transform:translateY(-7px)}}@keyframes e-stgm-sp{to{transform:rotate(1turn)}}@keyframes e-stgm-tk{0%,51%{stroke-dashoffset:18px}59%,88%{stroke-dashoffset:0;animation-timing-function:var(--e-exit)}91.4%,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;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;transform:translateY(calc(var(--n) * -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 both e-tly-f}.wui-motion-demo[data-on] .e-tly .col b{animation:5.2s step-end infinite both 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;transform:translateY(-5.6em)}.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 .d1{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:0}.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:100%;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-exit) both infinite}.wui-motion-demo[data-on] .e-lvp .d2{animation:e-lvp-b 4.6s var(--e-entrance) both infinite}.wui-motion-demo[data-on] .e-lvp .ln{animation:e-lvp-l 4.6s var(--e-entrance) both infinite}.wui-motion-demo[data-on] .e-lvp .hd2{animation:e-lvp-h 4.6s var(--e-move) both infinite}@keyframes e-lvp-d{0%,to{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}@keyframes e-lvp-c{0%{transform:translateY(0)}to{transform:translateY(-5.6em)}}@keyframes e-lvp-a{0%,44%{opacity:1;transform:translateY(0)}47.3%,98%{opacity:0;animation-timing-function:var(--e-entrance);transform:translateY(-8px)}to{opacity:1;transform:none}}@keyframes e-lvp-b{0%,44%{opacity:0;transform:translateY(8px)}49.4%,96%{opacity:1;animation-timing-function:var(--e-exit);transform:translateY(0)}98%,to{opacity:0;transform:translateY(8px)}}@keyframes e-lvp-l{0%,6%{stroke-dashoffset:1px}62%,88%{stroke-dashoffset:0;animation-timing-function:var(--e-exit)}96%,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}86%,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;border:1px solid #0000;border-radius:16px;gap:8px;padding:11px 12px 10px;display:grid;position:relative}.wui-motion-demo .e-pcm .rim{border-radius:inherit;contain:paint;-webkit-mask-composite:xor;padding:1px;position:absolute;inset:-1px;overflow:hidden;-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;container-type:size}.wui-motion-demo .e-pcm .rim:before{content:"";aspect-ratio:1;background:conic-gradient(var(--line-2) 0deg,var(--line-2) 200deg,var(--pink) 250deg, var(--indigo) 290deg,var(--orange) 320deg,var(--line-2) 360deg);width:calc(150cqmax + 24px);position:absolute;top:50%;left:50%;translate:-50% -50%}.wui-motion-demo .e-pcm .hd{align-items:center;gap:7px;display:flex}.wui-motion-demo .e-pcm .orb{background:conic-gradient(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:16px;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 .rim:before{animation:5s linear infinite e-pcm-r}.wui-motion-demo[data-on] .e-pcm .orb{animation:5s linear infinite e-pcm-o}.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{rotate:1turn}}@keyframes e-pcm-o{to{rotate:1turn}}@keyframes e-pcm-l{0%{opacity:0;filter:blur(3px)}2.9%,84%{opacity:1;filter:blur();animation-timing-function:var(--e-exit)}87%,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%)}}.wui-motion-demo .e-prf b{background:var(--surface);border:1px solid var(--line-2);height:36px;box-shadow:var(--shadow);color:var(--ink);border-radius:11px;align-items:center;padding-inline:18px;font-size:13px;font-weight:650;display:inline-flex}.wui-motion-demo[data-on] .e-prf b{animation:e-prf 1.6s var(--e-entrance) both infinite}@keyframes e-prf{0%,20%{transform:none}25%{transform:scale(.97)}32.5%,to{transform:none}}.wui-motion-demo .e-rin{background:var(--surface);border:1px solid var(--line-2);border-radius:11px;gap:0;width:196px;padding:6px;display:grid}.wui-motion-demo .e-rin i{border-radius:7px;align-items:center;gap:8px;height:26px;padding-inline:8px;display:flex}.wui-motion-demo .e-rin i+i,.wui-motion-demo .e-rin .new+i{border-top:1px solid var(--line)}.wui-motion-demo .e-rin b{background:var(--line-2);border-radius:3px;flex:none;width:9px;height:9px}.wui-motion-demo .e-rin s{background:var(--line-2);border-radius:999px;flex:1;height:5px;text-decoration:none}.wui-motion-demo .e-rin .new{grid-template-rows:1fr;display:grid}.wui-motion-demo .e-rin .new>i{background:color-mix(in oklab,var(--cyan) 12%,transparent);height:auto;min-height:0;overflow:hidden}.wui-motion-demo .e-rin .new>i:before{content:"";width:0;height:26px;display:block}.wui-motion-demo .e-rin .new b{background:var(--cyan)}.wui-motion-demo[data-on] .e-rin .new{animation:e-rin 2.4s var(--e-entrance) both infinite}@keyframes e-rin{0%{opacity:0;grid-template-rows:0fr}10.4%,90%{opacity:1;animation-timing-function:var(--e-exit);grid-template-rows:1fr}96.25%,to{opacity:0;grid-template-rows:0fr}}