* {
        font-family: "Noto Sans JP", sans-serif;
      }

      /* Gradient text for header */
      .gradient-text {
        background: linear-gradient(90deg, #00c6ff 0%, #0072ff 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }

      /* Breathing animation */
      @keyframes breathing {
        0% {
          box-shadow: 0 0 0 0px rgba(0, 198, 255, 0.5);
        }
        70% {
          box-shadow: 0 0 0 15px rgba(0, 198, 255, 0);
        }
        100% {
          box-shadow: 0 0 0 0px rgba(0, 198, 255, 0);
        }
      }

      .breathing {
        animation: breathing 2.5s infinite ease-in-out;
      }

      /* Spin animation for loading */
      @keyframes spin {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(360deg);
        }
      }

      .loading-circle {
        position: absolute;
        width: 100%;
        height: 100%;
        border: 3px solid transparent;
        border-top-color: #00c6ff;
        border-radius: 50%;
        animation: spin 1.5s linear infinite;
      }

      .loading-circle:nth-child(2) {
        border-top-color: #0072ff;
        animation: spin 1.2s linear infinite;
        width: 70%;
        height: 70%;
        top: 15%;
        left: 15%;
      }

      .loading-circle:nth-child(3) {
        border-top-color: #00c6ff;
        animation: spin 0.8s linear infinite;
        width: 50%;
        height: 50%;
        top: 25%;
        left: 25%;
      }

      /* Fade in animation */
      @keyframes fadeIn {
        from {
          opacity: 0;
          transform: translateY(20px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      .fade-in {
        animation: fadeIn 0.5s ease-in-out;
      }

      /* Step connector line */
      .step:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 22px;
        right: -15%;
        width: 30%;
        height: 2px;
        background: rgba(160, 185, 230, 0.3);
      }

      /* Backdrop filter support */
      @supports (backdrop-filter: blur(10px)) {
        .backdrop-blur-custom {
          backdrop-filter: blur(10px);
        }
      }

      @supports (backdrop-filter: blur(5px)) {
        .backdrop-blur-modal {
          backdrop-filter: blur(5px);
        }
      }