:root{--width:100%;--height:100%;--gradient:#000;--spotlight-color:hsla(0,0%,100%,.4);--accent-color:#fff;--accent-opacity:0.15;--border-radius:0;--is-hovered:0;--cursor-x:0;--cursor-y:0;--angle:0}.container{background:var(--gradient);border-radius:var(--border-radius);transition:filter .3s ease-out,outline .3s ease-out;filter:brightness(100%);overflow:hidden}.container,.grain{width:var(--width);height:var(--height);position:absolute}.grain{pointer-events:none;opacity:.13}.borderCard{background:linear-gradient(hsla(0,0%,100%,0),hsla(0,0%,100%,0)) padding-box,linear-gradient(var(--angle,0deg),hsla(0,0%,100%,0),hsla(0,0%,100%,.2)) border-box}.border-highlight,.borderCard{position:absolute;border-radius:var(--border-radius);-webkit-mask:linear-gradient(#fff,#fff) padding-box,linear-gradient(#fff,#fff);mask:linear-gradient(#fff,#fff) padding-box,linear-gradient(#fff,#fff);-webkit-mask-composite:xor;mask-composite:exclude;border:2px solid transparent;pointer-events:none}.border-highlight{width:100%;height:100%;background:radial-gradient(600px circle at var(--cursor-x,0) var(--cursor-y,0),hsla(0,0%,100%,.7) 0,transparent 100%) padding-box,radial-gradient(600px circle at var(--cursor-x,0) var(--cursor-y,0),hsla(0,0%,100%,.7) 0,transparent 100%) border-box;opacity:var(--is-hovered,0);transition:opacity .3s ease-out}.accent{background:radial-gradient(30% 60 circle at center -200px,var(--accent-color) 0,transparent 100%);opacity:var(--accent-opacity)}.accent,.spotlight{position:absolute;width:100%;height:100%;border-radius:var(--border-radius);transition:opacity .3s ease-out;pointer-events:none}.spotlight{background:radial-gradient(30% 60% at var(--cursor-x,50%) var(--cursor-y,50%),var(--spotlight-color) 0,transparent 100%);opacity:var(--is-hovered,0)}