body {
      font-family: 'El Messiri', sans-serif;
      overflow: hidden;
      margin: 0;
      padding: 0
    }

    #app {
      position: relative;
      min-height: 100vh;
      background: #f3f4f6;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 2rem 1.5rem;
      overflow: hidden
    }

    @media(min-width:601px) {
      #app {
        animation: shrinkTo400 .5s ease forwards;
        margin: auto;
        height: 100vh
      }

      @keyframes shrinkTo400 {
        0% {
          max-width: 100%
        }

        to {
          max-width: 400px
        }
      }
    }

    .embossed {
      background: #f3f4f6;
      box-shadow: -4px -4px 8px rgba(255, 255, 255, .8), 4px 4px 8px rgba(0, 0, 0, .1)
    }

    .embossed-button {
      background: #f3f4f6;
      box-shadow: -3px -3px 6px rgba(255, 255, 255, .9), 3px 3px 6px rgba(0, 0, 0, .1)
    }

    .embossed:active {
      box-shadow: inset 2px 2px 5px rgba(0, 0, 0, .1), inset -2px -2px 5px rgba(255, 255, 255, .8)
    }

    .embossed-button:active {
      box-shadow: inset 2px 2px 4px rgba(0, 0, 0, .1), inset -2px -2px 4px rgba(255, 255, 255, .8)
    }

    .ripple {
      position: relative;
      overflow: hidden
    }

    .ripple::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 0;
      height: 0;
      background: rgba(255, 255, 255, .3);
      border-radius: 50%;
      transform: translate(-50%, -50%);
      animation: ripple-effect .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: .2
    }

    @keyframes pulse {
      0% {
        transform: scale(.8);
        opacity: .2
      }

      50% {
        transform: scale(1.2);
        opacity: .4
      }

      100% {
        transform: scale(.8);
        opacity: .2
      }
    }

    .blob {
      position: absolute;
      background: rgba(168, 85, 247, .2);
      border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
      animation: morph 8s ease-in-out infinite
    }

    @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, .2)
    }

    .btn-disabled {
      opacity: .6;
      filter: grayscale(.2);
      cursor: not-allowed
    }

    .icon-pulse:hover {
      animation: soft-pulse 1.2s infinite
    }

    @keyframes soft-pulse {
      0% {
        transform: scale(1)
      }

      50% {
        transform: scale(1.05)
      }

      100% {
        transform: scale(1)
      }
    }

    .modal-backdrop {
      background: rgba(0, 0, 0, .4)
    }

    .toast {
      border: 1px solid transparent;
      border-radius: 16px
    }

    .toast-success {
      background: linear-gradient(180deg, #ecfdf5, #f0fff4);
      border-color: #10b981
    }

    .toast-error {
      background: linear-gradient(180deg, #fff1f2, #fef2f2);
      border-color: #ef4444
    }