:root {
  color-scheme: light;
  --error-bg: #fff;
  --error-surface: #fff;
  --error-line: #e4e7eb;
  --error-text: #171b22;
  --error-muted: #656d78;
  --error-accent: #286bd6;
  --error-accent-hover: #1e5fca;
  --error-shadow: 0 22px 70px rgb(20 29 42 / 10%);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  color: var(--error-text);
  background: var(--error-bg);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --error-bg: #0b0d10;
  --error-surface: #181d23;
  --error-line: #2b323b;
  --error-text: #eef1f5;
  --error-muted: #a4adb8;
  --error-accent: #4d89ea;
  --error-accent-hover: #6a9ef0;
  --error-shadow: 0 22px 70px rgb(0 0 0 / 36%);
}

* { box-sizing: border-box; }
html { min-width: 320px; min-height: 100%; }
body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  color: var(--error-text);
  background:
    radial-gradient(ellipse at 50% 42%, color-mix(in srgb, var(--error-accent) 8%, transparent), transparent 52%),
    linear-gradient(180deg, var(--error-bg), color-mix(in srgb, var(--error-bg) 92%, var(--error-accent)));
  transition: color .22s ease, background-color .22s ease;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.error-page {
  display: grid;
  min-height: 100vh;
  grid-template-rows: auto 1fr auto;
  justify-items: center;
  gap: 24px;
  padding: clamp(24px, 5vh, 54px) 20px 24px;
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  justify-self: start;
  color: var(--error-text);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .12em;
}
.wordmark strong { color: var(--error-accent); font-weight: inherit; }
.wordmark-mark {
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--error-accent) 40%, var(--error-line));
  border-radius: 9px;
  color: white;
  background: linear-gradient(145deg, var(--error-accent), var(--error-accent-hover));
  box-shadow: 0 5px 16px color-mix(in srgb, var(--error-accent) 22%, transparent);
  font-size: 16px;
  letter-spacing: -.04em;
}
.error-card {
  position: relative;
  align-self: center;
  width: min(100%, 580px);
  overflow: hidden;
  padding: clamp(30px, 7vw, 58px);
  border: 1px solid color-mix(in srgb, var(--error-accent) 16%, var(--error-line));
  border-radius: 22px;
  background:
    radial-gradient(ellipse at var(--error-light-x, 50%) var(--error-light-y, 0%), color-mix(in srgb, var(--error-accent) 7%, transparent), transparent 68%),
    color-mix(in srgb, var(--error-surface) 94%, transparent);
  box-shadow: var(--error-shadow);
  text-align: center;
  animation: error-enter .5s cubic-bezier(.2,.7,.2,1) both;
  transform: perspective(1000px) rotateX(var(--error-tilt-x, 0deg)) rotateY(var(--error-tilt-y, 0deg)) translateY(var(--error-lift, 0));
  transform-style: preserve-3d;
  transition: transform .36s cubic-bezier(.2,.7,.2,1), box-shadow .36s ease, background-position .36s ease;
}
.error-card.is-tilting {
  --error-lift: -5px;
  box-shadow: var(--error-shadow), var(--error-shadow-x, 0px) var(--error-shadow-y, 12px) 42px color-mix(in srgb, var(--error-accent) 12%, transparent);
}
.error-card::before {
  position: absolute;
  top: 0;
  left: 15%;
  width: 70%;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--error-accent) 65%, white), transparent);
  content: "";
  pointer-events: none;
}
.error-eyebrow {
  color: var(--error-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
}
.error-code {
  margin: 18px 0 4px;
  color: var(--error-accent);
  font-size: clamp(72px, 18vw, 116px);
  font-weight: 760;
  letter-spacing: -.085em;
  line-height: 1;
  text-shadow: 0 10px 38px color-mix(in srgb, var(--error-accent) 15%, transparent);
}
.error-card h1 {
  margin: 18px 0 10px;
  font-size: clamp(21px, 4vw, 29px);
  font-weight: 680;
  letter-spacing: -.04em;
  line-height: 1.25;
}
.error-copy {
  max-width: 390px;
  margin: 0 auto;
  color: var(--error-muted);
  font-size: 13px;
  line-height: 1.75;
}
.error-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 27px;
}
.error-button {
  display: inline-flex;
  min-height: 43px;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border: 1px solid var(--error-line);
  border-radius: 7px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 650;
  transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.error-button:focus-visible { outline: 3px solid color-mix(in srgb, var(--error-accent) 60%, transparent); outline-offset: 3px; }
.error-button-primary {
  border-color: var(--error-accent);
  color: #fff;
  background: var(--error-accent);
  box-shadow: 0 5px 16px color-mix(in srgb, var(--error-accent) 20%, transparent);
}
.error-button-primary:hover { border-color: var(--error-accent-hover); background: var(--error-accent-hover); transform: translateY(-1px); }
.error-button-secondary { color: var(--error-text); background: var(--error-surface); }
.error-button-secondary:hover { border-color: color-mix(in srgb, var(--error-accent) 55%, var(--error-line)); color: var(--error-accent); transform: translateY(-1px); }
.error-footer { margin: 0; color: var(--error-muted); font-size: 11px; }
.error-footer span { color: var(--error-text); font-weight: 650; }

@keyframes error-enter {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 480px) {
  .error-page { gap: 18px; padding: 22px 16px 18px; }
  .error-card { border-radius: 17px; }
  .error-actions { display: grid; grid-template-columns: 1fr; }
  .error-button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}