body {background-image: linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%);
        background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0px; background-color: #fff;}
main {position:relative; width:100%; height:100%; display:flex; justify-content: center; align-items: center;}
main img, .yinzhang {display:block; position: absolute; width:8rem;height:8rem;}

main img {z-index:1;}
main img[src="/images/loading.gif"] {width:1.24rem; height:1.24rem; left: calc(50% - 0.62rem); top: calc(50% - 0.62rem);}
.yinzhang {display: flex; justify-content: center;align-items: center; transform: rotate(0deg); z-index:2;
font-family: 
  /* 优先使用带底座数字、防混淆的 UI 字体 */
  Tahoma, Verdana, 
  /* 现代系统字体（作为后备，苹果设备上表现极佳） */
  system-ui, -apple-system, 
  /* 基础英文兜底 */
  Helvetica, Arial, 
  /* 中文字体栈 */
  "PingFang SC", 
  "Microsoft YaHei", 
  "微软雅黑", 
  /* Emoji 与符号 */
  "Apple Color Emoji", 
  "Segoe UI Emoji", 
  "Noto Color Emoji", 
  /* 终极兜底 */
  sans-serif;}
.yinzhang span {position:absolute; display: flex; transform: scaleX(1);} 
.clock span, .font span {cursor: pointer;}
.clock {display: grid; grid-template: repeat(3, 36px) / repeat(7, 36px);justify-content: space-between;align-content:space-between; gap:0.02rem;}
.clock span {width:0.36rem; height:0.36rem;background-color:#fff;}
.clock span[data-clock] {background-image:url("images/clock.jpg"); background-repeat: no-repeat; background-size:108px auto;}
span[data-clock="0.webp"] {background-position:0 0;}
span[data-clock="1.webp"] {background-position:0 -0.36rem;}
span[data-clock="2.webp"] {background-position:0 -0.72rem;}
span[data-clock="3.webp"] {background-position:0 -1.08rem;}
span[data-clock="4.webp"] {background-position:0 -1.44rem;}
span[data-clock="5.webp"] {background-position:0 -1.8rem;}
span[data-clock="6.webp"] {background-position:0 -2.16rem;}
span[data-clock="7.webp"] {background-position:0 -2.52rem;}
span[data-clock="8.webp"] {background-position:0 -2.88rem;}
span[data-clock="9.webp"] {background-position:0 -3.24rem;}
span[data-clock="10.webp"] {background-position:-0.36rem 0;}
span[data-clock="11.webp"] {background-position:-0.36rem -0.36rem;}
span[data-clock="12.webp"] {background-position:-0.36rem -0.72rem;}
span[data-clock="13.webp"] {background-position:-0.36rem -1.08rem;}
span[data-clock="14.webp"] {background-position:-0.36rem -1.44rem;}
span[data-clock="15.webp"] {background-position:-0.36rem -1.8rem;}
span[data-clock="16.webp"] {background-position:-0.36rem -2.16rem;}
span[data-clock="17.webp"] {background-position:-0.36rem -2.52rem;}
span[data-clock="18.webp"] {background-position:-0.36rem -2.88rem;}
span[data-clock="19.webp"] {background-position:-0.36rem -3.24rem;}
span[data-clock="20.webp"] {background-position:-0.72rem 0;}

.zidingyi {display:flex;}
.font, .clock {display:grid;width:100%;}
.font {grid-template: repeat(2, 36px) / repeat(7, 36px); justify-content: space-between;align-content:space-between; gap:0.02rem;}
.font span {width:0.36rem;height:0.36rem; background-color:#fff;}
.font span[data-font] {background-image:url("images/font.png"); background-repeat: no-repeat;}
span[data-font="a.woff2"] {background-position:0 0;}
span[data-font="b.woff2"] {background-position:0 -0.36rem;}
span[data-font="c.woff2"] {background-position:0 -0.72rem;}
span[data-font="d.woff2"] {background-position:0 -1.08rem;}
span[data-font="e.woff2"] {background-position:0 -1.44rem;}
span[data-font="f.woff2"] {background-position:0 -1.8rem;}
span[data-font="g.woff2"] {background-position:0 -2.16rem;}
span[data-font="h.woff2"] {background-position:0 -2.52rem;}
span[data-font="i.woff2"] {background-position:0 -2.88rem;}
span[data-font="j.woff2"] {background-position:0 -3.24rem;}
span[data-font="k.woff2"] {background-position:-0.36rem 0;}
span[data-font="l.woff2"] {background-position:-0.36rem -0.36rem;}
span[data-font="m.woff2"] {background-position:-0.36rem -0.72rem;}
span[data-font="n.woff2"] {background-position:-0.36rem -1.08rem;}
span[data-font="o.woff2"] {background-position:-0.36rem -1.44rem;}
span[data-font="p.woff2"] {background-position:-0.36rem -1.8rem;}
span[data-font="q.woff2"] {background-position:-0.36rem -2.16rem;}
span[data-font="r.woff2"] {background-position:-0.36rem -2.52rem;}
span[data-font="s.woff2"] {background-position:-0.36rem -2.88rem;}
span[data-font="t.woff2"] {background-position:-0.36rem -3.24rem;}
span[data-font="u.woff2"] {background-position:-0.72rem 0;}
span[data-font="v.woff2"] {background-position:-0.72rem -0.36rem;}
span[data-font="w.woff2"] {background-position:-0.72rem -0.72rem;}
span[data-font="x.woff2"] {background-position:-0.72rem -1.08rem;}
span[data-font="y.woff2"] {background-position:-0.72rem -1.44rem;}
span[data-font="z.woff2"] {background-position:-0.72rem -1.8rem;}

span[data-noclock="1"], span[data-noclock="0"], span[data-nofont="0"] {color:#000; text-align: center; line-height:0.36rem;}