.error-site { overflow-x: hidden; }
.error-main { border-top: 1px solid var(--line); background: var(--paper); }
.error-stage {
  position: relative;
  padding: clamp(1rem,2.8vw,2.75rem);
  background:
    radial-gradient(circle at 78% 18%,color-mix(in srgb,var(--magenta) 11%,transparent),transparent 28rem),
    linear-gradient(var(--draft-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--draft-line) 1px,transparent 1px);
  background-size: auto,32px 32px,32px 32px;
  border-bottom: 1px solid var(--line);
}
.error-workbench {
  width: min(100%,1640px);
  margin: 0 auto;
  border: 1px solid var(--ink);
  background: var(--surface);
  box-shadow: 16px 18px 0 color-mix(in srgb,var(--ink) 10%,transparent);
}
.error-status {
  display: grid;
  grid-template-columns: auto 1fr minmax(220px,.55fr);
  align-items: stretch;
  min-height: 78px;
  background: #171318;
  color: #fffaf4;
  border-bottom: 1px solid #171318;
}
.error-label { display: flex; align-items: stretch; border-right: 1px solid rgba(255,255,255,.24); }
.error-label strong {
  display: grid;
  place-items: center;
  min-width: 128px;
  padding: .5rem 1.2rem .35rem;
  background: #fffaf4;
  color: #171318;
  font: 800 clamp(3.7rem,5vw,5.6rem)/.72 "Turbobase Headline",Arial,sans-serif;
  letter-spacing: -.07em;
}
.error-label span {
  display: grid;
  align-content: center;
  padding: .65rem 1.2rem;
  color: #fffaf4;
  font: 750 .7rem/1.18 ui-monospace,monospace;
  letter-spacing: .12em;
}
.error-status > p {
  display: grid;
  align-content: center;
  gap: .38rem;
  margin: 0;
  padding: .9rem clamp(1rem,2.4vw,2.2rem);
}
.error-status > p span,.error-address span {
  color: #ff50a0;
  font: 700 .62rem/1.2 ui-monospace,monospace;
  letter-spacing: .13em;
}
.error-status > p b {
  color: #fffaf4;
  font: 600 .72rem/1.35 ui-monospace,monospace;
  letter-spacing: .06em;
}
.error-address {
  display: grid;
  align-content: center;
  gap: .42rem;
  min-width: 0;
  padding: .9rem 1.25rem;
  border-left: 1px solid rgba(255,255,255,.24);
}
.error-address code {
  overflow: hidden;
  color: #fffaf4;
  font: 500 .75rem/1.4 ui-monospace,monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.error-art {
  position: relative;
  aspect-ratio: 1672/941;
  overflow: hidden;
  margin: 0;
  background: #eee2d4;
}
.error-art::after {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(33,31,32,.18);
  pointer-events: none;
}
.error-art img { width: 100%; height: 100%; object-fit: cover; }
.error-route-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  filter: drop-shadow(0 0 7px rgba(240,44,131,.5));
}
.error-route-shadow,.error-route-path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.error-route-shadow { stroke: rgba(22,18,23,.5); stroke-width: 8; }
.error-route-path {
  stroke: #f02c83;
  stroke-width: 3;
  stroke-dasharray: 1180;
  stroke-dashoffset: 1180;
  transition: stroke-dashoffset .85s cubic-bezier(.22,1,.36,1);
}
.route-node {
  fill: #fff8ed;
  stroke: #f02c83;
  stroke-width: 4;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity .25s ease,transform .45s cubic-bezier(.34,1.56,.64,1);
  transform: scale(.2);
}
.error-art[data-scan-stage="1"] .error-route-path { stroke-dashoffset: 560; }
.error-art[data-scan-stage="2"] .error-route-path { stroke-dashoffset: 0; }
.error-art[data-scan-stage="1"] .route-node-1,
.error-art[data-scan-stage="1"] .route-node-2,
.error-art[data-scan-stage="2"] .route-node { opacity: 1; transform: scale(1); }
.error-art[data-scan-stage="2"] .route-node-3 { animation: route-node-pulse 1.4s ease-in-out infinite; }
@keyframes route-node-pulse { 50% { transform: scale(1.7); filter: drop-shadow(0 0 9px #f02c83); } }
.error-art figcaption {
  position: absolute;
  left: clamp(.7rem,1.5vw,1.4rem);
  right: clamp(.7rem,1.5vw,1.4rem);
  bottom: clamp(.7rem,1.5vw,1.4rem);
  z-index: 2;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .7rem .9rem;
  border: 1px solid rgba(33,31,32,.22);
  background: rgba(255,248,237,.9);
  color: #211f20;
  backdrop-filter: blur(10px);
  font: 700 .65rem/1.3 ui-monospace,monospace;
  letter-spacing: .09em;
}
.error-art figcaption b { color: #a51261; }
.error-copy {
  display: grid;
  grid-template-columns: minmax(0,1.25fr) minmax(320px,.75fr);
  gap: clamp(2rem,5vw,6rem);
  align-items: end;
  padding: clamp(2rem,4vw,4.6rem);
  border-top: 1px solid var(--ink);
  background: var(--surface);
}
.error-copy .kicker { margin: 0 0 1rem; }
.error-copy h1 {
  max-width: 12ch;
  margin: 0;
  font-size: clamp(3.5rem,7vw,8.5rem);
  line-height: .84;
  letter-spacing: -.065em;
}
.error-copy h1 em { color: var(--magenta); font-style: normal; }
.error-copy-actions { padding-bottom: .25rem; }
.error-copy .lede {
  max-width: 35rem;
  margin: 0;
  color: var(--muted);
  font-size: clamp(1rem,1.3vw,1.22rem);
  line-height: 1.65;
}
.error-copy .button-row { align-items: center; margin-top: 1.6rem; }
.error-copy button { font: inherit; }
.route-scan { cursor: pointer; }
.route-scan:disabled { cursor: wait; opacity: .72; }
.back-link {
  border: 0;
  border-bottom: 1px solid currentColor;
  padding: .15rem 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.route-readout {
  display: grid;
  grid-template-columns: minmax(220px,.75fr) minmax(0,1.25fr);
  gap: 0;
  padding: 0;
  border-top: 1px solid var(--ink);
  background: color-mix(in srgb,var(--paper) 88%,transparent);
}
.route-meter {
  grid-column: 1/-1;
  height: 4px;
  overflow: hidden;
  background: var(--line);
}
.route-meter i {
  display: block;
  width: 33.333%;
  height: 100%;
  background: var(--brand-spectrum);
  transition: width .55s cubic-bezier(.22,1,.36,1);
}
.route-readout > p {
  display: grid;
  align-items: center;
  margin: 0;
  padding: 1.4rem clamp(1rem,2vw,2rem);
  border-right: 1px solid var(--line);
  color: var(--muted);
  line-height: 1.55;
}
.route-steps {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--line);
}
.route-steps li {
  padding: 1.25rem;
  background: var(--surface);
  color: var(--muted);
  font: 600 .66rem/1.4 ui-monospace,monospace;
  letter-spacing: .03em;
  transition: color .25s ease,background-color .25s ease;
}
.route-steps li span { display: block; margin-bottom: .4rem; color: var(--muted); }
.route-steps li.is-active { background: color-mix(in srgb,var(--magenta) 9%,var(--surface)); color: var(--ink); }
.route-steps li.is-active span { color: var(--magenta); }
.error-exits {
  padding: clamp(5rem,8vw,8rem) clamp(1.25rem,5vw,5.5rem);
  background: var(--paper);
}
.error-exits-heading {
  display: grid;
  grid-template-columns: .45fr 1.15fr .7fr;
  gap: clamp(1.5rem,4vw,4rem);
  align-items: end;
  margin: 0 auto 2.5rem;
  width: min(100%,1500px);
}
.error-exits-heading h2,.error-exits-heading p { margin: 0; }
.error-exits-heading h2 {
  font-size: clamp(2.8rem,5vw,6rem);
  line-height: .92;
  letter-spacing: -.055em;
}
.error-exits-heading > p:last-child { max-width: 30rem; color: var(--muted); line-height: 1.65; }
.exit-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 1px;
  width: min(100%,1500px);
  margin: 0 auto;
  border: 1px solid var(--line);
  background: var(--line);
}
.exit-grid a {
  position: relative;
  min-height: 215px;
  padding: 1.5rem;
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  transition: transform .25s ease,background-color .25s ease;
}
.exit-grid a:hover,.exit-grid a:focus-visible {
  z-index: 1;
  background: color-mix(in srgb,var(--magenta) 7%,var(--surface));
  transform: translateY(-5px);
}
.exit-grid span {
  color: var(--magenta);
  font: 650 .68rem/1.4 ui-monospace,monospace;
  letter-spacing: .07em;
}
.exit-grid h3 { margin: 3.2rem 0 .65rem; font-size: clamp(1.7rem,2.5vw,2.5rem); line-height: 1; }
.exit-grid p { max-width: 24rem; margin: 0; color: var(--muted); line-height: 1.55; }
.exit-grid b { position: absolute; right: 1.4rem; top: 1.25rem; color: var(--magenta); font-size: 1.2rem; }
html[data-theme="dark"] .error-stage {
  background-color: #0b0a10;
  background-image:
    radial-gradient(circle at 78% 18%,rgba(240,44,131,.19),transparent 28rem),
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
}
html[data-theme="dark"] .error-workbench { border-color: #fff9fd; box-shadow: 16px 18px 0 rgba(255,255,255,.06); }
html[data-theme="dark"] .error-copy { background: #17151c; border-color: #fff9fd; }
html[data-theme="dark"] .route-readout { background: rgba(20,18,25,.82); border-color: #fff9fd; }
html[data-theme="dark"] .route-steps li,html[data-theme="dark"] .exit-grid a { background: #17151c; }
html[data-theme="dark"] .route-steps li.is-active,
html[data-theme="dark"] .exit-grid a:hover,
html[data-theme="dark"] .exit-grid a:focus-visible { background: #251623; }
@media (max-width: 980px) {
  .error-status { grid-template-columns: auto 1fr; }
  .error-address { grid-column: 1/-1; border-top: 1px solid rgba(255,255,255,.24); border-left: 0; }
  .error-copy { grid-template-columns: 1fr; }
  .error-copy h1 { max-width: 10ch; }
  .route-readout { grid-template-columns: 1fr; }
  .route-readout > p { border-right: 0; border-bottom: 1px solid var(--line); }
  .error-exits-heading { grid-template-columns: 1fr; }
  .exit-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 620px) {
  .error-stage { padding: 0; }
  .error-workbench { border-right: 0; border-left: 0; box-shadow: none; }
  .error-status { grid-template-columns: 1fr; }
  .error-label { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.24); }
  .error-label strong { min-width: 116px; }
  .error-status > p { display: none; }
  .error-address { grid-column: auto; }
  .error-art { min-height: 360px; aspect-ratio: auto; }
  .error-art img { object-position: 48% center; }
  .error-copy { padding: 2rem 1.25rem 2.4rem; }
  .error-copy h1 { font-size: clamp(3.5rem,16vw,5.2rem); }
  .route-steps { grid-template-columns: 1fr; }
  .exit-grid { grid-template-columns: 1fr; }
  .exit-grid a { min-height: 190px; }
  .exit-grid h3 { margin-top: 2.8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .route-meter i,.route-steps li,.exit-grid a,.error-route-path,.route-node { transition: none; }
  .error-art[data-scan-stage="2"] .route-node-3 { animation: none; }
}