@layer pages {
.not-found {
  padding-block: var(--hero-pad-top) var(--section-pad);
  overflow-x: clip;
}

.not-found__inner {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}

.not-found__stage {
  display: grid;
  justify-items: center;
  gap: var(--space-sm);
}

.not-found__visual {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.03em;
  color: var(--color-purple);
  font-size: var(--fs-display);
  font-weight: var(--fw-semibold);
  line-height: 1;
  user-select: none;
}

.not-found__visual::before {
  content: "";
  position: absolute;
  inset: -12% 8%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--color-purple) 30%, transparent), transparent);
  animation: not-found-glow 4s ease-in-out infinite alternate;
}

.not-found__digit {
  display: block;
}

.not-found__zero {
  align-self: flex-end;
  inline-size: auto;
  block-size: 0.727em;
  margin-block-end: 0.136em;
  overflow: visible;
}

.not-found__liquid {
  animation: not-found-wave 2.4s linear infinite;
}

.not-found__bubble {
  fill: var(--color-text-inverse);
  opacity: 0;
  animation: not-found-rise 3.6s ease-in infinite;
}

.not-found__bubble:nth-of-type(2) {
  animation-delay: 1.2s;
  animation-duration: 4.2s;
}

.not-found__bubble:nth-of-type(3) {
  animation-delay: 2.3s;
  animation-duration: 3.2s;
}

.not-found__content {
  display: grid;
  justify-items: start;
  gap: var(--space-md);
}

.not-found__label {
  display: block;
  margin-block-end: var(--space-md);
  font-size: 1.5rem;
  font-weight: var(--fw-bold);
  line-height: 1.2;
}

.not-found__title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-semibold);
}

.not-found__text {
  max-inline-size: 29.9375rem;
}

.not-found__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-lg);
  margin-block-start: var(--space-xs);
}

.not-found__link {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.75rem;
  color: var(--color-purple);
  font-weight: var(--fw-semibold);
}

@media (min-width: 56.25em) {
  .not-found__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--col-gap);
  }

  .not-found__stage {
    order: 2;
  }
}

html.no-js .not-found__visual::before,
html.no-js .not-found__liquid,
html.no-js .not-found__bubble {
  animation: none;
}

html[data-motion="paused"] .not-found__visual::before,
html[data-motion="paused"] .not-found__liquid,
html[data-motion="paused"] .not-found__bubble {
  animation-play-state: paused;
}

@keyframes not-found-rise {
  0% {
    opacity: 0;
    transform: translateY(0);
  }

  15% {
    opacity: 0.9;
  }

  100% {
    opacity: 0;
    transform: translateY(-34px);
  }
}

@keyframes not-found-wave {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-48px);
  }
}

@keyframes not-found-glow {
  from {
    opacity: 0.55;
    transform: scale(0.94);
  }

  to {
    opacity: 1;
    transform: scale(1.04);
  }
}
}