Improve playground control styling

[TheJaredWilcurt]

The controls for the playground are lacking in design.

• https://thejaredwilcurt.com/vue-snapshot-serializer/#playground

1. I want them to visually look nicer.
2. Also want the grouping of sections to be more apparent.
3. Changing the formatter to/from "diffable" will show/hide the settings specific to it. These should be visually grouped in some way.
4. There is a font-size and stacked option that are not part of the library API, and are just there for the playground, these could be visually distinguished.
5. There is a verbose checkbox that currently doesn't do anything related to the playground. Could either better communicate what it does (see API section), or just remove it from the playground.
6. The checkboxes are using DoxenCheckbox as a component. Could either continue using it and pass in style tokens, or replace it with a custom component.
7. Also the playground design could be improved for smaller screen sizes.

---

Prior art:

• https://babeljs.io/repl
• https://jsfiddle.net
• https://play.vuejs.org
• https://svelte.dev/playground
• https://www.typescriptlang.org/play

Of these, Babel and JSFiddle are the most similar, as they have a sidebar of options.

[TheJaredWilcurt]

Notes:

There is also two PR's in progress that would need design work related to this.

1. Live component demo #6 Lets you switch between the playground of text input, and a real live Vue component to demo addInputValues and stringifyAttributes featrues. So the playground would need to be designed in a way so that the Textarea input could be swapped to a different input type.
2. Stubs interactive example #7 Lets you play with the new "Stubs" API. This API demo is interactive, and fairly complex, and thus needs its own design considerations.