:root{
  --bg:#000;
  --fg:#f2f2f2;
  --fg2:#cfcfcf;
}

html,body{height:100%}

body{
  margin:0;
  background:var(--bg);
}

.frame{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}

.mark{
  color:var(--fg);
  text-decoration:none;
  font-family: ui-serif, "Times New Roman", Times, serif;
  font-weight:600;
  letter-spacing:0.22em;
  text-transform:uppercase;
  font-size: clamp(42px, 7vw, 86px);
  line-height:1;
  padding: 18px 22px;
  border-radius: 8px;
  outline: none;

  /* estado inicial: invisible */
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 520ms ease, transform 520ms ease;
}

.mark.is-visible{
  opacity: 1;
  transform: translateY(0);
}

.mark:focus-visible{
  box-shadow: 0 0 0 2px var(--fg2);
}