.lfd{--lfd-t:12s;--lfd-ink:#111;--lfd-bar:#e9eae6;isolation:isolate;background-color:#d8eab8;background-image:linear-gradient(110deg,#d8eab8 0%,#c6e79e 35%,#d3efc4 70%,#d8eab8 100%);background-size:300% 100%;border-radius:24px;animation:6s ease-in-out infinite alternate lfd-gradient;position:relative;overflow:hidden;container-type:inline-size}.lfd:before{content:"";z-index:0;pointer-events:none;opacity:.55;mix-blend-mode:overlay;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='0.65' numOctaves='6' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2.2'/%3E%3CfeFuncG type='linear' slope='2.2'/%3E%3CfeFuncB type='linear' slope='2.2'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");background-size:155px 155px;position:absolute;inset:0}.lfd__stage{z-index:1;aspect-ratio:16/10;color:var(--lfd-ink);font-family:Inter,system-ui,sans-serif;font-size:1.9cqw;line-height:1.2;position:relative}.lfd__stage svg{flex:none;display:block}.lfd__scene{opacity:0;position:absolute;inset:0}.lfd__card{background:#fff;border-radius:1.6cqw;position:absolute;box-shadow:0 .8cqw 2.4cqw #1e32141f}.lfd__bar{background:var(--lfd-bar);border-radius:1cqw;height:1.3cqw;display:block}.lfd__name{white-space:nowrap;font-weight:500}.lfd__folder{background:#aeb1b6;border-radius:0 .5cqw .5cqw;flex:none;width:3.6cqw;height:2.8cqw;margin-top:.5cqw;position:relative}.lfd__folder:before{content:"";background:#aeb1b6;border-radius:.3cqw .3cqw 0 0;width:1.3cqw;height:.5cqw;position:absolute;bottom:98%;left:0}.lfd__row{align-items:center;gap:2cqw;height:9cqw;padding:0 2.4cqw;display:flex}.lfd__row+.lfd__row{border-top:1px solid #f0f0ee}.lfd__row .lfd__bar{flex:none}.lfd__more{border-radius:.8cqw;gap:.45cqw;margin-left:auto;padding:1cqw;display:flex}.lfd__more i{background:#6b6e73;border-radius:50%;width:.55cqw;height:.55cqw}.lfd__menu-item{white-space:nowrap;border-radius:.8cqw;align-items:center;gap:1cqw;height:4.2cqw;padding:0 1.2cqw;font-size:1.75cqw;display:flex}.lfd__menu-item svg{width:2cqw;height:2cqw}.lfd__menu-item .lfd__bar{height:1.1cqw}.lfd__link-field{box-sizing:border-box;color:#6b6e73;border:1px solid #e3e4e0;border-radius:1.1cqw;align-items:center;gap:1.4cqw;width:100%;height:6.4cqw;padding:0 2cqw;display:flex}.lfd__link-field svg{width:2.4cqw;height:2.4cqw}.lfd__btn{background:var(--lfd-ink);color:#fff;white-space:nowrap;border-radius:1.1cqw;place-items:center;height:6.2cqw;font-weight:500;display:grid;position:relative;overflow:hidden}.lfd__btn-label{grid-area:1/1;align-items:center;gap:.8cqw;padding:0 3cqw;display:flex}.lfd__btn-label svg{width:2.2cqw;height:2.2cqw}.lfd__share-head{border-bottom:1px solid #f0f0ee;align-items:center;gap:1.6cqw;height:8cqw;padding:0 2.6cqw;display:flex}.lfd__file .lfd__bar{flex:none}.lfd__thumb{border-radius:.9cqw;flex:none;place-items:center;width:5.6cqw;height:5.6cqw;font-size:1.45cqw;font-weight:500;display:grid}.lfd__thumb--dark{color:#fff;background:#1d1d1f}.lfd__thumb--green{color:#2d4419;background:#cbe8a1}.lfd__thumb--lilac{color:#3a3360;background:#dcd6f7}.lfd__thumb--yellow{color:#5a4512;background:#f6dc84}.lfd__dl{color:#3c3f44;border:1px solid #e3e4e0;border-radius:.9cqw;place-items:center;width:3.8cqw;height:3.8cqw;margin-left:auto;display:grid}.lfd__dl svg{width:2cqw;height:2cqw}.lfd__zip-fill{transform-origin:0;background:#fff3;position:absolute;inset:0;transform:scaleX(0)}.lfd__cursor{z-index:5;width:3cqw;height:3cqw;position:absolute;top:0;left:0}.lfd__cursor svg{transform-origin:15% 10%;width:100%;height:100%}.lfd__ring{opacity:0;border:2px solid #11111173;border-radius:50%;width:3.6cqw;height:3.6cqw;position:absolute;top:-1.6cqw;left:-1.6cqw}@keyframes lfd-gradient{0%{background-position:0%}to{background-position:100%}}@media (width<=809px){.lfd{border-radius:16px}}@media (prefers-reduced-motion:reduce){.lfd,.lfd *{animation:none!important}.lfd__cursor{display:none}}.lfd--demo .lfd__scene--library{animation:lfd-s1 var(--lfd-t) infinite}.lfd--demo .lfd__library{width:62cqw;padding:.8cqw 0;top:16cqw;left:19cqw}.lfd--demo .lfd__row:first-child .lfd__more{animation:lfd-more var(--lfd-t) infinite}.lfd--demo .lfd__menu{transform-origin:85% 0;width:22cqw;animation:lfd-menu var(--lfd-t) infinite;padding:.8cqw;top:25.5cqw;left:57cqw}.lfd--demo .lfd__menu-item--share{animation:lfd-share-hover var(--lfd-t) infinite}.lfd--demo .lfd__scene--link{animation:lfd-s2 var(--lfd-t) infinite}.lfd--demo .lfd__link{justify-items:center;gap:2.6cqw;width:56cqw;padding:3cqw;display:grid;top:17cqw;left:22cqw}.lfd--demo .lfd__copy{min-width:22cqw;animation:lfd-copy-press var(--lfd-t) infinite}.lfd--demo .lfd__copy-a{animation:lfd-copy-a var(--lfd-t) infinite}.lfd--demo .lfd__copy-b{opacity:0;animation:lfd-copy-b var(--lfd-t) infinite}.lfd--demo .lfd__scene--share{animation:lfd-s3 var(--lfd-t) infinite}.lfd--demo .lfd__share{width:68cqw;height:54cqw;top:4cqw;left:16cqw}.lfd--demo .lfd__file{left:0;right:0;top:calc(9cqw + var(--row) * 8.4cqw);border-radius:1cqw;align-items:center;gap:2cqw;height:7.4cqw;padding:0 2.6cqw;display:flex;position:absolute}.lfd--demo .lfd__file--new{opacity:0;animation:lfd-new var(--lfd-t) infinite}.lfd--demo .lfd__zip{min-width:27cqw;animation:lfd-zip-press var(--lfd-t) infinite;position:absolute;bottom:2.6cqw;right:2.6cqw}.lfd--demo .lfd__zip-a{animation:lfd-zip-a var(--lfd-t) infinite}.lfd--demo .lfd__zip-b{opacity:0;animation:lfd-zip-b var(--lfd-t) infinite}.lfd--demo{--lfd-t:12s}.lfd--demo .lfd__zip-fill{animation:lfd-zip-fill var(--lfd-t) infinite}.lfd--demo .lfd__cursor{animation:lfd-cursor var(--lfd-t) infinite}.lfd--demo .lfd__cursor svg{animation:lfd-click var(--lfd-t) infinite}.lfd--demo .lfd__ring{animation:lfd-ring var(--lfd-t) infinite}@keyframes lfd-s1{0%{opacity:0;transform:translateY(1.5cqw)}3%,21%{opacity:1;transform:none}24%,to{opacity:0;transform:translateY(-1.5cqw)}}@keyframes lfd-more{0%,7%{background:0 0}8%,20%{background:#f0f0ee}22%,to{background:0 0}}@keyframes lfd-menu{0%,9%{opacity:0;transform:scale(.94)}11%,to{opacity:1;transform:none}}@keyframes lfd-share-hover{0%,14%{background:0 0}15.5%,to{background:#f0f0ee}}@keyframes lfd-s2{0%,23%{opacity:0;transform:translateY(1.5cqw)}26%,45%{opacity:1;transform:none}48%,to{opacity:0;transform:translateY(-1.5cqw)}}@keyframes lfd-copy-press{0%,32%{transform:none}33%{transform:scale(.95)}34.5%,to{transform:none}}@keyframes lfd-copy-a{0%,33%{opacity:1;transform:none}34.5%,to{opacity:0;transform:translateY(-6cqw)}}@keyframes lfd-copy-b{0%,33.5%{opacity:0;transform:translateY(6cqw)}35%,to{opacity:1;transform:none}}@keyframes lfd-s3{0%,48%{opacity:0;transform:translateY(1.5cqw)}51%,95%{opacity:1;transform:none}99%,to{opacity:0}}@keyframes lfd-new{0%,59%{opacity:0;background:#f3f8e8;transform:translateY(-2cqw)}62%{opacity:1;background:#eef6df;transform:none}72%{background:#eef6df}80%,to{opacity:1;background:0 0;transform:none}}@keyframes lfd-zip-press{0%,77%{transform:none}78%{transform:scale(.96)}79.5%,to{transform:none}}@keyframes lfd-zip-fill{0%,78.5%{opacity:1;transform:scaleX(0)}87%{opacity:1;transform:scaleX(1)}89%,to{opacity:0;transform:scaleX(1)}}@keyframes lfd-zip-a{0%,87%{opacity:1}89%,to{opacity:0}}@keyframes lfd-zip-b{0%,87%{opacity:0;transform:scale(.6)}90%,to{opacity:1;transform:none}}@keyframes lfd-cursor{0%{opacity:0;transform:translate(90cqw,52cqw)}2%{opacity:1;transform:translate(90cqw,52cqw)}7%{transform:translate(76.4cqw,21.2cqw)}12%{transform:translate(76.4cqw,21.2cqw)}15%{transform:translate(66cqw,33cqw)}24%{transform:translate(66cqw,33cqw)}31%,37%{transform:translate(50.5cqw,33.6cqw)}44%{transform:translate(60cqw,46cqw)}56%{transform:translate(90cqw,30cqw)}69%{transform:translate(90cqw,30cqw)}76%{transform:translate(72cqw,52.5cqw)}94%{opacity:1;transform:translate(74cqw,55cqw)}98%,to{opacity:0;transform:translate(74cqw,55cqw)}}@keyframes lfd-click{0%,7.5%,9.5%,15.5%,17.5%,32%,34%,77%,79%,to{transform:none}8.5%,16.5%,33%,78%{transform:scale(.82)}}@keyframes lfd-ring{0%,8%,10.5%,16%,18.5%,32.5%,35%,77.5%,80%,to{opacity:0;transform:scale(.4)}8.6%,16.6%,33.1%,78.1%{opacity:1;transform:scale(.6)}10%,18%,34.5%,79.5%{opacity:0;transform:scale(1.4)}}@media (prefers-reduced-motion:reduce){.lfd--demo .lfd__scene--share,.lfd--demo .lfd__file--new{opacity:1}}
