Support custom callouts (and use CSS more)

[rufuspollock]

Suggest that:

> [!xyz]
> Hello

Render as a callout with type (css class) xyz and title Xyz.

To support this suggest that rendering of callout change from:

<div>
  <style>...</style>
  <blockquote class="callout">
    <div class="callout-title">
      <span>
        <svg>...</svg>
      </span>
      <strong>Tip</strong>
    </div>
    <div class="callout-content">
      <p>hello callout</p>
    </div>
  </blockquote>
</div>

to the following where we use more "semantic" html. This way it is easier to apply custom styling for custom callouts.

<div>
  <style>...</style>
  <blockquote class="callout callout-tip">
    <div class="callout-title">
      <span class=callout-icon">
        <svg>...</svg>
      </span>
      <span class="callout-title-text">Tip</span>
    </div>
    <div class="callout-content">
      <p>hello callout</p>
    </div>
  </blockquote>
</div>

Also suggest the icons are applied in css to the span callout-icon rather than being inlined. Or, at the very, least for unknown types we skip the svg and leave it empty so user can fill it in with css.