adjust style

public/css/timeline.css

@@ -37,7 +37,7 @@
   width: 16px;
   height: 16px;
   border-radius: 50%;
-  background: var(--accent-color);
+  background: var(--bg-color);
   border: 2px solid white;
   z-index: 1;
 }
@@ -50,7 +50,7 @@
   left: -160px;
   width: 100px;
   text-align: right;
-  color: #ffffff;
+  color: var(--fg-color);
   font-weight: bold;
   font-size: 0.9rem;
   line-height: 1.3;
@@ -78,7 +78,7 @@
 
 /* Hover Effects */
 #timeline-content li.event:hover::before {
-  background: var(--accent-color-dark);
+  background: var(--accent-color);
 }
 
 #timeline-content li.event:hover {
@@ -87,5 +87,5 @@
 
 /* From + To Label Hover Effect */
 #timeline-content li.event:hover::after {
-  color: var(--fg-color);
+  color: var(--accent-color);
 }

sass/_alerts.scss

@@ -0,0 +1,81 @@
+blockquote {
+	&.note {
+		border-inline-start: 0.25rem solid var(--blue-fg);
+
+		.alert-title,
+		li::marker {
+			color: var(--blue-fg);
+		}
+
+		.alert-title .icon {
+			-webkit-mask-image: var(--icon-info);
+			mask-image: var(--icon-info);
+		}
+	}
+
+	&.tip {
+		border-inline-start: 0.25rem solid var(--green-fg);
+
+		.alert-title,
+		li::marker {
+			color: var(--green-fg);
+		}
+
+		.alert-title .icon {
+			-webkit-mask-image: var(--icon-lightbulb);
+			mask-image: var(--icon-lightbulb);
+		}
+	}
+
+	&.important {
+		border-inline-start: 0.25rem solid var(--purple-fg);
+
+		.alert-title,
+		li::marker {
+			color: var(--purple-fg);
+		}
+
+		.alert-title .icon {
+			-webkit-mask-image: var(--icon-important);
+			mask-image: var(--icon-important);
+		}
+	}
+
+	&.warning {
+		border-inline-start: 0.25rem solid var(--yellow-fg);
+
+		.alert-title,
+		li::marker {
+			color: var(--yellow-fg);
+		}
+
+		.alert-title .icon {
+			-webkit-mask-image: var(--icon-warning);
+			mask-image: var(--icon-warning);
+		}
+	}
+
+	&.caution {
+		border-inline-start: 0.25rem solid var(--red-fg);
+
+		.alert-title,
+		li::marker {
+			color: var(--red-fg);
+		}
+
+		.alert-title .icon {
+			-webkit-mask-image: var(--icon-caution);
+			mask-image: var(--icon-caution);
+		}
+	}
+
+	.alert-title {
+		margin-block-end: -0.75rem;
+		font-weight: bold;
+
+		.icon {
+			vertical-align: -0.125em;
+			margin-inline-end: 0.25rem;
+		}
+	}
+}

sass/_article-list.scss

@@ -0,0 +1,445 @@
+#article-list {
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+	margin-block-start: 2rem;
+
+	article {
+		--bg-overlay: var(--accent-color-alpha);
+		position: relative;
+		transition: var(--transition);
+		box-shadow: var(--edge-highlight), var(--shadow-glass);
+		border-radius: var(--rounded-corner);
+		border-start-end-radius: 2.125rem;
+		border-end-end-radius: 1.8125rem;
+		background-image: linear-gradient(var(--bg-overlay), var(--bg-overlay)),
+			linear-gradient(var(--glass-bg), var(--glass-bg)), var(--blurnail);
+		background-position: center;
+		background-size: cover;
+		background-color: var(--bg-overlay);
+		padding: 1rem;
+		overflow: hidden;
+
+		&:hover {
+			h3::after {
+				transform: none;
+				opacity: 1;
+
+				:root[dir*="rtl"] & {
+					transform: scaleX(-1);
+				}
+			}
+		}
+
+		&:active:not(:has(.tag:active)) {
+			transform: var(--active);
+		}
+
+		&:has(> a:focus-visible) {
+			animation: focus-in var(--transition);
+			outline: 0.125rem solid var(--accent-color);
+			outline-offset: 0.125rem;
+		}
+
+		@supports not selector(:focus-visible) {
+			&:has(> a:focus) {
+				animation: focus-in var(--transition);
+				outline: 0.125rem solid var(--accent-color);
+				outline-offset: 0.125rem;
+			}
+		}
+
+		& > a {
+			position: absolute;
+			inset: 0;
+			border-radius: var(--rounded-corner);
+			border-start-end-radius: 2.125rem;
+			border-end-end-radius: 1.8125rem;
+		}
+
+		h3 {
+			margin: 0;
+			color: var(--accent-color);
+			font-weight: bold;
+			line-height: 1;
+			font-family: var(--font-system-ui);
+
+			&::after {
+				-webkit-mask-image: var(--icon-right);
+				display: inline-block;
+				position: relative;
+				transform: translateX(-0.25rem);
+				opacity: 0;
+				mask-image: var(--icon-right);
+				transition: var(--transition);
+				margin-inline-start: 0.25rem;
+				background-color: currentColor;
+				width: 1rem;
+				height: 1rem;
+				pointer-events: none;
+				content: "";
+
+				:root[dir*="rtl"] & {
+					transform: scaleX(-1) translateX(-0.25rem);
+				}
+			}
+		}
+
+		.tags {
+			position: relative;
+			justify-content: flex-end;
+			z-index: 1;
+			margin: 0;
+
+			a {
+				background-color: var(--accent-color-alpha);
+				color: var(--accent-color);
+
+				&:hover {
+					background-color: var(--accent-color);
+					color: var(--contrast-color);
+				}
+			}
+		}
+
+		&.draft,
+		&.archive,
+		&.featured,
+		&.hot,
+		&.poor {
+			&::before {
+				position: absolute;
+				transform: translateY(-50%);
+				opacity: var(--disabled-opacity);
+				mask-size: cover;
+				transition: var(--transition-longer);
+				inset-block-start: 50%;
+				inset-inline-end: -3rem;
+				width: 12rem;
+				height: 12rem;
+				content: "";
+			}
+
+			&:hover::before {
+				transform: translateY(-50%) rotate(-10deg) scale(1.5);
+			}
+
+			:root[dir*="rtl"] &:hover::before {
+				transform: translateY(-50%) rotate(10deg) scale(1.5);
+			}
+		}
+
+		&.draft {
+			--bg-overlay: var(--fg-muted-1);
+
+			&::before {
+				-webkit-mask-image: var(--icon-pencil);
+				mask-image: var(--icon-pencil);
+				background-color: var(--fg-muted-1);
+			}
+
+			h3 {
+				color: var(--fg-muted-4);
+			}
+
+			.badge {
+				background-color: var(--fg-muted-1);
+				color: var(--fg-muted-5);
+
+				.icon {
+					-webkit-mask-image: var(--icon-pencil);
+					mask-image: var(--icon-pencil);
+				}
+			}
+
+			.tags a {
+				background-color: var(--fg-muted-1);
+				color: var(--fg-muted-5);
+
+				&:hover {
+					background-color: var(--fg-muted-5);
+					color: var(--fg-contrast);
+				}
+			}
+		}
+
+		&.archive {
+			--bg-overlay: var(--purple-bg);
+
+			&::before {
+				-webkit-mask-image: var(--icon-archive);
+				mask-image: var(--icon-archive);
+				background-color: var(--purple-bg);
+			}
+
+			h3 {
+				color: var(--purple-fg);
+			}
+
+			.badge {
+				background-color: var(--purple-bg);
+				color: var(--purple-fg);
+
+				.icon {
+					-webkit-mask-image: var(--icon-archive);
+					mask-image: var(--icon-archive);
+				}
+			}
+
+			.tags a {
+				background-color: var(--purple-bg);
+				color: var(--purple-fg);
+
+				&:hover {
+					background-color: var(--purple-fg);
+					color: var(--fg-contrast);
+				}
+			}
+		}
+
+		&.featured {
+			--bg-overlay: var(--yellow-bg);
+
+			&::before {
+				-webkit-mask-image: var(--icon-star);
+				mask-image: var(--icon-star);
+				background-color: var(--yellow-bg);
+			}
+
+			&:hover {
+				&::before {
+					transform: translateY(-50%) rotate(62deg) scale(1.5);
+				}
+
+				:root[dir*="rtl"] &::before {
+					transform: translateY(-50%) rotate(-62deg) scale(1.5);
+				}
+			}
+
+			h3 {
+				color: var(--yellow-fg);
+			}
+
+			.badge {
+				background-color: var(--yellow-bg);
+				color: var(--yellow-fg);
+
+				.icon {
+					-webkit-mask-image: var(--icon-star);
+					mask-image: var(--icon-star);
+				}
+			}
+
+			.tags a {
+				background-color: var(--yellow-bg);
+				color: var(--yellow-fg);
+
+				&:hover {
+					background-color: var(--yellow-fg);
+					color: var(--fg-contrast);
+				}
+			}
+		}
+
+		&.hot {
+			--bg-overlay: var(--red-bg);
+
+			&::before {
+				-webkit-mask-image: var(--icon-fire);
+				mask-image: var(--icon-fire);
+				background-color: var(--red-bg);
+			}
+
+			h3 {
+				color: var(--red-fg);
+			}
+
+			.badge {
+				background-color: var(--red-bg);
+				color: var(--red-fg);
+
+				.icon {
+					-webkit-mask-image: var(--icon-fire);
+					mask-image: var(--icon-fire);
+				}
+			}
+
+			.tags a {
+				background-color: var(--red-bg);
+				color: var(--red-fg);
+
+				&:hover {
+					background-color: var(--red-fg);
+					color: var(--fg-contrast);
+				}
+			}
+		}
+
+		&.poor {
+			--bg-overlay: var(--brown-bg);
+
+			&::before {
+				-webkit-mask-image: var(--icon-poop);
+				mask-image: var(--icon-poop);
+				background-color: var(--brown-bg);
+			}
+
+			h3 {
+				color: var(--brown-fg);
+			}
+
+			.badge {
+				background-color: var(--brown-bg);
+				color: var(--brown-fg);
+
+				.icon {
+					-webkit-mask-image: var(--icon-poop);
+					mask-image: var(--icon-poop);
+				}
+			}
+
+			.tags a {
+				background-color: var(--brown-bg);
+				color: var(--brown-fg);
+
+				&:hover {
+					background-color: var(--brown-fg);
+					color: var(--fg-contrast);
+				}
+			}
+		}
+
+		.badge {
+			float: inline-end;
+			box-shadow: var(--edge-highlight);
+			border-radius: 999px;
+			padding: 0.375rem 0.75rem;
+			height: fit-content;
+			font-weight: bold;
+			white-space: nowrap;
+
+			.icon {
+				vertical-align: -0.125em;
+				margin-inline-end: 0.25rem;
+			}
+		}
+
+		.details {
+			display: flex;
+			flex-wrap: nowrap;
+			justify-content: space-between;
+			align-items: center;
+			gap: 0.25rem;
+			margin-block-start: 1rem;
+			border-block-start: max(1px, 0.0625rem) solid var(--fg-muted-2);
+			padding-block-start: 0.5rem;
+		}
+	}
+}
+
+#paginator {
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	align-items: center;
+	gap: 0.25rem;
+	margin-block-start: 4rem;
+
+	#paginator-first,
+	#paginator-previous,
+	#paginator-next,
+	#paginator-last {
+		display: inline-block;
+		transition: var(--transition);
+		box-shadow: var(--edge-highlight);
+		border-radius: 1rem;
+		background-color: var(--fg-muted-1);
+		padding: 0.5rem;
+		color: var(--fg-muted-4);
+		line-height: 0;
+
+		.icon {
+			transition: var(--transition);
+
+			:root[dir*="rtl"] & {
+				transform: scaleX(-1);
+			}
+		}
+	}
+
+	a#paginator-first,
+	a#paginator-previous,
+	a#paginator-next,
+	a#paginator-last {
+		&:hover {
+			background-color: var(--fg-muted-2);
+			color: var(--fg-muted-5);
+		}
+
+		&:active {
+			transform: var(--active);
+			border-radius: 1rem;
+		}
+	}
+
+	span#paginator-first,
+	span#paginator-previous,
+	span#paginator-next,
+	span#paginator-last {
+		opacity: var(--disabled-opacity);
+		cursor: not-allowed;
+	}
+
+	#paginator-previous {
+		border-start-end-radius: var(--rounded-corner-small);
+		border-end-end-radius: var(--rounded-corner-small);
+	}
+
+	#paginator-next {
+		border-start-start-radius: var(--rounded-corner-small);
+		border-end-start-radius: var(--rounded-corner-small);
+	}
+
+	#paginator-first .icon {
+		-webkit-mask-image: var(--icon-first);
+		mask-image: var(--icon-first);
+	}
+
+	#paginator-previous .icon {
+		-webkit-mask-image: var(--icon-previous);
+		mask-image: var(--icon-previous);
+	}
+
+	#paginator-next .icon {
+		-webkit-mask-image: var(--icon-next);
+		mask-image: var(--icon-next);
+	}
+
+	#paginator-last .icon {
+		-webkit-mask-image: var(--icon-last);
+		mask-image: var(--icon-last);
+	}
+
+	#paginator-counter {
+		display: inline-block;
+		transition: var(--transition);
+		box-shadow: var(--edge-highlight);
+		border-radius: var(--rounded-corner-small);
+		background-color: var(--accent-color-alpha);
+		padding: 0.5rem 0.625rem;
+		color: var(--accent-color);
+		font-weight: bold;
+		line-height: 1;
+		font-variant-numeric: tabular-nums;
+	}
+
+	&:has(a#paginator-previous:active) #paginator-counter {
+		border-start-start-radius: 1rem;
+		border-end-start-radius: 1rem;
+	}
+
+	&:has(a#paginator-next:active) #paginator-counter {
+		border-start-end-radius: 1rem;
+		border-end-end-radius: 1rem;
+	}
+}

sass/_article.scss

@@ -0,0 +1,248 @@
+#banner-container {
+	--mask: linear-gradient(black, transparent);
+	-webkit-user-select: none;
+	-webkit-mask-image: var(--mask);
+	position: absolute;
+	z-index: -1;
+	mask-image: var(--mask);
+	inset-block-start: 0;
+	inset-inline-start: 0;
+	aspect-ratio: 2 / 1;
+	width: 100%;
+	user-select: none;
+
+	#banner {
+		position: fixed;
+		transition: none;
+		margin: 0;
+		inset-block-start: 0;
+		inset-inline-start: 0;
+	}
+
+	& + #heading {
+		margin-block-start: calc(50vw - 7rem);
+	}
+
+	@media only screen and (max-width: 480px) {
+		body:has(&) #site-nav:not(#handle + #site-nav) {
+			margin-block-start: calc(50vw + 1rem);
+		}
+	}
+
+}
+
+#heading {
+	margin: 2rem 0 1rem;
+	text-align: center;
+
+	h1 {
+		-webkit-background-clip: text;
+		margin: 0;
+		background-image: linear-gradient(
+			to right,
+			var(--fg-muted-4),
+			var(--fg-color),
+			var(--fg-muted-4)
+		);
+		background-clip: text;
+		color: transparent;
+
+		& + p {
+			display: inline;
+		}
+	}
+
+	.tags {
+		display: inline-flex;
+		justify-content: center;
+		margin-block-start: 1rem;
+	}
+}
+
+#buttons-container {
+	display: flex;
+	position: fixed;
+	flex-direction: column;
+	gap: 0.5rem;
+	inset-block-end: 1rem;
+	inset-inline-end: 1rem;
+
+	@media only screen and (max-width: 720px) {
+		position: static;
+		flex-direction: row-reverse;
+		// justify-content: center;
+		margin-block-start: 2rem;
+	}
+
+	summary,
+	#go-to-top,
+	#share,
+	#issue {
+		display: inline-block;
+		transition: var(--transition);
+		box-shadow: var(--edge-highlight);
+		border-radius: 999px;
+		background-color: var(--fg-muted-1);
+		padding: 0.5rem;
+		color: var(--fg-muted-4);
+		line-height: 0;
+
+		&:hover {
+			background-color: var(--fg-muted-2);
+			color: var(--fg-muted-5);
+		}
+
+		&:active {
+			transform: var(--active);
+		}
+
+		.icon {
+			transition: var(--transition);
+		}
+	}
+
+	details {
+		position: relative;
+		box-shadow: none;
+		border-radius: 0;
+		background-color: transparent;
+		padding: 0;
+
+		&[open] summary ~ * {
+			transform-origin: bottom right;
+			animation: button-dropdown-open var(--transition);
+
+			:root[dir*="rtl"] & {
+				transform-origin: bottom left;
+				animation: button-dropdown-open-rtl var(--transition);
+			}
+
+			@keyframes button-dropdown-open {
+				from {
+					transform: scale(0.5) translate(1rem, 1rem);
+					opacity: 0;
+				}
+			}
+
+			@keyframes button-dropdown-open-rtl {
+				from {
+					transform: scale(0.5) translate(-1rem, 1rem);
+					opacity: 0;
+				}
+			}
+		}
+
+		summary {
+			&::before {
+				display: none;
+			}
+		}
+	}
+
+	summary + div {
+		-webkit-backdrop-filter: var(--blur);
+		display: flex;
+		position: absolute;
+		flex-direction: column;
+		z-index: 1;
+		backdrop-filter: var(--blur);
+		inset-block-end: 0;
+		inset-inline-end: 3rem;
+		box-shadow: var(--edge-highlight), var(--shadow-glass);
+		border-radius: var(--rounded-corner);
+		background-color: var(--glass-bg);
+		padding: 1rem;
+		width: min(calc(var(--container-width) / 3), calc(90vw - 3rem));
+		max-height: 50vh;
+
+		@media only screen and (max-width: 720px) {
+			inset-inline-end: 2.5rem;
+			width: min(calc(var(--container-width) / 3), calc(90vw - 2.5rem));
+		}
+
+		strong.title {
+			color: var(--fg-muted-4);
+		}
+
+		div {
+			--mask: linear-gradient(
+				to bottom,
+				transparent,
+				black 1rem,
+				black calc(100% - 1rem),
+				transparent
+			);
+			-webkit-mask-image: var(--mask);
+			flex: 1;
+			mask-image: var(--mask);
+			margin: 0 -1rem -1rem;
+			padding: 1rem;
+			padding-block-start: 0;
+			overflow: auto;
+		}
+
+		ol,
+		ul {
+			margin: 0;
+			padding-inline-start: 0.75rem;
+			font-size: var(--font-size-small);
+
+			&:first-child {
+				margin-block-start: 0.75rem;
+			}
+
+			li::marker {
+				color: var(--fg-muted-5);
+			}
+
+			a {
+				color: var(--fg-muted-5);
+			}
+		}
+	}
+
+	#toc .icon {
+		-webkit-mask-image: var(--icon-toc);
+		mask-image: var(--icon-toc);
+
+		:root[dir*="rtl"] & {
+			transform: scaleX(-1);
+		}
+	}
+
+	#backlinks {
+		.icon {
+			-webkit-mask-image: var(--icon-backlink);
+			mask-image: var(--icon-backlink);
+
+			:root[dir*="rtl"] & {
+				transform: scaleX(-1);
+			}
+		}
+
+		summary + div {
+			width: min(calc(var(--container-width) / 3), calc(90vw - 5rem));
+		}
+	}
+
+	#go-to-top {
+		@media only screen and (max-width: 720px) {
+			display: none;
+		}
+
+		.icon {
+			-webkit-mask-image: var(--icon-top);
+			mask-image: var(--icon-top);
+		}
+	}
+
+	#share .icon {
+		-webkit-mask-image: var(--icon-share);
+		mask-image: var(--icon-share);
+	}
+
+	#issue .icon {
+		-webkit-mask-image: var(--icon-bug);
+		mask-image: var(--icon-bug);
+	}
+}

sass/_buttons.scss

@@ -0,0 +1,72 @@
+.buttons {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	margin-block-start: 4rem;
+
+	&.centered {
+		justify-content: space-around;
+	}
+
+	a {
+		text-decoration: none;
+	}
+
+	button {
+		appearance: none;
+		cursor: pointer;
+		border: none;
+		font-family: inherit;
+
+		&:disabled {
+			cursor: not-allowed;
+
+			&:hover {
+				background-color: var(--fg-muted-1);
+				color: var(--fg-muted-5);
+			}
+
+			&:active {
+				transform: none;
+			}
+		}
+	}
+
+	a,
+	button {
+		transition: var(--transition);
+		box-shadow: var(--edge-highlight);
+		border-radius: var(--rounded-corner);
+		background-color: var(--fg-muted-1);
+		padding: 0.75rem 1rem;
+		color: var(--fg-muted-5);
+		font-weight: bold;
+		font-size: var(--font-size-small);
+		line-height: 1;
+
+		&:hover {
+			background-color: var(--fg-muted-2);
+			color: var(--fg-color);
+		}
+
+		&:active {
+			transform: var(--active);
+		}
+
+		&.colored {
+			box-shadow: none;
+			background-color: transparent;
+			color: var(--accent-color);
+
+			&:hover {
+				box-shadow: var(--edge-highlight);
+				background-color: var(--accent-color-alpha);
+			}
+		}
+
+		&.big {
+			border-radius: 999px;
+			padding: 1rem 1.5rem;
+		}
+	}
+}

sass/_code.scss

@@ -0,0 +1,74 @@
+// CODE
+pre,
+code,
+kbd,
+samp {
+	font-family: var(--font-monospace-code);
+}
+
+code:not(pre code) {
+	box-shadow: var(--edge-highlight);
+	border-radius: var(--rounded-corner-small);
+	background-color: var(--fg-muted-1);
+	padding: 0.125rem 0.375rem;
+	color: var(--red-fg);
+	font-size: var(--font-size-small-em);
+}
+
+pre {
+	margin: 1rem 0 1rem;
+	box-shadow: var(--edge-highlight), var(--shadow);
+	border-radius: var(--rounded-corner);
+	background-color: var(--fg-muted-1);
+	padding: 1rem;
+	max-width: 100vw;
+	overflow: auto;
+	line-height: normal;
+
+	table {
+		box-shadow: none;
+		border-radius: 0;
+		background-color: transparent;
+		table-layout: auto;
+		overflow: hidden;
+
+		tr {
+			&:nth-child(even) {
+				background-color: transparent;
+			}
+
+			th,
+			td {
+				padding: 0;
+			}
+
+			th {
+				background-color: transparent;
+				font-weight: normal;
+			}
+		}
+	}
+
+	// The line number cells
+	table td:nth-of-type(1) {
+		-webkit-user-select: none;
+		user-select: none;
+		text-align: center;
+	}
+
+	mark {
+		display: block;
+		box-shadow: none;
+		border-radius: 0; // Unset code block border radius
+		background-color: var(--fg-muted-1);
+		padding: 0; // Unset mark padding
+		color: var(
+			--fg-color
+		); // Unset mark color from accent color to text color
+	}
+
+	// The line numbers already provide some kind of left/right padding
+	&[data-linenos] {
+		padding: 1rem 0;
+	}
+}

sass/_comments.scss

@@ -0,0 +1,471 @@
+#comments {
+	#qrcode {
+		float: inline-end;
+		transform-origin: right;
+		box-sizing: content-box;
+		margin-inline-start: 1rem;
+		margin-block-start: 3rem;
+		margin-block-end: 0;
+		background-color: white;
+		padding: 0.75rem;
+		width: 7.8125rem; // 125px
+		height: 7.8125rem; // 125px
+
+		:root[dir*="rtl"] & {
+			transform-origin: left;
+		}
+
+		@media only screen and (max-width: 720px) {
+			display: none;
+		}
+	}
+
+	.buttons {
+		justify-content: start;
+		gap: 0.25rem;
+		margin-block-start: 2rem;
+
+		#load-comments:disabled {
+			--shimmer: rgb(
+				from var(--accent-color) r g b / calc(var(--color-opacity) * 2)
+			);
+			animation: loading-shimmer var(--transition-long) ease-in-out
+				alternate infinite;
+			transition: none;
+			background-image: linear-gradient(
+				to right,
+				var(--fg-muted-1) 50%,
+				var(--shimmer) 75%,
+				var(--fg-muted-1) 100%
+			);
+			background-size: 200%;
+			background-color: transparent;
+
+			&:hover {
+				background-color: transparent;
+			}
+
+			@keyframes loading-shimmer {
+				to {
+					background-position-x: -200%;
+				}
+			}
+		}
+	}
+
+	#comments-wrapper {
+		display: flex;
+		flex-direction: column;
+		gap: 2rem;
+		margin-block-start: 2rem;
+
+		#comments-status {
+			color: var(--fg-muted-4);
+			font-weight: bold;
+			font-size: var(--font-size-x-large);
+			text-align: center;
+		}
+
+		.comment {
+			display: grid;
+			grid-template-columns: min-content;
+			grid-template-areas:
+				"avatar name        "
+				"avatar time        "
+				"avatar post        "
+				"...... media       "
+				"...... card         "
+				"...... interactions";
+			column-gap: 1rem;
+			justify-items: start;
+
+			&.comment-reply {
+				position: relative;
+				border-radius: 0.25rem;
+				border-inline-start: 0.25rem solid var(--fg-muted-2);
+				padding-inline-start: 1rem;
+
+				&:has(+ .comment-reply) {
+					border-end-start-radius: 0;
+				}
+
+				& + .comment-reply {
+					margin-block-start: -2rem;
+					border-start-start-radius: 0;
+					padding-block-start: 2rem;
+				}
+			}
+
+			.avatar-link {
+				position: relative;
+				grid-area: avatar;
+				width: 4rem;
+				height: 4rem;
+
+				.avatar {
+					transition: var(--transition);
+					margin: 0;
+					background-size: cover;
+					width: 100%;
+					height: 100%;
+
+					&:hover {
+						transform: rotate(10deg) var(--hover);
+						border-radius: var(--rounded-corner);
+					}
+
+					&:active {
+						transform: var(--active);
+					}
+				}
+			}
+
+			.author {
+				display: flex;
+				grid-area: name;
+				align-items: center;
+				gap: 0.25rem;
+				font-weight: bold;
+
+				.instance {
+					transition: var(--transition);
+					box-shadow: var(--edge-highlight);
+					border-radius: 999px;
+					background-color: var(--fg-muted-1);
+					padding: 0.375rem 0.75rem;
+					color: var(--fg-muted-5);
+					font-size: var(--font-size-small);
+					line-height: 1;
+					text-decoration: none;
+
+					&:hover {
+						background-color: var(--fg-muted-5);
+						color: var(--fg-contrast);
+						text-decoration: none;
+					}
+
+					&:active {
+						transform: var(--active);
+					}
+
+					&.op {
+						background-color: var(--accent-color-alpha);
+						padding-inline-start: 0.4375rem;
+						color: var(--accent-color);
+
+						&:hover {
+							background-color: var(--accent-color);
+							color: var(--contrast-color);
+
+							&::before {
+								background-color: var(--contrast-color);
+							}
+						}
+
+						&::before {
+							-webkit-mask-image: var(--icon-verified);
+							display: inline-block;
+							vertical-align: -0.1875rem;
+							mask-image: var(--icon-verified);
+							mask-size: cover;
+							transition: var(--transition);
+							margin-inline-end: 0.25rem;
+							background-color: var(--accent-color);
+							width: 1rem;
+							height: 1rem;
+							content: "";
+						}
+
+						:root[dir*="rtl"] & {
+							padding: 0.375rem 0.5rem 0.375rem 0.75rem;
+						}
+					}
+				}
+			}
+
+			.mention {
+				display: inline-block;
+				transition: var(--transition);
+				box-shadow: var(--edge-highlight);
+				border-radius: var(--rounded-corner-small);
+				background-color: var(--accent-color-alpha);
+				padding: 0.25rem 0.375rem;
+				line-height: 1;
+				text-decoration: none;
+
+				&:hover {
+					background-color: var(--accent-color);
+					color: var(--contrast-color);
+				}
+
+				&:active {
+					transform: var(--active);
+				}
+
+				&.hashtag {
+					background-color: var(--fg-muted-1);
+					color: var(--fg-muted-5);
+
+					&:hover {
+						background-color: var(--fg-muted-5);
+						color: var(--fg-contrast);
+					}
+				}
+			}
+
+			time {
+				grid-area: time;
+				margin-block-start: 0.5rem;
+				font-size: var(--font-size-small);
+
+				a {
+					color: var(--fg-muted-5);
+
+					&:after {
+						background-color: var(--fg-muted-5);
+					}
+				}
+			}
+
+			details {
+				&[open] {
+					border-radius: var(--rounded-corner-small);
+					background-image: linear-gradient(
+							to right,
+							transparent,
+							transparent 0.5rem,
+							var(--fg-muted-1) 0.5rem,
+							var(--fg-muted-1) calc(100% - 0.5rem),
+							transparent calc(100% - 0.5rem),
+							transparent
+						),
+						linear-gradient(
+							to right,
+							transparent,
+							transparent 0.5rem,
+							var(--bg-color) 0.5rem,
+							var(--bg-color) calc(100% - 0.5rem),
+							transparent calc(100% - 0.5rem),
+							transparent
+						),
+						repeating-linear-gradient(
+							45deg,
+							var(--contrast-color),
+							var(--contrast-color) 0.25rem,
+							var(--accent-color) 0.25rem,
+							var(--accent-color) 0.5rem
+						);
+
+					summary {
+						border-radius: 0;
+						background-image: none;
+					}
+				}
+
+				summary {
+					border-radius: var(--rounded-corner-small);
+					background-image: linear-gradient(
+							to right,
+							transparent,
+							transparent 0.5rem,
+							var(--fg-muted-1) 0.5rem,
+							var(--fg-muted-1) calc(100% - 0.5rem),
+							transparent calc(100% - 0.5rem),
+							transparent
+						),
+						linear-gradient(
+							to right,
+							transparent,
+							transparent 0.5rem,
+							var(--bg-color) 0.5rem,
+							var(--bg-color) calc(100% - 0.5rem),
+							transparent calc(100% - 0.5rem),
+							transparent
+						),
+						repeating-linear-gradient(
+							45deg,
+							var(--contrast-color),
+							var(--contrast-color) 0.25rem,
+							var(--accent-color) 0.25rem,
+							var(--accent-color) 0.5rem
+						);
+				}
+			}
+
+			main {
+				grid-area: post;
+				margin: 1rem 0 0;
+				width: 100%;
+
+				:first-child {
+					margin-block-start: 0;
+				}
+
+				:last-child {
+					margin-block-end: 0;
+				}
+			}
+
+			.attachments {
+				display: grid;
+				grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
+				grid-area: media;
+				gap: 0.5rem;
+				margin-block-start: 1rem;
+
+				img,
+				video {
+					margin: 0;
+				}
+			}
+
+			.card {
+				grid-area: card;
+				transition: var(--transition);
+				margin-block-start: 1rem;
+				width: min(calc(var(--container-width) / 2), 100%);
+				font-weight: normal;
+				text-decoration: none;
+
+				&:hover:not(:active) {
+					img {
+						transform: var(--hover);
+						box-shadow: var(--edge-highlight), var(--shadow-raised);
+						border-radius: var(--rounded-corner-small);
+					}
+
+					figcaption {
+						border-radius: var(--rounded-corner);
+						background-color: var(--fg-muted-2);
+					}
+				}
+
+				&:active {
+					transform: var(--active);
+				}
+
+				figure {
+					display: flex;
+					flex-direction: column;
+					gap: 0.25rem;
+					margin: 0;
+
+					img {
+						margin: 0;
+						border-radius: var(--rounded-corner)
+							var(--rounded-corner) var(--rounded-corner-small)
+							var(--rounded-corner-small);
+						aspect-ratio: 16 / 9;
+						object-fit: cover;
+
+						& + figcaption {
+							border-radius: var(--rounded-corner-small)
+								var(--rounded-corner-small)
+								var(--rounded-corner) var(--rounded-corner);
+						}
+					}
+
+					figcaption {
+						display: flex;
+						flex-direction: column;
+						gap: 0.25rem;
+						transition: var(--transition);
+						box-shadow: var(--edge-highlight);
+						border-radius: var(--rounded-corner);
+						background-color: var(--fg-muted-1);
+						padding: 1rem;
+						color: var(--fg-color);
+						font-size: var(--font-size-medium);
+						text-align: start;
+
+						p {
+							margin: 0;
+							color: var(--fg-muted-5);
+							font-size: var(--font-size-small);
+						}
+					}
+				}
+			}
+
+			footer {
+				display: flex;
+				grid-area: interactions;
+				gap: 0.25rem;
+				margin-block-start: 1rem;
+
+				.boosts,
+				.faves {
+					transition: var(--transition);
+					border-radius: 999px;
+					background-color: transparent;
+					padding: 0.5rem 0.75rem;
+					padding-inline-start: 0.625rem;
+					line-height: 1;
+					font-variant-numeric: tabular-nums;
+					text-decoration: none;
+
+					.icon {
+						vertical-align: -0.125em;
+						transition: var(--transition-longer);
+						margin-inline-end: 0.25rem;
+					}
+
+					&:hover {
+						box-shadow: var(--edge-highlight);
+						text-decoration: none;
+					}
+
+					&:active {
+						transform: var(--active);
+					}
+				}
+
+				.boosts {
+					color: var(--purple-fg);
+
+					&:hover {
+						background-color: var(--purple-bg);
+
+						.icon {
+							transform: rotate(180deg);
+
+							:root[dir*="rtl"] & {
+								transform: scaleX(-1) rotate(180deg);
+							}
+						}
+					}
+
+					.icon {
+						-webkit-mask-image: var(--icon-boosts);
+						mask-image: var(--icon-boosts);
+
+						:root[dir*="rtl"] & {
+							transform: scaleX(-1);
+						}
+					}
+				}
+
+				.faves {
+					color: var(--yellow-fg);
+
+					&:hover {
+						background-color: var(--yellow-bg);
+
+						.icon {
+							transform: rotate(72deg);
+
+							:root[dir*="rtl"] & {
+								transform: rotate(-72deg);
+							}
+						}
+					}
+
+					.icon {
+						-webkit-mask-image: var(--icon-star);
+						mask-image: var(--icon-star);
+					}
+				}
+			}
+		}
+	}
+}

sass/_crt.scss

@@ -0,0 +1,104 @@
+.crt {
+	margin: 1rem 0 1rem;
+	box-shadow: var(--edge-highlight), var(--shadow-glow);
+	border-radius: var(--rounded-corner);
+	background-image: radial-gradient(
+		color-mix(in srgb, var(--accent-color) 30%, black),
+		color-mix(in srgb, var(--accent-color) 10%, black) 80%,
+		color-mix(in srgb, var(--accent-color) 5%, black)
+	);
+
+	pre {
+		--text-shadow-1: hsl(from var(--accent-color) h s l / 0.5);
+		--text-shadow-2: hsl(from var(--accent-color) h calc(s * 2) l);
+		animation: flicker 0.25s alternate infinite;
+		margin: 0;
+		box-shadow: none;
+		background-color: transparent !important;
+		padding: 1rem 1rem;
+		color: var(--accent-color) !important;
+		text-shadow:
+			var(--text-shadow-1) 0 0 0.25rem,
+			var(--text-shadow-2) 0 0 0.75rem;
+
+		@keyframes flicker {
+			25% {
+				opacity: 0.95;
+			}
+
+			50% {
+				opacity: 0.85;
+			}
+
+			75% {
+				opacity: 1;
+			}
+
+			to {
+				opacity: 0.9;
+			}
+		}
+	}
+}
+
+.scanlines {
+	position: relative;
+	overflow: hidden;
+
+	&::before {
+		display: block;
+		position: absolute;
+		z-index: 1;
+		animation: scanlines 0.1s linear infinite;
+		inset: 0;
+		background-image: repeating-linear-gradient(
+			to bottom,
+			rgb(0 0 0 / 0.25),
+			rgb(0 0 0 / 0.25) 0.125rem,
+			transparent 0.125rem,
+			transparent 0.25rem
+		);
+		pointer-events: none;
+		content: "";
+
+		@keyframes scanlines {
+			to {
+				background-position-y: 0.25rem;
+			}
+		}
+	}
+
+	&::after {
+		--scanline-color: rgb(from var(--accent-color) r g b / 0.05);
+		display: block;
+		position: absolute;
+		animation: scanline 5s linear infinite;
+		inset: 0;
+		background-image: linear-gradient(
+			to bottom,
+			transparent,
+			var(--scanline-color) 16rem
+		);
+		background-size: auto 16rem;
+		background-repeat: no-repeat;
+		background-position-y: -16rem;
+		pointer-events: none;
+		content: "";
+
+		@keyframes scanline {
+			to {
+				background-position-y: calc(100% + 16rem);
+			}
+		}
+	}
+}
+
+.cursor {
+	animation: cursor-blink 1s infinite;
+
+	@keyframes cursor-blink {
+		50% {
+			opacity: 0;
+		}
+	}
+}

sass/_emoji.scss

@@ -0,0 +1,16 @@
+.emoji {
+	display: inline-block;
+	vertical-align: bottom;
+	transition: var(--transition);
+	cursor: zoom-in;
+	margin: 0;
+	box-shadow: none;
+	border-radius: 0;
+	background-color: transparent;
+	width: 1.5em;
+	height: 1.5em;
+
+	&:hover {
+		transform: scale(2);
+	}
+}

sass/_external.scss

@@ -0,0 +1,16 @@
+a.external::after {
+	-webkit-mask-image: var(--icon-external);
+	display: inline-block;
+	opacity: var(--dim-opacity);
+	mask-image: var(--icon-external);
+	mask-size: cover;
+	margin-inline-start: 0.25rem;
+	background-color: currentColor;
+	width: max(0.75rem, 0.75em);
+	height: max(0.75rem, 0.75em);
+	content: "";
+
+	:root[dir*="rtl"] & {
+		transform: scaleX(-1);
+	}
+}

sass/_feed.scss

@@ -0,0 +1,12 @@
+h1 a:has(.icon.feed) {
+	color: currentColor;
+}
+
+h1 .icon.feed {
+	-webkit-mask-image: var(--icon-feed);
+	vertical-align: -0.375rem;
+	mask-image: var(--icon-feed);
+	margin-inline-start: 0.5rem;
+	width: 1em;
+	height: 1em;
+}

sass/_footer.scss

@@ -0,0 +1,137 @@
+#site-footer {
+	grid-area: footer;
+	margin-block-end: 2rem;
+	text-align: center;
+
+	nav {
+		display: inline-block;
+		margin: 0 auto 1rem;
+		box-shadow: var(--edge-highlight);
+		border-radius: 1.375rem;
+		background-color: var(--fg-muted-1);
+		padding: 0.25rem;
+		max-width: 90%;
+
+		ul {
+			display: flex;
+			flex-wrap: wrap;
+			justify-content: center;
+			align-items: center;
+			gap: 0.25rem;
+			margin: 0;
+			padding: 0;
+		}
+
+		li {
+			display: flex;
+			margin: 0;
+			padding: 0;
+			list-style: none;
+
+			@media only screen and (max-width: 480px) {
+				flex: 0 0 100%;
+			}
+		}
+
+		a {
+			flex: 1;
+			transition: var(--transition);
+			border-radius: 999px;
+			padding: 0.375rem 0.75rem;
+			color: var(--fg-muted-4);
+			text-align: center;
+			text-decoration: none;
+
+			&.active {
+				box-shadow: var(--edge-highlight);
+				background-color: var(--accent-color-alpha);
+				color: var(--accent-color);
+
+				&:hover {
+					background-color: var(--accent-color);
+					color: var(--contrast-color);
+				}
+			}
+
+			&:hover {
+				box-shadow: var(--edge-highlight);
+				background-color: var(--fg-muted-1);
+				color: var(--fg-muted-5);
+			}
+
+			&:active {
+				transform: var(--active);
+			}
+		}
+	}
+
+	#socials {
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: center;
+		gap: 0.5rem;
+		margin: 1rem auto 0;
+		padding: 0;
+
+		li {
+			margin: 0;
+			padding: 0;
+			list-style: none;
+		}
+
+		a {
+			display: block;
+			transition: var(--transition);
+			border-radius: 999px;
+			padding: 0.5rem;
+			color: var(--fg-muted-4);
+			line-height: 0;
+
+			&:hover {
+				box-shadow: var(--edge-highlight);
+				background-color: var(--fg-muted-1);
+				color: var(--fg-muted-5);
+			}
+
+			&:active {
+				transform: var(--active);
+			}
+
+			.icon {
+				-webkit-mask-image: var(--icon);
+				mask-image: var(--icon);
+				transition: var(--transition);
+				width: 1.5rem;
+				height: 1.5rem;
+			}
+
+			span {
+				display: none;
+			}
+		}
+	}
+
+	p {
+		margin: 1rem auto;
+	}
+
+	.link {
+		display: inline-block;
+		transition: var(--transition);
+		box-shadow: var(--edge-highlight);
+		border-radius: var(--rounded-corner-small);
+		background-color: var(--accent-color-alpha);
+		padding: 0.25rem 0.375rem;
+		line-height: 1;
+		text-decoration: none;
+
+		&:hover {
+			background-color: var(--accent-color);
+			color: var(--contrast-color);
+		}
+
+		&:active {
+			transform: var(--active);
+		}
+	}
+}

sass/_footnotes-list.scss

@@ -0,0 +1,6 @@
+.footnotes-list {
+	p {
+		margin-block-start: 0;
+		margin-block-end: 0;
+	}
+}

sass/_general.scss

@@ -0,0 +1,140 @@
+* {
+	box-sizing: border-box;
+}
+
+:root {
+	scroll-behavior: smooth;
+	scrollbar-color: var(--accent-color) transparent;
+	accent-color: var(--accent-color);
+	font-size: 16px;
+}
+
+body {
+	text-wrap: pretty;
+	display: grid; // Put footer at the bottom for short pages, such as the 404
+	grid-template-rows: auto minmax(auto, 1fr) auto; // Header, stuff, footer
+	grid-template-areas:
+		"nav"
+		"main"
+		"footer";
+	margin: 0;
+	background-color: var(--bg-color);
+	min-height: 100vh;
+	color: var(--fg-color);
+	line-height: 1.5;
+	font-family: var(--font-system-ui), var(--font-emoji);
+	overflow-wrap: break-word;
+
+	&:has(#sidebar) {
+		grid-template-columns: 1fr min(var(--container-width), 90%) 1fr;
+		grid-template-areas:
+			"nav nav nav"
+			"sidebar main ."
+			"footer footer footer";
+		@media only screen and (max-width: 1200px) {
+			grid-template-areas:
+			"nav nav nav"
+			". sidebar ."
+			". main ."
+			"footer footer footer";
+		}
+	}
+}
+
+// Style text selection to use accent color
+::selection {
+	background-color: var(--accent-color);
+	color: var(--contrast-color);
+}
+
+// Make focused anchor not get covered by nav,
+// and flash it with accent color when jumping to it
+:target:not(#main-content) {
+	transition:
+		all var(--transition),
+		scroll-margin-block-start 0s;
+	scroll-margin-block-start: 15vh;
+	color: var(--accent-color);
+	text-shadow: var(--text-shadow-glow);
+}
+
+// Custom focus indicator
+:focus-visible {
+	animation: focus-in var(--transition);
+	outline: 0.125rem solid var(--accent-color);
+	outline-offset: 0.125rem;
+}
+
+// Fallback for older browsers
+@supports not selector(:focus-visible) {
+	:focus {
+		animation: focus-in var(--transition);
+		outline: 0.125rem solid var(--accent-color);
+		outline-offset: 0.125rem;
+	}
+}
+
+@keyframes focus-in {
+	from {
+		outline: 0.5rem solid transparent;
+		outline-offset: 0.25rem;
+	}
+}
+
+main {
+	margin: 4.25rem auto 4rem;
+	width: min(var(--container-width), 90%);
+}
+
+#sidebar {
+	display: flex;
+	position: sticky;
+	top: 0;
+	grid-area: sidebar;
+	opacity: 0.2;
+	transition: var(--transition);
+	height: 100vh;
+
+	&:hover {
+		opacity: 1;
+	}
+
+	@media only screen and (max-width: 1200px) {
+		position: static;
+		opacity: 1;
+		margin-block-start: 4.25rem;
+		margin-block-end: -4.25rem;
+		padding: 0;
+		height: auto;
+	}
+
+	& > div {
+		--mask: linear-gradient(to bottom,
+				transparent,
+				black 1rem,
+				black calc(100% - 1rem),
+				transparent);
+		-webkit-mask-image: var(--mask);
+		mask-image: var(--mask);
+		padding: 1rem;
+		overflow: auto;
+	}
+
+	& + main {
+		grid-area: main;
+		margin: 0;
+		margin-block-start: 4.25rem;
+		margin-block-end: 4rem;
+		width: auto;
+	}
+}
+
+@media (prefers-reduced-motion) {
+
+	*,
+	*::before,
+	*::after {
+		animation-duration: 0s !important;
+		transition-duration: 0s !important;
+	}
+}

sass/_hidden.scss

@@ -0,0 +1,4 @@
+.hidden {
+	display: none;
+	visibility: hidden;
+}

sass/_icon.scss

@@ -0,0 +1,11 @@
+i.icon {
+	display: inline-block;
+	mask-size: cover;
+	background-color: currentColor;
+	width: 1rem;
+	height: 1rem;
+	font-style: normal;
+	font-variant: normal;
+	line-height: 0;
+	text-rendering: auto;
+}

sass/_iframe.scss

@@ -0,0 +1,30 @@
+iframe {
+	display: block;
+	margin: 1rem auto;
+	box-shadow: var(--edge-highlight), var(--shadow);
+	border: none;
+	border-radius: var(--rounded-corner);
+	background-color: var(--fg-muted-1);
+	width: 100%;
+	max-width: 100%;
+
+	&.mastodon-embed {
+		aspect-ratio: 3 / 4;
+		width: min(calc(var(--container-width) / 2), 100%);
+	}
+
+	&.vimeo-embed,
+	&.youtube-embed {
+		aspect-ratio: 16 / 9;
+	}
+
+	&:fullscreen {
+		box-shadow: none;
+		border-radius: 0;
+	}
+
+	&:-webkit-full-screen {
+		box-shadow: none;
+		border-radius: 0;
+	}
+}

sass/_input.scss

@@ -0,0 +1,203 @@
+input[type="radio"],
+input[type="checkbox"],
+input[type="color"] {
+	position: relative;
+	appearance: none;
+	transition: var(--transition);
+	cursor: pointer;
+	border: 0.15rem solid var(--fg-muted-2);
+	background-color: var(--fg-muted-1);
+	width: 1rem;
+	height: 1rem;
+
+	&:hover {
+		background-color: var(--fg-muted-2);
+	}
+
+	&:disabled {
+		opacity: var(--disabled-opacity);
+		cursor: not-allowed;
+
+		&:hover {
+			background-color: var(--fg-muted-1);
+
+			&:checked {
+				background-color: var(--accent-color);
+			}
+		}
+	}
+}
+
+input[type="radio"],
+input[type="checkbox"] {
+	&::before {
+		display: block;
+		position: absolute;
+		transform: scale(0.5);
+		opacity: 0;
+		transition: var(--transition);
+		background-color: var(--contrast-color);
+		content: "";
+	}
+
+	&:checked {
+		border: 0.15rem solid transparent;
+		background-color: var(--accent-color);
+
+		&::before {
+			transform: scale(1);
+			opacity: 1;
+		}
+	}
+}
+
+input[type="radio"] {
+	vertical-align: -0.1875em;
+	border-radius: 50%;
+
+	&::before {
+		inset-block-start: 0.125rem;
+		inset-inline-start: 0.125rem;
+		border-radius: 50%;
+		width: 0.5rem;
+		height: 0.5rem;
+	}
+}
+
+input[type="checkbox"] {
+	vertical-align: -0.1875em;
+	border-radius: calc(var(--rounded-corner-small) / 2);
+
+	&::before {
+		-webkit-mask-image: var(--icon-checkmark);
+		transform-origin: bottom left;
+		mask-image: var(--icon-checkmark);
+		mask-size: cover;
+		inset-block-start: -0.125rem;
+		inset-inline-start: -0.125rem;
+		width: 1rem;
+		height: 1rem;
+	}
+
+	&.switch {
+		vertical-align: -0.375rem;
+		box-shadow: var(--edge-highlight);
+		border: none;
+		border-radius: 999px;
+		width: 2.5rem;
+		height: 1.5rem;
+
+		&.big {
+			vertical-align: -0.625rem;
+			width: 3rem;
+			height: 2rem;
+
+			&::before {
+				width: 1.5rem;
+				height: 1.5rem;
+			}
+		}
+
+		&::before {
+			transform: none;
+			transform-origin: center;
+			opacity: 1;
+			mask-image: none;
+			transition: var(--transition);
+			inset-block-start: 0.25rem;
+			inset-inline-start: 0.25rem;
+			box-shadow: var(--shadow);
+			border-radius: 50%;
+			background-color: white;
+			width: 1rem;
+			height: 1rem;
+		}
+
+		&:checked {
+			background-color: var(--accent-color);
+
+			&::before {
+				transform: translateX(1rem);
+				background-color: var(--contrast-color);
+
+				:root[dir*="rtl"] & {
+					transform: translateX(-1rem);
+				}
+			}
+		}
+
+		&:disabled {
+			&::before {
+				box-shadow: none;
+			}
+		}
+	}
+}
+
+input[type="color"] {
+	vertical-align: -0.375em;
+	box-shadow: var(--edge-highlight);
+	border: none;
+	border-radius: var(--rounded-corner-small);
+	padding: 0.25rem;
+	width: 3rem;
+	height: 2rem;
+
+	&::-moz-color-swatch {
+		border: none;
+		border-radius: calc(var(--rounded-corner-small) - 0.25rem);
+	}
+
+	&::-webkit-color-swatch-wrapper {
+		padding: 0;
+	}
+
+	&::-webkit-color-swatch {
+		border-radius: calc(var(--rounded-corner-small) - 0.25rem);
+	}
+}
+
+input[type="range"] {
+	appearance: none;
+	transition: var(--transition);
+	cursor: pointer;
+	box-shadow: var(--edge-highlight);
+	border-radius: 999px;
+	background: var(--accent-color);
+	width: 100%;
+	height: 0.5rem;
+
+	&::-webkit-slider-thumb {
+		appearance: none;
+		filter: brightness(0.9);
+		transition: var(--transition);
+		cursor: grab;
+		box-shadow: var(--shadow);
+		border-radius: 999px;
+		background-color: white;
+		width: 1.5rem;
+		height: 1.5rem;
+
+		&:active {
+			transform: var(--active);
+			cursor: grabbing;
+		}
+	}
+
+	&::-moz-range-thumb {
+		appearance: none;
+		transition: var(--transition);
+		cursor: grab;
+		box-shadow: var(--shadow);
+		border: none;
+		border-radius: 999px;
+		background-color: white;
+		width: 1.5rem;
+		height: 1.5rem;
+
+		&:active {
+			transform: var(--active);
+			cursor: grabbing;
+		}
+	}
+}

sass/_media.scss

@@ -0,0 +1,164 @@
+img,
+video {
+	display: block;
+	margin: 1rem auto;
+	box-shadow: var(--edge-highlight), var(--shadow);
+	border-radius: var(--rounded-corner);
+	background-color: var(--fg-muted-1);
+	max-width: 100%;
+
+	&.full,
+	&[src*="#full"] {
+		width: 100%;
+	}
+
+	&.full-bleed,
+	&[src*="#full-bleed"] {
+		margin-inline-start: calc((-100vw + 100%) / 2);
+		margin-inline-end: calc((-100vw + 100%) / 2);
+		width: 100vw;
+		max-width: 100vw;
+	}
+
+	&.start,
+	&.end,
+	&[src*="#start"],
+	&[src*="#end"] {
+		margin: 0;
+		width: 30%;
+
+		@media only screen and (max-width: 720px) {
+			float: none;
+			margin-inline-start: 0;
+			margin-inline-end: 0;
+			margin-block-start: 1rem;
+			margin-block-end: 1rem;
+			width: 100%;
+		}
+	}
+
+	&.start,
+	&[src*="#start"] {
+		float: inline-start;
+		transform-origin: left;
+		margin-inline-end: 1rem;
+
+		:root[dir*="rtl"] & {
+			transform-origin: right;
+		}
+	}
+
+	&.end,
+	&[src*="#end"] {
+		float: inline-end;
+		transform-origin: right;
+		margin-inline-start: 1rem;
+
+		:root[dir*="rtl"] & {
+			transform-origin: left;
+		}
+	}
+
+	&.pixels,
+	&[src*="#pixels"] {
+		image-rendering: pixelated;
+	}
+
+	&.transparent,
+	&.full-bleed,
+	&[src*="#transparent"],
+	&[src*="#full-bleed"] {
+		box-shadow: none;
+		border-radius: 0;
+		background-color: transparent;
+	}
+
+	&.spoiler,
+	&[src*="#spoiler"] {
+		opacity: var(--dim-opacity);
+		clip-path: inset(0 0 0 0 round var(--rounded-corner));
+		filter: blur(1rem);
+
+		&:hover,
+		&:active {
+			opacity: 1;
+			clip-path: inset(
+				-0.75rem -0.75rem -0.75rem -0.75rem round
+					var(--rounded-corner-small)
+			);
+			filter: none;
+		}
+
+		&.solid,
+		&[src*="#solid"] {
+			clip-path: none;
+			filter: brightness(0) contrast(0.5);
+			box-shadow: none;
+
+			&:hover,
+			&:active {
+				filter: none;
+			}
+		}
+	}
+}
+
+img {
+	transition: var(--transition-longer);
+
+	&:not(
+			.no-hover,
+			.full-bleed,
+			[src*="#no-hover"],
+			[src*="#full-bleed"],
+			.emoji
+		) {
+		cursor: zoom-in;
+
+		&:hover {
+			position: relative;
+			transform: var(--hover);
+			z-index: 1;
+			box-shadow: var(--edge-highlight), var(--shadow-raised);
+			border-radius: var(--rounded-corner-small);
+		}
+
+		&.start,
+		&.end,
+		&[src*="#start"],
+		&[src*="#end"] {
+			&:hover {
+				transform: scale(2);
+			}
+
+			@media only screen and (max-width: 720px) {
+				transform-origin: center;
+
+				&:hover {
+					transform: var(--hover);
+				}
+			}
+		}
+
+		&.transparent,
+		&[src*="#transparent"] {
+			&:hover {
+				box-shadow: none;
+			}
+		}
+	}
+}
+
+a img:not(.no-hover, .full-bleed, [src*="#no-hover"], [src*="#full-bleed"]) {
+	cursor: pointer;
+}
+
+video:fullscreen {
+	box-shadow: none;
+	border-radius: 0;
+}
+
+video:-webkit-full-screen {
+	box-shadow: none;
+	border-radius: 0;
+}

sass/_nav.scss

@@ -0,0 +1,478 @@
+#handle {
+	position: fixed;
+	z-index: 999;
+	transition: var(--transition);
+	margin: 0 auto;
+	inset-block-start: 0;
+	inset-inline-end: 0;
+	inset-inline-start: 0;
+	width: min(var(--container-width), 90%);
+	height: 4.25rem;
+
+	&::before {
+		position: absolute;
+		transition: var(--transition);
+		margin: 0 auto;
+		inset-block-start: 0.5rem;
+		inset-inline-end: 0;
+		inset-inline-start: 0;
+		box-shadow: var(--edge-highlight);
+		border-radius: 999px;
+		background-color: var(--accent-color);
+		width: min(calc(var(--container-width) / 4), 100%);
+		height: 0.5rem;
+		content: "";
+	}
+
+	&:hover::before,
+	&:has(+ #site-nav:hover)::before,
+	&:has(+ #site-nav *:focus-visible, + #site-nav *:focus)::before {
+		transform: translateY(-1rem) scale(0.5);
+		opacity: 0;
+	}
+
+	&:hover + #site-nav,
+	& + #site-nav:hover,
+	& + #site-nav:has(*:focus-visible, *:focus) {
+		transform: none;
+		opacity: 1;
+		pointer-events: auto;
+
+		&::before {
+			-webkit-backdrop-filter: var(--blur);
+			backdrop-filter: var(--blur);
+		}
+	}
+
+	& + #site-nav {
+		position: fixed;
+		transform: translateY(-1rem) scale(0.5);
+		transform-origin: top;
+		opacity: 0;
+		transition: var(--transition);
+		margin: 0 auto;
+		width: max-content;
+		pointer-events: none;
+
+		&::before {
+			-webkit-backdrop-filter: saturate(1) blur(0);
+			backdrop-filter: saturate(1) blur(0);
+			transition: var(--transition);
+		}
+	}
+}
+
+#site-nav {
+	position: sticky;
+	grid-area: nav;
+	z-index: 999;
+	margin: 1rem auto 0;
+	inset-block-start: 1rem;
+	inset-inline-end: 0;
+	inset-inline-start: 0;
+	border-radius: 1.625rem;
+	max-width: min(var(--container-width), 90%);
+
+	@media only screen and (max-width: 480px) {
+		position: relative;
+		margin: 0 auto;
+	}
+
+	&::before {
+		-webkit-backdrop-filter: var(--blur);
+		position: absolute;
+		z-index: -1;
+		backdrop-filter: var(--blur);
+		inset: 0;
+		box-shadow: var(--edge-highlight), var(--shadow-glass);
+		border-radius: 1.625rem;
+		background-color: var(--glass-bg);
+		content: "";
+	}
+
+	nav {
+		padding: 0.5rem;
+
+		& > a {
+			-webkit-backdrop-filter: var(--blur);
+			position: absolute;
+			left: 50%;
+			transform: translateX(-50%);
+			opacity: 0;
+			z-index: 999;
+			backdrop-filter: var(--blur);
+			transition: var(--transition);
+			inset-block-start: 0;
+			box-shadow: var(--edge-highlight), var(--shadow-glass);
+			border-radius: 999px;
+			background-color: var(--glass-bg);
+			padding: 0.625rem 0.75rem;
+			pointer-events: none;
+			line-height: 1;
+			text-decoration: none;
+
+			&:focus {
+				opacity: 1;
+				inset-block-start: calc(100% + 0.5rem);
+			}
+		}
+
+		ul {
+			display: flex;
+			flex-wrap: wrap;
+			justify-content: center;
+			align-items: center;
+			gap: 0.25rem;
+			margin: 0;
+			padding: 0;
+		}
+
+		li {
+			display: flex;
+			margin: 0;
+			padding: 0;
+			list-style: none;
+
+			@media only screen and (max-width: 480px) {
+				&:not(:has(.circle)) {
+					flex: 0 0 100%;
+				}
+			}
+		}
+
+		a,
+		summary {
+			flex: 1;
+			transition: var(--transition);
+			box-shadow: none;
+			border-radius: 999px;
+			background-color: transparent;
+			padding: 0.625rem 0.75rem;
+			font-weight: bold;
+			line-height: 1;
+			list-style: none;
+			text-align: center;
+			text-decoration: none;
+		}
+
+		a.active {
+			box-shadow: var(--edge-highlight);
+			background-color: var(--accent-color-alpha);
+			color: var(--accent-color);
+
+			&:hover {
+				background-color: var(--accent-color);
+				color: var(--contrast-color);
+			}
+		}
+
+		#home a {
+			color: var(--fg-muted-5);
+			font-weight: 800;
+
+			&:hover {
+				color: var(--fg-color);
+			}
+
+			&.active {
+				color: var(--accent-color);
+
+				&:hover {
+					color: var(--contrast-color);
+				}
+			}
+
+			.icon {
+				-webkit-mask-image: var(--icon-home);
+				vertical-align: -0.125em;
+				mask-image: var(--icon-home);
+				transition: var(--transition);
+				margin-inline-end: 0.25rem;
+			}
+		}
+
+		.divider {
+			align-self: stretch;
+			margin: 0 0.25rem;
+			background-color: var(--fg-muted-2);
+			width: max(1px, 0.0625em);
+
+			@media only screen and (max-width: 480px) {
+				display: none;
+			}
+		}
+
+		a,
+		#search button,
+		#language-switcher summary,
+		#theme-switcher summary,
+		#theme-switcher button,
+		summary {
+			color: var(--fg-muted-4);
+
+			&:hover {
+				box-shadow: var(--edge-highlight);
+				background-color: var(--fg-muted-1);
+				color: var(--fg-muted-5);
+			}
+
+			&:active {
+				transform: var(--active);
+			}
+		}
+
+		.circle {
+			padding: 0.625rem 0.625rem;
+			line-height: 0;
+
+			&::before {
+				display: none;
+			}
+
+			.icon {
+				vertical-align: -0.125em;
+				transition: var(--transition);
+			}
+		}
+
+		button {
+			appearance: none;
+			transition: var(--transition);
+			cursor: pointer;
+			border: none;
+			border-radius: 999px;
+			background-color: transparent;
+			font-size: var(--font-size-medium);
+		}
+
+		details {
+			display: flex;
+			position: relative;
+			flex: 1;
+			box-shadow: none;
+			border-radius: 0;
+			background-color: transparent;
+			padding: 0;
+
+			&[open] ul {
+				animation: dropdown-open var(--transition);
+
+				@keyframes dropdown-open {
+					from {
+						transform: scale(0.5) translate(-50%, -1rem);
+						opacity: 0;
+					}
+				}
+			}
+
+			ul {
+				-webkit-backdrop-filter: var(--blur);
+				position: absolute;
+				left: 50%;
+				flex-direction: column;
+				transform: translateX(-50%);
+				transform-origin: top left;
+				z-index: 1;
+				backdrop-filter: var(--blur);
+				inset-block-start: 3.25rem;
+				box-shadow: var(--edge-highlight), var(--shadow-glass);
+				border-radius: calc(var(--rounded-corner) + 0.25rem);
+				background-color: var(--glass-bg);
+				padding: 0.25rem;
+
+				li {
+					width: 100%;
+					white-space: nowrap;
+
+					a {
+						border-radius: var(--rounded-corner);
+						text-align: start;
+					}
+				}
+			}
+
+			@media only screen and (max-width: 480px) {
+				&:has(summary:not(.circle)) ul {
+					inset-block-start: 2.75rem;
+				}
+			}
+		}
+
+		#search .icon {
+			-webkit-mask-image: var(--icon-search);
+			mask-image: var(--icon-search);
+
+			:root[dir*="rtl"] & {
+				transform: scaleX(-1);
+			}
+		}
+
+		#feed .icon {
+			-webkit-mask-image: var(--icon-feed);
+			mask-image: var(--icon-feed);
+
+			:root[dir*="rtl"] & {
+				transform: scaleX(-1);
+			}
+		}
+
+		#repo .icon {
+			-webkit-mask-image: var(--icon-git);
+			mask-image: var(--icon-git);
+		}
+
+		#language-switcher .icon {
+			-webkit-mask-image: var(--icon-languages);
+			mask-image: var(--icon-languages);
+		}
+
+		#theme-switcher {
+			ul {
+				flex-direction: row;
+				flex-wrap: nowrap;
+				border-radius: 999px;
+			}
+
+			.active {
+				box-shadow: var(--edge-highlight);
+				background-color: var(--accent-color-alpha);
+				color: var(--accent-color);
+
+				&:hover {
+					background-color: var(--accent-color);
+					color: var(--contrast-color);
+				}
+			}
+
+			#theme-system .icon,
+			.icon {
+				-webkit-mask-image: var(--icon-theme-system);
+				mask-image: var(--icon-theme-system);
+
+				:root[dir*="rtl"] & {
+					transform: scaleX(-1);
+				}
+			}
+
+			#theme-light .icon,
+			.icon.light {
+				-webkit-mask-image: var(--icon-theme-light);
+				mask-image: var(--icon-theme-light);
+			}
+
+			#theme-dark .icon,
+			.icon.dark {
+				-webkit-mask-image: var(--icon-theme-dark);
+				mask-image: var(--icon-theme-dark);
+
+				:root[dir*="rtl"] & {
+					transform: scaleX(-1);
+				}
+			}
+		}
+	}
+
+	#search-container {
+		transform: scale(0.5) translateY(-2.75rem);
+		opacity: 0;
+		transition: var(--transition);
+		padding: 0 0.5rem 0;
+		height: 0;
+		pointer-events: none;
+
+		&.active {
+			transform: none;
+			opacity: 1;
+			padding: 0 0.5rem 0.5rem;
+			height: 2.75rem;
+			pointer-events: all;
+		}
+	}
+
+	#search-bar {
+		box-shadow: var(--edge-highlight);
+		border: none;
+		border-radius: 999px;
+		background: var(--fg-muted-1);
+		padding: 0 0.75rem;
+		width: 100%;
+		height: 2.25rem;
+		color: inherit;
+		font-size: var(--font-size-medium);
+
+		&::placeholder {
+			opacity: 1;
+			color: var(--fg-muted-4);
+		}
+	}
+
+	#search-results-container {
+		-webkit-backdrop-filter: var(--blur);
+		display: flex;
+		position: absolute;
+		backdrop-filter: var(--blur);
+		inset-block-start: calc(100% + 0.5rem);
+		inset-inline-start: 0;
+		box-shadow: var(--edge-highlight), var(--shadow-glass);
+		border-radius: calc(var(--rounded-corner) + 0.5rem);
+		background-color: var(--glass-bg);
+		width: 100%;
+		max-height: 50vh;
+	}
+
+	#search-results {
+		--mask: linear-gradient(to bottom,
+				transparent,
+				black 1rem,
+				black calc(100% - 1rem),
+				transparent);
+		-webkit-mask-image: var(--mask);
+		display: none;
+		flex: 1;
+		flex-direction: column;
+		gap: 0.5rem;
+		mask-image: var(--mask);
+		padding: 0.5rem;
+		overflow: auto;
+
+		.item {
+			display: inline-flex;
+			flex-direction: column;
+			box-shadow: var(--edge-highlight);
+			border-radius: var(--rounded-corner);
+			background-color: var(--fg-muted-1);
+			padding: 0.5rem;
+
+			a {
+				width: fit-content;
+
+				&::after {
+					content: " →";
+
+					:root[dir*="rtl"] & {
+						content: " ←";
+					}
+				}
+			}
+
+			span {
+				color: var(--fg-muted-5);
+
+				&:first-of-type,
+				&.more-matches {
+					margin-block-start: 0.5rem;
+					border-block-start: max(1px, 0.0625rem) solid var(--fg-muted-2);
+					padding-block-start: 0.25rem;
+				}
+
+				&.more-matches {
+					font-size: var(--font-size-small);
+				}
+
+				strong {
+					color: var(--fg-color);
+				}
+			}
+		}
+	}
+}

sass/_normalize.scss

@@ -0,0 +1,276 @@
+// Document
+// ==========================================================================
+
+//
+// 1. Correct the line height in all browsers.
+// 2. Prevent adjustments of font size after orientation changes in iOS.
+//
+
+:where(html) {
+	-webkit-text-size-adjust: 100%; // 2
+	text-size-adjust: 100%; // 2
+	line-height: 1.15; // 1
+}
+
+// Sections
+// ==========================================================================
+
+//
+// Correct the font size and margin on `h1` elements within `section` and
+// `article` contexts in Chrome, Edge, Firefox, and Safari.
+//
+
+:where(h1) {
+	margin-block-start: 0.67em;
+	margin-block-end: 0.67em;
+	font-size: 2em;
+}
+
+// Grouping content
+// ==========================================================================
+
+//
+// Remove the margin on nested lists in Chrome, Edge, and Safari.
+//
+
+:where(dl, ol, ul) :where(dl, ol, ul) {
+	margin-block-start: 0;
+	margin-block-end: 0;
+}
+
+//
+// 1. Add the correct box sizing in Firefox.
+// 2. Correct the inheritance of border color in Firefox.
+//
+
+:where(hr) {
+	box-sizing: content-box; // 1
+	height: 0; // 1
+	color: inherit; // 2
+}
+
+// Text-level semantics
+// ==========================================================================
+
+//
+// Add the correct text decoration in Safari.
+//
+
+:where(abbr[title]) {
+	text-decoration: underline;
+	text-decoration: underline dotted;
+}
+
+//
+// Add the correct font weight in Chrome, Edge, and Safari.
+//
+
+:where(b, strong) {
+	font-weight: bolder;
+}
+
+//
+// 1. Correct the inheritance and scaling of font size in all browsers.
+// 2. Correct the odd `em` font sizing in all browsers.
+//
+
+:where(code, kbd, pre, samp) {
+	font-size: 1em; // 2
+	font-family: monospace, monospace; // 1
+}
+
+//
+// Add the correct font size in all browsers.
+//
+
+:where(small) {
+	font-size: 80%;
+}
+
+// Tabular data
+// ==========================================================================
+
+//
+// 1. Correct table border color in Chrome, Edge, and Safari.
+// 2. Remove text indentation from table contents in Chrome, Edge, and Safari.
+//
+
+:where(table) {
+	border-color: currentColor; // 1
+	text-indent: 0; // 2
+}
+
+// Forms
+// ==========================================================================
+
+//
+// Remove the margin on controls in Safari.
+//
+
+:where(button, input, select) {
+	margin: 0;
+}
+
+//
+// Remove the inheritance of text transform in Firefox.
+//
+
+:where(button) {
+	text-transform: none;
+}
+
+//
+// Correct the inability to style buttons in iOS and Safari.
+//
+
+:where(
+		button,
+		input:is([type="button" i], [type="reset" i], [type="submit" i])
+	) {
+	-webkit-appearance: button;
+}
+
+//
+// Add the correct vertical alignment in Chrome, Edge, and Firefox.
+//
+
+:where(progress) {
+	vertical-align: baseline;
+}
+
+//
+// Remove the inheritance of text transform in Firefox.
+//
+
+:where(select) {
+	text-transform: none;
+}
+
+//
+// Remove the margin in Firefox and Safari.
+//
+
+:where(textarea) {
+	margin: 0;
+}
+
+//
+// 1. Correct the odd appearance in Chrome, Edge, and Safari.
+// 2. Correct the outline style in Safari.
+//
+
+:where(input[type="search" i]) {
+	-webkit-appearance: textfield; // 1
+	outline-offset: -2px; // 2
+}
+
+//
+// Correct the cursor style of increment and decrement buttons in Safari.
+//
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+	height: auto;
+}
+
+//
+// Correct the text style of placeholders in Chrome, Edge, and Safari.
+//
+
+::-webkit-input-placeholder {
+	opacity: 0.54;
+	color: inherit;
+}
+
+//
+// Remove the inner padding in Chrome, Edge, and Safari on macOS.
+//
+
+::-webkit-search-decoration {
+	-webkit-appearance: none;
+}
+
+//
+// 1. Correct the inability to style upload buttons in iOS and Safari.
+// 2. Change font properties to `inherit` in Safari.
+//
+
+::-webkit-file-upload-button {
+	-webkit-appearance: button; // 1
+	font: inherit; // 2
+}
+
+//
+// Remove the inner border and padding of focus outlines in Firefox.
+//
+
+:where(
+		button,
+		input:is(
+				[type="button" i],
+				[type="color" i],
+				[type="reset" i],
+				[type="submit" i]
+			)
+	)::-moz-focus-inner {
+	border-style: none;
+	padding: 0;
+}
+
+//
+// Restore the focus outline styles unset by the previous rule in Firefox.
+//
+
+:where(
+		button,
+		input:is(
+				[type="button" i],
+				[type="color" i],
+				[type="reset" i],
+				[type="submit" i]
+			)
+	)::-moz-focusring {
+	outline: 1px dotted ButtonText;
+}
+
+//
+// Remove the additional :invalid styles in Firefox.
+//
+
+:where(:-moz-ui-invalid) {
+	box-shadow: none;
+}
+
+// Interactive
+// ==========================================================================
+
+//
+// Add the correct styles in Safari.
+//
+
+:where(dialog) {
+	position: absolute;
+	right: 0;
+	left: 0;
+	margin: auto;
+	border: solid;
+	background-color: white;
+	padding: 1em;
+	width: -moz-fit-content;
+	width: fit-content;
+	height: -moz-fit-content;
+	height: fit-content;
+	color: black;
+}
+
+:where(dialog:not([open])) {
+	display: none;
+}
+
+//
+// Add the correct display in all browsers.
+//
+
+:where(summary) {
+	display: list-item;
+}

sass/_not-found.scss

@@ -0,0 +1,3 @@
+#not-found {
+	width: min(calc(var(--container-width) / 5), 100%);
+}

sass/_post-nav.scss

@@ -0,0 +1,69 @@
+#post-nav {
+	display: flex;
+	flex-direction: row;
+	gap: 0.25rem;
+
+	@media only screen and (max-width: 720px) {
+		flex-direction: column;
+	}
+
+	.post-nav-item {
+		flex: 1;
+		transition: var(--transition);
+		border-radius: var(--rounded-corner);
+		padding: 1rem;
+		padding-block-end: 0.75rem;
+		min-width: 0;
+		text-decoration: none;
+
+		&:hover {
+			box-shadow: var(--edge-highlight);
+			background-color: var(--accent-color-alpha);
+
+			.post-title {
+				color: var(--accent-color);
+			}
+		}
+
+		&:active {
+			transform: var(--active);
+		}
+
+		&.post-nav-prev .nav-arrow::before {
+			content: "← ";
+
+			:root[dir*="rtl"] & {
+				content: "→ ";
+			}
+		}
+
+		&.post-nav-next {
+			text-align: end;
+
+			.nav-arrow::after {
+				content: " →";
+
+				:root[dir*="rtl"] & {
+					content: " ←";
+				}
+			}
+		}
+
+		.nav-arrow {
+			margin-block-end: 0.75rem;
+			color: var(--fg-muted-5);
+			font-weight: normal;
+			line-height: 1;
+		}
+
+		.post-title {
+			display: block;
+			transition: var(--transition);
+			max-width: 90vw;
+			overflow: hidden;
+			color: var(--fg-color);
+			text-overflow: ellipsis;
+			white-space: nowrap;
+		}
+	}
+}

sass/_pre-container.scss

@@ -0,0 +1,98 @@
+.pre-container {
+	margin: 1rem 0 1rem;
+	box-shadow: var(--edge-highlight), var(--shadow);
+	border-radius: var(--rounded-corner);
+
+	.header {
+		--shimmer: rgb(
+			from var(--accent-color) r g b / calc(var(--color-opacity) * 2)
+		);
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		border-radius: var(--rounded-corner) var(--rounded-corner) 0 0;
+		background-image: linear-gradient(
+			to right,
+			var(--fg-muted-1) 50%,
+			var(--shimmer) 75%,
+			var(--fg-muted-1) 100%
+		);
+		background-size: 200%;
+		padding: 0.25rem;
+		height: 2.5rem;
+
+		span {
+			margin-inline-start: 0.75rem;
+			color: var(--fg-muted-5);
+			font-weight: bold;
+			line-height: 1;
+		}
+
+		button {
+			appearance: none;
+			transition: var(--transition);
+			cursor: pointer;
+			border: none;
+			border-radius: var(--rounded-corner-small);
+			background-color: transparent;
+			padding: 0.5rem;
+			color: var(--fg-muted-4);
+			line-height: 0;
+
+			&:hover {
+				box-shadow: var(--edge-highlight);
+				background-color: var(--fg-muted-1);
+				color: var(--fg-muted-5);
+			}
+
+			&:active {
+				transform: var(--active);
+			}
+
+			&:disabled {
+				cursor: not-allowed;
+
+				&:active {
+					transform: none;
+				}
+			}
+
+			.icon {
+				-webkit-mask-image: var(--icon-copy);
+				mask-image: var(--icon-copy);
+				transition: var(--transition);
+
+				:root[dir*="rtl"] & {
+					transform: scaleX(-1);
+				}
+			}
+		}
+
+		&.active {
+			animation: active-shimmer var(--transition-long);
+
+			button {
+				box-shadow: var(--edge-highlight);
+				background-color: var(--accent-color-alpha);
+				color: var(--accent-color);
+
+				.icon {
+					-webkit-mask-image: var(--icon-done);
+					mask-image: var(--icon-done);
+				}
+			}
+
+			@keyframes active-shimmer {
+				to {
+					background-position-x: -200%;
+				}
+			}
+		}
+	}
+
+	pre {
+		margin: 0;
+		box-shadow: none;
+		border-radius: 0 0 var(--rounded-corner) var(--rounded-corner);
+	}
+}

sass/_sparkline.scss

@@ -0,0 +1,26 @@
+.sparkline {
+	display: flex;
+	flex-direction: row;
+	align-items: flex-end;
+	float: inline-end;
+	gap: 0.25rem;
+	margin: 1rem 0;
+	width: 6rem;
+	height: 2rem;
+
+	div {
+		flex: 1;
+		transform-origin: bottom;
+		transition: var(--transition);
+		background-image: linear-gradient(
+			to top,
+			var(--accent-color) var(--bar-height),
+			transparent var(--bar-height)
+		);
+		height: 100%;
+
+		&:hover {
+			height: 200%;
+		}
+	}
+}

sass/_spoiler.scss

@@ -0,0 +1,22 @@
+span.spoiler {
+	filter: blur(0.25rem);
+	transition: var(--transition);
+
+	&:hover,
+	&:active {
+		filter: none;
+	}
+
+	&.solid {
+		filter: none;
+		border-radius: var(--rounded-corner-small);
+		background-color: var(--fg-muted-4);
+		color: transparent;
+
+		&:hover,
+		&:active {
+			background-color: transparent;
+			color: inherit;
+		}
+	}
+}

sass/_statements.scss

@@ -0,0 +1,60 @@
+.statement-container {
+	margin: 1rem 0;
+	box-shadow: var(--edge-highlight);
+	border-radius: var(--rounded-corner);
+	padding: 1rem;
+
+	:last-child {
+		margin-block-end: 0;
+	}
+
+	& > :nth-child(2) {
+		margin-block-start: 0.5rem;
+	}
+
+	li::marker {
+		color: inherit;
+	}
+
+	a {
+		color: inherit;
+	}
+
+	.title {
+		color: inherit;
+
+		.icon {
+			margin-inline-end: 0.375rem;
+		}
+	}
+
+	&.archive {
+		background-color: var(--purple-bg);
+		color: var(--purple-fg);
+
+		.icon {
+			-webkit-mask-image: var(--icon-archive);
+			mask-image: var(--icon-archive);
+		}
+	}
+
+	&.disclaimer {
+		background-color: var(--red-bg);
+		color: var(--red-fg);
+
+		.icon {
+			-webkit-mask-image: var(--icon-warning);
+			mask-image: var(--icon-warning);
+		}
+	}
+
+	&.trigger {
+		background-color: var(--yellow-bg);
+		color: var(--yellow-fg);
+
+		.icon {
+			-webkit-mask-image: var(--icon-warning);
+			mask-image: var(--icon-warning);
+		}
+	}
+}

sass/_table.scss

@@ -0,0 +1,24 @@
+table {
+	box-shadow: var(--edge-highlight);
+	border-radius: var(--rounded-corner);
+	border-collapse: collapse;
+	background-color: var(--fg-muted-1);
+	width: 100%;
+	overflow: hidden;
+
+	tr {
+		&:nth-child(even) {
+			background-color: var(--fg-muted-1);
+		}
+
+		th,
+		td {
+			padding: 0.5rem 1rem;
+		}
+
+		th {
+			background-color: var(--fg-muted-2);
+			font-weight: bold;
+		}
+	}
+}

sass/_tags.scss

@@ -0,0 +1,69 @@
+.tags {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.25rem;
+	margin: 0;
+	margin-block-start: 2rem;
+	padding: 0;
+	list-style: none;
+
+	li {
+		display: flex;
+		transition: var(--transition);
+		margin: 0;
+		padding: 0;
+
+		&:active {
+			transform: var(--active);
+		}
+	}
+
+	a {
+		transition: var(--transition);
+		box-shadow: var(--edge-highlight);
+		border-radius: 999px;
+		background-color: var(--fg-muted-1);
+		padding: 0.375rem 0.75rem;
+		color: var(--fg-muted-5);
+		font-size: var(--font-size-small);
+		line-height: 1;
+		text-decoration: none;
+		white-space: nowrap;
+
+		&:hover {
+			background-color: var(--accent-color-alpha);
+			color: var(--accent-color);
+			text-decoration: none;
+
+			.count {
+				background-color: var(--accent-color-alpha);
+				color: var(--accent-color);
+			}
+		}
+
+		&:has(.tag) {
+			padding: 0;
+		}
+
+		.tag {
+			display: inline-block;
+			padding-inline-start: 0.75rem;
+			padding-inline-end: 0.5rem;
+			padding-block-start: 0.375rem;
+			padding-block-end: 0.375rem;
+		}
+
+		.count {
+			display: inline-block;
+			transition: var(--transition);
+			border-start-end-radius: 999px;
+			border-end-end-radius: 999px;
+			background-color: var(--fg-muted-1);
+			padding-inline-start: 0.5rem;
+			padding-inline-end: 0.625rem;
+			padding-block-start: 0.375rem;
+			padding-block-end: 0.375rem;
+			font-variant-numeric: tabular-nums;
+		}
+	}
+}

sass/_title.scss

@@ -0,0 +1,5 @@
+strong.title {
+	color: var(--accent-color);
+	font-size: var(--font-size-x-large);
+	line-height: 1;
+}

sass/_typography.scss

@@ -0,0 +1,312 @@
+// HEADINGS
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	text-wrap: balance;
+	margin: 2rem 0 1rem;
+	font-weight: lighter;
+	line-height: normal;
+	font-family: var(--font-antique);
+	letter-spacing: -0.05em;
+}
+
+h1 {
+	font-size: var(--font-size-xxx-large);
+}
+
+h2 {
+	font-size: var(--font-size-xx-large);
+}
+
+h3 {
+	font-size: var(--font-size-x-large);
+}
+
+h4 {
+	font-size: var(--font-size-large);
+}
+
+h5 {
+	font-size: var(--font-size-medium);
+}
+
+h6 {
+	font-size: var(--font-size-small);
+}
+
+small {
+	color: var(--fg-muted-5);
+	font-size: var(--font-size-small-em);
+}
+
+abbr[title] {
+	cursor: help;
+	text-decoration: underline;
+	text-decoration-style: dotted;
+	text-decoration-thickness: max(1px, 0.0625em);
+}
+
+figcaption {
+	color: var(--fg-muted-4);
+	font-size: var(--font-size-small-em);
+	text-align: center;
+}
+
+blockquote {
+	margin: 0;
+	border-radius: 0.25rem;
+	border-inline-start: 0.25rem solid var(--accent-color);
+	padding-inline-start: 0.75rem;
+	color: var(--fg-muted-5);
+}
+
+mark,
+del,
+ins,
+samp,
+q {
+	box-shadow: var(--edge-highlight);
+	border-radius: var(--rounded-corner-small);
+	padding: 0.125rem 0.375rem;
+}
+
+mark {
+	background-color: var(--accent-color-alpha);
+	color: var(--accent-color);
+}
+
+del {
+	background-color: var(--red-bg);
+	color: var(--red-fg);
+	text-decoration: line-through;
+	text-decoration-thickness: max(1px, 0.0625em);
+}
+
+ins {
+	background-color: var(--green-bg);
+	color: var(--green-fg);
+	text-decoration: underline;
+	text-decoration-thickness: max(1px, 0.0625em);
+}
+
+samp {
+	background-color: var(--fg-muted-1);
+	color: var(--fg-muted-5);
+	font-size: var(--font-size-small-em);
+}
+
+q {
+	background-color: var(--fg-muted-1);
+	color: var(--fg-muted-5);
+	font-style: italic;
+}
+
+u {
+	text-decoration: underline;
+	text-decoration-style: wavy;
+	text-decoration-color: var(--red-fg);
+	text-decoration-thickness: max(1px, 0.0625em);
+}
+
+progress {
+	appearance: none;
+	box-shadow: var(--edge-highlight);
+	border: none;
+	border-radius: 999px;
+	background-color: var(--fg-muted-1);
+	width: 100%;
+	height: 0.5rem;
+	color: var(--accent-color);
+
+	&:indeterminate {
+		background-color: var(--fg-muted-1);
+	}
+
+	&:indeterminate::-moz-progress-bar {
+		background-color: transparent;
+	}
+
+	&::-webkit-progress-bar {
+		background-color: transparent;
+	}
+
+	&::-moz-progress-bar {
+		border-radius: 999px;
+		background-color: var(--accent-color);
+	}
+
+	&::-webkit-progress-value {
+		border-radius: 999px;
+		background-color: var(--accent-color);
+	}
+}
+
+kbd {
+	display: inline-block;
+	transition: var(--transition);
+	cursor: pointer;
+	box-shadow:
+		var(--edge-highlight),
+		inset 0 -0.125rem 0 var(--fg-muted-2);
+	border-radius: var(--rounded-corner-small);
+	background-color: var(--fg-muted-1);
+	padding: 0.125rem 0.375rem;
+	font-size: var(--font-size-small-em);
+
+	// Small nice thingy, keys can be pressed!
+	&:active {
+		transform: translateY(0.125rem);
+		box-shadow: inset 0 0.0625rem 0 var(--fg-muted-2);
+		background-color: var(--fg-muted-2);
+	}
+}
+
+a {
+	color: var(--accent-color);
+	font-weight: bold;
+	text-decoration-thickness: max(1px, 0.0625em);
+
+	&:hover {
+		text-decoration-style: wavy;
+	}
+}
+
+hr {
+	margin: 2rem auto;
+	border: none;
+	border-block-start: 0.1875rem double var(--fg-muted-2);
+	overflow: visible;
+	text-align: center;
+
+	&::after {
+		position: relative;
+		inset-block-start: -1.25rem;
+		content: "❦";
+		color: var(--fg-muted-4);
+		font-size: var(--font-size-x-large);
+	}
+}
+
+dt {
+	font-weight: bold;
+}
+
+dd {
+	margin-inline-start: 1.5rem;
+	margin-block-end: 1rem;
+}
+
+aside {
+	float: right;
+	margin-inline-start: 1rem;
+	box-shadow: var(--edge-highlight);
+	border-radius: var(--rounded-corner);
+	background-color: var(--accent-color-alpha);
+	padding: 1rem;
+	width: 30%;
+
+	:root[dir*="rtl"] & {
+		float: left;
+	}
+
+	@media only screen and (max-width: 720px) {
+		float: none;
+		margin-inline-start: 0;
+		width: 100%;
+	}
+
+	:first-child {
+		margin-block-start: 0;
+	}
+
+	:last-child {
+		margin-block-end: 0;
+	}
+}
+
+details {
+	summary {
+		cursor: pointer;
+		box-shadow: var(--edge-highlight);
+		border-radius: var(--rounded-corner);
+		background-color: var(--fg-muted-1);
+		padding: 1rem;
+		color: var(--fg-muted-5);
+		font-weight: bold;
+		line-height: 1;
+		list-style: none;
+
+		&::marker,
+		&::-webkit-details-marker {
+			display: none;
+		}
+
+		&::before {
+			-webkit-mask-image: var(--icon-down);
+			display: inline-block;
+			vertical-align: -0.125em;
+			mask-image: var(--icon-down);
+			transition: var(--transition);
+			margin-inline-end: 0.25rem;
+			background-color: currentColor;
+			width: 1rem;
+			height: 1rem;
+			content: "";
+		}
+	}
+
+	:last-child {
+		margin-block-end: 0;
+	}
+
+	&[open] {
+		box-shadow: var(--edge-highlight);
+		border-radius: var(--rounded-corner);
+		background-color: var(--fg-muted-1);
+		padding: 1rem;
+
+		summary {
+			box-shadow: none;
+			border-radius: 0;
+			background-color: transparent;
+			padding: 0;
+
+			&::before {
+				transform: scaleY(-1);
+			}
+
+			& ~ * {
+				animation: details-open var(--transition);
+
+				@keyframes details-open {
+					from {
+						transform: translateY(-1rem);
+						opacity: 0;
+					}
+				}
+			}
+		}
+	}
+}
+
+figure {
+	margin-inline: 0;
+}
+
+ol,
+ul {
+	padding-inline-start: 1.5rem;
+}
+
+li {
+	margin: 0.125rem 0;
+	padding-inline-start: 0.25rem;
+
+	&::marker {
+		color: var(--accent-color);
+		font-weight: bold;
+	}
+}

sass/_variables.scss

@@ -0,0 +1,204 @@
+@mixin theme-variables {
+	:root {
+		@content ("light");
+	}
+
+	[data-theme="dark"] {
+		@content ("dark");
+	}
+
+	@media (prefers-color-scheme: dark) {
+		:root:not([data-theme="light"]) {
+			@content ("dark");
+		}
+	}
+}
+
+@include theme-variables using ($theme) {
+	@if $theme == "dark" {
+		// COLORS
+		--bg-color: color-mix(in srgb, var(--accent-color) 10%, black);
+		--bg-overlay: linear-gradient(rgb(0 0 0 / 0.9), rgb(0 0 0 / 0.9));
+		--fg-color: rgb(255 255 255);
+		--fg-contrast: rgb(0 0 0 / 0.8);
+		--fg-muted-1: rgb(255 255 255 / 0.05);
+		--fg-muted-2: rgb(255 255 255 / 0.1);
+		--fg-muted-3: rgb(255 255 255 / 0.2);
+		--fg-muted-4: rgb(255 255 255 / 0.5);
+		--fg-muted-5: rgb(255 255 255 / 0.6);
+		--glass-bg: rgb(25 25 25 / 0.7);
+		--blue-fg: rgb(153 193 241);
+		--brown-fg: rgb(205 171 143);
+		--green-fg: rgb(143 240 164);
+		--purple-fg: rgb(220 138 221);
+		--red-fg: rgb(246 97 81);
+		--yellow-fg: rgb(248 228 92);
+
+		color-scheme: dark;
+	}
+
+	@else {
+		// COLORS
+		--bg-color: color-mix(in srgb, var(--accent-color) 20%, white);
+		--bg-overlay: linear-gradient(rgb(255 255 255 / 0.8), rgb(255 255 255 / 0.8));
+		--fg-color: rgb(0 0 0 / 0.8);
+		--fg-contrast: rgb(255 255 255);
+		--fg-muted-1: rgb(0 0 0 / 0.05);
+		--fg-muted-2: rgb(0 0 0 / 0.1);
+		--fg-muted-3: rgb(0 0 0 / 0.2);
+		--fg-muted-4: rgb(0 0 0 / 0.5);
+		--fg-muted-5: rgb(0 0 0 / 0.6);
+		--glass-bg: rgb(242 242 242 / 0.7);
+		--accent-color-alpha: rgb(from var(--accent-color) r g b / var(--color-opacity));
+		--blue-bg: rgb(from var(--blue-fg) r g b / var(--color-opacity));
+		--blue-fg: rgb(53 132 228);
+		--brown-bg: rgb(from var(--brown-fg) r g b / var(--color-opacity));
+		--brown-fg: rgb(99 69 44);
+		--green-bg: rgb(from var(--green-fg) r g b / var(--color-opacity));
+		--green-fg: rgb(38 162 105);
+		--purple-bg: rgb(from var(--purple-fg) r g b / var(--color-opacity));
+		--purple-fg: rgb(145 65 172);
+		--red-bg: rgb(from var(--red-fg) r g b / var(--color-opacity));
+		--red-fg: rgb(224 27 36);
+		--yellow-bg: rgb(from var(--yellow-fg) r g b / var(--color-opacity));
+		--yellow-fg: rgb(156 110 3);
+
+		// CONTRAST COLOR
+		--l: clamp(0, (l / 0.623 - 1) * -infinity, 1);
+		--a: calc(var(--l) + (var(--dim-opacity) * (1 - var(--l))));
+		--contrast-color: oklch(from var(--accent-color) var(--l) 0 h / var(--a));
+
+		// CONTAINERS
+		--container-width: 1024px;
+
+		// CORNERS
+		--rounded-corner: 0.75rem;
+		--rounded-corner-small: 0.5rem;
+
+		// FILTERS
+		--blur: saturate(1.8) blur(0.75rem);
+
+		// FONT SIZES
+		--font-size-xx-small: 0.625rem;
+		--font-size-x-small: 0.75rem;
+		--font-size-small: 0.875rem;
+		--font-size-medium: 1rem;
+		--font-size-large: 1.25rem;
+		--font-size-x-large: 1.5rem;
+		--font-size-xx-large: 2rem;
+		--font-size-xxx-large: 3rem;
+
+		// FONT SIZES (RELATIVE)
+		--font-size-xx-small-em: 0.625em;
+		--font-size-x-small-em: 0.75em;
+		--font-size-small-em: 0.875em;
+		--font-size-medium-em: 1em;
+		--font-size-large-em: 1.25em;
+		--font-size-x-large-em: 1.5em;
+		--font-size-xx-large-em: 2em;
+		--font-size-xxx-large-em: 3em;
+
+		// FONTS
+		--font-system-ui: system-ui, sans-serif;
+		--font-transitional: Charter, "Bitstream Charter", "Sitka Text", Cambria,
+			serif;
+		--font-old-style: "Iowan Old Style", "Palatino Linotype",
+			"URW Palladio L", P052, serif;
+		--font-humanist: Seravek, "Gill Sans Nova", Ubuntu, Calibri,
+			"DejaVu Sans", source-sans-pro, sans-serif;
+		--font-geometric-humanist: Avenir, Montserrat, Corbel, "URW Gothic",
+			source-sans-pro, sans-serif;
+		--font-classical-humanist: Optima, Candara, "Noto Sans", source-sans-pro,
+			sans-serif;
+		--font-neo-grotesque: Inter, Roboto, "Helvetica Neue", "Arial Nova",
+			"Nimbus Sans", Arial, sans-serif;
+		--font-monospace-slab-serif: "Nimbus Mono PS", "Courier New", monospace;
+		--font-monospace-code: ui-monospace, "Cascadia Code", "Source Code Pro",
+			Menlo, Consolas, "DejaVu Sans Mono", monospace;
+		--font-industrial: Bahnschrift, "DIN Alternate",
+			"Franklin Gothic Medium", "Nimbus Sans Narrow", sans-serif-condensed,
+			sans-serif;
+		--font-rounded-sans: ui-rounded, "Hiragino Maru Gothic ProN", Quicksand,
+			Comfortaa, Manjari, "Arial Rounded MT", "Arial Rounded MT Bold",
+			Calibri, source-sans-pro, sans-serif;
+		--font-slab-serif: Rockwell, "Rockwell Nova", "Roboto Slab",
+			"DejaVu Serif", "Sitka Small", serif;
+		--font-antique: Superclarendon, "Bookman Old Style", "URW Bookman",
+			"URW Bookman L", "Georgia Pro", Georgia, serif;
+		--font-didone: Didot, "Bodoni MT", "Noto Serif Display",
+			"URW Palladio L", P052, Sylfaen, serif;
+		--font-handwritten: "Segoe Print", "Bradley Hand", Chilanka, TSCu_Comic,
+			casual, cursive;
+		--font-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
+			"Noto Color Emoji";
+
+		// OPACITY
+		--color-opacity: 0.1;
+		--dim-opacity: 0.8;
+		--disabled-opacity: 0.6;
+
+		// SHADOWS
+		--edge-highlight: inset 0 0.0625rem 0 rgb(255 255 255 / 0.1);
+		--shadow: 0 0 0 0.0625rem rgb(0 0 0 / 0.03),
+			0 0.0625rem 0.1875rem 0.0625rem rgb(0 0 0 / 0.07),
+			0 0.125rem 0.375rem 0.125rem rgb(0 0 0 / 0.03);
+		--shadow-raised: 0 0 0 0.0625rem rgb(0 0 0 / 0.06),
+			0 0.125rem 0.375rem 0.125rem rgb(0 0 0 / 0.14),
+			0 0.25rem 0.75rem 0.25rem rgb(0 0 0 / 0.06);
+		--shadow-glass: 0 0.75rem 1.5rem -1rem rgb(0 0 0 / 0.5);
+		--shadow-glow: 0 0 0 0.0625rem var(--accent-color-alpha),
+			0 0.125rem 0.375rem 0.125rem var(--accent-color-alpha),
+			0 0.25rem 1.5rem 0.25rem var(--accent-color-alpha);
+		--text-shadow-glow: var(--accent-color-alpha) 0 0 0.25rem,
+			var(--accent-color) 0 0 0.75rem;
+
+		// STATES
+		--hover: scale(1.1);
+		--active: scale(0.9);
+
+		// TRANSITIONS
+		--transition: 0.2s;
+		--transition-longer: 0.4s;
+		--transition-long: 0.8s;
+
+		// ICONS (16px)
+		--icon-archive: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M2 1C.89 1 0 1.89 0 3v2c0 .751.41 1.402 1.018 1.744A2 2 0 0 0 1 7v7c0 1.11.89 2 2 2h10c1.11 0 2-.89 2-2V7a2 2 0 0 0-.018-.256A2 2 0 0 0 16 5V3c0-1.11-.89-2-2-2zm0 2h12v2H2zm1 4h10v7H3zm3 1v1h4V8z'/%3E%3C/svg%3E");
+		--icon-backlink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M5 14a1 1 0 0 1-.707-.293l-4-4a1 1 0 0 1 0-1.414l4-4a1 1 0 1 1 1.414 1.414L3.414 8H12c1.117 0 2-.883 2-2s-.883-2-2-2c-.55 0-1-.45-1-1s.45-1 1-1c2.2 0 4 1.8 4 4s-1.8 4-4 4H3.414l2.293 2.293A1 1 0 0 1 5 14m0 0'/%3E%3C/svg%3E");
+		--icon-boosts: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M8 1v2H4C1.8 3 0 4.8 0 7v2a4 4 0 0 0 1.02 2.672 1 1 0 1 0 1.488-1.336A1.97 1.97 0 0 1 2 9V7c0-1.125.875-2 2-2h4v2h1v-.008a1 1 0 0 0 .707-.285l2-2a1 1 0 0 0 0-1.414l-2-2A1 1 0 0 0 9 1.008V1zm6.29 3a1 1 0 0 0-.72.258.993.993 0 0 0-.078 1.41c.317.355.508.816.508 1.34v2c0 1.125-.875 2-2 2H8V9H7v.008a1 1 0 0 0-.707.285l-2 2a1 1 0 0 0 0 1.414l2 2c.187.184.441.29.707.285V15h1v-1.992h4c2.2 0 4-1.805 4-4v-2a4 4 0 0 0-1.02-2.676A1 1 0 0 0 14.29 4m0 0'/%3E%3C/svg%3E");
+		--icon-bug: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M5 0c-.55 0-1 .45-1 1 0 .691.39 1.285.8 1.605C4.298 3.277 4 4.105 4 5H3V4H1v1c0 .832.563 1.523 1.05 1.77.493.246.95.23.95.23h1v1H1v2h3v1H3s-.457-.016-.95.23C1.563 11.477 1 12.168 1 13v3h2v-3h1.129c.45 1.719 2.016 3 3.871 3s3.422-1.281 3.871-3H13v3h2v-3c0-.832-.562-1.523-1.05-1.77-.493-.246-.95-.23-.95-.23h-1v-1h3V8h-3V7h1s.457.016.95-.23C14.437 6.523 15 5.832 15 5V4h-2v1h-1c0-.895-.297-1.723-.8-2.395.41-.32.8-.914.8-1.605 0-.55-.45-1-1-1s-1 .45-1 1a1 1 0 0 0-.645.238C8.93 1.086 8.473 1 8 1s-.93.086-1.355.238A1 1 0 0 0 6 1c0-.55-.45-1-1-1m2.969 5.031h.062A.97.97 0 0 1 9 6v3.063a.97.97 0 0 1-.969.968H7.97A.97.97 0 0 1 7 9.062V6a.97.97 0 0 1 .969-.969m0 6h.062A.97.97 0 0 1 9 12v.063a.97.97 0 0 1-.969.968H7.97a.97.97 0 0 1-.97-.969V12a.97.97 0 0 1 .969-.969m0 0'/%3E%3C/svg%3E");
+		--icon-caution: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M5 0a1 1 0 0 0-.707.293l-4 4A1 1 0 0 0 0 5v6a1 1 0 0 0 .293.707l4 4A1 1 0 0 0 5 16h6a1 1 0 0 0 .707-.293l4-4A1 1 0 0 0 16 11V5a1 1 0 0 0-.293-.707l-4-4A1 1 0 0 0 11 0zm.414 2h5.172L14 5.414v5.172L10.586 14H5.414L2 10.586V5.414zM8 4c-.554 0-1 .446-1 1v3c0 .554.446 1 1 1s1-.446 1-1V5c0-.554-.446-1-1-1m0 6a1 1 0 0 0-1 1 1 1 0 0 0 1 1 1 1 0 0 0 1-1 1 1 0 0 0-1-1'/%3E%3C/svg%3E");
+		--icon-checkmark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M13.754 4.668c.176-.2.262-.461.246-.723a1 1 0 0 0-.34-.687 1 1 0 0 0-.726-.246 1 1 0 0 0-.688.34L5.95 10.547 3.707 8.3A1 1 0 0 0 2 9.01a1 1 0 0 0 .293.708l3 3c.195.195.465.3.742.293.278-.012.535-.133.719-.344zm0 0'/%3E%3C/svg%3E");
+		--icon-copy: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 3c0-1.645 1.355-3 3-3h5c1.645 0 3 1.355 3 3 0 .55-.45 1-1 1s-1-.45-1-1c0-.57-.43-1-1-1H3c-.57 0-1 .43-1 1v5c0 .57.43 1 1 1 .55 0 1 .45 1 1s-.45 1-1 1c-1.645 0-3-1.355-3-3zm5 5c0-1.645 1.355-3 3-3h5c1.645 0 3 1.355 3 3v5c0 1.645-1.355 3-3 3H8c-1.645 0-3-1.355-3-3zm2 0v5c0 .57.43 1 1 1h5c.57 0 1-.43 1-1V8c0-.57-.43-1-1-1H8c-.57 0-1 .43-1 1m0 0'/%3E%3C/svg%3E");
+		--icon-done: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M7.883 0q-.486.008-.965.074a7.98 7.98 0 0 0-4.602 2.293 8.01 8.01 0 0 0-1.23 9.664 8.015 8.015 0 0 0 9.02 3.684 8 8 0 0 0 5.89-7.75 1 1 0 1 0-2 .008 5.986 5.986 0 0 1-4.418 5.816 5.996 5.996 0 0 1-6.762-2.766 5.99 5.99 0 0 1 .922-7.25 5.99 5.99 0 0 1 7.239-.984 1 1 0 0 0 1.363-.371c.273-.48.11-1.09-.371-1.367A8 8 0 0 0 9.492.14 8 8 0 0 0 7.882 0m7.15 1.998-.1.002a1 1 0 0 0-.687.34L7.95 9.535 5.707 7.29A1 1 0 0 0 4 8a1 1 0 0 0 .293.707l3 3c.195.195.465.3.742.293.277-.012.535-.133.719-.344l7-8A1 1 0 0 0 16 2.934a1 1 0 0 0-.34-.688 1 1 0 0 0-.627-.248'/%3E%3C/svg%3E");
+		--icon-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='m2.293 6.707 5 5a1 1 0 0 0 1.414 0l5-5a1 1 0 1 0-1.414-1.414L8 9.586 3.707 5.293a1 1 0 1 0-1.414 1.414m0 0'/%3E%3C/svg%3E");
+		--icon-feed: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M1.988 1.988V3c.008.547.453.984 1 .988.004-.004.008-.004.012-.004v.028A8.977 8.977 0 0 1 11.988 13a.991.991 0 0 0 1 .984h1V13h-.004c0-.004 0-.004.004-.008C13.984 7.02 9.184 2.148 3.242 2.02A1.004 1.004 0 0 0 3 1.988v-.004zm0 4V7c.008.547.453.984 1 .988.004-.004.008-.004.012-.004V8a4.985 4.985 0 0 1 4.996 4.844 1.002 1.002 0 0 0 .988 1.145c.008-.005.012-.005.016-.005v.004h.984V13H10c0-3.793-3.047-6.898-6.82-6.992 0-.004-.004-.004-.004-.004A.892.892 0 0 0 3 5.988v-.004zm2 4a1.999 1.999 0 1 0-.002 3.998 1.999 1.999 0 0 0 .002-3.998m0 0'%3E%3C/path%3E%3C/svg%3E");
+		--icon-fire: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M9.184.973C4.957 3.113 5.586 6.273 7 9 5.762 7.36 5.016 5.48 5 4 3.375 5 2 7 2 9a6.005 6.005 0 0 0 3.969 5.648c-.492-.84-.367-1.96.703-3.015 2.14-2.11 1.558-2.735 1.558-2.735 2.266 1.149-.32 3.137.418 3.88.563.558 1.758-1.391 1.77-2.184.848.96 1.246 1.676 1.246 2.75q0 .273-.035.52c2.512-1.805 3.273-5.41.46-8.184C8.095 1.742 9.185.973 9.185.973m0 0'/%3E%3C/svg%3E");
+		--icon-first: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M3 2v12h2V8.414l5.293 5.293a1 1 0 1 0 1.414-1.414L7.414 8l4.293-4.293a1 1 0 1 0-1.414-1.414L5 7.586V2zm0 0'/%3E%3C/svg%3E");
+		--icon-git: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M8 0a1 1 0 0 0-.707.293L5.707 1.875l5.238 5.234c.176-.07.364-.109.555-.109A1.5 1.5 0 1 1 10 8.5q0-.276.102-.535L8.05 5.915v4.19a1.5 1.5 0 1 1-1-.035V4.914L4.859 2.727.293 7.293a1 1 0 0 0 0 1.414l7 7a1 1 0 0 0 1.414 0l7-7a1.007 1.007 0 0 0 0-1.414l-7-7A1 1 0 0 0 8 0m0 0'/%3E%3C/svg%3E");
+		--icon-home: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M8 .361a2.2 2.2 0 0 0-1.41.51L2.129 4.59A3.14 3.14 0 0 0 1 7v6c0 1.66 1.34 3 3 3h8c1.66 0 3-1.34 3-3V7c0-.93-.414-1.813-1.129-2.41L9.411.87A2.2 2.2 0 0 0 8 .361m0 2.002a.2.2 0 0 1 .129.047l4.46 3.719c.263.215.411.535.411.871v6c0 .547-.453 1-1 1h-2V9c0-.55-.45-1-1-1H7c-.55 0-1 .45-1 1v5H4c-.547 0-1-.453-1-1V7c0-.336.148-.656.41-.871L7.871 2.41A.2.2 0 0 1 8 2.363'/%3E%3C/svg%3E");
+		--icon-important: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M3 0C1.355 0 0 1.355 0 3v7c0 1.256.893 2.14 2 2.584V15a1 1 0 0 0 1.707.707L6.414 13H13c1.645 0 3-1.355 3-3V3c0-1.645-1.355-3-3-3zm0 2h10c.571 0 1 .429 1 1v7c0 .571-.429 1-1 1H6a1 1 0 0 0-.707.293L4 12.586V12a1 1 0 0 0-1-1c-.571 0-1-.429-1-1V3c0-.571.429-1 1-1m5 1c-.554 0-1 .446-1 1v2c0 .554.446 1 1 1s1-.446 1-1V4c0-.554-.446-1-1-1m0 5a1 1 0 0 0-1 1 1 1 0 0 0 1 1 1 1 0 0 0 1-1 1 1 0 0 0-1-1'/%3E%3C/svg%3E");
+		--icon-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M8 0C3.59 0 0 3.59 0 8s3.59 8 8 8 8-3.59 8-8-3.59-8-8-8m0 2c3.332 0 6 2.668 6 6s-2.668 6-6 6-6-2.668-6-6 2.668-6 6-6m0 1.875a1.125 1.125 0 1 0 0 2.25 1.125 1.125 0 0 0 0-2.25M6.477 7A.5.5 0 0 0 6.5 8H7v3h-.5a.499.499 0 1 0 0 1h3a.499.499 0 1 0 0-1H9V7zm0 0'/%3E%3C/svg%3E");
+		--icon-languages: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M3.98 1v3H1v2h2.947a4.8 4.8 0 0 1-.592 1.871c-.425.758-1.101 1.488-2.062 2.45l1.414 1.413c.92-.92 1.703-1.728 2.283-2.697.38.632.844 1.196 1.377 1.768l.668-2.309a6 6 0 0 1-.41-.625A4.75 4.75 0 0 1 6.033 6h1.53l.511-2H6V1zm5.24 1L6 15h2l.781-3h4.438L14 15h2L12.781 2zm1.562 2h.438l1.5 6H9.28z'/%3E%3C/svg%3E");
+		--icon-last: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M11 2v5.586L5.707 2.293a1 1 0 1 0-1.414 1.414L8.586 8l-4.293 4.293a1 1 0 1 0 1.414 1.414L11 8.414V14h2V2zm0 0'/%3E%3C/svg%3E");
+		--icon-lightbulb: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M7.996 0C5.16 0 2.703 2 2.125 4.777c-.527 2.535.688 5.036 2.871 6.325L5 12a1 1 0 0 0 1 1h4a1 1 0 0 0 1-1v-.898c2.184-1.293 3.402-3.797 2.871-6.332A6.01 6.01 0 0 0 7.996 0m0 2a3.994 3.994 0 0 1 3.918 3.18 3.99 3.99 0 0 1-2.312 4.484 1.01 1.01 0 0 0-.602.914V11H6.996v-.418a1 1 0 0 0-.598-.914 3.994 3.994 0 0 1-2.316-4.484A3.99 3.99 0 0 1 7.996 2m-.998 4a.5.5 0 0 0-.354.852l1 1a.5.5 0 0 0 .708 0l1-1a.5.5 0 0 0 0-.707.507.507 0 0 0-.707 0l-.649.648-.644-.648A.5.5 0 0 0 6.998 6M6 14v1c0 .555.445 1 1 1h2c.555 0 1-.445 1-1v-1z'/%3E%3C/svg%3E");
+		--icon-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M4 4C1.8 4 0 5.8 0 8s1.8 4 4 4v-2c-1.125 0-2-.875-2-2s.875-2 2-2h3c1.125 0 2 .875 2 2 0 .84-.496 1.535-1.207 1.84l.785 1.84A4 4 0 0 0 11 8c0-2.2-1.8-4-4-4zm8 2v2c1.125 0 2 .875 2 2s-.875 2-2 2H9c-1.125 0-2-.875-2-2 0-.828.484-1.516 1.184-1.828l-.817-1.828A4.01 4.01 0 0 0 5 10c0 2.2 1.8 4 4 4h3c2.2 0 4-1.8 4-4s-1.8-4-4-4'/%3E%3C/svg%3E");
+		--icon-next: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='m6.707 13.707 5-5a1 1 0 0 0 0-1.414l-5-5a1 1 0 1 0-1.414 1.414L9.586 8l-4.293 4.293a1 1 0 1 0 1.414 1.414m0 0'/%3E%3C/svg%3E");
+		--icon-pencil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M12.277.832c-.578.008-1.168.23-1.691.754l-9 9A2 2 0 0 0 1 12v3h3c.531 0 1.04-.21 1.414-.586l9-9c1.79-1.789.082-4.39-1.89-4.57-.083-.012-.165-.012-.247-.012M10.5 4.437 11.563 5.5 4.5 12.563 3.438 11.5zm0 0'/%3E%3C/svg%3E");
+		--icon-poop: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M8.963 1.514A4 4 0 0 1 5 5H4c-1.108 0-2 .892-2 2s.892 2 2 2H3c-1.662 0-3 1.338-3 3s1.338 3 3 3h10c1.662 0 3-1.338 3-3s-1.338-3-3-3h-1c1.108 0 2-.892 2-2s-.892-2-2-2h-1a4 4 0 0 0-2.037-3.486'/%3E%3C/svg%3E");
+		--icon-previous: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='m9.293 13.707-5-5a1 1 0 0 1 0-1.414l5-5a1 1 0 1 1 1.414 1.414L6.414 8l4.293 4.293a1 1 0 1 1-1.414 1.414m0 0'/%3E%3C/svg%3E");
+		--icon-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='m5.707 1.293 6 6a1 1 0 0 1 0 1.414l-6 6a1 1 0 1 1-1.414-1.414L9.586 8 4.293 2.707a1 1 0 1 1 1.414-1.414m0 0'/%3E%3C/svg%3E");
+		--icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M6.57.063c-3.578 0-6.5 2.921-6.5 6.5 0 3.578 2.922 6.5 6.5 6.5a6.46 6.46 0 0 0 3.83-1.256l2.975 2.974c.957.938 2.363-.5 1.406-1.437l-2.96-2.961a6.46 6.46 0 0 0 1.25-3.82c0-3.579-2.923-6.5-6.5-6.5m0 2c2.5 0 4.5 2.003 4.5 4.5 0 2.5-2 4.5-4.5 4.5-2.496 0-4.5-2-4.5-4.5 0-2.497 2.004-4.5 4.5-4.5'/%3E%3C/svg%3E");
+		--icon-share: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M8 1a1 1 0 0 0-.5.135 1 1 0 0 0-.207.158l-3 3a1 1 0 0 0 0 1.414 1 1 0 0 0 1.414 0L7 4.414V10a1 1 0 0 0 1 1 1 1 0 0 0 1-1V4.414l1.293 1.293a1 1 0 0 0 1.414 0 1 1 0 0 0 0-1.414L8.738 1.326 8.7 1.287a1 1 0 0 0-.195-.15l-.008-.004a1 1 0 0 0-.236-.098h-.004A1 1 0 0 0 8 1M4 7c-1.645 0-3 1.355-3 3v2c0 1.645 1.355 3 3 3h8c1.645 0 3-1.355 3-3v-2c0-1.645-1.355-3-3-3a1 1 0 0 0 0 2c.564 0 1 .436 1 1v2c0 .564-.436 1-1 1H4c-.564 0-1-.436-1-1v-2c0-.564.436-1 1-1a1 1 0 0 0 0-2'/%3E%3C/svg%3E");
+		--icon-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M8 0a1 1 0 0 0-.95.684l-1.448 4.34-4.59-.016C.032 5.004-.371 6.266.43 6.828l3.625 2.555-1.5 4.285c-.317.902.687 1.691 1.492 1.172l4.004-2.594 3.894 2.586c.801.531 1.817-.258 1.5-1.16l-1.504-4.29 3.645-2.577c.789-.563.394-1.809-.574-1.813l-4.66-.015L8.949.69A1 1 0 0 0 8 0m0 0'/%3E%3C/svg%3E");
+		--icon-theme-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M.918 8.004a7.072 7.072 0 0 0 14.102.793 1.01 1.01 0 0 0-.457-.957 1 1 0 0 0-1.063-.004 3.9 3.9 0 0 1-2.031.578 3.89 3.89 0 0 1-3.883-3.883c0-.715.203-1.422.578-2.031a1 1 0 0 0-.004-1.062c-.207-.32-.578-.5-.957-.458A7.07 7.07 0 0 0 .918 8.004M5.586 4.53a5.877 5.877 0 0 0 8.965 5.004l-1.52-.96a5.09 5.09 0 0 1-5.035 4.507 5.09 5.09 0 0 1-5.078-5.078 5.09 5.09 0 0 1 4.508-5.035l-.961-1.52a5.9 5.9 0 0 0-.88 3.082m0 0'/%3E%3C/svg%3E");
+		--icon-theme-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M8.004-.008a1 1 0 0 0-1 1v1a1 1 0 1 0 2 0v-1c0-.554-.445-1-1-1M3.053 2.035a1 1 0 0 0-.26.035.994.994 0 0 0-.45 1.672l.708.707a1 1 0 1 0 1.414-1.414l-.707-.707a1 1 0 0 0-.705-.293m9.9.012a1 1 0 0 0-.707.293l-.707.707a1 1 0 1 0 1.414 1.414l.707-.707a1 1 0 0 0-.707-1.707M8 4C5.785 4 4 5.785 4 8s1.785 4 4 4 4-1.785 4-4-1.785-4-4-4m0 2c1.098 0 2 .902 2 2s-.902 2-2 2-2-.902-2-2 .902-2 2-2m-7.004.984a1 1 0 1 0 0 2h1a1 1 0 1 0 0-2zM14 7c-.55 0-1 .45-1 1s.45 1 1 1h1c.55 0 1-.45 1-1s-.45-1-1-1zM3.748 11.234a1 1 0 0 0-.705.293l-.711.707a1.007 1.007 0 0 0 0 1.414c.39.391 1.027.391 1.418 0l.707-.707a1 1 0 0 0-.709-1.707m8.49.006q-.131 0-.261.033a1.01 1.01 0 0 0-.707.711 1 1 0 0 0 .261.965l.707.707a.995.995 0 0 0 1.672-.445 1 1 0 0 0-.258-.969l-.707-.707a1 1 0 0 0-.707-.295m-4.246 1.756c-.554 0-1 .445-1 1v1a1 1 0 1 0 2 0v-1a1 1 0 0 0-1-1'/%3E%3C/svg%3E");
+		--icon-theme-system: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M8 0C3.594 0 0 3.594 0 8s3.594 8 8 8 8-3.594 8-8-3.594-8-8-8m0 1.941c3.36 0 6.059 2.7 6.059 6.059s-2.7 6.059-6.059 6.059zm0 0'/%3E%3C/svg%3E");
+		--icon-toc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M2 3a1 1 0 1 0 0 2 1 1 0 0 0 0-2m4 0c-.554 0-1 .446-1 1s.446 1 1 1h8c.554 0 1-.446 1-1s-.446-1-1-1ZM2 7a1 1 0 1 0 0 2 1 1 0 0 0 0-2m4 0c-.554 0-1 .446-1 1s.446 1 1 1h8c.554 0 1-.446 1-1s-.446-1-1-1Zm-4 4a1 1 0 1 0 0 2 1 1 0 0 0 0-2m4 0c-.554 0-1 .446-1 1s.446 1 1 1h8c.554 0 1-.446 1-1s-.446-1-1-1z'/%3E%3C/svg%3E");
+		--icon-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M1 11a1 1 0 0 1 .293-.707l6-6a1 1 0 0 1 1.414 0l6 6a1 1 0 1 1-1.414 1.414L8 6.414l-5.293 5.293A1 1 0 0 1 1 11m0 0'/%3E%3C/svg%3E");
+		--icon-verified: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M5.21 1.27A3.7 3.7 0 0 1 8 0c1.113 0 2.11.492 2.79 1.27a3.68 3.68 0 0 1 2.866 1.074A3.68 3.68 0 0 1 14.73 5.21C15.54 5.914 16 6.93 16 8s-.46 2.086-1.27 2.79a3.68 3.68 0 0 1-1.074 2.866 3.68 3.68 0 0 1-2.867 1.074C10.086 15.54 9.07 16 8 16s-2.086-.46-2.79-1.27a3.68 3.68 0 0 1-2.866-1.074A3.68 3.68 0 0 1 1.27 10.79 3.7 3.7 0 0 1 0 8c0-1.113.492-2.11 1.27-2.79a3.68 3.68 0 0 1 1.074-2.866A3.68 3.68 0 0 1 5.21 1.27m5.75 5.242a.613.613 0 0 0-.437-.98.61.61 0 0 0-.562.265L7.305 9.512 5.973 8.18a.616.616 0 0 0-.868.87l1.844 1.845a.61.61 0 0 0 .485.18.63.63 0 0 0 .453-.255zm0 0'/%3E%3C/svg%3E");
+		--icon-warning: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M8 .844c-.907 0-1.814.444-2.291 1.334l-.002.002-5.178 9.697C-.45 13.704.928 16.002 3 16h10c2.072.002 3.45-2.296 2.47-4.123L10.294 2.18l-.002-.002C9.814 1.288 8.907.844 8 .844M8 2.77c.201 0 .403.118.53.353l5.177 9.697.002.002c.307.573-.057 1.18-.707 1.178H2.998c-.65.001-1.014-.605-.707-1.178l.002-.002 5.18-9.699c.126-.233.327-.351.527-.351M8 5c-.554 0-1 .446-1 1v3c0 .554.446 1 1 1s1-.446 1-1V6c0-.554-.446-1-1-1m0 6a1 1 0 0 0-1 1 1 1 0 0 0 1 1 1 1 0 0 0 1-1 1 1 0 0 0-1-1'/%3E%3C/svg%3E");
+
+		// MINI ICONS (12px)
+		--icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' %3E%3Cpath d='m6 6 5-5M7 1h4v4M4 2H3a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h5a2 2 0 0 0 2-2V8' style='fill:none;stroke:black;stroke-linejoin:round;stroke-linecap:round;stroke-width:2'/%3E%3C/svg%3E");
+	}
+}

sass/_visually-hidden.scss

@@ -0,0 +1,9 @@
+.visually-hidden {
+	clip: rect(0 0 0 0);
+	position: absolute !important;
+	clip-path: inset(100%);
+	width: 1px !important;
+	height: 1px !important;
+	overflow: hidden;
+	white-space: nowrap;
+}

sass/_zola-anchor.scss

@@ -0,0 +1,62 @@
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	&:hover .zola-anchor {
+		transform: translateY(-0.125em);
+		opacity: 1;
+
+		:root[dir*="rtl"] & {
+			transform: translateY(-0.125em);
+		}
+	}
+}
+
+.zola-anchor {
+	position: absolute;
+	transform: translateX(0.5rem) translateY(-0.125em);
+	opacity: 0;
+	transition: var(--transition);
+	margin-inline-start: calc(-1em + -0.5rem);
+	color: var(--fg-muted-4);
+	line-height: 1;
+
+	@media only screen and (max-width: 832px) {
+		display: none;
+	}
+
+	:root[dir*="rtl"] & {
+		transform: translateX(-0.5rem) translateY(-0.125em);
+	}
+
+	&:hover {
+		color: var(--accent-color);
+	}
+
+	&:active {
+		transform: var(--active);
+	}
+
+	&:focus-visible {
+		opacity: 1;
+	}
+
+	.icon {
+		-webkit-mask-image: var(--icon-link);
+		mask-image: var(--icon-link);
+		mask-size: cover;
+		transition: var(--transition);
+		width: 1em;
+		height: 1em;
+
+		:root[dir*="rtl"] & {
+			transform: scaleX(-1);
+		}
+	}
+}
+
+:target .zola-anchor {
+	color: var(--accent-color-alpha);
+}

sass/fonts.scss

@@ -0,0 +1,56 @@
+@font-face {
+	font-style: normal;
+	font-weight: 100 900;
+	src: url("fonts/InterVariable.woff2") format("woff2");
+	font-family: "Inter Variable";
+	font-display: swap;
+}
+
+@font-face {
+	font-style: italic;
+	font-weight: 100 900;
+	src: url("fonts/InterVariable-Italic.woff2") format("woff2");
+	font-family: "Inter Variable";
+	font-display: swap;
+}
+
+@font-face {
+	font-style: normal;
+	font-weight: 100 900;
+	src: url("fonts/JetBrainsMono.woff2") format("woff2");
+	font-family: "JetBrains Mono";
+	font-display: swap;
+}
+
+@font-face {
+	font-style: italic;
+	font-weight: 100 900;
+	src: url("fonts/JetBrainsMono-Italic.woff2") format("woff2");
+	font-family: "JetBrains Mono";
+	font-display: swap;
+}
+
+body {
+	font-family: "Inter Variable", var(--font-system-ui), var(--font-emoji);
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	font-weight: bold;
+	font-family: "Inter Variable", var(--font-system-ui), var(--font-emoji);
+}
+
+h1 {
+	font-weight: 900;
+}
+
+pre,
+code,
+kbd,
+samp {
+	font-family: "JetBrains Mono", var(--font-monospace-code);
+}

sass/mods/_classic-article-list.scss

@@ -0,0 +1,45 @@
+#article-list {
+	gap: 2rem;
+
+	article {
+		position: relative;
+		transition: none;
+		box-shadow: none;
+		border-radius: 0;
+		border-block-end: max(1px, 0.0625rem) solid var(--fg-muted-2);
+		background: none;
+		padding: 0;
+		padding-block-end: 1rem;
+		overflow: visible;
+
+		&:last-of-type {
+			border-block-end: none;
+		}
+
+		&:active {
+			transform: none;
+		}
+
+		& > a {
+			border-radius: 0;
+		}
+
+		&.draft,
+		&.archive,
+		&.featured,
+		&.hot,
+		&.poor {
+			background-color: transparent;
+
+			&::before {
+				display: none;
+			}
+		}
+
+		.details {
+			margin-block-start: 0;
+			border-block-start: none;
+			padding-block-start: 0;
+		}
+	}
+}

sass/mods/_classic-del.scss

@@ -0,0 +1,7 @@
+del {
+	box-shadow: none;
+	border-radius: 0;
+	background-color: transparent;
+	padding: 0;
+	color: inherit;
+}

sass/mods/_classic-nav.scss

@@ -0,0 +1,42 @@
+#site-nav {
+	margin-block-start: 0;
+	inset-block-start: 0;
+	border-radius: 0;
+	width: 100%;
+	max-width: 100%;
+
+	&::before {
+		box-shadow: var(--shadow-glass);
+		border-radius: 0;
+	}
+
+	nav,
+	#search-container {
+		margin: 0 auto;
+		width: min(var(--container-width), 90%);
+	}
+
+	nav ul li {
+		a,
+		summary,
+		&#search button,
+		&#language-switcher details summary,
+		&#theme-switcher details summary {
+			border-radius: var(--rounded-corner);
+		}
+	}
+
+	#home {
+		margin-inline-end: auto;
+	}
+
+	.divider {
+		display: none;
+	}
+
+	#search-container {
+		#search-bar {
+			border-radius: var(--rounded-corner);
+		}
+	}
+}

sass/mods/_modern-headings.scss

@@ -0,0 +1,13 @@
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	font-weight: bold;
+	font-family: var(--font-system-ui);
+}
+
+h1 {
+	font-weight: 900;
+}

sass/mods/_modern-hr.scss

@@ -0,0 +1,12 @@
+hr {
+	box-shadow: var(--edge-highlight);
+	border: none;
+	border-radius: 999px;
+	background-color: var(--fg-muted-2);
+	width: 50%;
+	height: 0.25rem;
+
+	&::after {
+		display: none;
+	}
+}

sass/mods/_no-edge-highlight.scss

@@ -0,0 +1,7 @@
+@import "../_variables.scss";
+
+@include theme-variables using ($theme) {
+	@if $theme == "light" {
+		--edge-highlight: 0 0 transparent;
+	}
+}

sass/mods/_sticked-nav.scss

@@ -0,0 +1,28 @@
+#site-nav {
+	margin-block-start: 0;
+	inset-block-start: 0;
+	border-radius: 0 0 calc(var(--rounded-corner) + 0.5rem)
+		calc(var(--rounded-corner) + 0.5rem);
+
+	&::before {
+		box-shadow: var(--shadow-glass);
+		border-radius: 0 0 calc(var(--rounded-corner) + 0.5rem)
+			calc(var(--rounded-corner) + 0.5rem);
+	}
+
+	nav ul li {
+		a,
+		summary,
+		&#search button,
+		&#language-switcher details summary,
+		&#theme-switcher details summary {
+			border-radius: var(--rounded-corner);
+		}
+	}
+
+	#search-container {
+		#search-bar {
+			border-radius: var(--rounded-corner);
+		}
+	}
+}

sass/style.scss

@@ -0,0 +1,41 @@
+/*!
+ * Duckquill v6.3.0 (https://duckquill.daudix.one)
+ * Copyright 2024-2025 David "Daudix" Lapshin
+ * Licensed under MIT (https://codeberg.org/daudix/duckquill/src/branch/main/LICENSE)
+ */
+
+@use "normalize";
+
+@use "variables";
+
+@use "alerts";
+@use "article-list";
+@use "article";
+@use "buttons";
+@use "code";
+@use "comments";
+@use "crt";
+@use "emoji";
+@use "external";
+@use "feed";
+@use "footer";
+@use "footnotes-list";
+@use "general";
+@use "hidden";
+@use "icon";
+@use "iframe";
+@use "input";
+@use "media";
+@use "nav";
+@use "not-found";
+@use "post-nav";
+@use "pre-container";
+@use "sparkline";
+@use "spoiler";
+@use "statements";
+@use "table";
+@use "tags";
+@use "title";
+@use "typography";
+@use "visually-hidden";
+@use "zola-anchor";

static/css/timeline.css

@@ -37,7 +37,7 @@
   width: 16px;
   height: 16px;
   border-radius: 50%;
-  background: var(--accent-color);
+  background: var(--bg-color);
   border: 2px solid white;
   z-index: 1;
 }
@@ -50,7 +50,7 @@
   left: -160px;
   width: 100px;
   text-align: right;
-  color: #ffffff;
+  color: var(--fg-color);
   font-weight: bold;
   font-size: 0.9rem;
   line-height: 1.3;
@@ -78,7 +78,7 @@
 
 /* Hover Effects */
 #timeline-content li.event:hover::before {
-  background: var(--accent-color-dark);
+  background: var(--accent-color);
 }
 
 #timeline-content li.event:hover {
@@ -87,5 +87,5 @@
 
 /* From + To Label Hover Effect */
 #timeline-content li.event:hover::after {
-  color: var(--fg-color);
+  color: var(--accent-color);
 }

templates/shortcodes/timeline.html

@@ -3,13 +3,13 @@
   <ul class="timeline">
     {% for d in dt %}
     <li class="event" data-from="{{ d.from }}" data-to="{{ d.to }}">
-      {% if d.icon %}
+
-        <i class="{{ d.icon }} timeline-icon"></i>
-      {% endif %}
       <h3>{{ d.title | markdown | safe }}</h3>
 
       {% if d.location %}
-        <p><strong>{{ d.location }}</strong></p>
+        {% if d.icon %}
+          <p> <i class="{{ d.icon }} timeline-icon"></i> <strong>{{ d.location }}</strong></p>
+        {% endif %}
       {% endif %}
 
       <p>{{ d.body | safe }}</p>