diff --git a/site/styles/dialogue.css b/site/styles/dialogue.css
new file mode 100644
index 0000000..380aaec
--- /dev/null
+++ b/site/styles/dialogue.css
@@ -0,0 +1,162 @@
+:root {
+    --dialogue-m1-color: transparent;
+    --dialogue-m2-color: transparent;
+    --dialogue-m3-color: transparent;
+    --dialogue-m4-color: transparent;
+    --dialogue-m1-background: none;
+    --dialogue-m2-background: none;
+    --dialogue-m3-background: none;
+    --dialogue-m4-background: none;
+
+    --dialogue-margin-block: 0.8em;
+    --dialogue-speech-bubble-sub-max-width: 80px;
+}
+
+
+@media (max-width: 480px) {
+    :root {
+        --dialogue-margin-block: 1em;
+        --dialogue-speech-bubble-sub-max-width: 80px;
+    }
+}
+
+.dialogue {
+    /*    background: color-mix(in hsl, var(--background), black 8%); */
+    border: none;
+    border-radius: 5px;
+
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+
+    margin-inline: 0;
+    padding: 1.1rem;
+    margin-block: 1rem;
+}
+
+/*
+@media (prefers-color-scheme: dark) {
+    .dialogue {
+        background: color-mix(in hsl, var(--background), white 8%);
+    }
+}
+*/
+
+.dialogue header {
+    text-align: center;
+    width: 100%;
+    font-size: 1.3rem;
+    margin-bottom: 0.75em;
+}
+
+/* Message bubble */
+.dialogue .member {
+    padding: 4px 0px;
+    border-radius: 8px;
+    margin-block: var(--dialogue-margin-block);
+    max-width: calc(100% - var(--dialogue-speech-bubble-sub-max-width));
+    position: relative;
+    font-style: normal;
+}
+
+.dialogue .member a,
+.dialogue .member em {
+    color: white;
+}
+
+/* Message bubble on right */
+.dialogue .member.member-m1 {
+    align-self: flex-end;
+    margin-right: 60px;
+    color: color-mix(in hsl, var(--dialogue-m1-color), black 40%);
+}
+
+/* Message bubble on left */
+.dialogue .member.member-m2 {
+    margin-left: 60px;
+    color: color-mix(in hsl, var(--dialogue-m2-color), black 40%);
+}
+
+.dialogue .member.member-m3 {
+    margin-left: 60px;
+    color: color-mix(in hsl, var(--dialogue-m3-color), black 40%);
+}
+
+.dialogue .member.member-m4 {
+    margin-left: 60px;
+    color: color-mix(in hsl, var(--dialogue-m4-color), black 40%);
+}
+
+@media (prefers-color-scheme: dark) {
+    .dialogue .member.member-m1 {
+        color: color-mix(in hsl, var(--dialogue-m1-color), white 40%);
+    }
+    .dialogue .member.member-m2 {
+        color: color-mix(in hsl, var(--dialogue-m2-color), white 40%);
+    }
+    .dialogue .member.member-m3 {
+        color: color-mix(in hsl, var(--dialogue-m3-color), white 40%);
+    }
+    .dialogue .member.member-m4 {
+        color: color-mix(in hsl, var(--dialogue-m4-color), white 40%);
+    }
+}
+
+/* Avatars */
+.dialogue .member b.avatar {
+    font-size: 0;
+    text-align: center;
+
+    width: 42px;
+    height: 42px;
+    line-height: 42px;
+
+    top: -0.4rem;
+    position: absolute;
+    z-index: 10;
+
+    border-radius: 50%;
+}
+
+/* Avatar 1 is on right */
+.dialogue .member.member-m1 b.avatar {
+    right: -60px;
+    border: solid 2px var(--dialogue-m1-color);
+    background: var(--dialogue-m1-background);
+}
+
+/* Avatar 2 is on left */
+.dialogue .member.member-m2 b.avatar {
+    left: -60px;
+    border: solid 2px var(--dialogue-m2-color);
+    background: var(--dialogue-m2-background);
+}
+
+.dialogue .member.member-m3 b.avatar {
+    left: -60px;
+    border: solid 2px var(--dialogue-m3-color);
+    background: var(--dialogue-m3-background);
+}
+
+.dialogue .member.member-m4 b.avatar {
+    left: -60px;
+    border: solid 2px var(--dialogue-m4-color);
+    background: var(--dialogue-m4-background);
+}
+
+/* Narrow the margin between consecutive messages */
+.member.member-m1 + .member.member-m1,
+.member.member-m2 + .member.member-m2,
+.member.member-m3 + .member.member-m3,
+.member.member-m4 + .member.member-m4 {
+    margin-block-start: calc(var(--dialogue-margin-block) / -2);
+}
+
+/* Hide consecutive avatars */
+.member.member-m1 + .member.member-m1 b.avatar,
+.member.member-m2 + .member.member-m2 b.avatar,
+.member.member-m3 + .member.member-m3 b.avatar,
+.member.member-m4 + .member.member-m4 b.avatar {
+    background: none;
+    border: none;
+}
\ No newline at end of file