.wl-demo{--wl-canvas:#161616;--wl-surface:#1e1e1e;--wl-border:#3a3a3a;--wl-text:#e8e8e8;--wl-accent:#4a9eff;border:1px solid var(--wl-border);background:var(--wl-canvas);height:340px;color:var(--wl-text);background-image:radial-gradient(#ffffff12 1px,#0000 1px);background-size:14px 14px;border-radius:14px;max-width:420px;font-family:system-ui,sans-serif;position:relative;overflow:hidden}.wl-demo .fab{border:1px solid var(--wl-border);z-index:2;background:#2a2a2a;border-radius:50%;place-items:center;width:30px;height:30px;font-size:15px;display:grid;position:absolute;top:10px}.wl-demo .fab.add{left:10px}.wl-demo .fab.play{font-size:11px;right:10px}.wl-demo .zoom{gap:4px;display:flex;position:absolute;bottom:10px;left:10px}.wl-demo .zoom span{border:1px solid var(--wl-border);background:#2a2a2a;border-radius:4px;padding:3px 7px;font-size:10px}.wl-demo .opening{background:var(--wl-accent);color:#fff;clip-path:polygon(0 0,78% 0,100% 50%,78% 100%,0 100%);border-radius:4px 0 0 4px;align-items:center;width:70px;height:28px;padding-left:8px;font-size:11px;font-weight:700;display:flex;position:absolute;top:150px;left:10px}.wl-demo .card{border:2px solid var(--wl-border);background:var(--wl-surface);opacity:0;border-radius:8px;width:66px;padding:4px;position:absolute}.wl-demo .card.sel{border-color:var(--wl-accent);box-shadow:0 0 0 2px #4a9eff59}.wl-demo .card b{white-space:nowrap;text-overflow:ellipsis;margin:0 0 3px 2px;font-size:9px;font-weight:700;line-height:1.6;display:block;overflow:hidden}.wl-demo .thumb{aspect-ratio:9/16;background:#26262b 50%/cover;border-radius:4px;width:100%;position:relative;overflow:hidden}.wl-demo .thumb i{background:#6eb3ff59;border-radius:3px;height:10px;position:absolute;bottom:4px;left:3px;right:3px}.wl-demo svg{width:100%;height:100%;position:absolute;inset:0}.wl-demo svg path{fill:none;stroke:#8a8a8a;stroke-width:1.6px;stroke-dasharray:300;stroke-dashoffset:300px}.wl-demo .elabel{background:var(--wl-surface);border:1px solid var(--wl-border);opacity:0;white-space:nowrap;border-radius:3px;padding:1px 5px;font-size:8.5px;line-height:1.6;position:absolute}.wl-demo .cursor{opacity:0;z-index:6;width:14px;height:14px;position:absolute;top:0;left:0}.wl-demo .cursor:before{content:"";filter:drop-shadow(0 1px 2px #000000b3);border-bottom:14px solid #fff;border-left:7px solid #0000;border-right:7px solid #0000;position:absolute;inset:0;transform:rotate(-30deg)}.wl-demo .ring{border:2px solid var(--wl-accent);opacity:0;z-index:2;border-radius:50%;width:38px;height:38px;position:absolute;top:6px;right:6px}.wl-demo .player{aspect-ratio:9/16;z-index:5;opacity:0;background:url(/weavelab/james-car.webp) 50%/cover;border:1px solid #fff3;border-radius:16px;position:absolute;top:14px;bottom:14px;right:12px;overflow:hidden;transform:translateY(30px);box-shadow:0 16px 40px #0009}.wl-demo .player .actor{aspect-ratio:1/1.6;background:url(/weavelab/james.webp) bottom/contain no-repeat;height:74%;position:absolute;bottom:0;left:50%;transform:translate(-50%)}.wl-demo .player .box{background:#0c0d0fd6;border-radius:8px;padding:6px 8px 7px;font-family:inherit;font-size:10px;line-height:1.6;position:absolute;bottom:58px;left:8px;right:8px}.wl-demo .player .box b{color:#06223a;background:#8fc1ff;border-radius:4px;margin-bottom:3px;padding:0 6px;font-size:9px;display:inline-block}.wl-demo .player .picks{gap:5px;display:grid;position:absolute;bottom:10px;left:8px;right:8px}.wl-demo .player .picks span{color:#111;text-align:center;opacity:0;background:#f7f4eef0;border-radius:7px;padding:4px;font-size:9.5px;font-weight:600;line-height:1.6;position:relative;overflow:hidden}.wl-demo .player .picks span i{color:#06223a;opacity:0;background:#3aa7ff;place-items:center;font-style:normal;display:grid;position:absolute;inset:0}.wl-demo.hero .s1{animation:16s infinite wl-h-s1;top:112px;left:96px}.wl-demo.hero .s2{animation:16s infinite wl-h-s2;top:36px;left:196px}.wl-demo.hero .s3{animation:16s infinite wl-h-s3;top:196px;left:196px}.wl-demo.hero .p0{animation:16s infinite wl-h-p0}.wl-demo.hero .p1{animation:16s infinite wl-h-p1}.wl-demo.hero .p2{animation:16s infinite wl-h-p2}.wl-demo.hero .l1{animation:16s infinite wl-h-l1;top:70px;left:150px}.wl-demo.hero .l2{animation:16s infinite wl-h-l2;top:262px;left:158px}.wl-demo.hero .ring{animation:16s infinite wl-h-ring}.wl-demo.hero .player{animation:16s infinite wl-h-player}.wl-demo.hero .player .picks span{animation:16s infinite wl-h-pick}.wl-demo.hero .player .picks span i{animation:16s infinite wl-h-tap}.wl-demo.hero .cursor{animation:16s infinite wl-h-cur}@keyframes wl-h-cur{0%{opacity:0;transform:translate(24px,22px)}3%{opacity:1;transform:translate(24px,22px)}8%{transform:translate(130px,150px)}12%{transform:translate(72px,160px)}18%{transform:translate(100px,170px)}24%{transform:translate(160px,140px)}32%{transform:translate(210px,70px)}36%{transform:translate(160px,160px)}44%{transform:translate(210px,230px)}50%,54%{transform:translate(318px,22px)}58%,72%{opacity:1;transform:translate(300px,290px)}76%,90%{opacity:1;transform:translate(300px,280px)}96%,to{opacity:0;transform:translate(300px,280px)}}@keyframes wl-h-s1{0%,7%{opacity:0;transform:scale(.85)}9%,96%{opacity:1;transform:none}to{opacity:0}}@keyframes wl-h-p0{0%,12%{stroke-dashoffset:300px}18%,96%{stroke-dashoffset:0}to{stroke-dashoffset:300px}}@keyframes wl-h-p1{0%,24%{stroke-dashoffset:300px}32%,96%{stroke-dashoffset:0}to{stroke-dashoffset:300px}}@keyframes wl-h-s2{0%,31%{opacity:0;transform:scale(.85)}33%,96%{opacity:1;transform:none}to{opacity:0}}@keyframes wl-h-l1{0%,32%{opacity:0}34%,96%{opacity:1}to{opacity:0}}@keyframes wl-h-p2{0%,36%{stroke-dashoffset:300px}44%,96%{stroke-dashoffset:0}to{stroke-dashoffset:300px}}@keyframes wl-h-s3{0%,43%{opacity:0;transform:scale(.85)}45%,96%{opacity:1;transform:none}to{opacity:0}}@keyframes wl-h-l2{0%,44%{opacity:0}46%,96%{opacity:1}to{opacity:0}}@keyframes wl-h-ring{0%,52%{opacity:0;transform:scale(.8)}54%{opacity:1;transform:scale(1)}58%,to{opacity:0;transform:scale(1.3)}}@keyframes wl-h-player{0%,55%{opacity:0;transform:translateY(30px)}59%,94%{opacity:1;transform:none}98%,to{opacity:0;transform:translateY(30px)}}@keyframes wl-h-pick{0%,66%{opacity:0}69%,94%{opacity:1}to{opacity:0}}@keyframes wl-h-tap{0%,75%{opacity:0}77%,94%{opacity:1}to{opacity:0}}.wl-demo.hero .player .picks span:first-child i{animation:none}.wl-demo .doc{color:#222;z-index:2;background:#f7f4ee;border-radius:8px;width:156px;margin-left:-78px;padding:10px;font-family:inherit;font-size:10px;line-height:1.6;animation:12s infinite wl-b-doc;position:absolute;top:50px;left:50%}.wl-demo .doc i{background:#c9c5bd;border-radius:2px;height:5px;margin:5px 0;display:block}.wl-demo .doc em{color:#3a76c4;margin-top:4px;font-style:normal;font-weight:700;display:block}.wl-demo.import .opening{opacity:0;animation:12s infinite wl-b-a}.wl-demo.import .card{width:52px}.wl-demo.import .card b{font-size:8px}.wl-demo.import .k1{animation:12s infinite wl-b-b;top:40px;left:88px}.wl-demo.import .k2{animation:12s infinite wl-b-b;top:190px;left:88px}.wl-demo.import .k3{animation:12s infinite wl-b-c;top:14px;left:168px}.wl-demo.import .k4{animation:12s infinite wl-b-c;top:124px;left:168px}.wl-demo.import .k5{animation:12s infinite wl-b-c;top:234px;left:168px}.wl-demo.import .k6{animation:12s infinite wl-b-d;top:60px;left:248px}.wl-demo.import .k7{animation:12s infinite wl-b-d;top:180px;left:248px}.wl-demo.import svg path{animation:12s infinite wl-b-w}.wl-demo.import .count{border:1px solid var(--wl-border);opacity:0;background:#2a2a2a;border-radius:6px;padding:3px 8px;font-family:inherit;font-size:10px;line-height:1.6;animation:12s infinite wl-b-d;position:absolute;top:10px;right:10px}@keyframes wl-b-doc{0%,24%{opacity:1;transform:none}32%,to{opacity:0;transform:translateY(-20px)scale(.6)}}@keyframes wl-b-a{0%,30%{opacity:0}34%,94%{opacity:1}to{opacity:0}}@keyframes wl-b-b{0%,38%{opacity:0;transform:scale(.85)}44%,94%{opacity:1;transform:none}to{opacity:0}}@keyframes wl-b-c{0%,50%{opacity:0;transform:scale(.85)}56%,94%{opacity:1;transform:none}to{opacity:0}}@keyframes wl-b-d{0%,62%{opacity:0;transform:scale(.85)}68%,94%{opacity:1;transform:none}to{opacity:0}}@keyframes wl-b-w{0%,36%{stroke-dashoffset:300px}70%,94%{stroke-dashoffset:0}to{stroke-dashoffset:300px}}@media (prefers-reduced-motion:reduce){.wl-demo *,.wl-demo :before{animation:none!important}.wl-demo .card,.wl-demo .elabel,.wl-demo.import .opening,.wl-demo.import .count,.wl-demo .player,.wl-demo .player .picks span{opacity:1;transform:none}.wl-demo .player .picks span:last-child i{opacity:1}.wl-demo svg path{stroke-dashoffset:0}.wl-demo .doc,.wl-demo .cursor,.wl-demo .ring{display:none}}