body {
      font-family: 'Arial', sans-serif;
      background-color: #f3f4f6;
      margin: 0;
      padding: 0;
    }
    .container-generator {
      max-width: 1250px;
      margin: 0.8rem auto;
      padding: 1rem;
      background: #ffffff;
      border-radius: 8px;
      box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    }
    .btn-gradient {
      background: linear-gradient(90deg, #553c9a, #ee4b2b);
      color: #fff;
      border: none;
      transition: none !important;
    }
    .btn-gradient:hover {
      opacity: 1 !important;
      background: linear-gradient(90deg, #553c9a, #ee4b2b) !important;
    }
    .copy-icon, .dice-icon {
      cursor: pointer;
    }
    .loader-border {
      width: 1rem;
      height: 1rem;
      border: 2px solid #fff;
      border-right-color: transparent;
      border-radius: 50%;
      animation: spinner 0.6s linear infinite;
    }
    @keyframes spinner {
      to { transform: rotate(360deg); }
    }
    .custom-scroll::-webkit-scrollbar {
      height: 6px;
    }
    .custom-scroll::-webkit-scrollbar-track {
      background: #e5e7eb;
    }
    .custom-scroll::-webkit-scrollbar-thumb {
      background-color: #9ca3af;
      border-radius: 3px;
    }
    /* Range Slider for number of suggestions */
    #suggestionSlider::-webkit-slider-runnable-track {
      height: 6px;
      border-radius: 3px;
      background: linear-gradient(90deg, #553c9a, #ee4b2b);
    }
    #suggestionSlider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      background: #fff;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      border: 2px solid #553c9a;
      cursor: pointer;
      margin-top: -4px;
    }
    #suggestionSlider::-moz-range-track {
      height: 6px;
      border-radius: 3px;
      background: linear-gradient(90deg, #553c9a, #ee4b2b);
    }
    #suggestionSlider::-moz-range-thumb {
      background: #fff;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      border: 2px solid #553c9a;
      cursor: pointer;
    }
    .textarea-wrapper {
      position: relative;
    }
    .textarea-dice-icon {
      position: absolute;
      top: 30px; 
      right: 10px;
      color: black;
      cursor: pointer;
      z-index: 10;
    }
    .step {
      background-color: #f9f9f9;
      padding: 20px;
    }
    @media screen and (max-width: 768px) {
      .step {
        padding: 15px;
        margin-bottom: 20px;
        max-width: 100%;
        overflow-x: hidden;
      }
    }
    .step-description {
      font-size: 16px;
      color: #666;
    }