/* pattern0.css */

/* Light Mode Variables */
:root {
  --s: 320px; /* 单元格尺寸: 控制图标之间的整体间距 */
  --icon-size: 128px; /* 图标本身的尺寸 */
  --c1: #f9f9f9; /* 亮色主题底色 */
  --icon-color: rgba(0, 0, 0, 0.04); /* 亮色主题图标颜色 */
}

/* Dark Mode Variables */
html.dark {
  --c1: #121212; /* 暗色主题底色 */
  --icon-color: rgba(255, 255, 255, 0.03); /* 暗色主题图标颜色 */
}

/* 为过度滚动区域设置纯色背景 */
html {
  background-color: var(--c1);
}

/* 将固定背景应用到伪元素上 */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;

  --icon: url("data:image/svg+xml,%3csvg width='128' height='128' xmlns='http://www.w3.org/2000/svg' fill='none'%3e%3cg%3e%3cpath d='m61.40749,93.94518c-2.7282,-0.3151 -4.9543,-0.7871 -6.9827,-1.4569c-10.539,-3.5425 -18.2065,-12.4391 -20.1558,-23.3954c-0.4079,-2.2958 -0.5006,-6.3771 -0.2101,-8.6592c0.4734,-3.5821 1.33,-6.4167 2.8974,-9.6441c2.8727,-5.8793 7.602,-10.6549 13.4512,-13.5686c4.9394,-2.4526 9.6687,-3.4239 15.4128,-3.1483c7.8245,0.3805 15.6761,4.185 20.7874,10.0642c4.0309,4.6447 6.4685,9.9851 7.2856,15.9557c0.2892,2.1253 0.2892,5.8247 0,7.8858c-1.7133,12.0585 -10.1434,21.689 -21.8814,24.9833c-2.4894,0.6943 -4.3609,0.9439 -7.4438,0.9971c-1.4882,0.0259 -2.9109,0.0123 -3.1606,-0.0136zm6.9023,-1.6792c1.5946,-0.2633 3.5043,-0.7352 5.0062,-1.2468c1.3832,-0.472 3.8986,-1.5878 3.8986,-1.7187c0,-0.0532 -0.7366,-0.131 -1.6328,-0.1842c-2.2003,-0.1173 -6.2176,-0.7475 -6.4685,-1.023c-0.0792,-0.0928 -0.6057,-2.0994 -0.5661,-2.1526c0.0395,-0.0259 0.4747,0.0655 0.9753,0.2237c2.1471,0.6166 4.571,0.9317 7.9171,0.9972l3.2002,0.0791l0.6861,-0.5252c1.0667,-0.8143 3.0297,-2.559 2.9505,-2.6245c-0.0395,-0.0395 -0.7379,0.0396 -1.555,0.1705c-2.0816,0.3411 -6.9159,0.3411 -9.063,0.0137c-1.7911,-0.2756 -3.623,-0.7216 -5.0594,-1.2345l-1.0394,-0.367l-0.3561,-1.2467c-0.1978,-0.6821 -0.3424,-1.2591 -0.3301,-1.285c0.0273,-0.0273 0.2115,0.0382 0.4215,0.1432c0.7257,0.3683 2.9246,1.1418 4.2028,1.4705c3.9395,1.0231 8.4055,1.1022 12.6996,0.2496c2.4636,-0.4856 2.3981,-0.4597 3.2015,-1.6014c0.6985,-0.9972 1.6724,-2.559 1.6724,-2.6763c0,-0.0396 -0.3287,0.0395 -0.7243,0.1827c-3.5957,1.2073 -8.4574,1.8375 -12.1063,1.5483c-4.5056,-0.341 -6.785,-0.9576 -12.3177,-3.3448c-2.4103,-1.0367 -5.4795,-2.0734 -6.8627,-2.3094c-0.633,-0.1186 -1.9902,-0.1705 -3.7554,-0.1705c-2.4239,0.0123 -2.99,0.0519 -4.571,0.367c-3.0692,0.577 -5.9543,1.6532 -8.5624,3.1756c-0.5674,0.3273 -1.0544,0.6424 -1.094,0.6956c-0.0532,0.0914 1.225,2.2562 1.5019,2.5454c0.0532,0.0519 0.8034,-0.2755 1.6737,-0.7489c3.8195,-2.0856 7.2447,-2.9655 11.4474,-2.9778c2.5822,0 5.4141,0.4461 7.5748,1.1936c1.6724,0.577 2.7268,0.9849 2.8455,1.1022c0.1323,0.131 0.8566,2.4676 0.7898,2.5331c-0.0123,0.0123 -0.7107,-0.2496 -1.5414,-0.6043c-2.8059,-1.1813 -5.0976,-1.8892 -6.9023,-2.1252c-1.6465,-0.2101 -5.1644,-0.0791 -6.8368,0.2619c-2.3585,0.4856 -5.3363,1.6273 -7.0878,2.7159l-0.6329,0.3942l0.9357,1.0367c1.3437,1.5087 1.2127,1.4569 2.5031,0.8266c1.7133,-0.8266 3.3202,-1.3913 5.1249,-1.7719c1.435,-0.3015 1.9493,-0.3533 4.0841,-0.3533c3.7676,0 6.4276,0.6166 10.2743,2.3612l1.0285,0.472l0.3424,1.1949c0.1841,0.6562 0.3165,1.2073 0.2892,1.2332c-0.0123,0.0259 -0.9481,-0.367 -2.068,-0.8526c-2.2521,-0.9971 -3.3993,-1.4173 -5.2558,-1.9424c-1.0681,-0.3015 -1.581,-0.367 -3.4389,-0.4202c-3.1742,-0.0791 -5.4931,0.3015 -8.2336,1.3518c-1.791,0.6957 -1.791,0.6957 -0.948,1.3246c4.3869,3.2942 9.2607,5.249 14.4647,5.8137c1.5537,0.1705 5.7306,0.0655 7.2979,-0.1705zm14.8863,-15.0241c2.0284,-0.3546 2.78,-0.5511 5.058,-1.2863c1.3969,-0.4461 1.9507,-0.682 2.0816,-0.9058c0.1583,-0.2223 1.2386,-3.2137 1.2386,-3.4115c0,-0.0123 -0.5797,0.1978 -1.2781,0.4856c-4.1619,1.6928 -8.1409,2.4799 -12.4228,2.4799c-5.0976,0 -7.5475,-0.5511 -12.581,-2.8209c-3.3461,-1.4951 -5.4931,-2.1908 -8.6278,-2.7814c-1.5946,-0.2892 -6.9037,-0.3288 -8.4314,-0.0655c-2.2794,0.4065 -4.7689,1.1813 -6.7182,2.0857c-1.1335,0.5252 -3.2669,1.7719 -4.0445,2.349l-0.4215,0.3151l0.3683,0.8921c0.2115,0.4856 0.4488,1.0367 0.5402,1.2208l0.1582,0.3411l0.8294,-0.4993c3.0965,-1.8756 6.5081,-3.136 10.1447,-3.7526c1.8306,-0.3015 5.9543,-0.3015 7.8381,0c3.0296,0.4992 4.9407,1.1281 9.1557,3.0187c3.3993,1.5087 5.3227,2.1116 7.8381,2.4404c0.6193,0.0777 1.304,0.1705 1.5155,0.1964c0.2237,0.0259 1.6996,0.0396 3.2929,0.0136c2.2262,-0.0272 3.2533,-0.105 4.466,-0.3151zm-44.8826,-10.7067c1.1595,-1.6533 3.2534,-4.6461 4.6502,-6.6267c1.4091,-1.982 4.0841,-5.7865 5.9679,-8.4628c1.8701,-2.6641 3.4907,-4.9339 3.5698,-5.0267c0.1323,-0.1432 0.7121,0.3806 3.0433,2.7828c1.5932,1.6259 2.9505,2.9655 3.0296,2.9655c0.0655,-0.0137 0.7516,-1.064 1.5019,-2.3367c3.8603,-6.534 4.4264,-7.4916 4.4919,-7.5052c0.0532,0 0.633,0.9317 1.3041,2.0598c3.7676,6.3252 4.5328,7.5979 4.6379,7.7152c0.0791,0.0792 1.2645,-1.0094 3.1224,-2.8468l2.9901,-2.9778l7.707,11.5333c5.7429,8.6074 7.7317,11.4679 7.7985,11.2974c0.2101,-0.5906 0.4079,-3.031 0.4079,-5.1303c-0.0259,-4.4483 -0.9358,-8.3196 -2.8987,-12.3218c-3.7676,-7.6621 -10.8022,-13.2658 -19.1409,-15.2205c-2.2398,-0.5374 -3.7935,-0.6957 -6.5203,-0.708c-2.8455,0 -4.6379,0.2224 -7.1806,0.8785c-10.3929,2.69 -18.6006,11.2578 -20.7477,21.6508c-0.4488,2.1785 -0.5934,3.6217 -0.5934,5.8519c0,2.5713 0.3819,5.852 0.6452,5.5641c0.0532,-0.0668 1.0545,-1.4704 2.2139,-3.136z' fill='black'/%3e%3c/g%3e%3c/svg%3e");

  /* 
    设置一个纯色背景，这个颜色将透过遮罩的“镂空”部分显示出来 
  */
  background-color: var(--icon-color);

  /* 
    使用 -webkit-mask-* 属性来创建图案。
  */
  -webkit-mask-image: var(--icon), var(--icon);
  -webkit-mask-repeat: repeat, repeat;
  -webkit-mask-size: var(--s) var(--s); /* 定义重复单元格的大小 */
  /* 关键：第一层遮罩在左上角，第二层在中心，形成交错 */
  -webkit-mask-position: 0 0, calc(var(--s) / 2) calc(var(--s) / 2);

  /* 为了更好的兼容性，也写上不带前缀的标准属性 */
  mask-image: var(--icon), var(--icon);
  mask-repeat: repeat, repeat;
  mask-size: var(--s) var(--s);
  mask-position: 0 0, calc(var(--s) / 2) calc(var(--s) / 2);
}