diff --git a/resources/less/fluent.less b/resources/less/fluent.less
new file mode 100644
index 0000000..a29a3b7
--- /dev/null
+++ b/resources/less/fluent.less
@@ -0,0 +1,1134 @@
+@header-bg-light: saturate(average(average(fade(@config-primary-color, 30%), white), @layer-1-color), 30%);
+@header-bg-dark: saturate(average(average(fade(@config-primary-color, 30%), black), @layer-1-color), 30%);
+@backdrop: ~"#0000004D";
+@SurfaceStrokeColorDefault: fade(#757575, 40%);
+@shadow-outline-normal: 0 0 0 1px @Fluent-border;
+@shadow-outline-window: 0 0 0 1px @SurfaceStrokeColorDefault;
+.define-colors(@config-dark-mode);
+.define-colors(false) {
+	@body-bg: lighten(average(average(fade(@config-primary-color, 30%), white), @layer-2-color), 1%);
+	@Switch-border-color: @Fluent-border;
+	@layer-1-color: #e8e8e8;
+	@layer-2-color: #f9f9f9;
+	@layer-3-color: #fdfdfd;
+	@obj-color: lighten(saturate(average(fade(@config-primary-color, 2%), #fbfbfb), 30%), 1%);
+	@LayerFillColorDefault: ~"#ffffff80";
+	@CardBackgroundFillColorDefault: fade(white, 70%);
+	@ExpanderHeaderBackground: ~"#00000009";
+	@obj-title-color: #191a1a;
+	@Fluent-border: fade(black, 5.9%);
+	@details-second-font-color: #5e5e5e;
+	@titlebar-bg: @header-bg-light;
+	@button-border-color: ~"#0000000f #0000000f #00000029";
+	@button-active-border-color: ~"#0000000f";
+	@button-color: ~"padding-box linear-gradient(#ffffffb3, #ffffffb3)";
+	@button-hover-color: ~"#f9f9f980";
+	@button-active-color: ~"#f9f9f94d";
+	@menu-item-hover: ~"#00000009";
+	@menu-item-active: ~"#00000006";
+	@ControlFillColorDefault: ~"#FFFFFFB3";
+	@ControlFillColorInputActive: white;
+	@low-elevation-ramp: ~"0px calc(0.5 * var(--elevation-height)) calc(1 * var(--elevation-height)) 0px" fade(#000, 14%), ~"0px calc(0.5 * var(--elevation-height)) calc(1 * var(--elevation-height)) 0" fade(#000, 14%);
+	@high-elevation-ramp: ~"0px calc(0.5 * var(--elevation-height)) calc(1 * var(--elevation-height)) 0px" fade(#000, 24%), ~"0px 0px 8px 0px" fade(#000, 20%);
+	@Acrylic-bg: rgba(255, 255, 255, 0.6);
+	@Text-Input: padding-box linear-gradient(@ControlFillColorDefault, @ControlFillColorDefault), border-box linear-gradient(~"#0000000F" ~"calc(100% - 1px)", ~"#00000072" ~"calc(100% - 1px)", ~"#00000072");
+	@Text-Input-focus: padding-box linear-gradient(@ControlFillColorDefault, @ControlFillColorDefault), border-box linear-gradient(~"#0000000F" ~"calc(100% - 2px)", var(--primary-color) ~"calc(100% - 2px)", var(--primary-color)) !important;
+}
+.define-colors(true) {
+	@body-bg: lighten(average(average(fade(@config-primary-color, 30%), black), @layer-2-color), 2%);
+	@layer-1-color: #202020;
+	@layer-2-color: #272727;
+	@layer-3-color: #323232;
+	@obj-color: lighten(saturate(average(fade(@config-primary-color, 2%), #2b2b2b), 15%), 1%);
+	@LayerFillColorDefault: ~"#3a3a3a4c";
+	@CardBackgroundFillColorDefault: fade(white, 5%);
+	@ExpanderHeaderBackground: ~"#ffffff0f";
+	@obj-title-color: white;
+	@Fluent-border: fade(black, 9.8%);
+	@details-second-font-color: #cfcfcf;
+	@titlebar-bg: @header-bg-dark;
+	@button-border-color: ~"#ffffff18 #ffffff12 #ffffff12";
+	@button-active-border-color: ~"#ffffff12";
+	@button-color: ~"padding-box linear-gradient(#ffffff0f, #ffffff0f)";
+	@button-hover-color: ~"#ffffff15";
+	@button-active-color: ~"#ffffff08";
+	@menu-item-hover: ~"#ffffff0f";
+	@menu-item-active: ~"#ffffff0a";
+	@ControlFillColorDefault: ~"#FFFFFF0F";
+	@ControlFillColorInputActive: ~"#1E1E1EB3";
+	@low-elevation-ramp: ~"0px calc(0.5 * var(--elevation-height)) calc(1 * var(--elevation-height)) 0px" fade(#000, 28%), ~"0px calc(0.5 * var(--elevation-height)) calc(1 * var(--elevation-height)) 0px" fade(#000, 14%);
+	@high-elevation-ramp: ~"0px calc(0.5 * var(--elevation-height)) calc(1 * var(--elevation-height)) 0px" fade(#000, 28%), ~"0px 0px 2px 0px" fade(#000, 20%);
+	@Acrylic-bg: transparent;
+	@Text-Input: padding-box linear-gradient(@ControlFillColorDefault, @ControlFillColorDefault), border-box linear-gradient(~"#FFFFFF12" ~"calc(100% - 1px)", ~"#FFFFFF8B" ~"calc(100% - 1px)", ~"#FFFFFF8B");
+	@Text-Input-focus: padding-box linear-gradient(@ControlFillColorInputActive, @ControlFillColorInputActive), border-box linear-gradient(~"#FFFFFF12" ~"calc(100% - 2px)", var(--primary-color) ~"calc(100% - 2px)", var(--primary-color)) !important;
+}
+.define-header(@config-colored-header);
+.define-header(false) {
+	@header-bg: @titlebar-bg;
+}
+
+.shadow2() {
+	--elevation-height: 2px;
+}
+
+.shadow4() {
+	--elevation-height: 4px;
+}
+
+.shadow8() {
+	--elevation-height: 8px;
+}
+
+.shadow16() {
+	--elevation-height: 16px;
+}
+
+.shadow28() {
+	--elevation-height: 28px;
+}
+
+.shadow64() {
+	--elevation-height: 64px;
+}
+
+:root {
+	accent-color: var(--primary-color);
+	scrollbar-width: thin;
+	--button-bg: @obj-color;
+	--button-bg-hover: fade(#999, 10%);
+	--fancybox-bg: @backdrop;
+	--fancybox-accent-color: var(--primary-color);
+	--noise-asset: url(data:image/png;base64,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);
+	& when (@config-dark-mode = false) {
+		--Acrylic-filter: contrast(45%) blur(30px) saturate(1.25) brightness(135%);
+		color-scheme: light;
+	}
+	& when (@config-dark-mode = true) {
+		--Acrylic-filter: saturate(125%) brightness(125%) blur(30px) contrast(75%) saturate(250%) brightness(60%) contrast(80%) brightness(60%);
+		color-scheme: dark;
+	}
+	& when (@config-colored-header = false) {
+		--colored-titlebar: false;
+	}
+	& when (@config-colored-header = true) {
+		--colored-titlebar: true;
+	}
+}
+
+body {
+	overflow-y: auto;
+}
+
+#app-navigation {
+	box-shadow: @shadow-outline-window;
+}
+
+.scrolled .App-header, .scrolled .App-navigation {
+	box-shadow: none;
+}
+
+.App-content {
+	border-top: none;
+}
+
+.Button:not(.Button--flat, .App-header .Button, .App-header .Button:hover, .UserCard .Button, .UserCard .Button:hover, .Button--primary, .Button--link, .FoFLogInButton, .SubscriptionMenu-button--follow, .App-primaryControl>.Button, .App-titleControl>.Button, .App-backControl>.Button, .PostQuoteButton, .disabled, :disabled), .Select>.Select-input:not(.disabled, :disabled) {
+	border: 1px solid transparent;
+	background: @button-color;
+	border-color: @button-border-color;
+	color: var(--text-color);
+}
+
+.Button:not(.Button--flat, .App-header .Button, .App-header .Button:hover, .UserCard .Button, .UserCard .Button:hover, .Button--primary, .Button--link, .FoFLogInButton, .SubscriptionMenu-button--follow, .App-primaryControl>.Button, .App-titleControl>.Button, .App-backControl>.Button, .PostQuoteButton, .disabled, :disabled):hover, .Select>.Select-input:not(.disabled, :disabled):hover {
+	background: @button-hover-color;
+}
+
+.Button:not(.Button--flat, .App-header .Button, .App-header .Button:hover, .UserCard .Button, .UserCard .Button:hover, .Button--primary, .Button--link, .FoFLogInButton, .SubscriptionMenu-button--follow, .App-primaryControl>.Button, .App-titleControl>.Button, .App-backControl>.Button, .PostQuoteButton):active, .Select>.Select-input:focus {
+	background: @button-active-color;
+	box-shadow: none;
+	border-color: @button-active-border-color;
+}
+
+.Button:not(.Button--flat, .App-header .Button, .App-header .Button:hover, .UserCard .Button, .UserCard .Button:hover, .Button--primary, .Button--link, .FoFLogInButton, .SubscriptionMenu-button--follow, .App-primaryControl>.Button, .App-titleControl>.Button, .App-backControl>.Button, .PostQuoteButton), .Select>.Select-input {
+	&.disabled, &:disabled {
+		background: @button-active-color;
+		box-shadow: none;
+		color: var(--text-color);
+		border: 1px solid @button-active-border-color;
+		opacity: 1;
+	}
+}
+
+.Post-flagged .Button, .Post-flagged .Button:hover, .Post-flagged .Button:active, .Post-flagged .Button:focus, .Post-flagged .Button.focus {
+	& when (@config-dark-mode =false) {
+		color: black;
+	}
+}
+.PostQuoteButton {
+	--button-color: var(--button-primary-color);
+    --button-bg: var(--button-primary-bg);
+    --button-bg-hover: var(--button-primary-bg-hover);
+    --button-bg-active: var(--button-primary-bg-active);
+    --button-bg-disabled: var(--button-primary-bg-disabled);
+}
+
+.Button.Button--primary, .FoFLogInButton, .SubscriptionMenu-button--follow, .PostQuoteButton {
+	& when (@config-dark-mode = false) {
+		background: ~"padding-box linear-gradient(var(--button-bg), var(--button-bg)), border-box linear-gradient(#ffffff14 90%, #00000066 100%), border-box var(--button-bg)";
+	}
+
+	& when (@config-dark-mode = true) {
+		background: ~"padding-box linear-gradient(var(--button-bg), var(--button-bg)), border-box linear-gradient(#ffffff14 90%, #00000023 100%), border-box var(--button-bg)";
+	}
+	border: 1px solid transparent;
+	&:hover {
+		& when (@config-dark-mode = false) {
+			background: ~"padding-box linear-gradient(var(--button-bg-hover), var(--button-bg-hover)), border-box linear-gradient(#ffffff14 90%, #00000066 100%), border-box var(--button-bg-hover)";
+		}
+	
+		& when (@config-dark-mode = true) {
+			background: ~"padding-box linear-gradient(var(--button-bg-hover), var(--button-bg-hover)), border-box linear-gradient(#ffffff14 90%, #00000023 100%), border-box var(--button-bg-hover)";
+		}	
+	}
+
+	&:active {
+		background: var(--button-bg-active);
+	}
+	&.disabled, &:disabled {
+		& when (@config-dark-mode = false) {
+			background: ~"#00000037";
+			color: white;
+		}
+	
+		& when (@config-dark-mode = true) {
+			background: ~"#ffffff28";
+			color: ~"#ffffff87";
+		}	
+	}
+}
+
+button.Button, select.FormControl, fieldset.Settings-notifications td, #header a.Button {
+	font-size: 14px;
+}
+
+.Button:active,
+.Button.active,
+.open>.Button.Dropdown-toggle {
+	box-shadow: unset;
+}
+
+div.PostUser-bar--empty {
+	background: #8d8d8d;
+	transform: translateY(1px);
+	height: 1px;
+}
+
+.PostUser-bar {
+	height: 3px;
+}
+
+.PostUser .UserCard {
+	--border-radius: 8px;
+	.shadow28();
+	box-shadow: @high-elevation-ramp, @shadow-outline-normal;
+}
+
+.Dropdown-separator {
+	& when (@config-dark-mode = false) {
+		background-color: ~"#0000000f";
+	}
+
+	& when (@config-dark-mode = true) {
+		background-color: ~"#ffffff15";
+	}
+}
+
+.Dropdown-menu {
+	&:not(.sideNav .Dropdown--select .Dropdown-menu, .PostStreamScrubber .Dropdown-menu) {
+		.shadow16();
+		box-shadow: @low-elevation-ramp, @shadow-outline-normal;
+		border-radius: 8px;
+		background-image: var(--noise-asset);
+		background-attachment: fixed;
+	}
+
+	&:not(.sideNav .Dropdown--select .Dropdown-menu, .PostStreamScrubber .Dropdown-menu, .PostMeta .Dropdown-menu) {
+		padding: 0;
+	}
+
+	&>li {
+		margin: 4px;
+		&>a, &>button {
+			border-radius: 4px;
+			&:hover {
+				background: @menu-item-hover;
+			}
+			&:active {
+				background: @menu-item-active;
+			}
+		}
+		&.active>a, &.active>button {
+			background: @menu-item-active;
+		}
+	}
+
+	.PostMeta & {
+		padding: 8px;
+	}
+}
+
+fieldset>legend, .SettingsPage label {
+	& when (@config-dark-mode = false) {
+		color: black;
+	}
+	& when (@config-dark-mode = true) {
+		color: white;
+	}
+	font-size: 14px;
+	font-weight: normal;
+}
+
+p.description, p.Settings-theme--selection_description {
+	color: @details-second-font-color;
+}
+
+.SettingsPage>ul>li {
+	box-shadow: @shadow-outline-normal;
+	border-radius: 4px;
+	background-color: @LayerFillColorDefault;
+	margin-bottom: 12px;
+	padding: 16px;
+}
+
+.Hero {
+	margin: 12px;
+	border-radius: 8px;
+	box-shadow: @shadow-outline-normal;
+}
+
+.darkenBackground {
+	border-radius: 8px;
+}
+
+.Modal {
+	border-radius: 8px;
+	.shadow64();
+	box-shadow: @high-elevation-ramp;
+}
+
+.Modal-header h3 {
+	font-weight: bold;
+}
+
+.Modal-body {
+	background-color: @LayerFillColorDefault;
+}
+
+.Modal-content {
+	border-radius: 8px;
+	box-shadow: @shadow-outline-window;
+	& when (@config-colored-header = false) {
+		background-color: var(--header-bg);
+	}
+}
+
+.backdrop {
+	background-color: @backdrop;
+}
+
+.IndexPage>.container {
+	margin-top: 16px;
+}
+
+.LoadingIndicator-container--medium, .LoadingIndicator-container--large {
+    color: var(--primary-color);
+}
+
+.LoadingIndicator {
+	animation: none;
+	border: none;
+	border-radius: 0;
+	background-color: currentColor;
+	--animation-image: url("data:image/svg+xml,%3Csvg viewBox='5.963 5.963 21.940666 21.940666' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cg id='layer1'%3E%3Ccircle cx='16.933332' cy='16.933332' r='9.4701843' stroke='%23000' stroke-width='3' fill='none' stroke-dashoffset='' stroke-linecap='round' id='circlebar' stroke-dasharray='1 100'%3E %3CanimateTransform attributeName='transform' attributeType='AUTO' type='rotate' values='-95 16.933332 16.933332;355 16.933332 16.933332;985 16.933332 16.933332' dur='2s' repeatCount='indefinite' /%3E %3Canimate attributeName='stroke-dasharray' attributeType='AUTO' type='rotate' values='0.01 100;30 100;0.01 100' dur='2s' repeatCount='indefinite' /%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");
+	-webkit-mask: var(--animation-image);
+	mask: var(--animation-image);
+}
+
+#header {
+	box-shadow: @shadow-outline-window;
+	& input[type=search] {
+		font-size: 14px;
+		border-color: transparent;
+		background: @Text-Input;
+		&:focus {
+			background: @Text-Input-focus;
+		}
+	}
+
+	& .Search-input::before, .FormControl::-webkit-input-placeholder, .FormControl::placeholder, & .Search-input > .Search-clear, & .Search-input > .Search-clear:hover {
+			& when (@config-dark-mode = false) {
+				color: rgb(117, 117, 117) !important;
+			}
+			& when (@config-dark-mode = true) {
+				color: #cfd1d2 !important;
+			}
+	}
+}
+
+.FormControl[type=text],
+.FormControl[type=email],
+.FormControl[type=password],
+textarea.FormControl,
+.TagsInput {
+	border-radius: 4px;
+	border: 1px solid transparent;
+	background: @Text-Input;
+}
+
+.FormControl[type=text]:focus,
+.FormControl[type=email]:focus,
+.FormControl[type=password]:focus,
+.Modal-body textarea.FormControl:focus,
+.TagsInput:focus, .TagsInput:focus-within {
+	background: @Text-Input-focus;
+	border-width: 1px 1px 2px 1px;
+	border-color: transparent;
+}
+
+.TagsInput:focus-within {
+	outline: none;
+}
+
+.SelectTagList {
+	& > li {
+		margin: 4px;
+		border-radius: 4px;
+		&.active {
+			background: @menu-item-active;
+		}
+	}
+}
+
+.Checkbox--switch .Checkbox-display {
+	width: 40px;
+	height: 20px;
+	border: @Fluent-border 1px solid;
+	border-radius: 20px;
+	margin-top: 0px;
+	&:before {
+		background: padding-box linear-gradient(white, white);
+		width: 20px;
+		height: 20px;
+		border: 5px solid transparent;
+		box-shadow: none;
+		top: 0px;
+		left: 0px;
+		margin: -1px -0.5px;
+	}
+}
+
+.on.Checkbox--switch .Checkbox-display {
+	background: var(--primary-color);
+	border: var(--primary-color) 1px solid;
+	transition-property: background-color, border;
+	&:before {
+		left: 20px;
+	}
+}
+
+.AfruxWidgets-Widget-content {
+	.shadow2();
+	box-shadow: @low-elevation-ramp, @shadow-outline-normal;
+}
+
+.Alert {
+	font-size: 14px;
+}
+
+.AlertManager .Alert {
+	.shadow28();
+	box-shadow: @high-elevation-ramp, @shadow-outline-normal;
+}
+
+.Composer {
+	.shadow64();
+	border-radius: 8px 8px 0 0;
+	box-shadow: @high-elevation-ramp;
+}
+
+.ComposerBody-loading {
+	border-radius: 8px;
+}
+
+.DiscussionListItem {
+	margin: 12px 8px;
+    box-shadow: @shadow-outline-normal;
+    border-radius: 4px;
+    background-color: @CardBackgroundFillColorDefault;
+	--muted-color: @details-second-font-color;
+	--muted-more-color: @details-second-font-color;
+	--button-color: @details-second-font-color;
+	&:hover {
+		background-color: @button-hover-color;
+		& when (@config-dark-mode = false) {
+			box-shadow: 0 0 0 1px ~"#0000000f";
+		}
+		& when (@config-dark-mode = true) {
+			box-shadow: 0 0 0 1px @button-hover-color;
+		}
+	}
+	&:active {
+		background-color: @button-active-color;
+		box-shadow: 0 0 0 1px @button-active-border-color;
+	}
+	.DiscussionList:not(.DiscussionList--searchResults) & .read .DiscussionListItem-title, .DiscussionList:not(.DiscussionList--searchResults) & .unread .DiscussionListItem-title {
+		color: @obj-title-color;
+	}
+}
+
+.DiscussionListItem-content:active {
+    background: none !important;
+}
+
+.NotificationList {
+	--muted-color: var(--text-color);
+    --button-color: var(--text-color);
+	&-header {
+		border-bottom: 1px solid @Fluent-border;
+		& when (@config-dark-mode = false) {
+			background-color: ~"#00000005";
+		}
+		& when (@config-dark-mode = true) {
+			background-color: ~"#00000021";
+		}
+		border-radius: 8px 8px 0 0;
+	}
+
+	&-content {
+		padding-bottom: 12px;
+	}
+}
+
+ul.NotificationGroup-content {
+	display: flex;
+    flex-direction: column;
+    row-gap: 12px;
+	& > li {
+		margin: 0 8px;
+		--muted-color: @details-second-font-color;
+		& > a {
+			&.Notification {
+				background-color: @CardBackgroundFillColorDefault;
+				box-shadow: @shadow-outline-normal;
+				border-radius: 4px;
+			}
+			&.Notification:hover, &.unread {
+				background-color: @button-hover-color;
+				& when (@config-dark-mode = false) {
+					box-shadow: 0 0 0 1px ~"#0000000f";
+				}
+				& when (@config-dark-mode = true) {
+					box-shadow: 0 0 0 1px @button-hover-color;
+				}
+			}
+			&.Notification:active, &.Notification:focus, &.Notification:focus-within {
+				background-color: @button-active-color;
+			}
+			&.unread .Notification-title:after {
+				content: '';
+				display: inline-block;
+				width: 1em;
+				height: 1em;
+				border-radius: 50%;
+				background-color: var(--primary-color);
+				transform: translateY(10%);
+				margin-left: 8px;
+			}
+		}
+		& .Notification-excerpt {
+			color: @details-second-font-color;
+		}
+	}
+}
+
+.Post-body blockquote {
+	--body-bg: @obj-color;
+}
+
+.ReplyPlaceholder {
+	border: none;
+}
+
+aside.DiscussionPage-list {
+	border-radius: 8px;
+	.shadow16();
+	box-shadow: @low-elevation-ramp, @shadow-outline-normal;
+	& .DiscussionListItem {
+		margin: 12px 8px;
+		border-radius: 4px;
+	}
+}
+
+.tooltip {
+	& .tooltip-arrow {
+		display: none;
+		& when (@config-dark-mode = false) {
+			color: black !important;
+		}
+	}
+
+	&>.tooltip-inner {
+		.shadow4();
+		box-shadow: @low-elevation-ramp, @shadow-outline-normal;
+		& when (@config-dark-mode = false) {
+			color: black !important;
+		}
+		background-color: @layer-2-color !important;
+		background-image: var(--noise-asset);
+	}
+}
+
+.Badge:not(.Badge--social) {
+	.shadow4();
+	box-shadow: @low-elevation-ramp;
+}
+
+.Scrubber-bar {
+	& when (@config-dark-mode =false) {
+		border: 5px solid #fff;
+	}
+
+	& when (@config-dark-mode =true) {
+		border: 5px solid #454545;
+	}
+	width: 20px;
+	height: 20px;
+	border-radius: 50%;
+	margin-left: -9px;
+	transition: border-width 0.1s;
+	box-shadow: @shadow-outline-normal;
+	.disabled & {
+		filter: grayscale(1);
+	}
+
+	&:not(.disabled .Scrubber-bar) {
+		.shadow4();
+		box-shadow: @low-elevation-ramp, @shadow-outline-normal;
+	}
+}
+
+.Scrubber-before, .Scrubber-after {
+    border-left: 1px solid @Fluent-border;
+}
+
+.Scrubber-handle {
+	display: flex;
+	align-items: center;
+
+	&:hover>.Scrubber-bar:not(.disabled .Scrubber-bar) {
+		border-width: 3.5px;
+	}
+
+	&:active>.Scrubber-bar:not(.disabled .Scrubber-bar) {
+		border-width: 6px;
+	}
+}
+
+.fancybox__toolbar {
+	app-region: drag;
+}
+
+.fancybox__backdrop, .fancybox__image {
+	app-region: no-drag;
+}
+
+.fancybox__toolbar__items--left {
+	margin-left: ~"env(titlebar-area-x, 0)";
+	margin-right: -100px;
+}
+
+.fancybox__toolbar__items {
+	height: 48px;
+}
+
+.carousel__viewport, .fancybox__toolbar__items--right {
+	box-shadow: @shadow-outline-normal;
+	border-radius: 8px;
+	background-image: var(--noise-asset);
+	background-color: @layer-3-color;
+}
+
+.carousel__viewport {
+	margin-bottom: 4px;
+}
+
+.fancybox__thumbs .carousel__slide .fancybox__thumb::after {
+	border-width: 2.4px;
+}
+
+.fancybox__thumbs .carousel__slide.is-nav-selected .fancybox__thumb::after {
+	opacity: 1;
+}
+
+.fancybox__toolbar__items--right {
+	margin-left: -500px;
+	margin-right: ~"calc(100% - env(titlebar-area-width, 100%) - env(titlebar-area-x, 0px) + 16px)";
+	background-color: @layer-1-color;
+	padding: 8px 12px;
+	column-gap: 12px;
+	& > .carousel__button {
+		--carousel-button-width: 32px;
+		--carousel-button-height: 32px;
+		app-region: no-drag;
+		border-radius: 4px;
+		&:hover {
+			background-color: @menu-item-hover;
+		}
+		&:active {
+			background-color: @menu-item-active;
+		}
+		& > svg {
+			--carousel-button-svg-filter: none;
+			& when (@config-dark-mode = false) {
+				stroke: black;
+			}
+			& when (@config-dark-mode = true) {
+				stroke: white;
+			}
+		}
+	}
+}
+
+//Blog
+
+.FlarumBlogOverview {
+	& .BlogScrubber {
+		& .BlogList-item, & .BlogList-item:hover {
+			.fluent-card();
+			overflow: hidden;
+		}
+	}
+	.BlogSideWidget {
+		.fluent-card();
+		& .sideNav li, & .BlogSideWidget-item {
+			margin: 4px;
+			border-radius: 4px;
+		}
+		& .sideNav li.active::before {
+    		content: '';
+    		width: 4px;
+    		height: 17px;
+    		background: var(--primary-color);
+    		border-radius: 2px;
+    		float: left;
+    		margin: 9px -28px 0 -8px;
+		}
+	}
+}
+
+.FlarumBlogItem {
+	& .FlarumBlog-Article {
+		& .FlarumBlog-Article-Sidebar {
+			& .FlarumBlog-Article-Author {
+				.fluent-card();
+			}
+		}
+		& .FlarumBlog-Article-Container {
+			& .FlarumBlog-Article-Content, & .FlarumBlog-Article-Comments {
+				.fluent-card();
+			}
+		}
+	}
+}
+
+@media @phone {
+	#header {
+		box-shadow: none;
+	}
+
+	.App-drawer {
+		.shadow16();
+		box-shadow: @low-elevation-ramp, @shadow-outline-normal;
+	}
+
+	.IndexPage-toolbar {
+		margin-left: -6px;
+    	margin-right: -6px;
+	}
+
+	.DiscussionListItem.Slidable .Slidable-underneath {
+		border-radius: 0 4px 4px 0;
+		background: @layer-2-color !important;
+	}
+
+	& when (@config-dark-mode = false) {
+		.Slidable .Slidable-underneath .fa-ellipsis-v {
+			color: black;
+		}
+	}
+
+	.UserPage > .container {
+		& .PostsUserPage .Placeholder {
+			margin: 40px 0;
+		}
+		& .DiscussionList {
+			margin: 0;
+		}
+	}
+
+	.DiscussionPage-discussion > .container {
+		padding: 0 16px 16px;
+	}
+
+	.UserPage .DiscussionsUserPage {
+		margin: 0 -15px;
+	}
+
+	.PostsUserPage {
+		margin: 0 -15px;
+		padding: 16px;
+	}
+
+	.DiscussionPage-discussion > .container, .PostsUserPage {
+		box-shadow: @shadow-outline-normal;
+		background-color: @obj-color;
+	}
+	
+	.unread .DiscussionListItem-count {
+		color: white;
+	}
+
+	.dropdown-backdrop, .drawer-backdrop, .composer-backdrop {
+		background-color: @backdrop;
+	}
+
+	.Dropdown .Dropdown-menu {
+		.shadow28() !important;
+		border-radius: 0px !important;
+		box-shadow: @high-elevation-ramp, @shadow-outline-normal !important;
+		&>li>a, &>li>button {
+			background: transparent !important;
+			&:hover {
+				background: @menu-item-hover !important;
+			}
+			&:active {
+				background: @menu-item-active !important;
+			}
+		}
+	}
+
+	@media (display-mode: window-controls-overlay) {
+		#app-navigation, .Modal .App-titleControl, .Composer:not(.minimized):before, .ModalManager:before {
+			app-region: drag;
+
+			& button, & a {
+				app-region: no-drag;
+			}
+		}
+
+		.App-titleControl>.Button>*, .App-primaryControl>.Button, #home-link, .App-backControl>.Button, .normal .ComposerBody-header>li:first-child h3 {
+			app-region: no-drag;
+		}
+
+		.App, .Composer:not(.minimized) {
+			padding-top: ~"max(env(titlebar-area-height), var(--header-height-phone))";
+		}
+
+		.App-navigation, .App-primaryControl>.Button, .App-titleControl>.Button, .App-backControl>.Button, .Composer:not(.minimized):before, .ModalManager:before {
+			height: ~"max(env(titlebar-area-height), var(--header-height-phone))";
+		}
+
+		.App-titleControl {
+			left: 0;
+		}
+
+		.Composer:not(.minimized) .Composer-controls .item-minimize, .App.affix .App-backControl {
+			margin-left: ~"env(titlebar-area-x)";
+		}
+
+		.Modal .App-backControl {
+			margin-left: ~"env(titlebar-area-x)" !important;
+		}
+
+		.normal .ComposerBody-header>li:first-child, .App.affix .App-titleControl, .Modal .App-titleControl {
+			margin-left: ~"calc(46px + env(titlebar-area-x))";
+    		width: ~"calc(env(titlebar-area-width) - (46px * 2))";
+			margin-right: ~"calc(100% - env(titlebar-area-x) - env(titlebar-area-width) + 46px)";
+		}
+
+		.ComposerBody-editor .TextEditor-controls .item-submit, .App.affix .App-primaryControl {
+			margin-right: ~"calc(100% - env(titlebar-area-x) - env(titlebar-area-width))" !important;
+		}
+	}
+}
+
+@media @tablet-up {
+	.Composer.active:not(.fullScreen) {
+		.shadow64();
+		box-shadow: @high-elevation-ramp, @shadow-outline-window;
+	}
+
+	@supports (backdrop-filter: blur(30px)) {
+		.Dropdown-menu:not(.sideNav .Dropdown--select .Dropdown-menu, .PostStreamScrubber .Dropdown-menu), .carousel__viewport {
+			background-color: @Acrylic-bg;
+			backdrop-filter: var(--Acrylic-filter);
+		}
+
+		.tooltip {
+			& .tooltip-arrow {
+				display: none;
+			}
+	
+			&>.tooltip-inner {
+				background-color: @Acrylic-bg !important;
+				backdrop-filter: var(--Acrylic-filter);
+			}
+		}
+	}
+
+	li.TagTile {
+		margin: 6px;
+		border-radius: 8px !important;
+		width: ~"calc(33.333% - 12px)";
+		.shadow4();
+		box-shadow: @low-elevation-ramp, @shadow-outline-normal;
+	}
+
+	nav.IndexPage-nav.sideNav,
+	nav.UserPage-nav.sideNav {
+		margin-right: 16px;
+	}
+
+	.sideNav .Dropdown--select .Dropdown-menu>li>a {
+		color: var(--text-color);
+	}
+
+	.DiscussionListItem {
+		margin: 12px 0;
+	}
+
+	.DiscussionPage-stream, .PostsUserPage {
+		padding: 0 16px 16px;
+		box-shadow: @shadow-outline-normal;
+		background-color: @LayerFillColorDefault;
+		border-radius: 8px;
+	}
+	
+	.PostsUserPage {
+		padding: 16px;
+	}
+	
+	.Dropdown-menu span.Button-label {
+		font-size: 14px;
+	}
+
+	@media (max-width: (@screen-desktop - 0.02)) {
+		nav.IndexPage-nav.sideNav {
+			padding: 16px;
+			border-radius: 8px;
+			background-color: @LayerFillColorDefault;
+			margin-right: 0;
+			box-shadow: @shadow-outline-normal;
+			scrollbar-width: thin;
+		}
+
+		.sideNav:after {
+			display: none;
+		}
+
+		.item-nav>div>ul>li {
+			display: inline-flex !important;
+    		flex-direction: column-reverse;
+    		width: fit-content;
+    		align-items: center;
+			&.active::before {
+				width: ~"max(20%, 16px)";
+            	height: 4px;
+				float: right;
+            	margin: -4px 0 0 0;
+			}
+		}
+	}
+
+	.item-nav>div>ul>li {
+		margin: 4px 0;
+		padding: 0 8px;
+		border-radius: 4px;
+		&:hover {
+			background-color: @menu-item-hover;
+		}
+
+		&:active, &.active {
+			background-color: @menu-item-active;
+		}
+
+		&.active::before {
+			content: '';
+			width: 4px;
+			height: 17px;
+			background: var(--primary-color);
+			border-radius: 2px;
+			float: left;
+			margin: 9px -28px 0 -8px;
+		}
+
+		&.active~li.active::before {
+			margin: 9px -28px 0 0;
+		}
+
+		&.active:has(~ li.active) {
+			background-color: transparent;
+		}
+
+		&.active:has(~ li.active)::before {
+			display: none;
+		}
+	}
+
+	@media (display-mode: window-controls-overlay) {
+		#header {
+			app-region: drag;
+			& a, & button, & input {
+				app-region: no-drag;
+			}
+		}
+
+		.App, .App-header {
+			--header-height: ~"calc(60px + env(titlebar-area-height))";
+			& .Header-title {
+				margin-bottom: 4px;
+			}
+		}
+		
+		#header-primary {
+			clear: left;
+		}
+
+		#header-secondary .item-search {
+			position: fixed;
+			top: 8px;
+			left: 33.33%;
+			width: 33.33%;
+			z-index: 10;
+			& input.FormControl {
+				width: 100%;
+			}
+			&>.Search-results {
+				left: 0;
+				right: 0;
+			}
+		}
+
+		.Search.focused {
+			margin-left: 0;
+		}
+
+		.fullScreen .Composer-controls .Button {
+			margin-right: ~"calc(100vw - env(titlebar-area-x) - env(titlebar-area-width))" !important;
+			app-region: no-drag;
+		}
+	}
+}
+
+@media @desktop-up {
+	.Composer {
+		box-shadow: @high-elevation-ramp, @shadow-outline-window;
+	}
+}
+
+// The contents this line below are fluent compoents.
+
+.fluent-button(@accent) {
+	& when (@accent) {
+		& when (@config-dark-mode = false) {
+			background: ~"padding-box linear-gradient(var(--button-bg), var(--button-bg)), border-box linear-gradient(#ffffff14 90%, #00000066 100%), border-box var(--button-bg)";
+		}
+	
+		& when (@config-dark-mode = true) {
+			background: ~"padding-box linear-gradient(var(--button-bg), var(--button-bg)), border-box linear-gradient(#ffffff14 90%, #00000023 100%), border-box var(--button-bg)";
+		}
+		border: 1px solid transparent;
+		&:hover {
+			& when (@config-dark-mode = false) {
+				background: ~"padding-box linear-gradient(var(--button-bg-hover), var(--button-bg-hover)), border-box linear-gradient(#ffffff14 90%, #00000066 100%), border-box var(--button-bg-hover)";
+			}
+		
+			& when (@config-dark-mode = true) {
+				background: ~"padding-box linear-gradient(var(--button-bg-hover), var(--button-bg-hover)), border-box linear-gradient(#ffffff14 90%, #00000023 100%), border-box var(--button-bg-hover)";
+			}	
+		}
+	
+		&:active {
+			background: var(--button-bg-active);
+		}
+		&.disabled, &:disabled {
+			& when (@config-dark-mode = false) {
+				background: ~"#00000037";
+				color: white;
+			}
+		
+			& when (@config-dark-mode = true) {
+				background: ~"#ffffff28";
+				color: ~"#ffffff87";
+			}
+		}
+	}
+	& when not (@accent) {
+		border: 1px solid transparent;
+		background: @button-color;
+		border-color: @button-border-color;
+		color: var(--text-color);
+
+		&:hover {
+			background: @button-hover-color;
+		}
+		
+		&:active {
+			background: @button-active-color;
+			box-shadow: none;
+			border-color: @button-active-border-color;
+		}
+		
+		&.disabled, &:disabled {
+			background: @button-active-color;
+			box-shadow: none;
+			color: var(--text-color);
+			border: 1px solid @button-active-border-color;
+			opacity: 1;
+		}
+	}
+}
+
+.fluent-layer() {
+	box-shadow: @shadow-outline-normal;
+	background-color: @LayerFillColorDefault;
+	border-radius: 8px;
+}
+
+.fluent-menu() {
+	.shadow16();
+	box-shadow: @low-elevation-ramp, @shadow-outline-normal;
+	border-radius: 8px;
+}
+
+.fluent-menu-item() {
+	margin: 4px;
+	border-radius: 4px;
+	&:hover {
+		background: @menu-item-hover;
+	}
+	&:active, &.active {
+		background: @menu-item-active;
+	}
+}
+
+.fluent-acrylic() {
+	background-color: @layer-2-color;
+	background-image: var(--noise-asset);
+	background-attachment: fixed;
+}
+
+.fluent-card() {
+	.shadow8();
+	box-shadow: @low-elevation-ramp, @shadow-outline-normal;
+	border-radius: 8px;
+}