html, body { height: 100%; }
body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background-color: #f6f6f6;
  overflow: hidden;
}
.not-found {
    background-color: #f6f6f6;
    position: relative;
    width: min(100vw, 393px);
    height: 100vh;
    overflow: hidden;
  }

  /* Full-illustration version */
  .not-found .art {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    display: block;
    z-index: 1;
  }

  /* Ensure overlays (texts + button) are above the illustration */
  .not-found .text-wrapper,
  .not-found .p,
  .not-found .text-wrapper-3,
  .not-found .button {
    z-index: 2;
  }
  
  .not-found .vector {
    position: absolute;
    width: 20.15%;
    height: 7.96%;
    top: 13.64%;
    left: 70.67%;
  }
  
  .not-found .img {
    position: absolute;
    width: 3.34%;
    height: auto;
    top: 19.73%;
    left: 78.68%;
    object-fit: contain;
  }
  
  .not-found .vector-2 {
    position: absolute;
    width: 10.19%;
    height: 3.94%;
    top: 25.11%;
    left: 10.96%;
  }
  
  .not-found .vector-3 {
    position: absolute;
    width: 8.60%;
    height: 3.55%;
    top: 33.05%;
    left: 10.44%;
  }
  
  .not-found .vector-4 {
    position: absolute;
    width: 8.14%;
    height: 3.18%;
    top: 27.10%;
    left: 14.06%;
  }
  
  .not-found .vector-5 {
    position: absolute;
    width: 7.63%;
    height: 2.92%;
    top: 29.08%;
    left: 14.59%;
  }
  
  .not-found .vector-6 {
    position: absolute;
    width: 8.22%;
    height: 2.26%;
    top: 31.65%;
    left: 13.00%;
  }
  
  .not-found .vector-7 {
    position: absolute;
    width: 7.39%;
    height: 3.32%;
    top: 30.17%;
    left: 26.42%;
  }
  
  .not-found .vector-8 {
    position: absolute;
    width: 4.39%;
    height: 3.51%;
    top: 16.47%;
    left: 47.68%;
  }
  
  .not-found .vector-9 {
    position: absolute;
    width: 6.46%;
    height: 2.15%;
    top: 36.27%;
    left: 10.38%;
  }
  
  .not-found .vector-10 {
    position: absolute;
    width: 7.25%;
    height: 2.24%;
    top: 34.04%;
    left: 22.50%;
  }
  
  .not-found .vector-11 {
    position: absolute;
    width: 5.34%;
    height: auto;
    top: 23.01%;
    left: 62.78%;
    object-fit: contain;
  }
  
  .not-found .vector-12 {
    position: absolute;
    width: 3.19%;
    height: 2.66%;
    top: 16.64%;
    left: 43.25%;
  }
  
  .not-found .vector-13 {
    position: absolute;
    width: 2.75%;
    height: 2.52%;
    top: 16.71%;
    left: 53.61%;
  }
  
  .not-found .vector-14 {
    position: absolute;
    width: 8.76%;
    height: auto;
    top: 24.14%;
    left: 27.24%;
    object-fit: contain;
  }
  
  .not-found .vector-15 {
    position: absolute;
    width: 7.47%;
    height: auto;
    top: 24.07%;
    left: 63.81%;
    object-fit: contain;
  }
  
  .not-found .vector-16 {
    position: absolute;
    width: 7.35%;
    height: auto;
    top: 25.95%;
    left: 27.71%;
    object-fit: contain;
  }
  
  .not-found .vector-17 {
    position: absolute;
    width: 6.86%;
    height: auto;
    top: 25.82%;
    left: 64.06%;
    object-fit: contain;
  }
  
  .not-found .vector-18 {
    position: absolute;
    width: auto;
    height: auto;
    top: 16.49%;
    left: 47.76%;
    object-fit: contain;
  }
  
  .not-found .vector-19 {
    position: absolute;
    width: 9.99%;
    height: 8.69%;
    top: 34.54%;
    left: 49.17%;
  }
  
  .not-found .group {
    position: absolute;
    width: 69.16%;
    height: 29.26%;
    top: 14.55%;
    left: 10.89%;
  }
  
  .not-found .group-2 {
    position: absolute;
    width: 26.16%;
    height: 17.94%;
    top: 24.99%;
    left: 58.92%;
  }
  
  .not-found .div {
    position: absolute;
    width: 24.63%;
    height: 4.70%;
    top: 41.45%;
    left: 6.62%;
    background-image: none;
    background-size: 100% 100%;
  }
  
  .not-found .vector-20 {
    position: absolute;
    width: auto;
    height: auto;
    top: 26.26%;
    left: 20.12%;
    object-fit: contain;
  }
  
  .not-found .vector-21 {
    position: absolute;
    width: auto;
    height: auto;
    top: 58.53%;
    left: 28.69%;
    object-fit: contain;
  }
  
  .not-found .vector-22 {
    position: absolute;
    width: auto;
    height: auto;
    top: 54.03%;
    left: 21.65%;
    object-fit: contain;
  }
  
  .not-found .vector-23 {
    position: absolute;
    width: auto;
    height: auto;
    top: 49.53%;
    left: 16.14%;
    object-fit: contain;
  }
  
  .not-found .vector-24 {
    position: absolute;
    width: auto;
    height: auto;
    top: 57.78%;
    left: 27.46%;
    object-fit: contain;
  }
  
  .not-found .vector-25 {
    position: absolute;
    width: auto;
    height: auto;
    top: 23.25%;
    left: 25.01%;
    object-fit: contain;
  }
  
  .not-found .group-3 {
    position: absolute;
    width: 30.02%;
    height: 12.69%;
    top: 30.67%;
    left: 63.11%;
  }
  
  .not-found .vector-26 {
    position: absolute;
    width: 36.13%;
    height: 2.41%;
    top: 43.30%;
    left: 30.12%;
  }
  
  .not-found .text-wrapper {
    top: 455px;
    left: calc(50.00% - 140px);
    width: 279px;
    height: 38px;
    font-family: "Inter-Light", Helvetica;
    font-weight: 300;
    color: var(--gray-1);
    font-size: 16px;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    letter-spacing: 0;
    line-height: 19px;
  }
  
  .not-found .button {
    all: unset;
    box-sizing: border-box;
    display: flex;
    width: 371px;
    height: 62px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 89px;
    position: absolute;
    top: 630px;
    left: calc(50.00% - 186px);
    background-color: var(--primary);
    border-radius: 330px;
    box-shadow: var(--better);
  }
  
  .not-found .text-wrapper-2 {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    font-family: var(--h2-bold-font-family);
    font-weight: var(--h2-bold-font-weight);
    color: var(--secondary);
    font-size: var(--h2-bold-font-size);
    text-align: center;
    letter-spacing: var(--h2-bold-letter-spacing);
    line-height: var(--h2-bold-line-height);
    white-space: nowrap;
    font-style: var(--h2-bold-font-style);
  }
  
  .not-found .p {
    top: 415px;
    left: 53px;
    height: 19px;
    font-family: "Gilroy-ExtraBold", Helvetica;
    font-weight: 800;
    color: #6452fe;
    font-size: 24px;
    white-space: nowrap;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    letter-spacing: 0;
    line-height: 19px;
  }
  
  .not-found .text-wrapper-3 {
    position: absolute;
    top: 370px;
    left: calc(50.00% - 56px);
    width: 108px;
    height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Gilroy-ExtraBold", Helvetica;
    font-weight: 800;
    color: #6452fe;
    font-size: 60px;
    text-align: center;
    letter-spacing: 0;
    line-height: 19px;
  }

  /* Figma-accurate overrides */
  .not-found .p,
  .not-found .text-wrapper-3 {
    font-family: "Gilroy-ExtraBold", Helvetica !important;
    font-weight: 800 !important;
    color: #6452FE !important;
  }

  .not-found .button {
    background-color: #18CA8E !important;
  }
  
  /* Safety overrides to ensure visibility in Telegram WebApp */
  .not-found img {
    height: auto !important;
    object-fit: contain;
  }
  /* Original CSS code should be injected here */
  
  .not-found .illustration {
    position: relative;
    width: 100%;
    height: auto;
  }
  
  .not-found .error-content {
    position: relative;
    width: 100%;
    text-align: center;
  }
  
  .not-found {
    background-color: #f6f6f6;
    position: relative;
    width: min(100vw, 393px);
    height: 100vh;
    overflow: hidden;
  }
  
  .not-found .vector {
    position: absolute;
    width: 20.15%;
    height: 7.96%;
    top: 13.64%;
    left: 70.67%;
  }
  
  .not-found .img {
    position: absolute;
    width: 3.34%;
    height: 0;
    top: 19.73%;
    left: 78.68%;
  }
  
  .not-found .vector-2 {
    position: absolute;
    width: 10.19%;
    height: 3.94%;
    top: 25.11%;
    left: 10.96%;
  }
  
  .not-found .vector-3 {
    position: absolute;
    width: 8.60%;
    height: 3.55%;
    top: 33.05%;
    left: 10.44%;
  }
  
  .not-found .vector-4 {
    position: absolute;
    width: 8.14%;
    height: 3.18%;
    top: 27.10%;
    left: 14.06%;
  }
  
  .not-found .vector-5 {
    position: absolute;
    width: 7.63%;
    height: 2.92%;
    top: 29.08%;
    left: 14.59%;
  }
  
  .not-found .vector-6 {
    position: absolute;
    width: 8.22%;
    height: 2.26%;
    top: 31.65%;
    left: 13.00%;
  }
  
  .not-found .vector-7 {
    position: absolute;
    width: 7.39%;
    height: 3.32%;
    top: 30.17%;
    left: 26.42%;
  }
  
  .not-found .vector-8 {
    position: absolute;
    width: 4.39%;
    height: 3.51%;
    top: 16.47%;
    left: 47.68%;
  }
  
  .not-found .vector-9 {
    position: absolute;
    width: 6.46%;
    height: 2.15%;
    top: 36.27%;
    left: 10.38%;
  }
  
  .not-found .vector-10 {
    position: absolute;
    width: 7.25%;
    height: 2.24%;
    top: 34.04%;
    left: 22.50%;
  }
  
  .not-found .vector-11 {
    position: absolute;
    width: 5.34%;
    height: 0;
    top: 23.01%;
    left: 62.78%;
  }
  
  .not-found .vector-12 {
    position: absolute;
    width: 3.19%;
    height: 2.66%;
    top: 16.64%;
    left: 43.25%;
  }
  
  .not-found .vector-13 {
    position: absolute;
    width: 2.75%;
    height: 2.52%;
    top: 16.71%;
    left: 53.61%;
  }
  
  .not-found .vector-14 {
    position: absolute;
    width: 8.76%;
    height: 0;
    top: 24.14%;
    left: 27.24%;
  }
  
  .not-found .vector-15 {
    position: absolute;
    width: 7.47%;
    height: 0;
    top: 24.07%;
    left: 63.81%;
  }
  
  .not-found .vector-16 {
    position: absolute;
    width: 7.35%;
    height: 0;
    top: 25.95%;
    left: 27.71%;
  }
  
  .not-found .vector-17 {
    position: absolute;
    width: 6.86%;
    height: 0;
    top: 25.82%;
    left: 64.06%;
  }
  
  .not-found .vector-18 {
    position: absolute;
    width: 0;
    height: 0;
    top: 16.49%;
    left: 47.76%;
  }
  
  .not-found .vector-19 {
    position: absolute;
    width: 9.99%;
    height: 8.69%;
    top: 34.54%;
    left: 49.17%;
  }
  
  .not-found .group {
    position: absolute;
    width: 69.16%;
    height: 29.26%;
    top: 14.55%;
    left: 10.89%;
  }
  
  .not-found .group-2 {
    position: absolute;
    width: 26.16%;
    height: 17.94%;
    top: 24.99%;
    left: 58.92%;
  }
  
  .not-found .div {
    position: absolute;
    width: 24.63%;
    height: 4.70%;
    top: 41.45%;
    left: 6.62%;
    background-image: none;
    background-size: 100% 100%;
  }
  
  .not-found .vector-20 {
    position: absolute;
    width: 0;
    height: 0;
    top: 26.26%;
    left: 20.12%;
  }
  
  .not-found .vector-21 {
    position: absolute;
    width: 0;
    height: 0;
    top: 58.53%;
    left: 28.69%;
  }
  
  .not-found .vector-22 {
    position: absolute;
    width: 0;
    height: 0;
    top: 54.03%;
    left: 21.65%;
  }
  
  .not-found .vector-23 {
    position: absolute;
    width: 0;
    height: 0;
    top: 49.53%;
    left: 16.14%;
  }
  
  .not-found .vector-24 {
    position: absolute;
    width: 0;
    height: 0;
    top: 57.78%;
    left: 27.46%;
  }
  
  .not-found .vector-25 {
    position: absolute;
    width: 0;
    height: 0;
    top: 23.25%;
    left: 25.01%;
  }
  
  .not-found .group-3 {
    position: absolute;
    width: 30.02%;
    height: 12.69%;
    top: 30.67%;
    left: 63.11%;
  }
  
  .not-found .vector-26 {
    position: absolute;
    width: 36.13%;
    height: 2.41%;
    top: 43.30%;
    left: 30.12%;
  }
  
  .not-found .text-wrapper {
    top: 455px;
    left: calc(50.00% - 140px);
    width: 279px;
    height: 38px;
    font-family: "Inter-Light", Helvetica;
    font-weight: 300;
    color: var(--gray-1);
    font-size: 16px;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    letter-spacing: 0;
    line-height: 19px;
  }
  
  .not-found .button {
    all: unset;
    box-sizing: border-box;
    display: flex;
    width: 371px;
    height: 62px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 89px;
    position: absolute;
    top: 630px;
    left: calc(50.00% - 186px);
    background-color: var(--primary);
    border-radius: 330px;
    box-shadow: var(--better);
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
  }
  
  .not-found .button:hover {
    background-color: #16b87a;
    transform: translateY(-1px);
  }
  
  .not-found .button:active {
    transform: translateY(0);
  }
  
  .not-found .text-wrapper-2 {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    font-family: var(--h2-bold-font-family);
    font-weight: var(--h2-bold-font-weight);
    color: var(--secondary);
    font-size: var(--h2-bold-font-size);
    text-align: center;
    letter-spacing: var(--h2-bold-letter-spacing);
    line-height: var(--h2-bold-line-height);
    white-space: nowrap;
    font-style: var(--h2-bold-font-style);
  }
  
  .not-found .p {
    top: 415px;
    left: 53px;
    height: 19px;
    font-family: "Gilroy-ExtraBold", Helvetica;
    font-weight: 800;
    color: #6452fe;
    font-size: 24px;
    white-space: nowrap;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    letter-spacing: 0;
    line-height: 19px;
  }
  
  .not-found .text-wrapper-3 {
    position: absolute;
    top: 370px;
    left: calc(50.00% - 56px);
    width: 108px;
    height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Gilroy-ExtraBold", Helvetica;
    font-weight: 800;
    color: #6452fe;
    font-size: 60px;
    text-align: center;
    letter-spacing: 0;
    line-height: 19px;
  }