Adding hints in Front

[theottm]

Hello !
I read that it is pretty simple to add hints with html. https://chrisk91.me/2018/04/28/Adding-Hint-fields-in-Anki.html

So I achieved this by using EXPORT html in the Front section :

#+BEGIN_EXPORT html
<style>
#hintbutton {
 
 margin-top: 2em;
  font-size: 0.7em;
  width: 75px;
  background-color: lightgreen;
  border: 1px outset lime;
}

#hint {
 margin: 0.7em auto 0 auto;
 padding: 0.2em;
 border-radius: 5px;
 border: 1px lime outset;
 background-color: lightgreen;
 width: 75%;
}
</style>
#+END_EXPORT

What is blabla ? 

#+BEGIN_EXPORT html
<br /><button id="hintbutton">Hint</button>
<div id="hint" style="display:none"> This is an hint </div>

<script>
var hidden = true;
$("#hintbutton").click(function() {
  if(hidden)
  {
     $("#hint").fadeIn( );
  }
  else
  {
     $("#hint").fadeOut( );
  }
  hidden = !hidden;
});
</script>
#+END_EXPORT

I now have two questions:

1. As you see I added a custom css style for this note. Is there a way to add this to the default css style used by anki-editor ?

2. Where should I look in the anki-editor code if I would like anki-editor to export some part of text as hints using a specific syntax like

* card
** Front
What is blabla ?
[[hint][this is a hint]]
** Back 

and what kind of syntax should I preferably use ?

Thanks !