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