/* The error pages (`ErrorPage`): centered on the window (or, `--compact`,
   in the app's frame), a quiet card, its picture over the words */
.error-page {
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: 24px 16px;
  background:
    radial-gradient(60% 50% at 50% 0%, color-mix(in oklab, var(--color-primary) 10%, transparent), transparent 70%),
    var(--color-base-200);
  color: var(--color-base-content);
}
.error-page--compact {
  min-height: 100%;
  background: transparent;
}
.error-page__card {
  width: 100%;
  max-width: 520px;
  text-align: center;
}
.error-page__art {
  width: min(100%, 380px);
  height: auto;
  margin: 0 auto 8px;
  color: var(--color-base-content);
}
.error-page__404 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 12px;
  font-weight: 900;
  font-size: clamp(88px, 22vw, 140px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: color-mix(in oklab, var(--color-base-content) 85%, transparent);
}
.error-page__plate {
  width: 0.95em;
  height: 0.95em;
  color: var(--color-base-content);
}
.error-page__kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
}
.error-page__title {
  margin-top: 6px;
  font-size: clamp(26px, 5vw, 34px);
  font-weight: 800;
  line-height: 1.15;
  text-wrap: balance;
}
.error-page__message {
  margin: 10px auto 0;
  max-width: 42ch;
  color: color-mix(in oklab, var(--color-base-content) 70%, transparent);
  text-wrap: pretty;
}
.error-page__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
}
.error-page__code {
  margin-top: 20px;
  font-size: 12px;
  color: color-mix(in oklab, var(--color-base-content) 50%, transparent);
}
.error-page__code code {
  padding: 2px 6px;
  border-radius: 6px;
  background: color-mix(in oklab, var(--color-base-content) 8%, transparent);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* The ice cream's drip, slowly running and dropping */
.error-art__drip {
  transform-box: fill-box;
  transform-origin: 50% 0;
  animation: error-drip 2.6s ease-in infinite;
}
@keyframes error-drip {
  0% { transform: scaleY(0.4); opacity: 1; }
  70% { transform: scaleY(1.25); opacity: 1; }
  100% { transform: scaleY(1.25) translateY(6px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .error-art__drip {
    animation: none;
  }
}