html,
body {
  margin: 0;
  overflow: hidden;
  height: 100%;
}

canvas {
  display: block; /* 防止滚动条 */
  width: 100%;
  height: 100%;
}

:root {
  /* 
      One-stop magic hue shift
      We're using oklch(), so these might not be the hue values you are familiar with 
    See: https://oklch.com/
    */
  --hue: 270; /* change me (0-360) */
  --hue-adjust: 175; /* and me */
  --hue-text: 147;

  --hue-2: calc(var(--hue) + var(--hue-adjust));

  --page-background: oklch(10% 0.0666 var(--hue));
  --button-background: oklch(5% 0.0666 var(--hue), 50);
  --text-base: oklch(84% 0.37 131);
  --text-hover: oklch(95% 0.145 calc(var(--hue) + 30));

  --shadow-start: oklch(70% 0.37 0);
  --shadow-end: oklch(60% 0.29 var(--hue));

  /* No color function, so we can use different opacity values */
  --shadow-inner: 60% 0.29 var(--hue);
}

button {
  margin-top: 20px; /* 提供按钮顶部空间 */
  color: rgb(0, 215, 122); /* 基础文本颜色 */
  font: 700 1.125rem/1.2 "Source code Pro", monospace; /* 设置字体样式和大小 */
  letter-spacing: 0.08em; /* 字母间距 */
  text-transform: uppercase; /* 文本转为大写 */
  text-align: center; /* 文本居中 */
  text-shadow: rgb(255, 0, 132) 1px 0 10px;
  padding: 0.85em; /* 按钮内部间距 */
  max-width: 100%;
  width: 12em; /* 固定宽度 */
  background: radial-gradient(
    rgba(0, 0, 0, 0.575),
    rgba(255, 0, 217, 0.543)
  ); /* 按钮背景色 */
  background-clip: padding-box;
  border: 8px solid rgb(255, 51, 99); /* 边框样式 */
  border-radius: 2em; /* 边框圆角 */
  cursor: pointer; /* 鼠标指针样式 */
  position: relative;
  transition: 0.25s ease-out; /* 过渡动画 */

  /* 设置伪元素为渐变阴影 */
  &::before,
  &::after {
    content: "";
    border-radius: inherit;
    transition: inherit;
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  /* 渐变阴影效果 */
  &::before {
    inset: -0.2em;
    z-index: -1;
    background: linear-gradient(
      var(--shadow-start, white),
      var(--shadow-end, rgb(81, 0, 255))
    );
    filter: blur(1.2em) saturate(1.2);
    transform-origin: bottom;
    transform: scaleY(0.5);
    opacity: 0;
  }

  &::after {
    /* Effect */
    box-shadow: inset 0 0 0 1px #ffffff,
      /* inner pixel */ 0 0 0 4px hsl(0, 0%, 100%),
      /* lightened border */ 1px 1px 0 10px #fff; /* outer pixel */
    mix-blend-mode: overlay;

    /* Animation */
    opacity: 0;
  }

  /* 鼠标悬停和聚焦时的样式调整 */
  &:hover,
  &:focus {
    color: var(--text-hover, red);
    background: radial-gradient(rgb(255, 0, 102), rgba(255, 255, 255, 0.19));
    border-color: transparent;
    box-shadow: inset 0 1.4em 0 oklch(var(--shadow-inner) / 0.1),
      inset 0 0 1.4em oklch(var(--shadow-inner) / 0.32),
      0 1px 1px oklch(var(--shadow-inner) / 0.32);
    &::before,
    &::after {
      transform: none;
      opacity: 1;
    }
  }
}