<style>
    body {
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background-color: #040b1f;
      font-family: "微軟正黑體", Arial, sans-serif;
      overflow: hidden;
    }
    
    .button-container {
      position: relative;
      width: 300px;
      height: 300px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }
    
    .circular-effect {
      position: absolute;
      width: 200px;
      height: 200px;
      border-radius: 50%;
      border: 2px solid rgba(0, 195, 255, 0.3);
      animation: rotate 15s linear infinite;
    }
    
    .circular-effect:before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 20px;
      height: 20px;
      background: #00c3ff;
      border-radius: 50%;
      transform: translate(-50%, -50%);
      box-shadow: 0 0 20px #00c3ff, 0 0 40px #00c3ff;
    }
    
    .circular-effect:nth-child(2) {
      width: 220px;
      height: 220px;
      animation-delay: -3s;
      animation-duration: 25s;
      border-color: rgba(0, 195, 255, 0.2);
    }
    
    .circular-effect:nth-child(3) {
      width: 180px;
      height: 180px;
      animation-delay: -1s;
      animation-duration: 20s;
      border-color: rgba(0, 195, 255, 0.4);
    }
    
    .tech-button {
      position: relative;
      padding: 15px 40px;
      font-size: 20px;
      font-weight: bold;
      color: #ffffff;
      background-color: rgba(0, 195, 255, 0.1);
      border: 2px solid #00c3ff;
      border-radius: 4px;
      cursor: pointer;
      overflow: hidden;
      box-shadow: 0 0 15px rgba(0, 195, 255, 0.5);
      transition: all 0.3s ease;
      letter-spacing: 2px;
      z-index: 10;
      animation: float 2s ease-in-out infinite;

    }
    
    .tech-button:hover {
      background-color: rgba(0, 195, 255, 0.3);
      box-shadow: 0 0 25px rgba(0, 195, 255, 0.8);
      transform: translateY(-2px);
    }
    
    .tech-button:active {
      transform: translateY(1px);
    }
    
    .lines {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      z-index: 1;
    }
    
    .line {
      position: absolute;
      width: 100%;
      height: 1px;
      background: linear-gradient(90deg, transparent, #00c3ff, transparent);
      animation: flow 6s linear infinite;
      opacity: 0.3;
    }
    
    .line:nth-child(1) {
      top: 20%;
      animation-delay: 0s;
    }
    
    .line:nth-child(2) {
      top: 40%;
      animation-delay: 1s;
    }
    
    .line:nth-child(3) {
      top: 60%;
      animation-delay: 2s;
    }
    
    .line:nth-child(4) {
      top: 80%;
      animation-delay: 3s;
    }
    
    .vertical-line {
      position: absolute;
      height: 100%;
      width: 1px;
      background: linear-gradient(0deg, transparent, #00c3ff, transparent);
      animation: flow-vertical 8s linear infinite;
      opacity: 0.3;
    }
    
    .vertical-line:nth-child(5) {
      left: 20%;
      animation-delay: 0s;
    }
    
    .vertical-line:nth-child(6) {
      left: 40%;
      animation-delay: 2s;
    }
    
    .vertical-line:nth-child(7) {
      left: 60%;
      animation-delay: 4s;
    }
    
    .vertical-line:nth-child(8) {
      left: 80%;
      animation-delay: 6s;
    }
    
    .button-text {
      margin-top: 20px;
      color: #ffffff;
      font-size: 16px;
      text-align: center;
      max-width: 280px;
      line-height: 1.5;
      z-index: 10;
    }
    
    @keyframes rotate {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
    
    @keyframes flow {
      0% {
        transform: translateX(-100%);
      }
      100% {
        transform: translateX(100%);
      }
    }
    
    @keyframes flow-vertical {
      0% {
        transform: translateY(-100%);
      }
      100% {
        transform: translateY(100%);
      }
    }
@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-15px);
  }
  100% {
    transform: translateY(0px);
  }
}
  </style>