/* decypher - the first-run tutorial and the welcome screen.
   Same tokens as the site. Authorship and ownership: @Tori, @Decypher_oficial */

.tut-modal{
  position:fixed; inset:0; z-index:120; display:none;
  background:color-mix(in srgb, #05060b 88%, transparent); backdrop-filter:blur(6px);
  padding:clamp(.8rem,3vw,2.5rem); overflow:auto;
}
.tut-modal[open]{display:block}
.tut-caja{
  max-width:56rem; margin:0 auto; background:var(--ink); border:1px solid var(--hair);
  border-radius:16px; padding:clamp(1.2rem,3vw,2rem); position:relative;
}

.tut-pasos{display:flex; gap:.3rem; margin-bottom:1.2rem}
.tut-pasos i{flex:1; height:3px; border-radius:2px; background:var(--hair); display:block}
.tut-pasos i.visto{background:var(--gold)}

.tut-cuerpo{display:grid; grid-template-columns:1fr 1fr; gap:1.6rem; align-items:center}
@media (max-width:760px){ .tut-cuerpo{grid-template-columns:1fr} }

.tut-arte{
  background:var(--ink-2); border:1px solid var(--hair); border-radius:12px;
  padding:1rem; display:grid; place-items:center; min-height:14rem;
}
.tut-arte svg{width:100%; height:auto; max-height:15rem; display:block}

.tut-texto .n{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--acc);
}
.tut-texto h3{font-size:clamp(1.15rem,2.4vw,1.5rem); letter-spacing:-.02em; margin:.4rem 0 .5rem; text-wrap:balance}
.tut-texto p{color:var(--text-2); font-size:.95rem}
.tut-texto .apunte{
  margin-top:.9rem; border-left:2px solid var(--gold); background:var(--raised);
  padding:.75rem .9rem; border-radius:0 10px 10px 0; font-size:.88rem; color:var(--text-2);
}
.tut-texto .apunte strong{color:var(--text)}

.tut-mandos{display:flex; gap:.55rem; align-items:center; margin-top:1.4rem; flex-wrap:wrap}
.tut-btn{
  font:inherit; font-size:.9rem; font-weight:650; cursor:pointer; text-decoration:none; text-align:center;
  border-radius:999px; padding:.6rem 1.1rem; border:1px solid var(--hair); color:var(--text); background:transparent;
}
.tut-btn.solid{background:var(--gold); color:#0b0b12; border-color:var(--gold)}
.tut-btn[disabled]{opacity:.4; cursor:not-allowed}
.tut-saltar{margin-left:auto; font-size:.85rem; color:var(--muted); background:none; border:0; cursor:pointer; font-family:inherit}
.tut-saltar:hover{color:var(--text)}

/* the welcome screen: the voucher shown once, and the line to copy */
.bienvenida{max-width:44rem; margin:0 auto; padding:clamp(1.6rem,5vw,3rem) 0}
.secreto{
  background:var(--surface); border:1px solid var(--gold); border-radius:14px;
  padding:1.2rem; margin:1.2rem 0;
}
.secreto h2{font-size:1.05rem; margin-bottom:.3rem}
.secreto .aviso-una-vez{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--acc); margin-bottom:.7rem;
}
.valor{
  display:flex; gap:.6rem; align-items:center; background:var(--ink-2);
  border:1px solid var(--hair); border-radius:10px; padding:.7rem .85rem;
}
.valor code{
  font-family:var(--mono); font-size:.85rem; color:var(--text); background:none; border:0;
  word-break:break-all; flex:1; padding:0;
}
.copiar{
  font:inherit; font-size:.8rem; font-weight:650; cursor:pointer; white-space:nowrap;
  background:var(--gold); color:#0b0b12; border:0; border-radius:999px; padding:.45rem .9rem;
}
.copiar.hecho{background:var(--ok, #4ade80)}

.prompt{
  background:#06070c; border:1px solid var(--hair); border-radius:10px; padding:.85rem;
  font-family:var(--mono); font-size:.76rem; line-height:1.55; color:#9aa3bd;
  white-space:pre-wrap; word-break:break-word; margin-top:.7rem;
}