:root {
  color-scheme: dark;
  --red: #ff253b;
  --red-dark: #9e0718;
  --ice: #b8edff;
  --paper: #f4f1ea;
  --muted: #aaa8a3;
  --line: rgba(255, 255, 255, 0.18);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }

body {
  margin: 0;
  overflow: hidden;
  background: #030303;
  color: var(--paper);
  font-family: "Segoe UI", Arial, sans-serif;
}

button, a { font: inherit; }

.scene-stack,
.scene,
.scene-shade,
.scanlines,
.noise {
  position: fixed;
  inset: 0;
}

.scene-stack { z-index: -5; overflow: hidden; background: #050505; }

.scene {
  inset: -3%;
  opacity: 0;
  background-image: var(--scene);
  background-position: center;
  background-size: cover;
  filter: grayscale(.24) saturate(.88) contrast(1.08) brightness(.82);
  transform: scale(1.035);
  transition: opacity 1.25s ease, transform 8s linear;
}

.scene.is-active {
  opacity: 1;
  transform: scale(1.095);
}

.scene-shade {
  z-index: -4;
  pointer-events: none;
  background:
    radial-gradient(circle at center, rgba(0,0,0,.2) 0 18%, rgba(0,0,0,.53) 76%),
    linear-gradient(90deg, rgba(0,0,0,.36), rgba(0,0,0,.12) 50%, rgba(0,0,0,.4)),
    linear-gradient(0deg, rgba(0,0,0,.5), transparent 38%, rgba(0,0,0,.32));
}

.scanlines {
  z-index: 20;
  pointer-events: none;
  opacity: .22;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 4px);
}

.noise {
  z-index: 21;
  pointer-events: none;
  opacity: .08;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: noise .18s steps(2) infinite;
}

.screen-tear {
  position: fixed;
  z-index: 18;
  right: -5%;
  left: -5%;
  height: 2px;
  pointer-events: none;
  opacity: .45;
  background: rgba(255,255,255,.45);
  box-shadow: 12px 0 var(--red), -14px 2px rgba(0,220,255,.6);
  mix-blend-mode: screen;
}

.screen-tear--one { top: 31%; animation: tear-one 6.4s steps(1) infinite; }
.screen-tear--two { top: 71%; animation: tear-two 8.1s steps(1) infinite; }

.topbar,
footer {
  position: fixed;
  right: 0;
  left: 0;
  z-index: 10;
  display: grid;
  align-items: center;
  padding-inline: clamp(22px, 4vw, 66px);
  background: rgba(3,3,3,.45);
  backdrop-filter: blur(10px);
}

.topbar {
  top: 0;
  grid-template-columns: 1fr auto 1fr;
  height: 70px;
  border-bottom: 1px solid var(--line);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  color: white;
  font: 800 15px Consolas, "Courier New", monospace;
  letter-spacing: .06em;
  text-decoration: none;
}

.brand__prompt { color: var(--red); font-size: 20px; }

.topbar__status {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #cbc8c1;
  font: 9px Consolas, monospace;
  letter-spacing: .16em;
}

.topbar__status i,
.critical i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 13px var(--red);
  animation: blink .8s step-end infinite;
}

#clock {
  justify-self: end;
  color: #8d8b86;
  font: 11px Consolas, monospace;
  letter-spacing: .12em;
}

.page {
  position: relative;
  z-index: 5;
  display: grid;
  align-items: center;
  justify-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 96px 24px 78px;
}

.error-card {
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: column;
  width: min(840px, calc(100vw - 48px));
  padding: clamp(40px, 6vh, 66px) clamp(26px, 5vw, 72px) 42px;
  text-align: center;
  background: linear-gradient(135deg, rgba(6,6,7,.48), rgba(8,8,9,.28));
  box-shadow: 0 36px 100px rgba(0,0,0,.45), inset 0 0 90px rgba(0,0,0,.24);
  backdrop-filter: blur(8px) saturate(.72);
}

.error-card::before,
.error-card::after {
  position: absolute;
  right: 24px;
  left: 24px;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);
}
.error-card::before { top: 0; }
.error-card::after { bottom: 0; }

.corner {
  position: absolute;
  width: 26px;
  height: 26px;
  border-color: rgba(255,255,255,.67);
}
.corner--tl { top: 0; left: 0; border-top: 1px solid; border-left: 1px solid; }
.corner--tr { top: 0; right: 0; border-top: 1px solid; border-right: 1px solid; }
.corner--bl { bottom: 0; left: 0; border-bottom: 1px solid; border-left: 1px solid; }
.corner--br { right: 0; bottom: 0; border-right: 1px solid; border-bottom: 1px solid; }

.kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 7px;
  color: #dad7d0;
  font: 10px Consolas, monospace;
  letter-spacing: .2em;
}
.kicker span { width: 25px; height: 2px; background: var(--red); box-shadow: 0 0 10px var(--red); }

.error-code {
  position: absolute;
  top: 12px;
  right: 38px;
  color: rgba(255,255,255,.06);
  font: 900 clamp(68px, 9vw, 130px)/1 "Arial Black", sans-serif;
  letter-spacing: -.1em;
}

h1 {
  position: relative;
  margin: 0;
  max-width: 100%;
  color: var(--paper);
  font-family: "Arial Black", "Segoe UI", sans-serif;
  font-size: clamp(47px, 6.7vw, 98px);
  font-weight: 900;
  letter-spacing: -.075em;
  line-height: .96;
  text-transform: uppercase;
}

.glitch::before,
.glitch::after {
  position: absolute;
  inset: 0;
  overflow: hidden;
  content: attr(data-text);
  pointer-events: none;
  opacity: 0;
}
.glitch::before { color: var(--red); transform: translateX(-5px); }
.glitch::after { color: #8fe8ff; transform: translateX(5px); }

body.is-glitching .glitch::before {
  opacity: .88;
  clip-path: inset(12% 0 56%);
}
body.is-glitching .glitch::after {
  opacity: .72;
  clip-path: inset(63% 0 7%);
}
body.is-glitching .scene.is-active { filter: grayscale(.2) contrast(1.8) brightness(.52) hue-rotate(-8deg); transform: scale(1.1) translateX(7px); }
body.is-glitching .error-card { transform: translateX(-2px); }

.lead {
  width: min(620px, 100%);
  margin: 24px auto 0;
  color: #c0bdb7;
  font-size: clamp(13px, 1.2vw, 16px);
  line-height: 1.72;
  text-shadow: 0 2px 16px #000;
}

.indicators {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
  margin-top: 31px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.indicators > div {
  display: grid;
  gap: 8px;
  padding: 15px 12px;
}
.indicators > div + div { border-left: 1px solid var(--line); }
.indicators span { color: #777670; font: 8px Consolas, monospace; letter-spacing: .16em; }
.indicators strong { color: #e5e2da; font: 600 10px Consolas, monospace; letter-spacing: .04em; }
.indicators .critical { display: flex; align-items: center; justify-content: center; gap: 8px; color: #ff6676; }
.critical i { display: inline-block; }

.retry {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  min-width: min(370px, 100%);
  min-height: 55px;
  margin-top: 28px;
  padding: 0 22px;
  border: 1px solid var(--red);
  background: rgba(3,3,3,.55);
  color: #fff;
  font: 700 12px Consolas, monospace;
  letter-spacing: .08em;
  cursor: pointer;
  box-shadow: inset 0 0 0 0 var(--red), 0 0 0 rgba(255,37,59,0);
  transition: box-shadow .25s ease, transform .2s ease;
}

.retry:hover {
  box-shadow: inset 370px 0 0 0 var(--red), 0 0 35px rgba(255,37,59,.24);
  transform: translateY(-2px);
}
.retry:focus-visible { outline: 3px solid rgba(184,237,255,.55); outline-offset: 4px; }
.retry:disabled { opacity: .7; cursor: wait; transform: none; }
.retry__bracket { color: var(--red); font-size: 20px; transition: color .2s ease; }
.retry:hover .retry__bracket { color: white; }

.friend {
  margin: 16px 0 0;
  color: #7f7d77;
  font: 9px Consolas, monospace;
  letter-spacing: .08em;
}

.terminal {
  position: fixed;
  z-index: 7;
  width: 190px;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.13);
  color: #747570;
  background: rgba(0,0,0,.45);
  font: 8px/1.7 Consolas, monospace;
  letter-spacing: .04em;
  backdrop-filter: blur(7px);
}
.terminal span { color: #b9b8b2; }
.terminal p { margin: 3px 0 0; }
.terminal b { color: var(--ice); font-weight: 400; }
.terminal__danger { color: var(--red); }
.terminal--left { bottom: 92px; left: clamp(22px, 4vw, 66px); }
.terminal--right { top: 96px; right: clamp(22px, 4vw, 66px); }
.cursor { color: var(--red); animation: cursor 1s step-end infinite; }

footer {
  bottom: 0;
  grid-template-columns: 1fr auto 1fr;
  height: 52px;
  border-top: 1px solid var(--line);
  color: #77756f;
  font: 9px Consolas, monospace;
  letter-spacing: .12em;
}
.scene-index span { color: white; }
.scene-dots { display: flex; gap: 7px; }
.scene-dots button {
  width: 22px;
  height: 3px;
  padding: 0;
  border: 0;
  background: rgba(255,255,255,.25);
  cursor: pointer;
  transition: background .2s ease, width .2s ease;
}
.scene-dots button.is-active { width: 38px; background: var(--red); box-shadow: 0 0 11px rgba(255,37,59,.58); }
footer > span { justify-self: end; }

@keyframes blink { 50% { opacity: .25; } }
@keyframes cursor { 50% { opacity: .1; } }
@keyframes noise {
  0% { transform: translate(0); }
  25% { transform: translate(-1.5%, 1%); }
  50% { transform: translate(1%, -1.5%); }
  75% { transform: translate(1.5%, 1%); }
}
@keyframes tear-one {
  0%, 88%, 100% { transform: translate(0); opacity: .08; }
  89% { transform: translateX(9%); opacity: .7; }
  90% { transform: translateX(-13%); opacity: .3; }
  91% { transform: translateX(0); opacity: .08; }
}
@keyframes tear-two {
  0%, 94%, 100% { transform: translate(0); opacity: .05; }
  95% { transform: translateX(-8%); opacity: .6; }
  96% { transform: translateX(12%); opacity: .18; }
}

@media (max-width: 920px) {
  .terminal { display: none; }
  .scene { background-position: center; }
  .error-card { padding-top: 52px; }
}

@media (max-width: 620px) {
  body { overflow-y: auto; }
  .topbar { height: 60px; padding-inline: 17px; grid-template-columns: 1fr auto; }
  .topbar__status { display: none; }
  .page { min-height: 100svh; padding: 82px 14px 68px; }
  .error-card {
    width: min(100%, 520px);
    padding: 42px 18px 32px;
    background: rgba(4,4,5,.59);
    backdrop-filter: blur(6px) saturate(.7);
  }
  .error-code { top: 12px; right: 22px; font-size: 68px; }
  .kicker { font-size: 8px; letter-spacing: .13em; }
  h1 { font-size: clamp(39px, 12.5vw, 58px); line-height: .92; }
  .lead { margin-top: 20px; font-size: 13px; line-height: 1.58; }
  .indicators { grid-template-columns: 1fr 1fr; margin-top: 25px; }
  .indicators > div:nth-child(2) { display: none; }
  .retry { min-width: 100%; padding-inline: 12px; font-size: 10px; gap: 10px; }
  .friend { font-size: 8px; }
  footer { height: 46px; padding-inline: 17px; grid-template-columns: 1fr auto; }
  .scene-dots { display: none; }
  .scene { background-position: 52% center; }
  .scene:nth-child(2) { background-position: 37% center; }
  .scene:nth-child(3) { background-position: 49% center; }
  .scene:nth-child(4) { background-position: 50% center; }
}

@media (max-height: 700px) and (min-width: 621px) {
  .error-card { transform: scale(.86); }
}

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