:root{
  --banner-h: 50px;
  --egfont-size: 70px;
  --pointer:url('../VI/pointer_32.png'),auto;
  --code3:#48a64d;
  --code4:#b677b1;
  --code5:#a66e48;
  --code6:#77b6b6;
  --code7:#a64848;
  --code8:#527ac4;
  --code9:#e09524;
  --code10:#ec657c;
}


html{
  cursor: url('../VI/cursor_24.png'),auto;
}

* {
  cursor: inherit;
}

.tex-noise{
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: url("../VI/noise.jpg") 0 0/200px 200px,url("../VI/noise.jpg") 0 0/300px 300px;
  opacity: 0.2;
  filter: brightness(110%);
  mix-blend-mode: hard-light;
  z-index: 1000;
  pointer-events: none;
}

[data-theme="dark"] .tex-noise{
  mix-blend-mode: overlay;
  opacity: 0.4;
}

.tex-dot{
  --dot-col: rgba(0, 0, 0, 0.2);
  --dot-wh: 1px;
  --dot-gap: 10px;
  background: 
  repeating-radial-gradient(
    circle at center,
    var(--dot-col) 0,
    var(--dot-col) var(--dot-wh),
    transparent var(--dot-wh),
    transparent calc(var(--dot-gap)*2)), var(--boxBak);
  background-size: var(--dot-gap) var(--dot-gap);
}

.tex-line{
  --line-col: rgba(0, 0, 0, 0.8);
  --line-size: 50px;
  --line-bod: 4%;
  --line-deg: -45deg;
  --line-bak: transparent;
  background: 
  repeating-linear-gradient(var(--line-deg),
    var(--line-col) -20%,
    var(--line-col) calc(-20% + var(--line-bod)),
    transparent calc(-20% + var(--line-bod)),
    transparent 30%,
    var(--line-col) 30%,
    var(--line-col) calc(30% + var(--line-bod)),
    transparent calc(30% + var(--line-bod)),
    transparent 80%,
    var(--line-col) 80%,
    var(--line-col) calc(80% + var(--line-bod)),
    transparent calc(80% + var(--line-bod)),
    transparent 100%
    ) 0 0/var(--line-size) var(--line-size),var(--line-bak);
}

@property --circle-move-num{
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

.tex-circle{
  --circle-col: rgba(109, 109, 109, 0.356);
  --circle-bak: transparent;
  --circle-gap-num: 80;
  --circle-size: max(100vw,100vh);
  --circle-bod: 4px;/*4*/
  --circle-gap: calc(var(--circle-gap-num) * 1px);;/*20*/
  --circle-gap2: calc(var(--circle-gap) + var(--circle-bod));/*24*/
  --circle-gap3: calc(var(--circle-gap2) + var(--circle-gap));/*44*/
  --circle-move: calc(var(--circle-move-num) * 1px - var(--circle-gap) - var(--circle-bod));
  background: 
  radial-gradient(
    at center,
    transparent var(--circle-move),
    transparent calc(var(--circle-gap) + var(--circle-move)),
    var(--circle-col) calc(var(--circle-gap) + var(--circle-move)),
    var(--circle-col) calc(var(--circle-gap2) + var(--circle-move)),
    transparent calc(var(--circle-gap2) + var(--circle-move)),
    transparent calc(var(--circle-gap2) * 1 + var(--circle-gap) + var(--circle-move)),
    var(--circle-col) calc(var(--circle-gap2) * 1 + var(--circle-gap) + var(--circle-move)),
    var(--circle-col) calc(var(--circle-gap2) * 2 + var(--circle-move)),
    transparent calc(var(--circle-gap2) * 2 + var(--circle-move)),
    transparent calc(var(--circle-gap2) * 2 + var(--circle-gap) + var(--circle-move)),
    var(--circle-col) calc(var(--circle-gap2) * 2 + var(--circle-gap) + var(--circle-move)),
    var(--circle-col) calc(var(--circle-gap2) * 3 + var(--circle-move)),
    transparent calc(var(--circle-gap2) * 3 + var(--circle-move)),
    transparent calc(var(--circle-gap2) * 3 + var(--circle-gap) + var(--circle-move)),
    var(--circle-col) calc(var(--circle-gap2) * 3 + var(--circle-gap) + var(--circle-move)),
    var(--circle-col) calc(var(--circle-gap2) * 4 + var(--circle-move)),
    transparent calc(var(--circle-gap2) * 4 + var(--circle-move)),
    transparent calc(var(--circle-gap2) * 4 + var(--circle-gap) + var(--circle-move)),
    var(--circle-col) calc(var(--circle-gap2) * 4 + var(--circle-gap) + var(--circle-move)),
    var(--circle-col) calc(var(--circle-gap2) * 5 + var(--circle-move)),
    transparent calc(var(--circle-gap2) * 5 + var(--circle-move)),
    transparent calc(var(--circle-gap2) * 5 + var(--circle-gap) + var(--circle-move)),
    var(--circle-col) calc(var(--circle-gap2) * 5 + var(--circle-gap) + var(--circle-move)),
    var(--circle-col) calc(var(--circle-gap2) * 6 + var(--circle-move)),
    transparent calc(var(--circle-gap2) * 6 + var(--circle-move)),
    transparent calc(var(--circle-gap2) * 6 + var(--circle-gap) + var(--circle-move)),
    var(--circle-col) calc(var(--circle-gap2) * 6 + var(--circle-gap) + var(--circle-move)),
    var(--circle-col) calc(var(--circle-gap2) * 7 + var(--circle-move)),
    transparent calc(var(--circle-gap2) * 7 + var(--circle-move)),
    transparent calc(var(--circle-gap2) * 7 + var(--circle-gap) + var(--circle-move)),
    var(--circle-col) calc(var(--circle-gap2) * 7 + var(--circle-gap) + var(--circle-move)),
    var(--circle-col) calc(var(--circle-gap2) * 8 + var(--circle-move)),
    transparent calc(var(--circle-gap2) * 8 + var(--circle-move)),
    transparent calc(var(--circle-gap2) * 8 + var(--circle-gap) + var(--circle-move)),
    var(--circle-col) calc(var(--circle-gap2) * 8 + var(--circle-gap) + var(--circle-move)),
    var(--circle-col) calc(var(--circle-gap2) * 9 + var(--circle-move)),
    transparent calc(var(--circle-gap2) * 9 + var(--circle-move)),
    transparent calc(var(--circle-gap2) * 9 + var(--circle-gap) + var(--circle-move)),
    var(--circle-col) calc(var(--circle-gap2) * 9 + var(--circle-gap) + var(--circle-move)),
    var(--circle-col) calc(var(--circle-gap2) * 10 + var(--circle-move)),
    transparent calc(var(--circle-gap2) * 10 + var(--circle-move)),
    transparent calc(var(--circle-gap2) * 10 + var(--circle-gap) + var(--circle-move)),
    var(--circle-col) calc(var(--circle-gap2) * 10 + var(--circle-gap) + var(--circle-move)),
    var(--circle-col) calc(var(--circle-gap2) * 11 + var(--circle-move)),
    transparent calc(var(--circle-gap2) * 11 + var(--circle-move)),
    transparent calc(var(--circle-gap2) * 11 + var(--circle-gap) + var(--circle-move)),
    var(--circle-col) calc(var(--circle-gap2) * 11 + var(--circle-gap) + var(--circle-move)),
    var(--circle-col) calc(var(--circle-gap2) * 12 + var(--circle-move)),
    transparent calc(var(--circle-gap2) * 12 + var(--circle-move)),
    transparent calc(var(--circle-gap2) * 12 + var(--circle-gap) + var(--circle-move)),
    var(--circle-col) calc(var(--circle-gap2) * 12 + var(--circle-gap) + var(--circle-move))
    ) 50% 50%/var(--circle-size) var(--circle-size),var(--circle-bak);
  background-repeat: repeat;
}

[data-theme="light"] .dot{
  --dot-col: rgba(177, 177, 177, 0.2);
}

[data-theme="dark"] .dot{
  --dot-col: rgba(55, 55, 55, 0.432);
}

[data-grid-all]{
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  --grid-wh: 200px;
  --grid-bod-w: 2px;
  --grid-col: var(--boxBod);
  z-index: -1;
  perspective: 500px;
  opacity: 0.5;
}

[data-grid]{
  width: calc(100% + var(--grid-bod-w)*2);
  height: calc(100% + var(--grid-bod-w)*2);
  position: absolute;
  top: calc(var(--grid-bod-w)*-1);
  left: calc(var(--grid-bod-w)*-1);
  background: 
  linear-gradient(to left,var(--grid-col) var(--grid-bod-w),transparent var(--grid-bod-w)) 0 0/var(--grid-wh) var(--grid-wh) repeat,
  linear-gradient(to top,var(--grid-col) var(--grid-bod-w),transparent var(--grid-bod-w)) 0 0/var(--grid-wh) var(--grid-wh) repeat;
}

@keyframes gridMove {
  to{
    background-position: 0 calc(var(--grid-wh) * var(--grid-x));
  }
}

@keyframes gridMove2 {
  to{
    background-position: calc(var(--grid-wh) * var(--grid-x)) 0;
  }
}

[data-grid]::before{
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border: var(--grid-bod-w) solid var(--grid-col);
}

[data-grid="top"]::after,[data-grid="bottom"]::after{
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient( to bottom, transparent 0%, var(--boxBak) 80%)
}

[data-grid="left"]::after,[data-grid="right"]::after{
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient( to right, transparent 0%, var(--boxBak) 80%)
}

[data-grid="top"]{
  --grid-x: -1;
  transform-style: preserve-3d;
  transform-origin: top center;
  transform: rotateX(-90deg);
  animation: gridMove 1s linear infinite;
}

[data-grid="left"]{
  --grid-x: -1;
  transform-style: preserve-3d;
  transform-origin: left center;
  transform: rotateY(90deg);
  animation: gridMove2 1s linear infinite;
}

[data-grid="bottom"]{
  --grid-x: -1;
  transform-style: preserve-3d;
  transform-origin: bottom center;
  transform: rotateX(180deg) rotateX(90deg) translateY(100%);
  animation: gridMove 1s linear infinite;
}

[data-grid="right"]{
  --grid-x: -1;
  transform-style: preserve-3d;
  transform-origin: right center;
  transform: rotateX(180deg) rotateY(-90deg) translateX(100%);
  animation: gridMove2 1s linear infinite;
}

[data-graph-bod]{
  stroke-width: var(--bod-w,1px);
  stroke: var(--mainColor);
  stroke-linecap: square;
}

.nobod{
  --boxBod: transparent;
}

.nobod:focus{
  --bod-focus: transparent;
}

/*prismjs代码高亮库专用 START*/
.attr-name{
  color: var(--code1);
}

.attr-value{
  color: var(--code2);
}

.punctuation{
  color: var(--mainColor);
}

.attr-equals{
  color: var(--mainColor);
}

.comment{
  color: var(--mainColor);
  opacity: 0.5;
}

.keyword{
  color: var(--code1);
}

.function{
  color: var(--code2);
}
/*prismjs代码高亮库专用 END*/

[data-page-id="start"]{
  --start-box: 200px;
}

[data-language="En"] [data-tips]::after{
  content: var(--tips-text-en,'something there');
}

[data-language="Zh"]{
  --banner-dark:url('../VI/banner_top_zh_dark.jpg');
  --banner-light:url('../VI/banner_top_zh_light.jpg');
}
[data-language="En"]{
  --banner-dark:url('../VI/banner_top_en_dark.jpg');
  --banner-light:url('../VI/banner_top_en_light.jpg');
}
[data-theme="light"]{
  --banner-bak:#1a1a1a;
  --banner-top:var(--banner-dark)
}
[data-theme="dark"]{
  --banner-bak:#eaeaea;
  --banner-top:var(--banner-light)
}
[data-banner-top]{
  width: 100vw;
  height: var(--banner-h);
  background: var(--banner-top),var(--banner-bak);
  background-size:contain;
  background-repeat: no-repeat;
  background-position:calc(10% - 8vw) 50%;
}

[data-banner-top="home"]{
  position: absolute;
  bottom: 0;
}
[data-banner-top-mask]{
  width: 100vw;
  height: var(--banner-h);
  position: relative;
  overflow: hidden;
  animation: topTabUp 0.5s;
}

@keyframes topTabUp {
  0%{
    transform: translateY(calc(var(--banner-h) * -1));
  }
  100%{
    transform: translateY(0%);
  }
}

@keyframes topTabOver {
  0%{
    height: var(--banner-h);
  }
  100%{
    height: 0;
  }
}

[data-mobile="false"] .tab-gap{
  width: 1px;
  height: 2ch;
  background: var(--boxBak);
}

.tab-top{
  position: relative;
  text-transform: capitalize;
  font-weight: 700;
  display: flex;
  align-items: center;
}

input[type="checkbox"]:checked + .tab-top::after{
  content: '';
  position: absolute;
  width: 100%;
  height: var(--tab-pick-af-h,2px);
  background: var(--themeColor2);
  left: 0;
  bottom: 2px;
}

[data-tab-top]{
  padding: 0 4%;
}

[data-tab-top] .tab-top{
  padding: 2px 8px;
  color:var(--boxBak);
  height: 100%;
}

[data-tab-side-list] .tab-top{
  padding: 8px 20px;
  color:var(--mainColor);
  font-size: 14px;
  height: 4ch;
}



[data-tab-side]{
  display: none;
  animation: topTabUp 0.5s;
}

[data-tab-side-mix]{
  width: 200px;
  background: var(--boxGry);
  padding: 40px 10px;
  display: none;
  overflow: hidden;
}

[data-tab-side-list] input[type="checkbox"]:checked + .tab-top{
  font-size: 16px;
}

[data-tab-side-list] input[type="checkbox"]:checked + .tab-top::after{
  animation: widthUp 0.5s ease-in-out;
}

@keyframes sideUp {
  0%{
    width: 0;
  }
  100%{
    width: 200px;
  }
}

@keyframes sideOver {
  0%{
    width: 200px;
    padding-left: 10px;
  }
  100%{
    width: 0;
    padding-left: 0px;
  }
}

#tips-all{
  display: none;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 100%;
  bottom: 80px;
  margin: auto;
  animation: boxUp 0.2s;
  z-index: 20;
  pointer-events: none;
}

.tips-all-text{
  color: #ffffff;
  background: rgba(0, 0, 0, 0.8);
  padding: 4px 8px;
  border-radius: 8px;
}


[data-icon-more]{
  transition: transform 0.4s;
}

input[type="checkbox"]:checked + label [data-icon-more]{
  transform: rotate(90deg);
}

[data-icon-more-path]{
  stroke: var(--mainColor);
  stroke-width: 2;
  transition: transform 0.2s;
}

[data-icon-more-path="1"]{
  transform: matrix(1,0,0,1,1,4);
}
[data-icon-more-path="2"]{
  transform: matrix(1,0,0,1,1,10);
}
[data-icon-more-path="3"]{
  transform: matrix(1,0,0,1,1,16);
}

input[type="checkbox"]:checked + label [data-icon-more-path="1"]{
  transform: matrix(0.7,0.7,-0.7,0.7,3.64,3.64);
}
input[type="checkbox"]:checked + label [data-icon-more-path="2"]{
  transform: matrix(0.1,0,0,1,10,10);
}
input[type="checkbox"]:checked + label [data-icon-more-path="3"]{
  transform: matrix(0.7,-0.7,0.7,0.7,3.64,16.37);
}

.switch [data-swi-icon]{
transition:transform 0.2s ease-out;
}

input[type="checkbox"]:checked+.switch [data-swi-icon]{
  transform: translateX(var(--swi-h,18px));
}

[data-back="home"]{
  --back-bak: #7263dfd5;
  --back-w: 40px;
  --back-text:'返回首页';
  --back-text-en:'Home';
  --arrow-w: 4;
}

[data-turnto="fontstyle"]{
  --turnto-bak: #e2b24bd5;
  --turnto-w: 40px;
  --turnto-text:'字效编辑器';
  --turnto-text-en:'Font Effect';
  --arrow-w: 4;
}

[data-scroll-round]{
  overflow-y: scroll;
  --scroll-cut: 140px;
  height: calc(100vh - var(--scroll-cut));
  gap: 10px;
  border-radius: 10px;
}

[data-worksname-list]{
  --turnto-w:60px;
  --arrow-w: 4;
  --svg-h:130px;
  gap:10px;
  padding: 10px 0;
}

[data-worksname-turnto]{
  width: fit-content;
  gap: 20px;
  transform-style: preserve-3d;
  transform: translate3d(0,0,0);
}

[data-worksname-turnto]:hover [data-worksname-path],
[data-worksname-turnto]:hover [data-arrow-path]
{
  animation: none;
}

[data-page-id="homepage"] [data-page-main="true"]{
  animation: homepageUp 0.5s ease-in-out;
}

@keyframes homepageUp {
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}


[data-worksname-list]{
  --turnto-text:'详情';
  --turnto-text-en:'view';
}

[data-worksname] div{
  overflow: hidden;
}

[data-theme="light"] [data-worksname]{
  background: linear-gradient(to right,var(--themeColor));
  background-repeat: no-repeat;
  background-size: 0;
  background-position: 0;
}

[data-theme="dark"] [data-worksname]{
  background: linear-gradient(to right,var(--boxGry));
  background-repeat: no-repeat;
  background-size: 0;
  background-position: 0;
}

@keyframes colormove {
  0%{
    background-size: 0%;
    background-position: 0;
  }
  50%{
    background-size: 100%;
    background-position: 0;
  }
  51%{
    background-size: 100%;
    background-position: 100%;
  }
  100%{
    background-size: 0%;
    background-position: 100%;
  }
}

@keyframes colormove1 {
  0%{
    background-size: 0%;
  }
  100%{
    background-size: 100%;
  }
}

@keyframes colormove2 {
  0%{
    background-size: 100%;
    background-position: 100%;
  }
  100%{
    background-size: 0%;
    background-position: 100%;
  }
}

[data-worksname="zh"],[data-arrow-path]{
  --bod-cap: square/*square | round*/;
  --bod-join: round/*miter | round*/;
}

[data-worksname="en"],[data-worksname="zh"]{
  --bod-cap: butt/*butt | round*/;
  --bod-join: miter/*miter | round*/;
}

[data-language="Zh"] [data-worksname-path]{
  stroke: var(--mainColor);
  stroke-linecap: var(--bod-cap);
  stroke-linejoin: var(--bod-join);
  stroke-width: 4;
  --bod-array: 100%;
  stroke-dasharray: var(--bod-array);
  stroke-dashoffset: 0%;
  animation: worksnameCut 10s ease-in-out infinite,worksnameChange 20s infinite;
}

@keyframes worksnameCut {
  0%{
    stroke-dashoffset: var(--bod-array);
    stroke-width: 0.25;
  }
  10%{
    stroke-dashoffset: 0%;
    stroke-width: var(--bod-w);
  }
  90%{
    stroke-dashoffset: 0%;
    stroke-width: var(--bod-w);
  }
  100%{
    stroke-dashoffset: calc(var(--bod-array) * -1);
    stroke-width: 0.25;
  }
}

@keyframes worksnameChange {
  0%{
    --bod-cap: butt;
    --bod-w: 4;
  }
  50%{
    --bod-cap: butt;
    --bod-w: 4;
  }
  51%{
    --bod-cap: round;
    --bod-w: 3;
  }
  100%{
    --bod-cap: round;
    --bod-w: 3;
  } 
}

[data-language="En"] [data-worksname-path]{
  stroke:var(--mainColor);
  stroke-linecap:var(--bod-cap);
  stroke-linejoin:var(--bod-join);
  stroke-width:6;
  --bod-array:140%;
  stroke-dasharray: var(--bod-array);
  stroke-dashoffset: 0%;
  animation: worksnameCut2 10s ease-in-out infinite,worksnameChange2 20s infinite;
}

@keyframes worksnameCut2 {
  
  0%{
    stroke-dashoffset: var(--bod-array);
    stroke-width:1;
  }
  10%{
    stroke-dashoffset: 0%;
    stroke-width:var(--bod-w);
  }
  11%{
    stroke-dashoffset: 0%;
    stroke-width:var(--bod-w);
    stroke-dasharray: none;
  }
  89%{
    stroke-dashoffset: 0%;
    stroke-width:var(--bod-w);
    stroke-dasharray: none;
  }
  90%{
    stroke-dashoffset: 0%;
    stroke-width:var(--bod-w);
  }
  100%{
    stroke-dashoffset: calc(var(--bod-array) * -1);
    stroke-width:1;
  }
}

@keyframes worksnameChange2 {
  0%{
    --bod-join: miter;
    --bod-w: 6;
  }
  50%{
    --bod-join: miter;
    --bod-w: 6;
  }
  51%{
    --bod-join: round;
    --bod-w: 4;
  }
  100%{
    --bod-join: round;
    --bod-w: 4;
  } 
}

[data-arrow-path]{
  stroke:var(--mainColor);
  stroke-linecap:var(--bod-cap);
  stroke-linejoin:var(--bod-join);
  stroke-width:4;
  stroke-dasharray: 110%;
  stroke-dashoffset: 0%;
  animation: arrowCut 10s ease-in-out infinite,arrowChange 20s infinite;
}

@keyframes arrowCut {
  0%{
    stroke-dashoffset: 110%;
  }
  10%{
    stroke-dashoffset: 0%;
  }
  90%{
    stroke-dashoffset: 0%;
  }
  100%{
    stroke-dashoffset: -110%;
  }
}

@keyframes arrowChange {
  0%{
    --bod-join: bevel;
    --bod-cap: square;
  }
  50%{
    --bod-join: bevel;
    --bod-cap: square;
  }
  51%{
    --bod-join: round;
    --bod-cap: round;
  }
  100%{
    --bod-join: round;
    --bod-cap: round;
  } 
}

[data-any="zh"]{
  --turnto-r:calc(var(--turnto-w)/5);
}

[data-language="Zh"] [data-worksname="en"],
[data-language="Zh"] [data-any="en"]
{
  display: none;
}

[data-language="En"] [data-worksname="zh"],
[data-language="En"] [data-any="zh"]{
  display: none;
}

[data-mobile="true"] [data-any="pc"],
[data-mobile="false"] [data-any="pe"]{
  display: none;
}

.egfont-set{
  height: 40px;
  padding: 8px;
  box-sizing: border-box;
  border: 1px solid var(--boxBod);
  border-radius: 4px;
}

[data-egfont]{
  white-space:initial;
  word-break: break-all;
  overflow-wrap: break-word;
  line-height: 1.2em;
  font-size: var(--egfont-size);
}

[data-egfont-size]{
  --range-af: var(--boxBak);
  --range-bod: var(--mainColor);
  --range-af-w: 16px;
  --range-af-r:50%; 
}

[data-fontcard]{
  position: relative;
  font-size: 12px;
}

.fontcard-title{
  font-weight: 700;
  font-size: 18px;
  text-transform: capitalize;
  position: relative;
  padding-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.fontcard-title::before{
  content: '';
  width: 1ch;
  height: 1ch;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--tagsColor-pick,var(--mainColor));
  opacity: 0.6;
}

[data-fontcard]{
  gap:10px;
  padding: 14px 0;
}

[data-fontcard]::after{
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  border-bottom:1px dashed var(--boxBod);
  animation: widthUp 0.5s ease-in-out;
}

@keyframes widthUp {
  0%{
    width: 0%;
  }
  100%{
    width: 100%;
  }
}

.fontcard-title-style{
  width: fit-content;
  padding: 4px 8px;
  border: 1px solid var(--boxBod);
  background: var(--boxGry);
  color: var(--mainColor,);
  gap: 4px;
  right: 10px;
}

.fontcard-title-style:hover{
  --down-df:flex;
}

[data-tooltags],
[data-fonttags]{
  font-size: 12px;
  font-weight: 400;
  line-height: 2.5ch;
  background: var(--boxBak);
  border: 1px solid var(--tagsColor,var(--mainColor));
  color:var(--tagsColor,var(--mainColor));
  padding: 0.2ch 1ch;
  border-radius: 10px;
  box-sizing: border-box;
  flex: 0 0 auto;
  cursor: var(--pointer,pointer);
}

[data-tooltags]:hover,
[data-fonttags]:hover{
  /*filter: invert();*/
  color: var(--boxGry);
  border: 1px solid transparent;
  background: var(--mainColor);
}

[for="egfont-moreset"]{
  width: 40px;
  height: 40px;
  padding: 8px;
  box-sizing: border-box;
  border-radius: 4px;
  border: 1px solid transparent;
  background: var(--themeColor);
}

input[type="checkbox"]:checked + [for="egfont-moreset"]{
  --themeColor: var(--boxBak);
  border-color: var(--boxBod);
}

[data-theme="dark"] [for="egfont-moreset"]{
  --mainColor:#242424;
}

[data-theme="dark"] input[type="checkbox"]:checked + [for="egfont-moreset"]{
  --mainColor: var(--boxBod);
}

[data-tool-list]{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  border-radius: 20px;
}

[data-tool-3d]{
  perspective: 2700px;
  perspective-origin: 50% calc(50% - 23px);
  padding: 0 10px;
}
[data-tool-box]{
  width: 300px;
  height: 400px;
  padding-top: 46px;
  position: relative;
  transform-style: preserve-3d;
  transform-origin: 50% calc(50% - 23px);
  /*transition: transform 0.1s;*/
}

[data-tool-icon]{
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  --bod-w:6px;
  border: var(--bod-w) solid var(--boxBak);
  box-sizing: border-box;
  top: 0;
  left: calc(50% - 50px);
  background-image: var(--tool-icon);
  background-color: var(--boxBak);
  background-size: cover;
  animation: sizeUp 0.5s;
  transition: left 0.5s;
  z-index: 2;
}

@keyframes sizeUp {
  0%{
    transform: scale(0.5) ;
  }
  100%{
    transform: scale(1);
  }
}

[data-tool-icon]::after{
  content: '';
  width: 14px;
  height: 14px;
  position: absolute;
  top: calc(50% - 6px);
  left: calc(0px - 14px - var(--bod-w)/2);
  background: repeating-radial-gradient(
    circle at bottom left,  
    transparent 0,
    transparent 12px,
    var(--boxBak) 12px,
    var(--boxBak) 20px
  );
  background-repeat: no-repeat;
}

[data-tool-icon]::before{
  content: '';
  width: 14px;
  height: 14px;
  position: absolute;
  top: calc(50% - 6px);
  right: calc(0px - 14px - var(--bod-w)/2);
  background: repeating-radial-gradient(
    circle at bottom right,  
    transparent 0,
    transparent 12px,
    var(--boxBak) 12px,
    var(--boxBak) 20px
  );
  background-repeat: no-repeat;
}

[data-tool-card]{
  width: 100%;
  height: 100%;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-flow: column;
  background: var(--boxGry);
  border-radius: 10px;
  padding: 64px 10px 10px 10px;
  box-sizing: border-box;
  position: relative;
  padding-top: 56px;
  position: relative;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
}

[data-tool-card]::after{
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transform: translateZ(-10px);
  border-radius: 10px;
  background: var(--themeColor);
  z-index: -1;
}

[data-theme="light"] [data-tool-card]::after{
  --themeColor: var(--boxBod)
}

[data-tool-title]{
  width: 100%;
  display: flex;
  align-items: center;
  flex-flow: column;
  gap: 10px;
  font-size: 18px;
  font-weight: 700;
}

[data-tool-tag]{
  margin-top: -8px;
  gap: 4px;
  max-width: 100%;
  overflow-x: scroll;
}

[data-tool-more]{
  width: 80px;
  padding: 8px 20px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 700;
  background: var(--themeColor);
  color: #000;
}

[data-tool-more]:hover{
  filter: brightness(90%);
}

[data-tool-about]{
  white-space:initial;
  height: 100%;
  width: 100%;
  gap: 8px;
  overflow-y: scroll;
  box-sizing: border-box;
  padding: 10px 8px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 400;
  color: var(--mainColor);
}

[data-head-all]{
  --svg-h:80px;
  --head-t: 9;
  --head-layout-w:100vw;
  --head-move: calc(var(--head-layout-w) - var(--svg-h));
  bottom: 80px;
}

[data-coin-all]{
  --coin-w:calc(var(--svg-h)/1.5);
  --coin-col1: #ffbd41;
  --coin-col2: #ee9622;
  --coin-col3: #f3a339;
  bottom: 0;
  align-items: end;
  width: calc(var(--head-layout-w) - var(--coin-w));
  transform: translateX(calc(var(--coin-w)/2));
}

[data-coin-a],[data-coin-b]{
  top: 0;
  left: 0;
  width: var(--coin-w);
  height: var(--coin-w);
  border-radius: 50%;
  transform-origin: center;
}

[data-coin-a]{
  background: var(--coin-col1);
  transform:rotateY(var(--coin-r)) translateZ(calc(var(--coin-w)/8));
}

[data-coin-b]{
  background: var(--coin-col2);
  transform:rotateY(var(--coin-r)) translateZ(0px);
}

[data-coin-c]{
  top: 0;
  left: calc(50% - var(--coin-w)/10);
  width: calc(var(--coin-w)/5);
  height: var(--coin-w);
  border-radius: calc(var(--coin-w)/10);
  background: linear-gradient( to bottom, var(--coin-col2) 10%,var(--coin-col3) 10%,var(--coin-col3) 90%,var(--coin-col2) 90%);
  transform:rotateY(var(--coin-r) + 90deg) translateZ(calc(var(--coin-w)/10));
}

[data-coin-a] div,[data-coin-b] div{
  width: 80%;
  height: 80%;
  background: var(--coin-col3);
  border-radius: 50%;
  font-weight: 700;
  font-size: calc(var(--coin-w)/20 * 12);
  color: var(--coin-col1);
}

[data-coin]{
  --coin-r: 0deg;
  width: var(--coin-w);
  height: var(--coin-w);
  perspective: 500px;
  transform-style: preserve-3d;
  transition: transform 0.5s;
  animation: coinJump 2s cubic-bezier(0,0.5,0.5,1) infinite ;/*, coinOp 11s linear/coinOp 8s linear*/
  animation-delay: calc(var(--coin-jump) * var(--head-t)/4);/*var(--head-t)/4*/
}

[data-theme="dark"] [data-coin]{
  filter: drop-shadow(0 0 4px #ffcd434d)
  drop-shadow(0 0 10px #ff9e4346)
  drop-shadow(0 0 20px #ff9e4346);
}

@keyframes coinJump {
  0%{
    transform: translateY(0);
  }
  20%{
    transform: translateY(-100%);
  }
  100%{
    transform: translateY(0);
  }
}

@keyframes coinOp {
  0%{
    opacity: 1;
  }
  14%{
    opacity: 1;
  }
  15%{
    opacity: 0;
  }
  100%{
    opacity: 0;
  }
}


[data-coin-cut]{
  --coin-num: 9;
  width: calc(var(--svg-h)*1.5);
  order: 1;
  animation: coinCut calc(1s * var(--head-t)) linear infinite;
  animation-delay: 2s;
}

@keyframes coinCut {
  0%{
    order: 1;
  }
  50%{
    order: var(--coin-num);
  }
  100%{
    order: 1;
  }
}

@keyframes coinEat {
  0%{
    transform: translateY(0px);
  }
  50%{
    transform: translateY(-4px);
  }
  100%{
    transform: translateY(0px);
  }
}

[data-head-move]{
  --head-bak: block;
  --head-fill2: var(--boxBak);
  width: fit-content;
  animation: headMove calc(1s * var(--head-t)) linear infinite;
  animation-delay: 2s;
}

[data-theme="dark"] [data-head-move]{
  --head-fill: #cecece;
}

@keyframes headMove {
  0%{
    transform: rotateY(180deg);
  }
  49%{
    transform: rotateY(180deg);
  }
  50%{
    transform: rotateY(0);
  }
  100%{
    transform: rotateY(0);
  }
}

[data-head-fill]:not([data-head-fill="bak"]){
  fill: var(--head-fill,var(--mainColor));
}
[data-head-move] [data-head-fill]{
  animation: headChange calc(3s * var(--head-t)) linear infinite;
}
[data-head-path]{
  stroke-width: var(--head-w,3);
  stroke: var(--head-fill,var(--mainColor));
}
[data-head-path="1"]{
  opacity: var(--op1,0);
  transform: translateY(1px);
}
[data-head-path="2"]{
  opacity: var(--op2,0);
  fill: var(--head-fill,var(--mainColor));
  fill-opacity: var(--fill2,0);
  transform: translateY(1px) scale(1,0.9);
}
[data-head-path="3"]{
  opacity: var(--op3,0);
}
[data-head-move] [data-head-path]{
  stroke-dasharray: 110%;
  stroke-dashoffset: 0%;
  animation: headCut calc(1s * var(--head-t)) ease-in-out infinite, headChange calc(3s * var(--head-t)) infinite;
}

@keyframes headCut {
  0%{
    stroke-dashoffset: 110%;
  }
  10%{
    stroke-dashoffset: 0%;
  }
  90%{
    stroke-dashoffset: 0%;
  }
  100%{
    stroke-dashoffset: -110%;
  }
}
@keyframes headChange {
  0%{
    --op1: 1;
    --op2: 0;
    --op3: 0;
  }
  32%{
    --op1: 1;
    --op2: 0;
    --op3: 0;
  }
  33%{
    --op1: 0;
    --op2: 1;
    --op3: 0;
    --fill2: 0;
  }
  40%{
    --fill2: 1;
  }
  62%{
    --fill2: 1;
  }
  65%{
    --op1: 0;
    --op2: 1;
    --op3: 0;
    --fill2: 0;
  }
  66%{
    --op1: 0;
    --op2: 0;
    --op3: 1;
  }
  100%{
    --op1: 0;
    --op2: 0;
    --op3: 1;
  }
}

[data-head-move] [data-head-svg]{ 
  cursor: var(--pointer,pointer);
}

[data-head-move] [data-head-svg]:hover{ 
  transform-origin: bottom center ;
  animation: headRun 1s linear infinite;
  filter: drop-shadow(calc(var(--svg-h)/30) calc(var(--svg-h)/30) var(--themeColor));
}

@keyframes headRun {
  0%{
    transform:rotate(0deg) translateY(0) translateX(0%);
  }
  25%{
    transform:rotate(-1deg) translateY(4px) translateX(-1%);
  }
  50%{
    transform:rotate(0deg) translateY(0) translateX(0%);
  }
  75%{
    transform:rotate(1deg) translateY(4px) translateX(1%);
  }
  100%{
    transform:rotate(0deg) translateY(0) translateX(0%);
  }
}

[data-head-home]{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10%;
  padding: 0 5%;
  box-sizing: border-box;
}

[data-head-box]{
  overflow: hidden;
  border-radius: calc(var(--start-box) * 0.08);
  --head-s: 0.8;
  --head-bak: block;
  --head-icon: block;
  height: calc(var(--start-box) * var(--head-s));
}
[data-head-box] [data-head-fill="1"]{
  transform: translateY(100%);
  animation: headUp 2s cubic-bezier(0.6, -20, 0.4, 20) infinite;
  animation-delay: var(--delay,0);
}

@keyframes headUp {
  from{
    transform: translateY(100%);
  }
  to{
    transform: translateY(84%);
  }
}

[data-head-fill="bak"]{
  fill: var(--head-fill2, transparent);
  display: var(--head-bak, none);
}

[data-head-fill="?"]{
  display: var(--head-icon, none);
}

[data-head-box] [data-head-fill="bak"]{
  --head-fill2: #dddddd;
}

[data-head-box] [data-head-fill="?"]{
  transform: translateY(0%);
  animation: headUp2 2s linear infinite;
  animation-delay: var(--delay,0);
}

@keyframes headUp2 {
  60%{
    transform: translateY(0%);
  }
  80%{
    transform: translateY(-100%);
  }
  100%{
    transform: translateY(0%);
  }
}

[data-page-id="start"] .tex-line{
  --pos-x: var(--line-size);
  --pos-y: 0;
  animation: posMove 2s infinite;
  animation-delay: 1s;
}

@keyframes posMove {
  to{
    background-position: var(--pos-x) var(--pos-y);
  }
}

[data-logobg-home]{
  --fill: #2b2b2b;
  width: var(--start-box);
  height: var(--start-box);
  --line-bod: 2%;
  --line-col: rgba(255, 255, 255, 0.2);
  --line-bak: var(--themeColor);
}

[data-theme="dark"]  [data-logobg-home]{
  --line-bod: 1%;
}

[data-setbg-home-box]{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: right;
  align-items: end;
  overflow: hidden;
}

[data-setbg-home]{
  --fill: var(--mainColor);
  /*background: var(--boxGry);*/
  --circle-col: rgba(109, 109, 109, 0.356);
  --circle-bak: var(--boxGry);
  --circle-gap-num: 120;
  --circle-size: max(100vw,100vh);
  --circle-bod: 1px;
  animation: circleMove 2s infinite;
  animation-delay: 1s;
  width: calc(100% + 20px);
  height: calc(100% + 20px);
  flex: 0 0 auto;
  position: relative;
}

@keyframes circleMove {
  to{
    --circle-move-num: var(--circle-gap-num);
  }
}

[data-setbg-home]::after{
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  backdrop-filter: url('#rippleEffect');
}

[data-setbg-home] path{
  paint-order: stroke;
  stroke: var(--boxGry);
  stroke-width: 20; 
}

[data-setbg-home] svg{
  animation: sethomeMove 2s linear infinite;
}

@keyframes sethomeMove {
  45%{
    transform: translate(0,0);
  }
  75%{
    transform: translate(2px,2px);
  }
  100%{
    transform: translate(0,0);
  }
}

[data-rect-all]{
  opacity: 0.8;
}

[data-rect-bg]{
  stroke: var(--mainColor);
  stroke-width: 0.03;
}

@property --arrowRo{
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

@property --arrowUp{
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

[data-turnto-big]{
  --bod-col: var(--boxGry);
  --join: bevel;
  --cap: square;
  --bod-w: 0.5;
  animation: arrowRo 2s cubic-bezier(0.85, 0, 0, 1) infinite,
  arrowUp 2s cubic-bezier(0.5, -20, 0.5, 20) infinite;
  transform-origin: 50% calc(50% + 2px);
  transform: rotateX(calc(var(--arrowRo)*1deg)) translateX(calc(var(--arrowUp)*1px));
}

@keyframes arrowRo {
  to{
    --arrowRo: 360;
  }
}

@keyframes arrowUp {
  to{
    --arrowUp: 1;
  }
}

[data-logograph-move]{
  --logograph-num: 8;
  --svg-w: 36px;
  --gap: calc((100% - var(--logograph-num)*var(--svg-w))/var(--logograph-num));
  gap: var(--gap);
  transform: translateX(calc(var(--gap)/2));
  width: calc(100vw - var(--start-box));
  height: 60px;
  position: relative;
  animation: logograph-move 2s cubic-bezier(0, 0.8, 1, 1) infinite;
  animation-delay: 1s;
}

[data-logograph-move] logo-graph{
  width: var(--svg-w);
}

[data-logograph-posa]{
  position: absolute;
  left: calc(var(--gap)*-1 - var(--svg-w))
}

@keyframes logograph-move {
  to{
    transform: translateX(calc(var(--gap)/0.5));
  }
}

@media (max-width:950px) {
  :root{
    --banner-h:28px;
  }

  [data-worksname-list]{
    --turnto-w:60px;
    --arrow-w: 4;
    --svg-h:100px;
  }

  [data-head-all]{
    --svg-h:60px;
    --head-layout-w:100vw;
  }
  

  [data-coin-all]{
    --coin-w:calc(var(--svg-h)/2);
  }

  [data-any="warp950"]{
    flex-wrap: wrap;
  }

  [data-setbg-home]{
    --circle-gap-num: 100;
  }

}

@media (max-width:750px) {
  .tex-dot{
    --dot-gap: 12px;
  }

  .tex-line{
    --line-wh: 40px;
  }

  .fontcard-title-style{
    --down-df:flex;
    right: 4px;
    bottom: 1.5ch;
    padding: 2px 4px;
  }

  [data-page-id="start"]{
    --start-box: 150px;
  }

  [data-grid-all]{
    --grid-wh: 80px;
    --grid-bod-w: 1px;
    perspective: 200px;
  }

  [data-page-id="library"]{
    --layout-w: calc(100% - 10px);
  }
  [data-page-id="fonts"]{
    --layout-w: calc(100% - 40px);
  }
  [data-tab-top],[data-mainset-top]{
    display: none;
  }
  [data-tab-side]{
    display: flex;
  }

  [data-banner-top]{
    background-size:auto 100%;
    background-position:-68px 50%;
  }

  [data-banner-top-mask]{
    --banner-h: 40px;
  }

  [data-banner-top="home"]{
    --banner-h:40px;
    background-size:auto 100%;
    background-position:-172px 50%;
  }

  .tab-top::after{
    --tab-pick-af-h: 1px;
    --themeColor2: var(--code2)
  }
 
  [data-tab-side-mix]{
    --swi-bak: transparent;
  }
  [data-tool-tag]{
    justify-content: left;
  }

  [data-tool-list]{
    width: 100%;
  }

  [data-tool-3d]{
    width: 100%;
  }
  [data-tool-box]{
    padding-top: 36px;
    width: 100%;
    height: 200px;
    transform: rotateX(10deg);
  }

  [data-tool-icon]{
    width: 80px;
    height: 80px;
    left: 40px;
    --bod-w: 4px;
  }

  [data-tool-card]{
    flex-flow: nowrap;
    align-items: start;
    padding: 10px;
  }

  [data-tool-title]{
    white-space:initial;
    text-align: center;   
    width: 138px;
    padding-top: 40px;
  }

  [data-head-all]{
    --head-t: 4;
    --svg-h: 40px;
  }

  [data-coin-cut]{
    --coin-num: 6;
  }

  [data-head-home]{
    gap: 6%;
  }

  [data-mobile="true"] [data-head-home]{
    gap: 1vw;
  }

  [data-head-box]{
    border-radius: calc(var(--start-box) * 0.04);
    --head-s: 0.6;
  }

  [data-mobile="true"] [data-head-box]{
    border-radius: calc(var(--start-box) * 0.04);
    --head-s: 0.5;
  }

  [data-rect-all]{
    opacity: 0.6;
  }

  [data-rect-bg]{
    stroke-width: 0.1;
  }
  
  [data-worksname-list]{
    height: calc(100vh - 80px);
    --turnto-w: 40px;
    --arrow-w: 4;
    --svg-h: 60px;
    gap: 40px;
    overflow-y: scroll;
    overflow-x: hidden;
  }
  [data-worksname-list] [data-turnto]{
    margin-left: 10px;
  }
  [data-worksname-turnto]{
    gap:10px;
    flex-wrap: wrap;
  }

  [data-worksname]{
    width: 100vw;
    --svg-h: 70px;
    flex-wrap: wrap;
    align-items: start;
    gap: 6px;
  }
  [data-worksname="en"]{
    --svg-h: 66px;
  }

  [data-language="Zh"] [data-worksname-turnto] [data-turnto]{
    padding:0 1ch;
    width: fit-content;
    line-height: 1.5em;
    font-weight: 700;
    --text:var(--turnto-text);
  }
  [data-language="En"] [data-worksname-turnto] [data-turnto]{
    padding:0 1ch;
    width: fit-content;
    line-height: 1.5em;
    font-weight: 700;
    --text:var(--turnto-text-en);
  }

  [data-language="Zh"] [data-back="home"],
  [data-language="Zh"] [data-turnto="fontstyle"]{
    padding:0 1ch;
    width: fit-content;
    line-height: 1.5em;
    font-weight: 700;
    --text:var(--back-text,var(--turnto-text));
  }
  [data-language="En"] [data-back="home"],
  [data-language="En"] [data-turnto="fontstyle"]
  {
    padding:0 1ch;
    width: fit-content;
    line-height: 1.5em;
    font-weight: 700;
    --text:var(--back-text-en,var(--turnto-text-en));
  }

  .fontcard-title{
    font-size: 14px;
  }

  [data-fonttags]{
    font-size: 10px;
  }

  [data-tool-about]{
    font-size: 11px;
  }

  [data-any="view750"]{
    display: none;
  }

  [data-scroll-round]{
    height: calc(100vh - var(--scroll-cut-mb));
  }

  [data-logograph-move]{
    --logograph-num: 4;
  }
  
  [data-setbg-home]{
    --circle-gap-num: 70;
  }
}

@media (max-width: 375px) {
  [data-any="view375"]{
    display: none;
  }

  [data-logograph-move]{
    --logograph-num: 2;
  }
}