body {
      font-family: 'El Messiri', sans-serif;
      overflow: hidden;
      margin: 0;
      padding: 0;
    }
    #app {
      position: relative;
      min-height: 100vh;
      background-color: #f3f4f6;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 2rem 1.5rem;
      overflow: hidden;
    }
    @media screen and (min-width: 601px) {
      #app {
        animation: shrinkTo400 .5s ease forwards;
        margin: auto;
        height: 100vh;
      }
      @keyframes shrinkTo400 {
        0% {
          max-width: 100%;
        }
        to {
          max-width: 400px;
        }
      }
    }
    @media screen and (max-width: 600px) {
      #app {
        max-width: 100%;
      }
    }
    .embossed {
      background: #f3f4f6;
      box-shadow: -4px -4px 8px rgba(255, 255, 255, 0.8), 4px 4px 8px rgba(0, 0, 0, 0.1);
    }
    .embossed-button {
      background: #f3f4f6;
      box-shadow: -3px -3px 6px rgba(255, 255, 255, 0.9), 3px 3px 6px rgba(0, 0, 0, 0.1);
    }
    .embossed:active {
      box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.1), inset -2px -2px 5px rgba(255, 255, 255, 0.8);
    }
    .embossed-button:active {
      box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.1), inset -2px -2px 4px rgba(255, 255, 255, 0.8);
    }
    .input-with-icon {
      padding-left: 2.5rem;
    }
    .ripple {
      position: relative;
      overflow: hidden;
    }
    .ripple::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 0;
      height: 0;
      background: rgba(255, 255, 255, 0.3);
      border-radius: 50%;
      transform: translate(-50%, -50%);
      animation: ripple-effect 0.6s ease-out;
      pointer-events: none;
    }
    @keyframes ripple-effect {
      0% {
        width: 0;
        height: 0;
        opacity: 1;
      }
      100% {
        width: 200%;
        height: 200%;
        opacity: 0;
      }
    }
    .pulse {
      position: absolute;
      border-radius: 50%;
      animation: pulse 3s infinite;
      opacity: 0.2;
    }
    @keyframes pulse {
      0% {
        transform: scale(0.8);
        opacity: 0.2;
      }
      50% {
        transform: scale(1.2);
        opacity: 0.4;
      }
      100% {
        transform: scale(0.8);
        opacity: 0.2;
      }
    }
    .blob {
      position: absolute;
      background: rgba(168, 85, 247, 0.2);
      border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
      animation: morph 8s ease-in-out infinite;
      transition: all 1s ease-in-out;
    }
    @keyframes morph {
      0% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
      50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
      100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
    }
    .footer-blob {
      background: rgba(236, 72, 153, 0.2);
    }