:root{--pattern-color: rgba(0, 0, 0, .06);--pattern-bg: #FBFBFE;--intensity: 50;--pattern-opacity: .08;--pattern-image-url: none;--pattern-color-solid: #000000}[class*=pattern-]{position:relative;background-color:var(--pattern-bg);z-index:0}[class*=pattern-]:before{content:"";position:absolute;inset:0;z-index:-1;opacity:var(--pattern-opacity, 1);pointer-events:none;mix-blend-mode:normal}.pattern-dots:before{background-image:radial-gradient(var(--pattern-color) calc(1px + (var(--intensity) * .02px)),transparent 1px);background-size:calc(20px - (var(--intensity) * .1px)) calc(20px - (var(--intensity) * .1px))}.pattern-diagonal:before{background-image:repeating-linear-gradient(45deg,var(--pattern-color),var(--pattern-color) 1px,transparent 1px,transparent calc(10px - (var(--intensity) * .08px)))}.pattern-grid:before{background-image:linear-gradient(var(--pattern-color) 1px,transparent 1px),linear-gradient(90deg,var(--pattern-color) 1px,transparent 1px);background-size:calc(20px - (var(--intensity) * .12px)) calc(20px - (var(--intensity) * .12px))}.pattern-waves:before{background-image:linear-gradient(90deg,var(--pattern-color) 50%,transparent 50%),linear-gradient(var(--pattern-color) 50%,transparent 50%);background-size:calc(4px + (var(--intensity) * .06px)) calc(4px + (var(--intensity) * .06px))}.pattern-hexagons:before{background-image:linear-gradient(30deg,transparent 12.5%,transparent 87%,transparent 87.5%,transparent),linear-gradient(150deg,transparent 12.5%,transparent 87%,transparent 87.5%,transparent),linear-gradient(30deg,transparent 12.5%,transparent 87%,transparent 87.5%,transparent),linear-gradient(150deg,transparent 12.5%,transparent 87%,transparent 87.5%,transparent),linear-gradient(60deg,var(--pattern-color) 25%,transparent 25.5%,transparent 75%,var(--pattern-color) 75%,var(--pattern-color)),linear-gradient(60deg,var(--pattern-color) 25%,transparent 25.5%,transparent 75%,var(--pattern-color) 75%,var(--pattern-color));background-image:linear-gradient(30deg,var(--pattern-bg) 12%,transparent 12.5%,transparent 87%,var(--pattern-bg) 87.5%,var(--pattern-bg)),linear-gradient(150deg,var(--pattern-bg) 12%,transparent 12.5%,transparent 87%,var(--pattern-bg) 87.5%,var(--pattern-bg)),linear-gradient(30deg,var(--pattern-bg) 12%,transparent 12.5%,transparent 87%,var(--pattern-bg) 87.5%,var(--pattern-bg)),linear-gradient(150deg,var(--pattern-bg) 12%,transparent 12.5%,transparent 87%,var(--pattern-bg) 87.5%,var(--pattern-bg)),linear-gradient(60deg,var(--pattern-color) 25%,transparent 25.5%,transparent 75%,var(--pattern-color) 75%,var(--pattern-color)),linear-gradient(60deg,var(--pattern-color) 25%,transparent 25.5%,transparent 75%,var(--pattern-color) 75%,var(--pattern-color));background-size:calc(20px + (var(--intensity) * .12px)) calc(35px + (var(--intensity) * .2px));background-position:0 0,0 0,10px 18px,10px 18px,0 0,10px 18px}.pattern-circles:before{background-image:radial-gradient(circle,var(--pattern-color) 25%,transparent 25%),radial-gradient(circle,var(--pattern-color) 25%,transparent 25%);background-size:calc(40px + (var(--intensity) * .2px)) calc(40px + (var(--intensity) * .2px));background-position:0 0,20px 20px}.pattern-paper:before{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.5'/%3E%3C/svg%3E")}.pattern-zigzag:before{background-image:linear-gradient(135deg,var(--pattern-color) 25%,transparent 25%),linear-gradient(225deg,var(--pattern-color) 25%,transparent 25%),linear-gradient(45deg,var(--pattern-color) 25%,transparent 25%),linear-gradient(315deg,var(--pattern-color) 25%,transparent 25%);background-position:10px 0,10px 0,0 0,0 0;background-size:calc(20px + (var(--intensity) * .1px)) calc(20px + (var(--intensity) * .1px))}.pattern-diamonds:before{background-image:linear-gradient(45deg,var(--pattern-color) 25%,transparent 25%,transparent 75%,var(--pattern-color) 75%,var(--pattern-color)),linear-gradient(45deg,var(--pattern-color) 25%,transparent 25%,transparent 75%,var(--pattern-color) 75%,var(--pattern-color));background-position:0 0,10px 10px;background-size:calc(20px + (var(--intensity) * .1px)) calc(20px + (var(--intensity) * .1px))}.pattern-custom-image:before{background-image:var(--pattern-image-url);background-repeat:repeat;background-position:center;background-size:auto}.preview{background-color:var(--pattern-bg)}