#site-header {
        opacity: 0;
        transition: opacity 0.25s ease;
      }

      *,
      *::before,
      *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }

      html,
      body {
        height: 100%;
      }

      body {
        font-family:
          "Noto Sans TC",
          -apple-system,
          sans-serif;
        background: #1a1510;
        overflow: hidden;
      }

      .bg {
        position: fixed;
        inset: 0;
        background-image: url("/img/landing.webp");
        background-size: cover;
        background-position: center;
      }

      .bg::after {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.22);
      }

      .wrap {
        position: relative;
        z-index: 1;
        height: 100dvh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 16px;
        padding: 48px 32px;
      }

      .btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        width: 100%;
        max-width: 300px;
        padding: 15px 20px;
        background: rgba(18, 18, 18, 0.84);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        color: rgba(255, 255, 255, 0.92);
        border-radius: 11px;
        font-family: inherit;
        font-size: 15px;
        font-weight: 500;
        letter-spacing: 0.06em;
        text-decoration: none;
        transition:
          background 0.18s,
          transform 0.12s;
        -webkit-tap-highlight-color: transparent;
        user-select: none;
      }

      .btn:active {
        background: rgba(36, 36, 36, 0.92);
        transform: scale(0.965);
      }

      .btn i {
        font-size: 16px;
        opacity: 0.7;
        flex-shrink: 0;
      }