feat: added scenes and updated to use v14

styles/module.css

@@ -1,3 +1,84 @@
-.testm {
-  color: blue;
+:root {
+  --mcm-stage-direction-bg-color: #b2ffff;
+  --mcm-read-aloud-bg-color: #ffff99;
+  --mcm-dialog-bg-color: #2a52be;
+  --mcm-dialog-fg-color: white;
+  --mcm-color-gold: var(--dnd5e-color-gold);
+  --dot-size: 8px;
+}
+
+.mcm-dialog {
+  background-color: var(--mcm-dialog-bg-color);
+  color: var(--mcm-dialog-fg-color);
+}
+
+div.mcm-dialog {
+  border-left-style: dotted;
+  border-right-style: dotted;
+  border-color: black;
+  border-width: 3px;
+  border-color: white;
+  padding: 1.5rem;
+}
+
+.mcm-stage-direction {
+  background-color: var(--mcm-stage-direction-bg-color);
+}
+
+div.mcm-stage-direction {
+  border-style: solid;
+  border-color: black;
+  border-width: 1px;
+  border-color: var(--mcm-color-gold);
+  padding: 1.5rem;
+}
+
+.mcm-stage-direction button {
+  margin: 3px;
+}
+
+.mcm-read-aloud {
+  position: relative;
+  background-color: var(--mcm-read-aloud-bg-color);
+}
+
+div.mcm-read-aloud {
+  border-left-style: solid;
+  border-right-style: solid;
+  border-color: var(--mcm-color-gold);
+  border-width: 1px;
+  text-align: justify;
+  margin-left: 1rem;
+  margin-right: 1rem;
+  padding: 0.5rem;
+}
+
+.mcm-read-aloud > p:last-of-type::after,
+.mcm-read-aloud::after {
+  right: calc(var(--dot-size) / -2);
+}
+.mcm-read-aloud::before,
+.mcm-read-aloud > p:last-of-type::before {
+  left: calc(var(--dot-size) / -2);
+}
+.mcm-read-aloud > p:last-of-type::before,
+.mcm-read-aloud > p:last-of-type::after {
+  bottom: calc(var(--dot-size) / -2);
+}
+
+.mcm-read-aloud::before,
+.mcm-read-aloud::after {
+  top: calc(var(--dot-size) / -2);
+}
+
+.mcm-read-aloud::before,
+.mcm-read-aloud > p:last-of-type::before,
+.mcm-read-aloud::after,
+.mcm-read-aloud > p:last-of-type::after {
+  content: "";
+  position: absolute;
+  width: var(--dot-size);
+  height: var(--dot-size);
+  border-radius: 100%;
+  background: var(--mcm-color-gold);
 }