errserve 0.8.0

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="robots" content="noindex, nofollow" />
    <title>{{code}} — {{reason}}</title>
    <style>
/* Estilo de la página del tema `default`.
 *
 * Vive **dentro** de la página: un tema es una página, así que estas reglas no
 * vienen de ninguna hoja suelta ni se incrustan al servir —no hay marcador de
 * hoja que sustituir—. Y por eso la página no puede pedir nada por la red:
 * nada de importar hojas ni de ficheros remotos.
 *
 * Es el tema sobrio de la casa y el **único** que anima: `<main>` entra con un
 * movimiento de 180 ms que se neutraliza en `prefers-reduced-motion: reduce`,
 * porque el movimiento es adorno y tiene que poder apagarse.
 *
 * Una sola página, no una por código: la diferencia de aspecto se expresa con la
 * clase `c<código>` del `body`, con un acento distinto por código. El `404` —y
 * cualquier código sin regla propia— se queda con el acento por defecto de
 * `:root`; los demás solo lo sobreescriben.
 *
 * Contraste medido a mano (objetivo AA): fg/bg 15,80, muted/bg 6,11 y accent/bg
 * 5,19 en claro; 16,02, 6,50 y 6,11 en oscuro.
 *
 * El `<hr>` es un separador decorativo: la página se entiende igual sin él, y
 * el 3:1 de WCAG 1.4.11 cubre el contenido no textual necesario para entender
 * el contenido y los componentes de interfaz, no el adorno. Su `--rule` mide
 * 1,43 sobre el fondo claro y 1,55 sobre el oscuro, y se queda ahí a propósito:
 * es una decisión medida, no un descuido. Quien vuelva a medirla, que no la
 * cuente como hallazgo.
 */

:root {
  color-scheme: light dark;
  --fg: #1f2328;
  --bg: #ffffff;
  --muted: #59636e;
  --accent: #0969da;
  --rule: #d1d9e0;
}

/* Un acento por código (tema claro). Discreto: solo cambia el color del título,
 * que es el único que usa `--accent` —la página no lleva enlaces—. */
body.c400 {
  --accent: #9a6700;
}
body.c401 {
  --accent: #8250df;
}
body.c403 {
  --accent: #cf222e;
}
body.c405 {
  --accent: #1a7f37;
}
body.c408 {
  --accent: #bc4c00;
}
body.c429 {
  --accent: #0f766e;
}
body.c500 {
  --accent: #a40e26;
}
body.c502 {
  --accent: #bf3989;
}
body.c503 {
  --accent: #57606a;
}
body.c504 {
  --accent: #6639ba;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fg: #e6edf3;
    --bg: #0d1117;
    --muted: #9198a1;
    --accent: #4493f8;
    --rule: #30363d;
  }

  /* Los mismos acentos, aclarados para el fondo oscuro. */
  body.c400 {
    --accent: #d29922;
  }
  body.c401 {
    --accent: #a371f7;
  }
  body.c403 {
    --accent: #f85149;
  }
  body.c405 {
    --accent: #3fb950;
  }
  body.c408 {
    --accent: #db6d28;
  }
  body.c429 {
    --accent: #2dd4bf;
  }
  body.c500 {
    --accent: #ff7b72;
  }
  body.c502 {
    --accent: #f778ba;
  }
  body.c503 {
    --accent: #9198a1;
  }
  body.c504 {
    --accent: #7c8cff;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 2rem;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-align: center;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.5;
  color: var(--fg);
  background: var(--bg);
}

/* El bloque de contenido: el *landmark* que un lector de pantalla anuncia como
 * «contenido principal», el que entra con la animación de la casa y el que la
 * apaga cuando el sistema pide movimiento reducido. */
main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  animation: entrada 180ms ease-out;
}

h1 {
  margin: 0;
  font-size: clamp(3rem, 12vw, 6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--accent);
}

h2 {
  margin: 0;
  font-size: clamp(1.1rem, 3vw, 1.5rem);
  font-weight: 600;
}

p {
  margin: 0;
  max-width: 34rem;
  color: var(--muted);
}

hr {
  width: 6rem;
  margin: 1rem 0;
  border: 0;
  border-top: 1px solid var(--rule);
}

/* La firma: quién sirve la página. Más pequeña y en el tono atenuado, para que
 * no compita con el código ni con la descripción. */
footer {
  margin-top: 0.75rem;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* El movimiento de entrada: sobrio (180 ms, un fundido con un desplazamiento
 * mínimo) y **neutralizable** —no un bucle—. La página de error no se hace
 * esperar ni se mueve sola. */
@keyframes entrada {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  main {
    animation: none;
  }
}
    </style>
  </head>
  <body class="c{{code}}">
    <main>
      <h1>{{code}}</h1>
      <h2>{{reason}}</h2>
      <hr />
      <p>{{description}}</p>
    </main>
    <footer>errserve</footer>
  </body>
</html>