body.not-found-page {
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  background: #09040f;
}

.not-found-page #root { min-height: 100vh; min-height: 100dvh; }

.not-found-shell,
.public-route-loading {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 !important;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 75% 14%, rgba(255, 79, 175, 0.14), transparent 30rem),
    radial-gradient(circle at 20% 88%, rgba(127, 69, 245, 0.14), transparent 34rem),
    #09040f;
}

.not-found-grid {
  position: absolute;
  inset: 0;
  z-index: -3;
  background:
    linear-gradient(rgba(185, 92, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(185, 92, 255, 0.045) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(circle at center, #000, transparent 78%);
  mask-image: radial-gradient(circle at center, #000, transparent 78%);
}

.not-found-glow {
  position: absolute;
  z-index: -2;
  width: min(72vw, 840px);
  aspect-ratio: 1;
  border: 1px solid rgba(206, 119, 255, 0.08);
  border-radius: 50%;
  box-shadow: 0 0 0 110px rgba(206, 119, 255, 0.018), 0 0 0 220px rgba(206, 119, 255, 0.01);
}

.not-found-code {
  position: absolute;
  z-index: -1;
  color: transparent;
  font-family: var(--display);
  font-size: clamp(13rem, 40vw, 42rem);
  font-weight: 900;
  letter-spacing: -0.1em;
  line-height: 0.8;
  -webkit-text-stroke: 1px rgba(206, 119, 255, 0.07);
  transform: translateX(-0.04em);
}

.not-found-card {
  position: relative;
  width: min(calc(100% - 32px), 560px);
  padding: 68px 28px;
  border: 1px solid rgba(206, 119, 255, 0.22);
  border-radius: 8px;
  text-align: center;
  background: rgba(18, 7, 29, 0.76);
  box-shadow: 0 32px 100px rgba(0, 0, 0, 0.46), 14px 14px 0 rgba(179, 82, 255, 0.04);
  backdrop-filter: blur(22px);
}

.not-found-card::before,
.not-found-card::after { content: ""; position: absolute; width: 38px; height: 38px; }
.not-found-card::before { top: 14px; right: 14px; border-top: 1px solid rgba(255, 120, 212, 0.5); border-right: 1px solid rgba(255, 120, 212, 0.5); }
.not-found-card::after { bottom: 14px; left: 14px; border-bottom: 1px solid rgba(198, 152, 255, 0.4); border-left: 1px solid rgba(198, 152, 255, 0.4); }
.not-found-card p { margin: 0 0 14px; color: #ff78d4; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.15em; }
.not-found-card h1 { margin: 0; font-family: var(--display); font-size: clamp(6rem, 17vw, 10rem); letter-spacing: -0.08em; line-height: 0.82; background: linear-gradient(118deg, #fff7ff, #c698ff 52%, #ff78d4); -webkit-background-clip: text; background-clip: text; color: transparent; }
.not-found-card strong { display: block; margin-top: 24px; color: rgba(246, 222, 255, 0.56); font-family: var(--mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; }
.not-found-index { position: absolute; right: 28px; bottom: 24px; color: rgba(246, 222, 255, 0.22); font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.12em; }

.public-route-loading { color: rgba(246, 222, 255, 0.46); font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; }
.public-route-loading > span { margin-bottom: 26px; }
.public-route-loading > i { position: absolute; width: 130px; height: 2px; margin-top: 46px; overflow: hidden; background: rgba(246, 222, 255, 0.09); }
.public-route-loading > i::after { content: ""; display: block; width: 50%; height: 100%; background: linear-gradient(90deg, #985cff, #ff78d4); animation: public-route-load 0.9s ease-in-out infinite alternate; }

@keyframes public-route-load {
  from { transform: translateX(0); }
  to { transform: translateX(100%); }
}

@media (max-width: 560px) {
  .not-found-card { padding-block: 54px; }
  .not-found-card h1 { font-size: clamp(6rem, 34vw, 8rem); }
  .not-found-index { right: 18px; bottom: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .public-route-loading > i::after { animation: none; }
}