2493: Emmet

For every programmer, coding HTML & CSS is a very boring thing.

For example, writing an html tag <div> with id "div1" and class "col-md-3", you must write an html file like this:

    <div id = "div1" class = "col3">
    ...
    </div>
Too much unnecessary coding!!!

For convenience, some Web programmer develop a vim plugin -- Emmet. By this tool, the programmer just need code "div#div1.col3" and then Emmet would transform it to "<div id = "div1" class = "col3"></div>". It is very coollllll! Now you task is to write a program to perform this transformation.

Here are more details about you task:

1.Handle multilevel tag.
  "div>p>span" means there are 3 tags and tag <p> is in the tag "div", tag <span> is in the tag "p".
  So, the right answer is "<div><p><span></span></p></div>"

2.  Every tag may have zero or one id and any amount of classes.
  A string (only consisting of letters and digits) after '#' is an id name.
  A string (only consisting of letters and digits) after '.' is a class name.
  If a tag has id and classes at the same time, you must output the id first.
  If a tag has more than one class, you must output them by the order according to the input.
  For example
  "div.aa#bb.cc.ee>p#g>span.d" =>
  <div id="bb" class="aa cc ee">
    <p id="g">
      <span class="d"></span>
    </p>
  </div>"

3.Handle parentheses.
  Use parentheses to deal with sibling relation among tags!
  For example
  <div id="bb" class="aa cc ee">
    <p id="g1"><span class="d1"></span></p>
    <p id="g2"><span class="d2"></span></p>
    <p id="g3"><span class="d3"></span></p>
  </div>
  can be obtained by "div.aa#bb.cc.ee>(p#g1>span.d1)(p#g2>span.d2)(p#g3>span.d3)"
  If the input string contains parentheses, the rightmost ‘)’ will be the last character of this string.

4.Handle symbol ‘*’
At the end of a tag, you may see a suffix "*%d". It indicates that this tag would be repeated "%d" times.
  For example
  ul#id1>li.classA*3>p*2 =>
  <ul id="id1">
    <li class="classA">
      <p></p>
      <p></p>
    </li>
    <li class="classA">
      <p></p>
      <p></p>
    </li>
    <li class="classA">
      <p></p>
      <p></p>
    </li>
  </ul>

The first line of input contains an integer N (N<=50), indicating the number of strings you need to transform.

The following N lines, each consists of an input string. No string has more than 120 chars and the result would not have more than 1000 chars. Tag name, class name and id only contain English letters and digits. It is guaranteed that the input string is valid.

Output N lines each consisting of a string that is the result of the transformation. More details about the output format can be seen from the sample output. You should follow the output format strictly. No extra space or new line character is allowed in the output.

4
div>p>span
div.aa#bb.cc.ee>p#g>span.d
div.aa#bb.cc.ee>(p#g1>span.d1)(p#g2>span.d2)(p#g3>span.d3)
ul#id1>li.classA*3>p*2

<div><p><span></span></p></div>
<div id="bb" class="aa cc ee"><p id="g"><span class="d"></span></p></div>
<div id="bb" class="aa cc ee"><p id="g1"><span class="d1"></span></p><p id="g2"><span class="d2"></span></p><p id="g3"><span class="d3"></span></p></div>
<ul id="id1"><li class="classA"><p></p><p></p></li><li class="classA"><p></p><p></p></li><li class="classA"><p></p><p></p></li></ul>