html.anama{--s: 126px;--c1: #e7525b;--c2: #78dbf0;--_g: 80%, var(--c1) 25.4%, #0000 26%;background:radial-gradient(at 80% var(--_g)),radial-gradient(at 20% var(--_g)),conic-gradient(from -45deg at 50% 41%,var(--c1) 90deg,var(--c2) 0) calc(var(--s) / 2) 0;background-size:var(--s) var(--s)}html.squigly{--s: 140px;--c1: #170409;--c2: #67917a;--_g: #0000 52%, var(--c1) 54% 57%, #0000 59%;background:radial-gradient(farthest-side at -33.33% 50%,var(--_g)) 0 calc(var(--s) / 2),radial-gradient(farthest-side at 50% 133.33%,var(--_g)) calc(var(--s) / 2) 0,radial-gradient(farthest-side at 133.33% 50%,var(--_g)),radial-gradient(farthest-side at 50% -33.33%,var(--_g)),var(--c2);background-size:calc(var(--s) / 4.667) var(--s),var(--s) calc(var(--s) / 4.667)}html.waves{--s: 150px;--c1: #f7d2a1;--c2: #05057e;--_g: var(--c1) 0% 5%, var(--c2) 6% 15%, var(--c1) 16% 25%, var(--c2) 26% 35%, var(--c1) 36% 45%, var(--c2) 46% 55%, var(--c1) 56% 65%, var(--c2) 66% 75%, var(--c1) 76% 85%, var(--c2) 86% 95%, #0000 96%;background:radial-gradient(50% 50% at 100% 0,var(--_g)),radial-gradient(50% 50% at 0 100%,var(--_g)),radial-gradient(50% 50%,var(--_g)),radial-gradient(50% 50%,var(--_g)) calc(var(--s) / 2) calc(var(--s) / 2) var(--c1);background-size:var(--s) var(--s)}html.stars{--s: 90px;--c1: #fff220;--c2: #e181c2;--d: calc(var(--s) / 10);--_g: var(--c1) 36deg, #0000 0;background:conic-gradient(from 162deg at calc(var(--s) * .5) calc(var(--s) * .68),var(--_g)),conic-gradient(from 18deg at calc(var(--s) * .19) calc(var(--s) * .59),var(--_g)),conic-gradient(from 306deg at calc(var(--s) * .81) calc(var(--s) * .59),var(--_g)),var(--c2);background-position:0 calc(var(--s) * .35);background-size:calc(var(--s) + var(--d)) calc(var(--s) + var(--d))}html.clouds{--s: 100px;--c1: #f8b195;--c2: #355c7d;--_g: var(--c2) 6% 14%, var(--c1) 16% 24%, var(--c2) 26% 34%, var(--c1) 36% 44%, var(--c2) 46% 54%, var(--c1) 56% 64%, var(--c2) 66% 74%, var(--c1) 76% 84%, var(--c2) 86% 94%;background:radial-gradient(100% 100% at 100% 0,var(--c1) 4%,var(--_g),#0008 96%,#0000),radial-gradient(100% 100% at 0 100%,#0000,#0008 4%,var(--_g),var(--c1) 96%) var(--c1);background-size:var(--s) var(--s)}html.classic{--s: 220px;--c1: #774f38;--c2: #f1d4af;--_g: radial-gradient(#0000 60%, var(--c1) 61% 63%, #0000 64% 77%, var(--c1) 78% 80%, #0000 81%);--_c: , #0000 75%, var(--c2) 0;background:conic-gradient(at 12% 20% var(--_c)) calc(var(--s)* .44) calc(.9*var(--s)),conic-gradient(at 12% 20% var(--_c)) calc(var(--s)*-.06) calc(.4*var(--s)),conic-gradient(at 20% 12% var(--_c)) calc(.9*var(--s)) calc(var(--s)* .44),conic-gradient(at 20% 12% var(--_c)) calc(.4*var(--s)) calc(var(--s)*-.06),var(--_g),var(--_g) calc(var(--s)/2) calc(var(--s)/2) var(--c2);background-size:var(--s) var(--s)}html.cubes{--s: 200px;--c1: #1d1d1d;--c2: #4e4f51;--c3: #3c3c3c;background:repeating-conic-gradient(from 30deg,#0000 0 120deg,var(--c3) 0 50%) calc(var(--s)/2) calc(var(--s)*tan(30deg)/2),repeating-conic-gradient(from 30deg,var(--c1) 0 60deg,var(--c2) 0 120deg,var(--c3) 0 50%);background-size:var(--s) calc(var(--s)*tan(30deg))}html.material{--s: 34px;--c1: #ecbe13;--c2: #309292;--_g: radial-gradient(calc(var(--s)/2),var(--c1) 97%,#0000);background:var(--_g),var(--_g) calc(2*var(--s)) calc(2*var(--s)),repeating-conic-gradient(from 45deg,#0000 0 25%,var(--c2) 0 50%) calc(-.707*var(--s)) calc(-.707*var(--s)),repeating-linear-gradient(135deg,var(--c1) calc(var(--s)/-2) calc(var(--s)/2),var(--c2) 0 calc(2.328*var(--s)));background-size:calc(4*var(--s)) calc(4*var(--s))}html.bricks{--s: 100px;--c1: #b8532e;--c2: #292323;--c:var(--c2) 20% 30%;background:linear-gradient(135deg,#0000 20%,var(--c),#0000 0),repeating-linear-gradient(45deg,var(--c),var(--c1) 0 70%);background-size:var(--s) var(--s)}html.anama,html.squigly{background-repeat:repeat}.pattern-preview{width:48px;height:48px;border-radius:50%;overflow:hidden;display:inline-block;background-repeat:repeat;background-position:center;background-size:cover;border:2px solid transparent;cursor:pointer}.pattern-preview.selected{outline:4px solid rgba(255,255,255,.16);box-shadow:0 6px 16px #00000073;transform:translateZ(0) scale(1.04)}.pattern-preview.anama{--s: 36px;--c1: #e7525b;--c2: #78dbf0;--_g: 80%, var(--c1) 25.4%, #0000 26%;background:radial-gradient(at 80% var(--_g)),radial-gradient(at 20% var(--_g)),conic-gradient(from -45deg at 50% 41%,var(--c1) 90deg,var(--c2) 0) calc(var(--s) / 2) 0;background-size:var(--s) var(--s)}.pattern-preview.squigly{--s: 42px;--c1: #170409;--c2: #67917a;--_g: #0000 52%, var(--c1) 54% 57%, #0000 59%;background:radial-gradient(farthest-side at -33.33% 50%,var(--_g)) 0 calc(var(--s) / 2),radial-gradient(farthest-side at 50% 133.33%,var(--_g)) calc(var(--s) / 2) 0,radial-gradient(farthest-side at 133.33% 50%,var(--_g)),radial-gradient(farthest-side at 50% -33.33%,var(--_g)),var(--c2);background-size:calc(var(--s) / 4.667) var(--s),var(--s) calc(var(--s) / 4.667)}.pattern-preview.waves{--s: 36px;--c1: #f7d2a1;--c2: #05057e;--_g: var(--c1) 0% 5%, var(--c2) 6% 15%, var(--c1) 16% 25%, var(--c2) 26% 35%, var(--c1) 36% 45%, var(--c2) 46% 55%;background:radial-gradient(50% 50% at 100% 0,var(--_g)),radial-gradient(50% 50% at 0 100%,var(--_g)),radial-gradient(50% 50%,var(--_g)),radial-gradient(50% 50%,var(--_g)) calc(var(--s) / 2) calc(var(--s) / 2) var(--c1);background-size:var(--s) var(--s)}.pattern-preview.stars{--s: 28px;--c1: #fff220;--c2: #e181c2;--d: calc(var(--s) / 10);--_g: var(--c1) 36deg, #0000 0;background:conic-gradient(from 162deg at calc(var(--s) * .5) calc(var(--s) * .68),var(--_g)),conic-gradient(from 18deg at calc(var(--s) * .19) calc(var(--s) * .59),var(--_g)),conic-gradient(from 306deg at calc(var(--s) * .81) calc(var(--s) * .59),var(--_g)),var(--c2);background-position:0 calc(var(--s) * .35);background-size:calc(var(--s) + var(--d)) calc(var(--s) + var(--d))}.pattern-preview.clouds{--s: 36px;--c1: #f8b195;--c2: #355c7d;--_g: var(--c2) 6% 14%, var(--c1) 16% 24%, var(--c2) 26% 34%, var(--c1) 36% 44%;background:radial-gradient(100% 100% at 100% 0,var(--c1) 4%,var(--_g),#0008 96%,#0000),radial-gradient(100% 100% at 0 100%,#0000,#0008 4%,var(--_g),var(--c1) 96%) var(--c1);background-size:var(--s) var(--s)}.pattern-preview.classic{--s: 48px;--c1: #774f38;--c2: #f1d4af;--_g: radial-gradient(#0000 60%, var(--c1) 61% 63%, #0000 64% 77%, var(--c1) 78% 80%, #0000 81%);--_c: , #0000 75%, var(--c2) 0;background:conic-gradient(at 12% 20% var(--_c)) calc(var(--s) * .44) calc(.9 * var(--s)),conic-gradient(at 12% 20% var(--_c)) calc(var(--s) * -.06) calc(.4 * var(--s)),conic-gradient(at 20% 12% var(--_c)) calc(.9 * var(--s)) calc(var(--s) * .44),conic-gradient(at 20% 12% var(--_c)) calc(.4 * var(--s)) calc(var(--s) * -.06),var(--_g),var(--_g) calc(var(--s) / 2) calc(var(--s) / 2) var(--c2);background-size:var(--s) var(--s)}.pattern-preview.cubes{--s: 44px;--c1: #1d1d1d;--c2: #4e4f51;--c3: #3c3c3c;background:repeating-conic-gradient(from 30deg,#0000 0 120deg,var(--c3) 0 50%) calc(var(--s)/2) calc(var(--s)*tan(30deg)/2),repeating-conic-gradient(from 30deg,var(--c1) 0 60deg,var(--c2) 0 120deg,var(--c3) 0 50%);background-size:var(--s) calc(var(--s)*tan(30deg))}.pattern-preview.material{--s: 22px;--c1: #ecbe13;--c2: #309292;--_g: radial-gradient(calc(var(--s)/2),var(--c1) 97%,#0000);background:var(--_g),var(--_g) calc(2*var(--s)) calc(2*var(--s)),repeating-conic-gradient(from 45deg,#0000 0 25%,var(--c2) 0 50%) calc(-.707*var(--s)) calc(-.707*var(--s)),repeating-linear-gradient(135deg,var(--c1) calc(var(--s)/-2) calc(var(--s)/2),var(--c2) 0 calc(2.328*var(--s)));background-size:calc(4*var(--s)) calc(4*var(--s))}.pattern-preview.bricks{--s: 36px;--c1: #b8532e;--c2: #292323;--c: var(--c2) 20% 30%;background:linear-gradient(135deg,#0000 20%,var(--c),#0000 0),repeating-linear-gradient(45deg,var(--c),var(--c1) 0 70%);background-size:var(--s) var(--s)}.loader{width:40px;aspect-ratio:1;border-radius:50%;background:#f03355;clip-path:polygon(0 0,100% 0,100% 100%,0 100%);animation:l1 2s infinite cubic-bezier(.3,1,0,1)}@keyframes l1{33%{border-radius:0;background:#514b82;clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}66%{border-radius:0;background:#ffa516;clip-path:polygon(50% 0,50% 0,100% 100%,0 100%)}}.loader:focus{outline:none}