.hover-cards-playground{--icon-blur:28;--icon-saturate:5;--icon-brightness:1.3;--icon-contrast:1.4;--icon-scale:3.4;--icon-opacity:.25;--border-width:3;--border-blur:0;--border-saturate:4.2;--border-brightness:2.5;--border-contrast:2.5;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark}@media (prefers-color-scheme:dark){.hover-cards-playground{--lightningcss-light: ;--lightningcss-dark:initial}}.hover-cards-playground[data-theme=light]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light only}.hover-cards-playground[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark only}.hover-cards-playground[data-theme=light] article{background:#f5f5f5;outline-color:#e0e0e0}.hover-cards-playground[data-theme=dark] article{background:#1a1a1a;outline-color:#333}.hover-cards-playground[data-exclude=true] .img-container{opacity:calc(var(--icon-opacity,.25)*.25);transition:opacity .26s ease-out}.hover-cards-playground[data-exclude=true] article:is(:hover,:focus-within) .img-container{opacity:var(--icon-opacity,.25)}.hover-cards-playground .hover-cards-main{flex-wrap:wrap;justify-content:center;gap:2rem;width:100%;max-width:800px;padding-block:2rem;display:flex}.hover-cards-playground article{aspect-ratio:4/3;cursor:pointer;background:var(--lightningcss-light,#fafafa)var(--lightningcss-dark,#1a1a1a);border-radius:12px;outline:2px solid var(--lightningcss-light,#e6e6e6)var(--lightningcss-dark,#333);width:300px;transition-property:translate,scale;transition-duration:.12s;transition-timing-function:cubic-bezier(.645,.045,.355,1);position:relative;container-type:size}.hover-cards-playground article>div{clip-path:inset(0 round 12px);border-radius:12px;align-content:center;place-items:center;gap:.5rem;display:grid;position:absolute;inset:0;overflow:hidden}.hover-cards-playground article:active{translate:0 1px;scale:.99}.hover-cards-playground article button{z-index:2;aspect-ratio:1;cursor:pointer;opacity:.3;background:0 0;border:0;border-radius:8px;place-items:center;width:32px;padding:0;display:grid;position:absolute;top:.5rem;right:.5rem}.hover-cards-playground article button:before{content:"";z-index:-1;border-radius:inherit;opacity:0;background:var(--lightningcss-light,#00000014)var(--lightningcss-dark,#ffffff1a);position:absolute;inset:0}.hover-cards-playground article button:is(:hover,:focus-visible),.hover-cards-playground article button:is(:hover,:focus-visible):before{opacity:1}.hover-cards-playground article button svg{width:20px}.hover-cards-playground article button svg path{fill:currentColor}.hover-cards-playground article:after{content:"";pointer-events:none;border-radius:inherit;border:calc(var(--border-width)*1px)solid transparent;-webkit-backdrop-filter:blur(calc(var(--border-blur)*1px))saturate(var(--border-saturate))brightness(var(--border-brightness))contrast(var(--border-contrast));backdrop-filter:blur(calc(var(--border-blur)*1px))saturate(var(--border-saturate))brightness(var(--border-brightness))contrast(var(--border-contrast));z-index:2;clip-path:inset(0 round 12px);position:absolute;inset:0;transform:translateZ(0);-webkit-mask-image:linear-gradient(#fff 0 100%),linear-gradient(#fff 0 100%);mask-image:linear-gradient(#fff 0 100%),linear-gradient(#fff 0 100%);-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:border-box,padding-box;mask-clip:border-box,padding-box;-webkit-mask-origin:border-box,padding-box;mask-origin:border-box,padding-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.hover-cards-playground article img{-webkit-user-select:none;user-select:none;width:100px}.hover-cards-playground article img:first-of-type{z-index:2;position:relative}.hover-cards-playground .img-container{filter:url(#hover-cards-blur) saturate(var(--icon-saturate))brightness(var(--icon-brightness));transform:translateZ(0);translate:calc(var(--pointer-x,-10)*50cqi)calc(var(--pointer-y,-10)*50cqh);scale:var(--icon-scale);opacity:var(--icon-opacity);will-change:transform,filter;place-items:center;display:grid;position:absolute;inset:0}.hover-cards-playground[data-css=true] .img-container{filter:blur(calc(var(--icon-blur)*1px))saturate(var(--icon-saturate))brightness(var(--icon-brightness))}.hover-cards-playground article h2{z-index:4;-webkit-user-select:none;user-select:none;margin:0;font-size:1rem;position:relative}.hover-cards-playground .hover-cards-credit{color:canvastext;opacity:.8;border-radius:8px;place-items:center;width:40px;height:40px;display:grid;position:absolute;top:.5rem;right:.5rem}.hover-cards-playground .hover-cards-credit:hover,.hover-cards-playground .hover-cards-credit:focus-visible{opacity:1}.hover-cards-playground .hover-cards-credit svg{width:75%}.hover-cards-playground .sr-only{clip:rect(0,0,0,0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.hover-cards-playground div.tp-dfwv{width:280px;position:fixed}