From c1e28224aa2e1450031669d9a7e359b63e04687d Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Wed, 22 Jul 2026 19:40:59 +0200
Subject: Init

---
 src/styles/_common.scss                       |  87 +++++++++++
 src/styles/components/_home-banner.scss       |  39 +++++
 src/styles/components/_logo.scss              |  81 ++++++++++
 src/styles/components/_site-footer.scss       | 157 +++++++++++++++++++
 src/styles/components/_site-footer.vars.scss  |  34 ++++
 src/styles/components/_site-header.scss       | 136 ++++++++++++++++
 src/styles/components/_site-header.vars.scss  |  14 ++
 src/styles/components/_site-nav.scss          |  30 ++++
 src/styles/components/_subtitle.scss          |  11 ++
 src/styles/components/_visited-indicator.scss |  27 ++++
 src/styles/objects/_deflist.scss              |  25 +++
 src/styles/objects/_message.scss              | 216 ++++++++++++++++++++++++++
 src/styles/objects/_message.vars.scss         |  39 +++++
 src/styles/objects/_placeholder-box.scss      |  12 ++
 src/styles/objects/_toc.scss                  |  27 ++++
 src/styles/style.scss                         |  53 +++++++
 16 files changed, 988 insertions(+)
 create mode 100644 src/styles/_common.scss
 create mode 100644 src/styles/components/_home-banner.scss
 create mode 100644 src/styles/components/_logo.scss
 create mode 100644 src/styles/components/_site-footer.scss
 create mode 100644 src/styles/components/_site-footer.vars.scss
 create mode 100644 src/styles/components/_site-header.scss
 create mode 100644 src/styles/components/_site-header.vars.scss
 create mode 100644 src/styles/components/_site-nav.scss
 create mode 100644 src/styles/components/_subtitle.scss
 create mode 100644 src/styles/components/_visited-indicator.scss
 create mode 100644 src/styles/objects/_deflist.scss
 create mode 100644 src/styles/objects/_message.scss
 create mode 100644 src/styles/objects/_message.vars.scss
 create mode 100644 src/styles/objects/_placeholder-box.scss
 create mode 100644 src/styles/objects/_toc.scss
 create mode 100644 src/styles/style.scss

(limited to 'src/styles')

diff --git a/src/styles/_common.scss b/src/styles/_common.scss
new file mode 100644
index 0000000..2b1f6c2
--- /dev/null
+++ b/src/styles/_common.scss
@@ -0,0 +1,87 @@
+@use "sass:map";
+@use "sass:math";
+@use "pkg:iro-sass/props";
+@use "pkg:iro-sass/functions" as fn;
+@use "pkg:iro-sass/easing" as easing;
+@use "pkg:iro-design/config.defaults" as defaults;
+
+$font--standard--family: props.def(
+	--font--standard--family,
+	(
+		"Inter",
+		"Open Sans",
+		"Segoe UI",
+		"Droid Sans",
+		Roboto,
+		Oxygen,
+		"Helvetica Neue",
+		Helvetica,
+		Tahoma,
+		Arial,
+		sans-serif
+	)
+);
+
+@use "pkg:iro-design/core.vars" as core;
+
+@use "./components/site-header.vars" as site-header;
+
+@use "pkg:iro-design/layouts/split-view.vars" with (
+	$panel--sticky-offset: props.def(
+		--l-split-view--panel--sticky-offset,
+		calc(props.get(site-header.$block-size) + props.get(core.$size--400))
+	)
+);
+
+@forward "pkg:iro-design";
+
+@forward "objects/deflist" as o-deflist--*;
+@forward "objects/message" as o-message--*;
+@forward "objects/placeholder-box" as o-placeholder-box--*;
+@forward "objects/toc" as o-toc--*;
+
+@forward "components/home-banner" as c-home-banner--*;
+@forward "components/logo" as c-logo--*;
+@forward "components/site-header" as c-site-header--*;
+@forward "components/site-nav" as c-site-nav--*;
+@forward "components/site-footer" as c-site-footer--*;
+@forward "components/subtitle" as c-subtitle--*;
+@forward "components/visited-indicator" as c-visited-indicator--*;
+
+@use "pkg:iro-design" as iro;
+
+@mixin styles {
+	@font-face {
+		font-family: "Inter";
+		font-style: normal;
+		font-weight: 50 950;
+		font-display: swap;
+		src: url(load("/assets/InterVariable.woff2")) format("woff2-variations");
+		font-feature-settings: "ss01";
+	}
+
+	@font-face {
+		font-family: "Inter";
+		font-style: italic;
+		font-weight: 50 950;
+		font-display: swap;
+		src: url(load("/assets/InterVariable-Italic.woff2")) format("woff2-variations");
+		font-feature-settings: "ss01";
+	}
+
+	html {
+		scroll-behavior: smooth;
+		scroll-padding-block-start: props.get(site-header.$block-size);
+		scrollbar-gutter: stable;
+		min-block-size: 100%;
+		display: flex;
+	}
+
+	body {
+		inline-size: 100%;
+	}
+
+	[x-cloak] {
+		display: none;
+	}
+}
diff --git a/src/styles/components/_home-banner.scss b/src/styles/components/_home-banner.scss
new file mode 100644
index 0000000..660cd9b
--- /dev/null
+++ b/src/styles/components/_home-banner.scss
@@ -0,0 +1,39 @@
+@use "sass:map";
+@use "sass:string";
+@use "sass:meta";
+
+@use "pkg:iro-sass/bem";
+@use "pkg:iro-sass/props";
+@use "pkg:iro-design" as iro;
+
+@use "site-header.vars" as site-header;
+
+@mixin styles {
+	@include bem.component("home-banner") {
+		@include bem.elem("intro") {
+			margin-block-start: 0;
+			font-size: clamp(props.get(iro.$core--font-size--500), 5.3vw, 5rem);
+			font-weight: 300;
+			color: props.get(iro.$core--theme, --text);
+			line-height: 1.2;
+
+			strong {
+				font-family: props.get(iro.$core--font--headline--family);
+				font-weight: 900;
+				text-transform: uppercase;
+				letter-spacing: 2px;
+				color: props.get(iro.$core--theme, --heading);
+			}
+		}
+
+		@include iro.media--media("<=md") {
+			@include bem.elem("intro") {
+				font-size: props.get(iro.$core--font-size--500);
+			}
+
+			@include bem.elem("buttons") {
+				justify-content: center;
+			}
+		}
+	}
+}
diff --git a/src/styles/components/_logo.scss b/src/styles/components/_logo.scss
new file mode 100644
index 0000000..3450817
--- /dev/null
+++ b/src/styles/components/_logo.scss
@@ -0,0 +1,81 @@
+@use "sass:map";
+@use "sass:string";
+
+@use "pkg:iro-sass/bem";
+@use "pkg:iro-sass/props";
+@use "pkg:iro-design" as iro;
+
+@mixin styles {
+	@include bem.component("logo") {
+		display: block;
+		padding: props.get(iro.$core--size--50);
+		margin-inline: calc(-1 * props.get(iro.$core--size--50));
+		border-radius: props.get(iro.$s-links--rounding);
+		color: props.get(iro.$core--theme, --heading);
+
+		&:link,
+		&:visited {
+			&:hover {
+				text-decoration: none;
+				color: props.get(iro.$core--theme, --text-mute);
+			}
+
+			&:focus-visible {
+				color: props.get(iro.$s-links--key-focus--text-color);
+				text-decoration: none;
+				outline: props.get(iro.$s-links--key-focus--border-color) solid
+					props.get(iro.$s-links--key-focus--border-width);
+				box-shadow: 0 0 0
+					calc(
+						props.get(iro.$s-links--key-focus--border-width) +
+							props.get(iro.$s-links--key-focus--outline-width)
+					)
+					props.get(iro.$s-links--key-focus--outline-color);
+			}
+		}
+
+		@include bem.elem("img") {
+			display: block;
+			block-size: 1.7em;
+			aspect-ratio: 2700 / 600;
+		}
+
+		@include bem.modifier("sm") {
+			@include bem.elem("img") {
+				aspect-ratio: 600 / 600;
+			}
+		}
+
+		@include bem.modifier("lg") {
+			@include bem.elem("img") {
+				block-size: 2em;
+			}
+		}
+
+		@each $theme in map.keys(props.get(iro.$core--transparent-colors)) {
+			$logo-theme: static-#{string.slice($theme, 3)};
+
+			@include bem.modifier($logo-theme) {
+				color: props.get(iro.$core--transparent-colors, $theme, --900);
+
+				&:link,
+				&:visited {
+					&:hover {
+						color: props.get(iro.$core--transparent-colors, $theme, --800);
+					}
+
+					&:focus-visible {
+						color: props.get(iro.$core--transparent-colors, $theme, --900);
+						outline-color: props.get(iro.$core--transparent-colors, $theme, --900);
+						box-shadow: 0 0 0
+							calc(
+								props.get(iro.$s-links--key-focus--border-width) +
+									props.get(iro.$s-links--key-focus--outline-width)
+							)
+							props.get(iro.$core--transparent-colors, $theme, --300);
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/src/styles/components/_site-footer.scss b/src/styles/components/_site-footer.scss
new file mode 100644
index 0000000..33608ff
--- /dev/null
+++ b/src/styles/components/_site-footer.scss
@@ -0,0 +1,157 @@
+@use "sass:math";
+@use "sass:meta";
+
+@use "pkg:iro-design" as iro;
+@use "pkg:iro-sass/bem";
+@use "pkg:iro-sass/props";
+
+@forward "site-footer.vars";
+@use "site-footer.vars" as vars;
+
+@mixin styles {
+	@include iro.props--materialize-at-root(meta.module-variables("vars"));
+
+	@property --site-footer--l1-y {
+		initial-value: 0px;
+		inherits: true;
+		syntax: "<length>";
+	}
+
+	@property --site-footer--cloud-y {
+		initial-value: 0px;
+		inherits: true;
+		syntax: "<length>";
+	}
+
+	@property --site-footer--moon-y {
+		initial-value: 0px;
+		inherits: true;
+		syntax: "<length>";
+	}
+
+	@property --site-footer--star-y {
+		initial-value: 0px;
+		inherits: true;
+		syntax: "<length>";
+	}
+
+	@keyframes footer-l1-ani {
+		from {
+			--site-footer--l1-y: -300px;
+			--site-footer--cloud-y: -400px;
+			--site-footer--moon-y: -500px;
+			--site-footer--star-y: -500px;
+		}
+		to {
+			--site-footer--l1-y: 300px;
+			--site-footer--cloud-y: 400px;
+			--site-footer--moon-y: 500px;
+			--site-footer--star-y: 500px;
+		}
+	}
+
+	@include bem.component("site-footer") {
+		position: sticky;
+		inset-block-start: 100%;
+
+		@include bem.elem("banner") {
+			position: relative;
+			display: flex;
+			block-size: 33rem;
+			justify-content: end;
+			overflow: hidden;
+			background: linear-gradient(
+				to bottom,
+				props.get(vars.$colors, --bg-from) 35%,
+				props.get(vars.$colors, --bg) 85%
+			);
+
+			animation-name: footer-l1-ani;
+			//animation-fill-mode: both;
+			animation-duration: 1ms;
+			animation-timeline: view(block 0% 0%);
+			animation-timing-function: linear;
+		}
+
+		@include bem.elem("banner-img") {
+			position: relative;
+			z-index: 2;
+			flex: 0 0 auto;
+			display: block;
+			block-size: 100%;
+			margin-inline: auto;
+			aspect-ratio: 3840 / 1600;
+		}
+
+		@include bem.elem("banner-bg") {
+			position: absolute;
+			inset-inline-start: 50%;
+			inset-block-end: 0;
+			z-index: 1;
+			display: block;
+			inline-size: 100%;
+			block-size: 100%;
+			transform: translateX(-50%);
+		}
+
+		@include bem.elem("content-wrap") {
+			padding-block-end: props.get(iro.$core--size--400);
+			background-color: props.get(iro.$core--transparent-colors, --black, --900);
+		}
+
+		@include bem.elem("content") {
+			display: flex;
+			flex-wrap: wrap;
+			gap: props.get(iro.$core--size--600);
+		}
+
+		@include bem.elem("sections") {
+			display: flex;
+			flex-wrap: wrap;
+			gap: props.get(iro.$core--size--400) props.get(iro.$core--size--800);
+		}
+
+		@include bem.elem("table") {
+			display: grid;
+			grid-template-columns: auto auto auto auto;
+			column-gap: props.get(iro.$core--size--200);
+		}
+
+		@include bem.elem("table-row") {
+			display: contents;
+		}
+
+		@include bem.elem("divider") {
+			display: none;
+		}
+
+		@include bem.elem("logo") {
+			margin-block: auto;
+			margin-inline-start: auto;
+		}
+
+		@include iro.media--media("<=md") {
+			@include bem.elem("content") {
+				flex-direction: column;
+				align-items: center;
+			}
+
+			@include bem.elem("divider") {
+				display: flex;
+				inline-size: 100%;
+			}
+
+			@include bem.elem("logo") {
+				margin-inline-start: 0;
+			}
+		}
+
+		@include iro.media--media("<=sm") {
+			transform: translateY(calc(-1 * props.get(iro.$o-navbar--block-size)));
+
+			@include bem.elem("banner-img") {
+				transform: translateX(max(0rem, 19rem - 50vw));
+			}
+		}
+	}
+}
diff --git a/src/styles/components/_site-footer.vars.scss b/src/styles/components/_site-footer.vars.scss
new file mode 100644
index 0000000..0b2f968
--- /dev/null
+++ b/src/styles/components/_site-footer.vars.scss
@@ -0,0 +1,34 @@
+@use "pkg:iro-design/core.vars" as core;
+@use "pkg:iro-design/objects/backdrop.vars" as backdrop;
+@use "pkg:iro-sass/props";
+
+$colors: props.def(
+	--site-footer,
+	(
+		--bg-from: props.get(core.$theme, --bg-l1),
+		--bg: props.get(core.$theme, --bg-l1),
+		--star: transparent,
+		--cloud: props.get(core.$theme, --base, --50),
+		--l1: props.get(core.$theme, --bg-base),
+		--dragon-awake: props.get(core.$transparent-colors, --black, --900),
+		--dragon-asleep--eye: transparent,
+		--dragon-asleep: transparent,
+		--fg: props.get(core.$transparent-colors, --black, --900),
+	),
+	"color"
+);
+
+$colors--dark: props.def(
+	--site-footer,
+	(
+		--bg: props.get(core.$theme, --bg-l2),
+		--star: #fff,
+		--cloud: props.get(core.$theme, --base, --100),
+		--l1: props.get(core.$theme, --bg-l1),
+		--dragon-awake: transparent,
+		--dragon-asleep--eye: #fff,
+		--dragon-asleep: #000,
+		--fg: #000,
+	),
+	"dark"
+);
diff --git a/src/styles/components/_site-header.scss b/src/styles/components/_site-header.scss
new file mode 100644
index 0000000..d23fa7c
--- /dev/null
+++ b/src/styles/components/_site-header.scss
@@ -0,0 +1,136 @@
+@use "sass:math";
+@use "sass:meta";
+
+@use "pkg:iro-design" as iro;
+@use "pkg:iro-sass/bem";
+@use "pkg:iro-sass/props";
+
+@forward "site-header.vars";
+@use "site-header.vars" as vars;
+
+@mixin styles {
+	@include iro.props--materialize-at-root(meta.module-variables("vars"));
+
+	@include bem.component("site-header") {
+		position: sticky;
+		inset-block-start: 0;
+		z-index: props.get(vars.$z-index);
+		display: flex;
+		gap: props.get(vars.$spacing);
+		align-items: center;
+		line-height: 1.4;
+		block-size: props.get(vars.$block-size);
+		padding-inline: props.get(iro.$l-container--pad-i);
+		background-color: props.get(iro.$core--theme, --bg-l1);
+		overflow: hidden;
+		transition:
+			background-color 0.2s ease,
+			opacity 0.2s ease,
+			transform 0.2s ease,
+			visibility 0s linear 0.2s;
+
+		@include bem.at-theme("js") {
+			background-color: transparent;
+		}
+
+		@include bem.modifier("hidden") {
+			margin-block-start: calc(-1 * props.get(vars.$block-size));
+			opacity: 0;
+			visibility: hidden;
+			transform: translateY(-0.2em);
+
+			@include bem.is("scroll") {
+				transition:
+					background-color 0.2s ease,
+					opacity 0.2s ease,
+					transform 0.2s ease,
+					visibility 0s linear;
+				visibility: visible;
+				opacity: 1;
+				transform: none;
+			}
+		}
+
+		@include bem.modifier("end") {
+			background-color: props.get(iro.$core--transparent-colors, --black, --900);
+		}
+
+		@include bem.is("scroll") {
+			background-color: props.get(iro.$core--theme, --base, --50);
+		}
+
+		@include bem.elem("logo") {
+			@include bem.modifier("sm") {
+				display: none;
+			}
+		}
+
+		@include bem.elem("nav", "back") {
+			margin-inline-end: calc(-1 * props.get(vars.$nav-pull));
+		}
+
+		@include bem.elem("back") {
+			display: none;
+		}
+
+		@include bem.elem("spacer") {
+			margin-inline-start: auto;
+		}
+
+		@include bem.elem("slot") {
+			display: contents;
+
+			@include bem.modifier("sm") {
+				display: none;
+			}
+		}
+
+		@include iro.media--media("<=sm") {
+			@include bem.elem("logo") {
+				display: none;
+
+				@include bem.modifier("sm") {
+					display: block;
+				}
+			}
+
+			@include bem.elem("nav") {
+				display: none;
+			}
+
+			@include bem.elem("back") {
+				display: block;
+			}
+
+			@include bem.elem("slot") {
+				@include bem.modifier("end") {
+					display: none;
+				}
+
+				@include bem.modifier("sm") {
+					display: contents;
+				}
+			}
+
+			@include bem.modifier("end") {
+				@include bem.elem("logo") {
+					display: block;
+
+					@include bem.modifier("sm") {
+						display: none;
+					}
+				}
+
+				@include bem.elem("slot") {
+					@include bem.modifier("sm") {
+						display: none;
+					}
+				}
+			}
+		}
+
+		@include iro.media--media("height<=500px") {
+			position: relative;
+		}
+	}
+}
diff --git a/src/styles/components/_site-header.vars.scss b/src/styles/components/_site-header.vars.scss
new file mode 100644
index 0000000..282e944
--- /dev/null
+++ b/src/styles/components/_site-header.vars.scss
@@ -0,0 +1,14 @@
+@use "pkg:iro-design/core.vars" as core;
+@use "pkg:iro-design/objects/backdrop.vars" as backdrop;
+@use "pkg:iro-sass/props";
+
+$z-index: props.def(--c-site-header--z-index, calc(props.get(backdrop.$z-index) - 10));
+$block-size: props.def(--c-site-header--block-size, props.get(core.$size--800));
+$spacing: props.def(--c-site-header--spacing, props.get(core.$size--500));
+$nav-pull: props.def(--c-site-header--nav-pull, props.get(core.$size--300));
+
+$spacing--md: props.def(--c-site-header--spacing, props.get(core.$size--400), "md");
+$nav-pull--md: props.def(--c-site-header--nav-pull, props.get(core.$size--200), "md");
+
+$block-size--sm: props.def(--c-site-header--block-size, props.get(core.$size--700), "sm");
+$spacing--sm: props.def(--c-site-header--spacing, props.get(core.$size--300), "sm");
diff --git a/src/styles/components/_site-nav.scss b/src/styles/components/_site-nav.scss
new file mode 100644
index 0000000..99a8afc
--- /dev/null
+++ b/src/styles/components/_site-nav.scss
@@ -0,0 +1,30 @@
+@use "sass:math";
+@use "sass:meta";
+
+@use "pkg:iro-design" as iro;
+@use "pkg:iro-sass/bem";
+@use "pkg:iro-sass/props";
+
+@mixin styles {
+	@include bem.component("site-nav-placeholder") {
+		block-size: props.get(iro.$o-navbar--block-size);
+
+		@include iro.media--media(">sm") {
+			display: none;
+		}
+	}
+
+	@include bem.component("site-nav") {
+		position: fixed;
+		inset-block-end: 0;
+		inset-inline: 0;
+		z-index: calc(props.get(iro.$o-backdrop--z-index) - 10);
+		background-color: props.get(iro.$core--transparent-colors, --black, --900);
+		//border-block-start: 1px solid props.get(iro.$core--theme, --border-mute);
+		overflow-x: auto;
+
+		@include iro.media--media(">sm") {
+			display: none;
+		}
+	}
+}
diff --git a/src/styles/components/_subtitle.scss b/src/styles/components/_subtitle.scss
new file mode 100644
index 0000000..e9a40bb
--- /dev/null
+++ b/src/styles/components/_subtitle.scss
@@ -0,0 +1,11 @@
+@use "pkg:iro-sass/bem";
+@use "pkg:iro-sass/props";
+@use "pkg:iro-design" as iro;
+
+@mixin styles {
+	@include bem.component("subtitle") {
+		margin-block-start: props.get(iro.$s-implicit--paragraph--margin-bs);
+		color: props.get(iro.$core--theme, --text-mute-more);
+		font-size: props.get(iro.$core--font-size--300);
+	}
+}
diff --git a/src/styles/components/_visited-indicator.scss b/src/styles/components/_visited-indicator.scss
new file mode 100644
index 0000000..7aa1f38
--- /dev/null
+++ b/src/styles/components/_visited-indicator.scss
@@ -0,0 +1,27 @@
+@use "pkg:iro-sass/bem";
+@use "pkg:iro-sass/props";
+@use "pkg:iro-design" as iro;
+
+@mixin styles {
+	@include bem.component("with-visited-indicator") {
+		@include bem.elem("indicator") {
+			block-size: 1.4em;
+			color: props.get(iro.$core--theme, --text);
+
+			&::after {
+				content: "";
+				display: block;
+				block-size: 100%;
+				inline-size: props.get(iro.$core--border-width--thick);
+				border-radius: 10em;
+				background-color: currentColor;
+			}
+		}
+
+		&:visited {
+			@include bem.elem("indicator") {
+				color: props.get(iro.$core--theme, --border-mute);
+			}
+		}
+	}
+}
diff --git a/src/styles/objects/_deflist.scss b/src/styles/objects/_deflist.scss
new file mode 100644
index 0000000..63ba1b9
--- /dev/null
+++ b/src/styles/objects/_deflist.scss
@@ -0,0 +1,25 @@
+@use "sass:list";
+
+@use "pkg:iro-sass/bem";
+@use "pkg:iro-sass/props";
+@use "pkg:iro-design" as iro;
+
+@mixin styles {
+	@include bem.object("deflist") {
+		display: grid;
+		grid-template-columns: auto 1fr;
+		gap: props.get(iro.$core--size--50) props.get(iro.$core--size--400);
+		padding: 0;
+		margin-block: props.get(iro.$s-implicit--paragraph--margin-bs) 0;
+		margin-inline: 0;
+
+		dt {
+			font-weight: bold;
+			color: props.get(iro.$core--theme, --heading);
+		}
+
+		dd {
+			margin: 0;
+		}
+	}
+}
diff --git a/src/styles/objects/_message.scss b/src/styles/objects/_message.scss
new file mode 100644
index 0000000..a7c9996
--- /dev/null
+++ b/src/styles/objects/_message.scss
@@ -0,0 +1,216 @@
+@use "sass:meta";
+
+@use "pkg:iro-design" as iro;
+@use "pkg:iro-sass/bem";
+@use "pkg:iro-sass/props";
+
+@forward "message.vars";
+@use "message.vars" as vars;
+
+@mixin styles {
+	@include iro.props--materialize-at-root(meta.module-variables("vars"));
+
+	@include bem.object("message") {
+		display: grid;
+		position: relative;
+		grid-template-rows: auto 1fr auto;
+		grid-template-columns:
+			auto calc(props.get(vars.$avatar-size) + props.get(vars.$spacing-x))
+			minmax(0, 1fr);
+		grid-template-areas:
+			"line-from avatar  main"
+			"line-from line-to main"
+			"line-from replies replies";
+
+		& + & {
+			padding-block-start: props.get(vars.$spacing-outer);
+		}
+
+		@include bem.elem("line-from") {
+			grid-area: line-from;
+			position: relative;
+			inline-size: calc(props.get(vars.$avatar-size) + props.get(vars.$spacing-x));
+
+			&::before,
+			&::after {
+				content: "";
+				display: block;
+				position: absolute;
+				inset-block-start: 0;
+				inset-inline-start: props.get(vars.$line-offset);
+			}
+
+			&::before {
+				inline-size: props.get(vars.$line-width);
+				block-size: calc(100% + props.get(vars.$spacing-outer));
+				background-color: props.get(vars.$colors, --line);
+			}
+
+			&::after {
+				inline-size: calc(
+					props.get(vars.$avatar-size) - props.get(vars.$line-offset) + props.get(vars.$spacing-x)
+				);
+				block-size: calc(0.5 * (props.get(vars.$avatar-size) - props.get(vars.$line-width)));
+				border-block-end: props.get(vars.$line-width) solid props.get(vars.$colors, --line);
+				border-inline-start: props.get(vars.$line-width) solid props.get(vars.$colors, --line);
+				border-radius: 0 0 0 props.get(vars.$line-curve);
+			}
+
+			@include bem.modifier("last") {
+				&::before {
+					block-size: 0;
+				}
+			}
+
+			@include bem.sibling-elem("avatar") {
+				&::before {
+					inset-block-start: 50%;
+					inset-block-end: auto;
+					inset-inline-start: 0;
+					inline-size: 50%;
+					block-size: props.get(vars.$line-width);
+					transform: translateY(-50%);
+				}
+			}
+		}
+
+		@include bem.elem("line-to") {
+			grid-area: line-to;
+			display: block;
+			inline-size: props.get(vars.$line-width);
+			margin-inline-start: props.get(vars.$line-offset);
+			background-color: props.get(vars.$colors, --line);
+		}
+
+		@include bem.elem("avatar") {
+			position: relative;
+			grid-area: avatar;
+			inline-size: props.get(vars.$avatar-size);
+			block-size: props.get(vars.$avatar-size);
+			margin-inline-end: props.get(vars.$spacing-x);
+
+			&::before,
+			&::after {
+				content: "";
+				display: block;
+				position: absolute;
+				z-index: -1;
+				inset-inline-start: props.get(vars.$line-offset);
+				inline-size: props.get(vars.$line-width);
+				block-size: 50%;
+				background-color: props.get(vars.$colors, --line);
+			}
+
+			&::before {
+				inset-block-start: 0;
+			}
+
+			&::after {
+				inset-block-end: 0;
+			}
+
+			@include bem.modifier("last") {
+				&::after {
+					display: none;
+				}
+			}
+		}
+
+		@include bem.elem("avatar-dot") {
+			grid-area: avatar;
+			position: absolute;
+			inset-block-start: 50%;
+			inset-inline-start: 50%;
+			inline-size: props.get(vars.$dot-radius);
+			block-size: props.get(vars.$dot-radius);
+			transform: translate(-50%, -50%);
+			border: props.get(vars.$dot-width) solid props.get(vars.$colors, --dot, --border);
+			border-radius: 1em;
+			background-color: props.get(vars.$colors, --dot, --bg);
+		}
+
+		@include bem.elem("meta") {
+			white-space: nowrap;
+			color: props.get(vars.$colors, --meta);
+		}
+
+		@include bem.elem("main") {
+			position: relative;
+			grid-area: main;
+		}
+
+		@include bem.elem("replies") {
+			grid-area: replies;
+
+			&::before {
+				content: "";
+				grid-area: line;
+				display: block;
+				inline-size: props.get(vars.$line-width);
+				block-size: props.get(vars.$spacing-inner);
+				margin-inline-start: props.get(vars.$line-offset);
+				background-color: props.get(vars.$colors, --line);
+			}
+		}
+
+		@include bem.elem("header") {
+			line-height: 1.4;
+
+			@include bem.next-elem("body") {
+				padding-block-start: props.get(vars.$spacing-y);
+			}
+		}
+
+		@include bem.elem("body") {
+			word-wrap: break-word;
+
+			&::before {
+				content: "";
+				display: block;
+				margin-block: -100em 100em;
+			}
+		}
+
+		@include bem.elem("attachments") {
+			display: grid;
+			grid-template-columns: repeat(auto-fill, minmax(props.get(vars.$attachment-width), 1fr));
+			grid-auto-rows: auto;
+			gap: props.get(vars.$spacing-x);
+			margin-block-start: props.get(vars.$spacing-attachments);
+		}
+
+		@include bem.elem("attachment") {
+			aspect-ratio: 3 / 2;
+			background-color: props.get(vars.$colors, --attachment, --bg);
+		}
+
+		@include bem.modifier("expanded") {
+			grid-template-rows: auto 1fr auto;
+			grid-template-columns: calc(props.get(vars.$avatar-size) + props.get(vars.$spacing-x)) minmax(
+					0,
+					1fr
+				);
+			grid-template-areas:
+				"avatar      header"
+				"body        body"
+				"attachments attachments";
+
+			@include bem.elem("header") {
+				grid-area: header;
+				align-self: center;
+			}
+
+			@include bem.elem("main") {
+				display: contents;
+			}
+
+			@include bem.elem("body") {
+				grid-area: body;
+			}
+
+			@include bem.elem("attachments") {
+				grid-area: attachments;
+			}
+		}
+	}
+}
diff --git a/src/styles/objects/_message.vars.scss b/src/styles/objects/_message.vars.scss
new file mode 100644
index 0000000..f394894
--- /dev/null
+++ b/src/styles/objects/_message.vars.scss
@@ -0,0 +1,39 @@
+@use "pkg:iro-design/core.vars" as core;
+@use "pkg:iro-design/objects/avatar.vars" as avatar;
+@use "pkg:iro-sass/props";
+
+$avatar-size: props.def(--o-message--avatar-size, props.get(avatar.$size));
+
+$dot-radius: props.def(--o-message--dot-radius, 6px);
+$dot-width: props.def(--o-message--dot-width, 4px);
+
+$spacing-x: props.def(--o-message--spacing-x, props.get(core.$size--200));
+$spacing-y: props.def(--o-message--spacing-y, props.get(core.$size--150));
+$spacing-inner: props.def(--o-message--spacing-inner, props.get(core.$size--500));
+$spacing-outer: props.def(--o-message--spacing-outer, props.get(core.$size--700));
+$spacing-attachments: props.def(--o-message--spacing-attachments, props.get(core.$size--200));
+
+$line-width: props.def(--o-message--line-width, props.get(core.$border-width--medium));
+$line-offset: props.def(
+	--o-message--line-offset,
+	calc(0.5 * props.get($avatar-size) - props.get($line-width))
+);
+$line-curve: props.def(--o-message--line-curve, props.get(core.$size--250));
+
+$attachment-width: props.def(--o-message--attachment-width, props.get(core.$size--2000));
+
+$colors: props.def(
+	--o-message,
+	(
+		--meta: props.get(core.$theme, --text-mute-more),
+		--line: props.get(core.$theme, --border),
+		--dot: (
+			--border: props.get(core.$theme, --text-mute-more),
+			--bg: props.get(core.$theme, --bg-base),
+		),
+		--attachment: (
+			--bg: props.get(core.$theme, --border-mute),
+		),
+	),
+	"color"
+);
diff --git a/src/styles/objects/_placeholder-box.scss b/src/styles/objects/_placeholder-box.scss
new file mode 100644
index 0000000..9be3dc8
--- /dev/null
+++ b/src/styles/objects/_placeholder-box.scss
@@ -0,0 +1,12 @@
+@use "pkg:iro-sass/bem";
+@use "pkg:iro-sass/props";
+@use "pkg:iro-design" as iro;
+
+@mixin styles {
+	@include bem.object("placeholder-box") {
+		padding: props.get(iro.$core--size--250) props.get(iro.$core--size--300);
+		border: props.get(iro.$core--border-width--thin) dashed
+			props.get(iro.$core--theme, --border, --mute);
+		border-radius: props.get(iro.$core--rounding);
+	}
+}
diff --git a/src/styles/objects/_toc.scss b/src/styles/objects/_toc.scss
new file mode 100644
index 0000000..aefb0c5
--- /dev/null
+++ b/src/styles/objects/_toc.scss
@@ -0,0 +1,27 @@
+@use "sass:list";
+
+@use "pkg:iro-sass/bem";
+@use "pkg:iro-sass/props";
+@use "pkg:iro-design" as iro;
+
+@mixin styles {
+	@include bem.object("toc") {
+		@include bem.elem("item") {
+			@include bem.next-twin-elem {
+				margin-block-start: props.get(iro.$core--size--50);
+			}
+
+			@include bem.is("active") {
+				@include bem.elem("item-link") {
+					font-weight: bold;
+					text-decoration-line: none;
+					color: props.get(iro.$core--theme, --heading);
+
+					&:hover {
+						text-decoration-line: underline;
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/src/styles/style.scss b/src/styles/style.scss
new file mode 100644
index 0000000..75d123f
--- /dev/null
+++ b/src/styles/style.scss
@@ -0,0 +1,53 @@
+@use "./common" as iro;
+
+@include iro.layers--styles;
+@include iro.core--styles;
+@include iro.styles;
+
+@include iro.s-implicit--styles;
+@include iro.s-blockquotes--styles;
+@include iro.s-body--styles;
+@include iro.s-code--styles;
+@include iro.s-figures--styles;
+@include iro.s-headings--styles;
+@include iro.s-lists--styles;
+@include iro.s-links--styles;
+
+@include iro.l-card-list--styles;
+@include iro.l-container--styles;
+@include iro.l-flex--styles;
+@include iro.l-hlist--styles;
+@include iro.l-media--styles;
+@include iro.l-split-view--styles;
+
+@include iro.o-alert--styles;
+@include iro.o-avatar--styles;
+@include iro.o-backdrop--styles;
+@include iro.o-button--styles;
+@include iro.o-card--styles;
+@include iro.o-deflist--styles;
+@include iro.o-dialog--styles;
+@include iro.o-divider--styles;
+@include iro.o-emoji--styles;
+@include iro.o-figure--styles;
+@include iro.o-heading--styles;
+@include iro.o-icon--styles;
+@include iro.o-thumbnail--styles;
+@include iro.o-lightbox--styles;
+@include iro.o-navbar--styles;
+@include iro.o-placeholder-box--styles;
+@include iro.o-side-nav--styles;
+@include iro.o-tabbar--styles;
+@include iro.o-text-field--styles;
+@include iro.o-toc--styles;
+
+@include iro.c-home-banner--styles;
+@include iro.c-logo--styles;
+@include iro.c-site-header--styles;
+@include iro.c-site-nav--styles;
+@include iro.c-site-footer--styles;
+@include iro.c-subtitle--styles;
+@include iro.c-visited-indicator--styles;
+
+@include iro.utils--styles;
+@include iro.themes--styles;
-- 
cgit v1.3.1