.box{border:8px solid #0000;border-image:linear-gradient(to top left, var(--color-primary) 25%, transparent 25%, transparent 75%, var(--color-primary) 75%) 1;border-radius:20px}.box2{border:8px solid #0000;border-image:linear-gradient(135deg, var(--color-primary) 25%, transparent 25% 75%, var(--color-primary) 75%) 1;border-radius:20px}.sparkle{--b:10px;background:var(--color-secondary);opacity:.2;width:250px;height:300px;-webkit-mask:radial-gradient(#0000 71%, #000 72% calc(72% + var(--b)), #0000 calc(73% + var(--b))) 10000% 10000%/99.5% 99.5%;mask:radial-gradient(#0000 71%, #000 72% calc(72% + var(--b)), #0000 calc(73% + var(--b))) 10000% 10000%/99.5% 99.5%}.grid-lines{--s:155px;--n:4;--t:2px;--g:10px;--c:var(--color-primary-content) 25%, #0000 0;background:conic-gradient(at var(--g) var(--t), var(--c)) calc((var(--s) / var(--n) - var(--g) + var(--t)) / 2) 0 / calc(var(--s) / var(--n)) var(--s), conic-gradient(from 180deg at var(--t) var(--g), var(--c)) 0 calc((var(--s) / var(--n) - var(--g) + var(--t)) / 2) / var(--s) calc(var(--s) / var(--n));opacity:.2;width:calc(round(down, 100%, var(--s)) + var(--t));height:calc(4 * var(--s) + var(--t));z-index:0;-webkit-mask-image:linear-gradient(270deg,#0000,#000);mask-image:linear-gradient(270deg,#0000,#000);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.inverted-radius{--r:10px;--s:5px;--x:120px;--y:20px;aspect-ratio:1;border-radius:var(--r);--_m:/calc(2 * var(--r)) calc(2 * var(--r)) radial-gradient(#000 70%, #0000 72%);--_g:conic-gradient(at calc(100% - var(--r)) var(--r), #0000 25%, #000 0);--_d:(var(--s) + var(--r));width:250px;-webkit-mask:calc(100% - var(--_d) - var(--x)) 0 var(--_m), 100% calc(var(--_d) + var(--y)) var(--_m), radial-gradient(var(--s) at 100% 0, #0000 99%, #000 calc(100% + 1px)) calc(-1 * var(--r) - var(--x)) calc(var(--r) + var(--y)), var(--_g) calc(-1 * var(--_d) - var(--x)) 0, var(--_g) 0 calc(var(--_d) + var(--y));mask:calc(100% - var(--_d) - var(--x)) 0 var(--_m), 100% calc(var(--_d) + var(--y)) var(--_m), radial-gradient(var(--s) at 100% 0, #0000 99%, #000 calc(100% + 1px)) calc(-1 * var(--r) - var(--x)) calc(var(--r) + var(--y)), var(--_g) calc(-1 * var(--_d) - var(--x)) 0, var(--_g) 0 calc(var(--_d) + var(--y));background:#3fb8af;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.arc{--b:40px;--a:240deg;aspect-ratio:1;width:150px;padding:var(--b);background:var(--color-secondary);opacity:.2;--_g:/var(--b) var(--b) no-repeat radial-gradient(50% 50%, #000 97%, #0000);-webkit-mask:top var(--_g), calc(50% + 50% * sin(var(--a))) calc(50% - 50% * cos(var(--a))) var(--_g), linear-gradient(#0000 0 0) content-box intersect, conic-gradient(#000 var(--a), #0000 0);mask:top var(--_g), calc(50% + 50% * sin(var(--a))) calc(50% - 50% * cos(var(--a))) var(--_g), linear-gradient(#0000 0 0) content-box intersect, conic-gradient(#000 var(--a), #0000 0);border-radius:50%}.wavy-line{--s:24px;--b:10px;--m:.4;background:var(--color-secondary);opacity:.2;--R:calc(var(--s) * sqrt(var(--m) * var(--m) + 1) + var(--b) / 2);height:calc(2 * var(--R));--_g:#0000 calc(99% - var(--b)), #000 calc(101% - var(--b)) 99%, #0000 101%;width:100%;-webkit-mask:radial-gradient(var(--R) at left 50% bottom calc(-1 * var(--m) * var(--s)), var(--_g)) calc(50% - 2 * var(--s)) calc(50% - var(--s) / 2 - var(--b) / 2) / calc(4 * var(--s)) calc(var(--s) + var(--b)) repeat-x, radial-gradient(var(--R) at left 50% top calc(-1 * var(--m) * var(--s)), var(--_g)) 50% calc(50% + var(--s) / 2 + var(--b) / 2) / calc(4 * var(--s)) calc(var(--s) + var(--b)) repeat-x;mask:radial-gradient(var(--R) at left 50% bottom calc(-1 * var(--m) * var(--s)), var(--_g)) calc(50% - 2 * var(--s)) calc(50% - var(--s) / 2 - var(--b) / 2) / calc(4 * var(--s)) calc(var(--s) + var(--b)) repeat-x, radial-gradient(var(--R) at left 50% top calc(-1 * var(--m) * var(--s)), var(--_g)) 50% calc(50% + var(--s) / 2 + var(--b) / 2) / calc(4 * var(--s)) calc(var(--s) + var(--b)) repeat-x}.heart{aspect-ratio:1;--_m:radial-gradient(#000 69%, #0000 70%) 84.5%/50%;height:150px;-webkit-mask-box-image:var(--_m);-webkit-mask-box-image:var(--_m);mask-border:var(--_m);clip-path:polygon(-41% 0,50% 91%,141% 0);opacity:.4;background:#cc333f}@supports not ((-webkit-mask-box-image:var(--_m))){.heart{-webkit-mask:radial-gradient(at 70% 31%, #000 29%, #0000 30%), radial-gradient(at 30% 31%, #000 29%, #0000 30%), conic-gradient(#000 0 0) bottom/100% 50% no-repeat;mask:radial-gradient(at 70% 31%, #000 29%, #0000 30%), radial-gradient(at 30% 31%, #000 29%, #0000 30%), conic-gradient(#000 0 0) bottom/100% 50% no-repeat}}.bg-shapes{z-index:-1;width:100%;height:100%;position:absolute;top:0;left:0;overflow:hidden}.shape{opacity:.1;position:absolute}.shape-1{background:hsl(var(--p));border-radius:50%;width:200px;height:200px;animation:6s ease-in-out infinite float;top:10%;left:5%}.shape-2{background:hsl(var(--s));border-radius:30% 70% 70% 30%/30% 30% 70% 70%;width:150px;height:150px;animation:8s ease-in-out infinite reverse float;top:60%;right:10%}.shape-3{background:linear-gradient(45deg, hsl(var(--a)), hsl(var(--ac)));border-radius:50px;width:100px;height:300px;animation:10s linear infinite rotate;top:20%;right:20%;transform:rotate(45deg)}.shape-4{background:hsl(var(--in));border-radius:50px;width:250px;height:100px;animation:7s ease-in-out infinite float;bottom:20%;left:15%;transform:rotate(-15deg)}.shape-5{background:hsl(var(--wa));clip-path:polygon(50% 0%,0% 100%,100% 100%);width:80px;height:80px;animation:4s ease-in-out infinite pulse;top:40%;left:30%}.shape-6{background:hsl(var(--su));border-radius:20px;width:120px;height:120px;animation:5s ease-in-out infinite float;bottom:40%;right:5%;transform:rotate(30deg)}@keyframes float{0%,to{transform:translateY(0)rotate(0)}50%{transform:translateY(-20px)rotate(5deg)}}@keyframes rotate{0%{transform:rotate(45deg)}to{transform:rotate(405deg)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.gradient-overlay{background:linear-gradient(135deg, hsla(var(--p), .05) 0%, hsla(var(--s), .05) 50%, hsla(var(--a), .05) 100%)}.article-card{transition:transform .3s,box-shadow .3s}.article-card:hover{transform:translateY(-4px);box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.gradient-bg{background:linear-gradient(#6ee7b7,#34d399,#10b981)}.image-container{background:linear-gradient(#6ee7b71a,#34d39933,#10b9814d)}