:root{--radius-card: 1.125rem;--card-shadow: 0 1px 3px oklch(.2 .02 260 / .06);--card-shadow-hover: 0 12px 32px oklch(.2 .02 260 / .12), 0 4px 8px oklch(.2 .02 260 / .06);--surface: white}.dark{--card-shadow: 0 1px 3px oklch(0 0 0 / .2);--card-shadow-hover: 0 12px 32px oklch(0 0 0 / .35), 0 4px 8px oklch(0 0 0 / .2);--surface: oklch(.22 .025 260)}.demo-wrap[data-astro-cid-opcqvmew]{display:flex;flex-direction:column;align-items:center;gap:1.5rem}.scene[data-astro-cid-opcqvmew]{display:flex;gap:2rem;align-items:flex-start}.card-broken[data-astro-cid-opcqvmew],.card-fixed[data-astro-cid-opcqvmew]{position:relative;width:220px;height:220px;border-radius:var(--radius-card);corner-shape:squircle;box-shadow:var(--card-shadow);cursor:pointer;transition:transform .32s cubic-bezier(.2,0,0,1),box-shadow .32s cubic-bezier(.2,0,0,1)}.card-broken[data-astro-cid-opcqvmew],.card-fixed[data-astro-cid-opcqvmew]{background:var(--surface);padding:8px}.mesh[data-astro-cid-opcqvmew]{width:100%;height:100%;border-radius:.625rem;corner-shape:squircle;overflow:hidden;position:relative}.mesh[data-astro-cid-opcqvmew]:before{content:"";position:absolute;inset:-20px;filter:blur(24px);animation:mesh-drift 6s ease-in-out infinite alternate;transition:filter .25s ease;background:radial-gradient(circle at var(--g1x) var(--g1y),var(--c-accent) 0%,transparent 65%),radial-gradient(circle at var(--g2x) var(--g2y),oklch(from var(--c-accent) .78 .12 h) 0%,transparent 65%),radial-gradient(circle at var(--g3x) var(--g3y),oklch(from var(--c-accent) .92 .02 h) 0%,transparent 65%),oklch(from var(--c-accent) .96 .01 h)}.dark .mesh[data-astro-cid-opcqvmew]:before{background:radial-gradient(circle at var(--g1x) var(--g1y),var(--c-accent) 0%,transparent 65%),radial-gradient(circle at var(--g2x) var(--g2y),oklch(from var(--c-accent) .38 .14 h) 0%,transparent 65%),radial-gradient(circle at var(--g3x) var(--g3y),oklch(from var(--c-accent) .28 .06 h) 0%,transparent 65%),oklch(from var(--c-accent) .2 .04 h)}.card-broken[data-astro-cid-opcqvmew]:hover .mesh[data-astro-cid-opcqvmew]:before,.card-broken[data-astro-cid-opcqvmew].cursor-hover .mesh[data-astro-cid-opcqvmew]:before,.card-fixed-wrap[data-astro-cid-opcqvmew]:hover .mesh[data-astro-cid-opcqvmew]:before,.card-fixed-wrap[data-astro-cid-opcqvmew].cursor-hover .mesh[data-astro-cid-opcqvmew]:before{filter:blur(24px) saturate(1.6) brightness(1.1)}.dark .card-broken[data-astro-cid-opcqvmew]:hover .mesh[data-astro-cid-opcqvmew]:before,.dark .card-broken[data-astro-cid-opcqvmew].cursor-hover .mesh[data-astro-cid-opcqvmew]:before,.dark .card-fixed-wrap[data-astro-cid-opcqvmew]:hover .mesh[data-astro-cid-opcqvmew]:before,.dark .card-fixed-wrap[data-astro-cid-opcqvmew].cursor-hover .mesh[data-astro-cid-opcqvmew]:before{filter:blur(24px) saturate(1.8) brightness(1.3)}.mesh-a[data-astro-cid-opcqvmew]:before{animation-delay:-7s}.mesh-b[data-astro-cid-opcqvmew]:before{animation-delay:-2s}@property --g1x{syntax: "<percentage>"; inherits: false; initial-value: 20%;}@property --g1y{syntax: "<percentage>"; inherits: false; initial-value: 20%;}@property --g2x{syntax: "<percentage>"; inherits: false; initial-value: 80%;}@property --g2y{syntax: "<percentage>"; inherits: false; initial-value: 30%;}@property --g3x{syntax: "<percentage>"; inherits: false; initial-value: 60%;}@property --g3y{syntax: "<percentage>"; inherits: false; initial-value: 80%;}@keyframes mesh-drift{0%{--g1x: 20%;--g1y: 20%;--g2x: 80%;--g2y: 30%;--g3x: 60%;--g3y: 80%}33%{--g1x: 70%;--g1y: 40%;--g2x: 30%;--g2y: 70%;--g3x: 80%;--g3y: 20%}66%{--g1x: 40%;--g1y: 75%;--g2x: 75%;--g2y: 15%;--g3x: 20%;--g3y: 50%}to{--g1x: 65%;--g1y: 25%;--g2x: 25%;--g2y: 60%;--g3x: 70%;--g3y: 70%}}.card-broken[data-astro-cid-opcqvmew]:hover,.card-broken[data-astro-cid-opcqvmew].cursor-hover{transform:translateY(-14px);box-shadow:var(--card-shadow-hover)}.card-fixed-wrap[data-astro-cid-opcqvmew]{position:relative;padding-bottom:14px}.card-fixed-wrap[data-astro-cid-opcqvmew]:hover .card-fixed[data-astro-cid-opcqvmew],.card-fixed-wrap[data-astro-cid-opcqvmew].cursor-hover .card-fixed[data-astro-cid-opcqvmew]{transform:translateY(-14px);box-shadow:var(--card-shadow-hover)}.card-broken[data-astro-cid-opcqvmew]:after,.card-fixed-wrap[data-astro-cid-opcqvmew]:after{content:"";position:absolute;inset:-6px;border-radius:calc(var(--radius-card) + 6px);corner-shape:squircle;border:2px dashed transparent;pointer-events:none;transition:border-color .3s ease,background .3s ease,top .32s cubic-bezier(.2,0,0,1)}.card-fixed-wrap[data-astro-cid-opcqvmew]:after{bottom:8px}.card-fixed-wrap[data-astro-cid-opcqvmew]:hover:after,.card-fixed-wrap[data-astro-cid-opcqvmew].cursor-hover:after{top:-20px}.scene[data-astro-cid-opcqvmew].show-hit .card-broken[data-astro-cid-opcqvmew]:after{border-color:var(--c-accent);background:oklch(from var(--c-accent) l c h / .05)}.scene[data-astro-cid-opcqvmew].show-hit .card-fixed-wrap[data-astro-cid-opcqvmew]:after{border-color:var(--c-accent);background:oklch(from var(--c-accent) l c h / .05)}.toggle-wrap[data-astro-cid-opcqvmew]{display:flex;justify-content:center}@media(prefers-reduced-motion:reduce){.card-broken[data-astro-cid-opcqvmew],.card-fixed[data-astro-cid-opcqvmew]{transition:none!important}}@supports not (corner-shape: squircle){:root{--radius-card: .75rem}}