.not-found {
  padding-block:40px 64px;
  text-align:center;
}

.not-found-art {
  position:relative;
  isolation:isolate;
  display:grid;
  place-items:center;
  max-width:760px;
  min-height:clamp(260px,55vw,390px);
  margin:0 auto 40px;
  padding:30px 20px 36px;
  border:1px solid var(--border);
  border-radius:30px;
  background:var(--download);
  overflow:hidden;
}

.not-found-code {
  position:absolute;
  z-index:-1;
  color:var(--blue);
  opacity:.12;
  font-size:clamp(150px,36vw,320px);
  font-weight:750;
  line-height:1;
  letter-spacing:-.08em;
  transform:translateX(-.04em);
  user-select:none;
}

.not-found-badge {
  position:relative;
  align-self:end;
  margin-top:-4px;
  padding:10px 16px;
  border:1px solid var(--border);
  border-radius:24px;
  background:var(--surface);
  color:var(--blue);
  font-size:10px;
  font-weight:650;
  letter-spacing:1.2px;
  transform:rotate(3deg);
}

.not-found-copy h1 {
  font-size:clamp(38px,6.5vw,72px);
  margin-bottom:20px;
}

.not-found-copy .hero-description {
  font-size:clamp(16px,2.5vw,20px);
}

@media (min-width:600px) {
  .not-found { padding-block:56px 80px; }
}