:root {
  --noche: #14162b;
  --noche-2: #1d2040;
  --noche-3: #2a2e57;
  --lima: #d4ff3a;
  --lima-osc: #9bc214;
  --naranja: #ff8a3d;
  --papel: #f6efe1;
  --texto: #eef0ff;
  --suave: #a9aed6;
  --tinta: #0b0c18;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--noche);
  background-image: radial-gradient(circle at 30% 0%, #3a2c3f 0%, transparent 55%);
  color: var(--texto);
  font: 17px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
main { max-width: 640px; margin: 0 auto; padding: 28px 16px 56px; }
h1, h2, .pixel { font-family: "Pixelify Sans", system-ui, sans-serif; font-weight: 700; letter-spacing: .5px; }
h1 { font-size: 34px; line-height: 1.1; margin: 10px 0 8px; }
h1 em { font-style: normal; color: var(--lima); }
.num { font-family: system-ui, sans-serif; font-weight: 800; }   /* el 5 pixelado parece S */
h2 { font-size: 22px; margin: 36px 0 12px; color: var(--lima); }
p { margin: 0 0 12px; }
a { color: var(--lima); }
img.pix { image-rendering: pixelated; display: block; }
.cabeza { display: flex; gap: 14px; align-items: flex-end; }
.cabeza img { width: 92px; height: auto; flex: none; }
.intro { color: var(--suave); }
.tarjeta {
  background: var(--noche-2);
  border: 3px solid var(--lima);
  box-shadow: 6px 6px 0 var(--tinta);
  padding: 16px;
  margin: 18px 0;
}
.tarjeta .etiqueta {
  display: inline-block; background: var(--lima); color: var(--tinta);
  font: 700 13px/1 "Pixelify Sans", sans-serif; padding: 5px 8px; margin: -30px 0 10px;
}
pre.prompt {
  white-space: pre-wrap; word-wrap: break-word; margin: 0;
  font: 15px/1.55 ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace; color: var(--texto);
}
pre.prompt .hueco { color: var(--tinta); background: var(--lima); padding: 0 3px; }
.boton {
  display: block; width: 100%; margin-top: 14px; padding: 15px 18px;
  background: var(--lima); color: var(--tinta); border: 3px solid var(--tinta);
  box-shadow: 4px 4px 0 var(--tinta); cursor: pointer;
  font: 800 18px/1 system-ui, -apple-system, "Segoe UI", sans-serif; text-align: center; text-decoration: none;
}
.boton:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--tinta); }
.boton.naranja { background: var(--naranja); }
.copiado { background: #3bd16f !important; }
ol.pasos { list-style: none; padding: 0; margin: 0; counter-reset: paso; }
ol.pasos li {
  counter-increment: paso; position: relative; padding: 12px 12px 12px 58px; margin: 10px 0;
  background: var(--noche-2); border: 2px solid var(--noche-3);
}
ol.pasos li::before {
  content: counter(paso); position: absolute; left: 12px; top: 12px; width: 32px; height: 32px;
  background: var(--lima); color: var(--tinta); font: 800 19px/32px system-ui, sans-serif; text-align: center;
}
ol.pasos b { color: var(--lima); }
.tip { border-left: 4px solid var(--naranja); padding: 8px 12px; background: rgba(255, 138, 61, .08); }
.cierre { text-align: center; margin-top: 40px; }
.cierre img { margin: 0 auto 10px; width: 120px; }
footer { color: var(--suave); font-size: 13px; text-align: center; margin-top: 40px; }
footer a { color: var(--suave); }
.lista a.item {
  display: flex; gap: 12px; align-items: center; padding: 14px; margin: 10px 0; text-decoration: none;
  background: var(--noche-2); border: 3px solid var(--lima); box-shadow: 5px 5px 0 var(--tinta); color: var(--texto);
}
.lista a.item b { color: var(--lima); font-family: "Pixelify Sans", sans-serif; font-size: 20px; }