*  {

                        margin:  0;

                        padding:  0;

                        box-sizing:  border-box;

                }

               

                html,  body  {

                        width:  100%;

                        height:  100%;

                        overflow:  hidden;

                        background:  rgb(8,  5,  16);

                        color:  #fefeff;

                        font-family:  'Monaco',  sans-serif;

                        -webkit-font-smoothing:  antialiased;

                        font-smoothing:  antialiased;

                        touch-action:  none;

                }

                :root  {
                        --footer-offset:  12px;      /* 距离窗口底部的偏移，与 #footer 对齐 */
                        --footer-height:  28px;      /* 统一固定 footer 高度，便于计算 */
                        --links-gap:     10px;       /* 链接区与 footer 的间距要求 */
                }

               

                #container  {

                        display:  table;

                        position:  absolute;

                        z-index:  20;

                        width:  100%;

                        height:  100%;

                        text-align:  center;

                        cursor:  none;

                }

               

                #container  >  div  {

                        display:  table-cell;

                        vertical-align:  middle;

                }

                /*  主内容整体上移一些，为底部链接预留空间  */
                .content  {
                        transform:  translateY(-40px);
                }

               

                h1  {

                        font-size:  6.5em;

                        font-weight:  400;

                        letter-spacing:  2px;

                        text-shadow:  0  0  25px  rgba(254,  254,  255,  0.85);

                        visibility:  hidden;

                }

               

                h2  {

                        font-size:  1.7em;

                        font-weight:  400;

                        letter-spacing:  2px;

                        text-shadow:  0  0  25px  rgba(254,  254,  255,  0.85);

                        margin-top:  20px;

                        visibility:  hidden;

                }

                /*  链接区  */
                #links  {
                        position:  fixed;
                        left:  0;
                        right:  0;
                        bottom:  calc(var(--footer-offset)  +  var(--footer-height)  +  var(--links-gap));
                        display:  flex;
                        flex-wrap:  nowrap;               /* 单行显示 */
                        justify-content:  center;
                        gap:  10px;                        /* 单一间距 */
                        padding:  0  20px;
                        opacity:  0;
                        transition:  opacity  0.6s  ease;
                        z-index:  25;
                        overflow-x:  auto;                 /* 超出横向滚动 */
                        -webkit-overflow-scrolling:  touch;
                        scrollbar-width:  thin;
                }
                #links  a  {
                        color:  #b3abc5;
                        text-decoration:  none;
                        border:  0;                                /* 仅显示动画描边 */
                        border-radius:  18px;
                        height:  36px;
                        padding:  0  12px;
                        display:  inline-flex;
                        align-items:  center;
                        justify-content:  center;
                        position:  relative;
                        overflow:  hidden;
                        text-overflow:  ellipsis;
                        white-space:  nowrap;
                        transition:  all  0.2s  ease;
                        backdrop-filter:  blur(2px);
                }
                /* 明显描边与环绕动画 */
                #links  a:hover  { }
                /* 渐进式沿边缘描边：从起点开始按顺时针逐步绘制到闭合，循环 */
                @property  --ring-sweep  {
                        syntax:  '<angle>';
                        inherits:  false;
                        initial-value:  0deg;
                }

                #links  a::after  {
                        content:  '';
                        position:  absolute;
                        inset:  0;
                        border-radius:  18px;
                        padding:  2px;                               /* 线条粗细 */
                        background-clip:  padding-box;               /* 防止背景进入内容区 */
                        /* 进度式描边：从起点开始逐步扫满一圈 */
                        --ring-start:  -90deg;                        /* 从左侧中点开始，可改 0/90/180/270 */
                        --ring-sweep:  0deg;                          /* 动态扫过角度 */
                        background:  conic-gradient(
                                from  var(--ring-start),
                                rgba(255,255,255,0.9)  0deg  var(--ring-sweep),
                                rgba(255,255,255,0.0)  var(--ring-sweep)  360deg
                        );
                        -webkit-mask:  linear-gradient(#000  0  0)  content-box,  linear-gradient(#000  0  0);
                        -webkit-mask-composite:  xor;
                                mask-composite:  exclude;             /* 仅显示边框环 */
                        opacity:  0;
                        pointer-events:  none;
                        transition:  opacity  0.2s  ease;
                }
                #links  a:hover::after  {
                        opacity:  1;
                        animation:  ring-trace  0.8s  linear  forwards;   /* 仅运行一次，完成后停留在闭合状态 */
                }
                @keyframes  ring-trace  {
                        from  {  --ring-sweep:  0deg;    }
                        to    {  --ring-sweep:  360deg;  }
                }

                /* 动画完成后的金色常驻描边（与扫线独立层） */
                #links  a::before  {
                        content:  '';
                        position:  absolute;
                        inset:  0;
                        border-radius:  18px;
                        padding:  2px;
                        background-clip:  padding-box;
                        background:  conic-gradient(from 0deg,  #d4af37  0  360deg); /* 金色 */
                        -webkit-mask:  linear-gradient(#000  0  0)  content-box,  linear-gradient(#000  0  0);
                        -webkit-mask-composite:  xor;
                                mask-composite:  exclude;
                        opacity:  0;
                        pointer-events:  none;
                }
                #links  a:hover::before  {  animation:  gold-in  0s  linear  0.8s  forwards;  }
                @keyframes  gold-in  {  to  {  opacity:  1;  } }
                /* 单行分隔符：相邻链接之间的独立竖线（不属于按钮内） */
                #links  a  +  a::before  {
                        content:  '';
                        position:  absolute;
                        left:  -6px;                            /* 挪到两个按钮之间 */
                        top:  50%;
                        transform:  translateY(-50%);
                        width:  1px;
                        height:  18px;
                        background:  rgba(255,255,255,0.6);     /* 更亮 */
                }
                #links  a:hover  {
                        color:  #fff;
                        border-color:  rgba(255,255,255,0.35);
                        text-shadow:  0  0  8px  #b3abc5;
                }

               

                [class^="letter"]  {

                        -webkit-transition:  opacity  3s  ease;

                        -moz-transition:  opacity  3s  ease;

                        transition:  opacity  3s  ease;

                        opacity:  0;

                }

               

                .letter-0  {  transition-delay:  0.2s;  }

                .letter-1  {  transition-delay:  0.4s;  }

                .letter-2  {  transition-delay:  0.6s;  }

                .letter-3  {  transition-delay:  0.8s;  }

                .letter-4  {  transition-delay:  1.0s;  }

                .letter-5  {  transition-delay:  1.2s;  }

                .letter-6  {  transition-delay:  1.4s;  }

                .letter-7  {  transition-delay:  1.6s;  }

                .letter-8  {  transition-delay:  1.8s;  }

                .letter-9  {  transition-delay:  2.0s;  }

                .letter-10  {  transition-delay:  2.2s;  }

                .letter-11  {  transition-delay:  2.4s;  }

                .letter-12  {  transition-delay:  2.6s;  }

                .letter-13  {  transition-delay:  2.8s;  }

                .letter-14  {  transition-delay:  3.0s;  }

               

                h1.transition-in,  h2.transition-in  {

                        visibility:  visible;

                }

               

                h1.transition-in  [class^="letter"], 

                h2.transition-in  [class^="letter"]  {

                        opacity:  1;

                }

               

                @keyframes  shake  {

                        0%  {  transform:  translate(0,  0)  rotate(0deg);  }

                        10%  {  transform:  translate(-2px,  -1px)  rotate(-1deg);  }

                        20%  {  transform:  translate(2px,  0px)  rotate(1deg);  }

                        30%  {  transform:  translate(-1px,  1px)  rotate(0deg);  }

                        40%  {  transform:  translate(1px,  -1px)  rotate(1deg);  }

                        50%  {  transform:  translate(-1px,  1px)  rotate(-1deg);  }

                        60%  {  transform:  translate(-2px,  1px)  rotate(0deg);  }

                        70%  {  transform:  translate(2px,  1px)  rotate(-1deg);  }

                        80%  {  transform:  translate(-1px,  -1px)  rotate(1deg);  }

                        90%  {  transform:  translate(1px,  2px)  rotate(0deg);  }

                        100%  {  transform:  translate(0,  0)  rotate(0deg);  }

                }

               

                .shake  {

                        animation:  shake  3s  ease  infinite;

                        transform-origin:  center;

                }

               

                #container  p  {

                        margin-top:  30px;

                }

               

                #container  p  strong  {

                        color:  #b3abc5;

                        font-size:  1.5em;

                }

               

                #container  p  strong  a  {

                        color:  #b3abc5;

                        text-decoration:  none;

                }

               

                canvas  {

                        position:  absolute;

                        top:  0;

                        left:  0;

                        width:  100%;

                        height:  100%;

                        z-index:  10;

                }

                #footer  {
                        position:  fixed;
                        left:  0;
                        right:  0;
                        bottom:  var(--footer-offset);
                        z-index:  30;
                        text-align:  center;
                        font-size:  14px;
                        height:  var(--footer-height);
                        line-height:  var(--footer-height);
                        color:  #b3abc5;
                        pointer-events:  auto;
                        white-space:  nowrap;
                        padding:  0  8px;
                }
                #footer  a  {  color:  #b3abc5;  text-decoration:  none;  }
                #footer  a:hover  {  color:  #fff;  text-shadow:  0  0  8px  #b3abc5;  }

               

                @media  (max-width:  768px)  {

                        h1  {  font-size:  2.6em;  }

                        h2  {  font-size:  1.3em;  }
                        .content  {  transform:  translateY(-24px);  }
                        #links  {  gap:  8px;  }

                }

               

                @media  (max-width:  480px)  {

                        h1  {  font-size:  1.8em;  }

                        h2  {  font-size:  1.05em;  }

                        #container  p  strong  {  font-size:  1.2em;  }
                        .content  {  transform:  translateY(-16px);  }
                        #links  {  gap:  6px;  }

                }
                .hionestar-link {
                    font-family: 'Arial Rounded MT Bold', 'Arial', 'Microsoft YaHei', sans-serif;
                    font-weight: bold;
                    letter-spacing: 1px;
                    color: #b3abc5;
                    text-decoration: underline;
                }
                .hionestar-link:hover {
                    color: #fff;
                    text-shadow: 0 0 8px #b3abc5;
                }