.os {
	--osCursor: url("/_assets/images/os/cursor_default.png") 12 9, auto;
	--osCursorGrab: url("/_assets/images/os/cursor_hovergrab.png") 16 16, grab;
	--osCursorGrabbing: url("/_assets/images/os/cursor_grab.png") 16 16, grabbing;
	--osCursorText: url("/_assets/images/os/cursor_text.png") 16 16, text;
	--osCursorWait: url("/_assets/images/os/cursor_wait.png") 15 15, wait;
	--opacityTransition: opacity 2s ease-in-out;

	--userBg: url('/_assets/images/os/coeur_antoinefyi_osBg.png') 50%;
	--userHighlight: #ccccff;
	--userVariation: #333399;
	--scrollbarHueR: 0deg;
	--scrollbarSat: 100%;

	--menuHeight: 24px;
	--osHeightPadding: 1dvh;
	--osWidthPadding: 1dvw;
	--desktopOffset: calc(var(--menuHeight) + var(--osHeightPadding));

	position: relative;
	height: 100dvh;
	width: 100dvw;
	padding: var(--osHeightPadding) var(--osWidthPadding) var(--osHeightPadding);
	display: grid;
	grid-template-rows: var(--menuHeight) calc(100% - var(--menuHeight));
	overflow: hidden;
	overscroll-behavior: none;
	animation: var(--shakeAnim, dummy 1s linear infinite), var(--hdEndAnim, dummy 1s linear infinite);
	transform: skew(var(--shakeProgress, 0deg), var(--shakeProgress, 0deg));
}

.shake { --shakeAnim: shakeProgress 0.1s linear 2; }

	@property --shakeProgress {
		initial-value: 0deg;
		inherits: false;
		syntax: "<angle>";
	}

	@keyframes shakeProgress {
		0% { --shakeProgress: 0deg; }
		25% { --shakeProgress: -7.77deg; }
		50% { --shakeProgress: 0deg; }
		75% { --shakeProgress: 7.77deg; }
		100% { --shakeProgress: 0deg; }
	}

* { transition: var(--opacityTransition); }
.os:is(.loading) { display: block; --displayWhenLoading: none; }
.zoomableOpened { filter: brightness(0.5); }

iframe.yt-shortcode { margin: 1rem 0; display: grid; aspect-ratio: 16/9 ; }
.overlay { position: relative; }
.overlay .appear { position: absolute; top: 0; left: 0; transition: opacity 0.5s steps(3, end); opacity: 0; }
.overlay:hover .appear { opacity: 1; }

::selection { background-color: var(--userHighlight); }
::-moz-selection { background-color: var(--userHighlight); }
::-o-selection { background-color: var(--userHighlight); }
::-ms-selection { background-color: var(--userHighlight); }
::-webkit-selection { background-color: var(--userHighlight); }

html, body, main, .os, .os > * {
	--currentCursor: var(--osCursor);
	cursor: var(--currentCursor) !important;
	pointer-events: var(--currentPointerEvents);
}

p, h1, h2, h3, h4, h5 { --currentCursor: var(--osCursorText); }

/*#region LOADING */

.loading_container {
	display: none;
	--currentCursor: var(--osCursorWait);
	background: var(--userBg);
	width: 100%;
	height: 100%;
	border-radius: 10px;
}

.loading-screen {
	--loadingW: max(200px, min(310px, 28dvw));
	--loadingH: max(200px, min(270px, 30dvw));
	border-image: url('/_assets/images/os/ui_bevel_slice.png') 30% fill / 10px;

	width: var(--loadingW);
	height: var(--loadingH);
	position: absolute;
	inset: calc(50dvh - calc(var(--loadingH) / 2)) calc(50dvw - calc(var(--loadingW) / 2));

	display: flex;
	place-content: center;
	pointer-events: none;
}

.loading-screen-content {
	padding: min(30px, 4dvh);
}

	.loading-screen img {
		width: 100%;
		outline: solid black 1px;
		box-shadow: -2px -2px gray, 2px 2px white;
	}

	.loading-screen h5 {
		text-align: center;
		font-size: min(14px, 5dvw);
		margin: 1.5dvh;
		margin-bottom: 0.75dvh;
	}

.loading-bar-container {
	width: 50%;
	margin: 0 25% 0 25%;
	height: 10px;
	border-image: url('/_assets/images/os/ui_bevel_selected_slice.png') 30% fill / 10px;
	outline: solid black 1px;
	box-shadow: -2px -2px gray, 2px 2px white;
}

.loading_bar {
	border-image: url('/_assets/images/os/loadbar_bevel.png') 30% fill / 4px;
	width: 10%;
	height: 100%;
}

/*#endregion */
/*#region MENU_BAR */

.menu_bar {
	--menuBarFontSize: 0.8rem;
	font: 'Virtue';
	padding: 0 clamp(15px, 2dvw, 30px);
	border-radius: 10px 10px 0 0;
	box-shadow: 0 1px 1px black;
	background: #dedede url('/_assets/images/os/menubar_bevel.png');
	display: var(--displayWhenLoading, flex);
	column-gap: 0.2rem;
	z-index: 2;
}

@media screen and (max-width: 500px) { .menu_bar { --menuBarFontSize: clamp(11px, 1dvw, 13px) !important; } }

.menu_bar_button {
	font-size: var(--menuBarFontSize);
	letter-spacing: -0.055rem !important;
	line-height: 2rem;
	padding: 0 0.5dvw 0;
	display: grid;
	place-content: center;
	grid-auto-flow: column;
}

	.menu_bar_button:is(.selected) {
		color: white;
		background-color: var(--userVariation);
	}

	.menu_bar_button > img {
		height: 22px;
		width: 22px;
		max-width: none;
		margin: auto;
	}

	.menu_bar_button > .inlineimg {
		width: 20px !important;
		height: 20px !important;
		margin-right: 0.75em !important;
	}

/*#endregion */
/*#region DESKTOP */

.desktop {
	--ui-off: url(/_assets/images/os/ui_bevelOff_slice.png) 30% fill / 40px;
	--ui-selected-off: url(/_assets/images/os/ui_bevel_selectedOff_slice.png) 30% fill / 40px;
	border-radius: 0 0 10px 10px;
	background: var(--userBg, #63639c);
	display: var(--displayWhenLoading, grid);
	font: 1rem 'Arial';
	z-index: 1;
}

.transfer_outline {
	position: absolute;
	border: 1px solid black;
	border-image: url("/_assets/images/os/window_outlineAnim_slice.png") 8 / 2px / 0 round;
	opacity: 50%;
	inset: 0 0 0 0;
	pointer-events: none;
}

.transfer_anim {
	transition: inset 0.15s steps(12, jump-start);
	z-index: 100;
}

/*#endregion */
/*#region ITEMS */

.item_section {
	justify-self: flex-end;
	display: flex;
	flex-direction: column;
	margin: 1rem;
	gap: 1rem;
	width: 64px;
}

.item {
	--img_filter: "";
	--label-color: var(--contentColor, black);
	--label-bg: #ceccccb0;
	
	position: relative;
	pointer-events: auto;
	display: grid;
	grid-template-rows: 32px 17px;
	gap: 0.25rem;
	font-size: 0.95em;
}

.item:is(.selected), .column:has(.selected){
	--img_filter: brightness(0.25) !important;
	--label-color: white;
	--label-bg: black;
}

.item:is(.opened), .column:has(.opened) {
	--img_filter: brightness(120%);
}

.item_icon {
	filter: var(--img_filter);
	mask-size: 100%;
}

	.item .item_icon {
		width: 32px;
		margin: auto;
	}

	.folder-grid .item_icon {
		position: absolute;
		height: min(80%, 19.2px);
		margin-left: 0.3em;
	}

.item_label {
	padding-inline: 0.25rem;
	margin: auto;
	color: var(--label-color);
	background-color: var(--label-bg);
}

.window:is(.unfocused) .item:not(.selected) { color: black; }

/*#endregion */
/*#region BUTTONS */

.window>button { position: absolute; padding: 0; border: 0; z-index: 20; }
.window>button:not(.resize_button) { width: 15px; height: 15px; top: 6px; background-color: rgba(0, 0, 0, 0); }
.window>button:not(.resize_button).active { background-color: rgba(0, 0, 0, 0.5); }
.window>button:focus, .window>button:focus-visible { outline: 4px; outline-color: var(--previewVariationColor); }
.window .resize_button { width: 27px; height: 26px; right: 0; bottom: 0; cursor: var(--osCursorGrab) !important; }
.window .resize_button.active { cursor: var(--osCursorGrabbing) !important; }
.window .close_button { left: 6px; }
.window .minimize_button { right: 7px; }
.window .maximize_button { right: 28px; }

.os_button {
	--btnUrl: var(--unfocusedOsButton, url('/_assets/images/os/button_default_slice.png'));
	min-width: 72px;
	padding: 0.4rem 0.4rem;
	border-image: var(--btnUrl) 18 fill / 6px;
}
.os_button:active { color:white; --btnUrl: url('/_assets/images/os/button_default_pushed_slice.png'); }
.os_button:is(.unavailable) { --btnUrl: url('/_assets/images/os/button_default_unavailable_slice.png'); } 
.os_button:is(.confirm) { --btnUrl: url('/_assets/images/os/button_confirm_slice.png'); }
.os_button:is(.confirm):active { --btnUrl: url('/_assets/images/os/button_confirm_pushed_slice.png'); }

.dropdown_button { --innerMenuDisplay: none; position: relative; }
.dropdown_button:is(.selected) { --innerMenuDisplay: flex; }
.dropdown_button:has(.color_swatch) { padding-left: 36px !important; }
.dropdown_option:has(.color_swatch) { padding: 0.1rem 1.5rem 0.1rem 3rem; }
.os_button:is(.dropdown_button) {
	--btnUrl: var(--unfocusedDropdownButton, url('/_assets/images/os/button_dropdown_slice.png'));
	padding: 0.4rem calc(0.7rem + 22px) 0.4rem 0.7rem;
	text-align: left;
	border-image: var(--btnUrl) 18 78 18 18 fill / 6px 28px 6px 6px;
}
.os_button:is(.dropdown_button:is(.unavailable)) { --btnUrl: url('/_assets/images/os/button_dropdown_unavailable_slice.png'); }
.os_button:is(.dropdown_button):active { --btnUrl: url('/_assets/images/os/button_dropdown_pushed_slice.png'); }

.dropdown_menu {
	display: var(--innerMenuDisplay);
	position: absolute;
	padding: 0;
	outline: 1px solid black;
	box-shadow: 2px 2px #222222;
	flex-direction: column;
	width: max-content;
}

	.dropdown_menu:is(.right_aligned) { right: 0; left: revert !important; }

	.menu_bar_button .dropdown_menu {
		top: calc(var(--menuHeight) / 2 + 1px);
		left: 1px;
	}

	.settings_button .dropdown_menu {
		top: 0px; /* Realigned to current option in JS */
		left: 4px;
		width: calc(100% - 32px);
		z-index: 100;
	}

.dropdown_section {
	border-image: url('/_assets/images/os/ui_bevel_slice.png') 30% fill / 10px;
	padding: 0.1rem 0 0.2rem;
}

.dropdown_option {
	position: relative;
	color: black;
	padding: 0.1rem 1.5rem 0.1rem 1.8rem;
	line-height: 0.85rem;
}
.dropdown_option_pre { position: absolute; left: 0.45rem; top: 0.1rem; }
.menu_option .dropdown_option_pre { left: 0.65rem; }
.dropdown_option_post { position: absolute; top: 0; right: 0.5rem; }

.menu_option {
	position: relative;
	text-align: left;
	color: var(--contentColor, black);
	padding: 0.1rem 1.5rem 0.1rem 1.8rem;
	line-height: 1rem;
}
	.menu_option:not(hover) { --contentColor: black; }
	.menu_option:has(.window_icon):not(.dropdown_button) { padding: 0.1rem 1.8rem 0.1rem 2.8rem; }

	.menu_option img {
		height: 1rem !important;
		width: 1rem !important;
		vertical-align: text-top;
		margin-right: 0.25rem;
	}

	.menu_option .window_icon {
		position: absolute;
		left: 1.7rem;
	}

.menu_option:hover:not(.confirm_animation),
.dropdown_option:hover:not(.confirm_animation) {
	--contentColor: white;
	background-color: var(--userVariation);
}

.confirm_animation {
	animation: confirm 0.1s step-end 3;
}

	@keyframes confirm {
		0% {
			--contentColor: black;
			background-color: none;
		}
		50% {
			--contentColor: white;
			background-color: var(--userVariation);
		}
	}

.unavailable {
	color: #898989 !important;
	pointer-events: none !important;
}

/*#endregion */
/*#region SCROLLBARS */

.scrollbar {
	--scrollbar-button-display: none;
	--scrollbar-border: none;
	position: absolute;
	pointer-events: none;
 
	inset: var(--scrollbar-top, auto) var(--scrollbar-right, auto) var(--scrollbar-bottom, auto) var(--scrollbar-left, auto);
	width: var(--scrollbar-w);
	height: var(--scrollbar-h);

	border-right: 1px solid black; /* Safari */
	border-image: var(--scrollbar-border);
	background-color: #eee;
	box-shadow: var(--scrollbar-shadow);
}

	.vertical {
		--scrollbar-top: 28px;
		--scrollbar-bottom: 26px;
		--scrollbar-right: 7px;
		--scrollbar-h: var(--scrollbar-active-h);
		--scrollbar-w: 20px;
		--scrollbar-active-h: calc(100% - var(--top) - var(--bottom));
		--scrollbar-active-w: 21px;
		--scrollbar-active-bg: url("/_assets/images/os/window_scrollbar_bg_slice.png") 21 fill / 3px;
		--scrollbar-shadow: -1px 1px 0 black;
		--scrollbar-button-margin: 0 0 0 1px;
		--scrollbar-button-right: 1px;
	}

		#patterns_list_box > .vertical {
			--scrollbar-top: -1px;
			--scrollbar-bottom: -1px;
			--scrollbar-right: 0;
			z-index: 2;
		}

		#patterns_list_box > .vertical:not(.scrollbar--active) { --scrollbar-top: 0; --scrollbar-bottom: 0; }

		/* YEP (: */
		.blog_grid + .vertical, .content_box .vertical { --scrollbar-right: -1px; --scrollbar-bottom: 0; }
		.blog_grid + .vertical.vertical:is(.scrollbar--active), .content_box .vertical:is(.scrollbar--active) { --scrollbar-bottom: -1px; }
		.blog_grid + .vertical { --scrollbar-top: 27px;  }
		.content_box .vertical { --scrollbar-top: 0; }
		.content_box .vertical:is(.scrollbar--active) { --scrollbar-top: -1px; }

	.horizontal {
		--scrollbar-bottom: 6px;
		--scrollbar-left: 6px;
		--scrollbar-h: 19.95px;
		--scrollbar-w: var(--scrollbar-active-w);
		--scrollbar-active-h: 21px;
		--scrollbar-active-w: calc(100% - 33px);
		--scrollbar-active-bg: url("/_assets/images/os/window_scrollbarH_bg_slice.png") 50 60 50 60 fill / 30px;
		--scrollbar-shadow: 1px -1px 0 black;
		--scrollbar-button-margin: 1px 0 0 0;
		--scrollbar-button-top: -2px;
		--scrollbar-button-rotate: 90deg;
	}

.scrollbar--active {
	--scrollbar-button-display: table !important;
	--scrollbar-h: var(--scrollbar-active-h) !important;
	--scrollbar-w: var(--scrollbar-active-w) !important;
	--scrollbar-border: var(--scrollbar-active-bg) !important;
	--scrollbar-shadow: none !important;
}

.scrollbar_button {
	position: absolute;
	display: var(--scrollbar-button-display);
	border: 1px solid rgb(153, 153, 255); /* Safari */
	border-image: url("/_assets/images/os/window_scrollbar_button_slice.png") 33% fill / 40px;
	margin: var(--scrollbar-button-margin);
	padding: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	filter: hue-rotate(var(--scrollbarHueR)) saturate(var(--scrollbarSat));
}

	.scrollbar_button img {
		max-width: 10px;
		max-height: 12px;
		position: relative;
		right: var(--scrollbar-button-right);
		top: var(--scrollbar-button-top);
		transform: rotate(var(--scrollbar-button-rotate));
	}
/*#endregion */
/*#region WINDOW */
.window {
	visibility: hidden;
	display: none;

	--currentW: '';
	--currentH: '';
	--currentTop: '';
	--currentLeft: '';

	--titlebarHeight: 30px;
	--folderInfoHeight: 25px;
	--folderInfoZ: 1;
	--columnHeadShadow: none;

	--windowBorder: url('/_assets/images/os/window_slice.png') 29 50 28 33 fill / auto;
	--titleBarSlice: url('/_assets/images/os/titlebar_bevel.png') 5 4 6 4 fill / auto;
	--uiSlice: url('/_assets/images/os/ui_bevel_slice.png') 2 fill / 1px;
	--uiSliceLight: url('/_assets/images/os/ui_bevelLight_slice.png') 2 fill / 1px;
	--uiSliceSelected: url('/_assets/images/os/ui_bevel_selected_slice.png') 2 fill / 1px;

	position: absolute;
	font-size: 0.8em;
	width: min(var(--currentW), 100%);
	height: min(var(--currentH), calc(100% - var(--desktopOffset)));
	top: max(var(--currentTop), var(--desktopOffset));
	left: var(--currentLeft);
}

.window:is(.unfocused) {
	--contentColor: #777777 !important;
	--windowBorder: url('/_assets/images/os/windowOff_slice.png') 29 50 28 33 fill / auto;
	--titleBarSlice: none;
	--uiSlice: url('/_assets/images/os/ui_bevelOff_slice.png') 2 fill / auto;
	--uiSliceLight: url('/_assets/images/os/ui_bevelOff_slice.png') 2 fill / auto;
	--activeTabUnfocusFilter: brightness(110%);
	--tabUnfocusFilter: brightness(100%);
	--tabUnfocused: url('/_assets/images/os/tabUnfocused_slice.png') 4 10 1 10 fill / auto;
	--unfocusedContrastColor: #898989;
	--unfocusedActiveTabBoxShadow: #eee0;
	--settingsUnfocusedBoxShadow: 1px 0 0 var(--unfocusedContrastColor), 0 1px 0 var(--unfocusedContrastColor);
	--unfocusedDropdownButton: url('/_assets/images/os/button_dropdown_unavailable_slice.png');
	--unfocusedOsButton: url('/_assets/images/os/button_default_unavailable_slice.png');
	--allImgFilter: opacity(50%);

	--uiSlice: url("/_assets/images/os/ui_bevelOff_slice.png") 2 fill / 1px !important;
	--uiSliceSelected: url("/_assets/images/os/ui_bevel_selectedOff_slice.png") 2 fill / 1px !important;
	--columnHeadShadow: 0px 1px #777,  -1px 0px #777 !important;
	--folderInfoZ: 11;

	color: var(--contentColor);
}

.window img { filter: var(--allImgFilter); }

.window:has(.settings):not(.unfocused) { --windowBorder: url('/_assets/images/os/window_noMax_slice.png') 30 32 7 32 fill / auto !important; }

.window .border {
	position: absolute;
	height: 100%; width: 100%;
	border: 10px solid lightgray; border-image: var(--windowBorder);
	pointer-events: none;
	image-rendering: pixelated;
	z-index: 2;
}

.titlebar { height: var(--titlebarHeight); z-index: 3; }

	.titlebar .title {
		width: fit-content; max-width: 50%;
		height: calc(var(--titlebarHeight) - 1px);
		margin: auto;
		border-image: var(--titleBarSlice);
		font: 0.8rem 'Virtue';
		letter-spacing: -0.055rem !important;
		line-height: calc(var(--titlebarHeight) - 1px);
		padding-inline: 1rem;
		user-select: none; -webkit-user-select: none; pointer-events: none; overflow: hidden;
	}

	.titlebar img { height: 50%; width: auto; margin-right: 0.5rem; }

.window .content {
	position: absolute;
	margin-top: calc(var(--titlebarHeight) - 1px);
	padding: 1rem 1.6rem 0;
	overscroll-behavior: none;
	overflow: auto;
	background-color: white;
	z-index: -1;
	container: window / size;
}

.content:has(.settings) {
	inset: 0 -5px 0 7px;
	height: calc(100% - var(--titlebarHeight)) !important;
	background: none !important;
	overflow: visible;
	z-index: 4;
}

.content > .document { text-align: left; padding-right: 0.8rem; width: clamp(300px, 100%, 650px); margin: auto; }
.document p { margin-bottom: 0.8rem; }
.document ul { list-style: disclosure-closed inside; padding: 0; padding-left: 1rem; cursor: var(--osCursorText); }
.document li { margin-bottom: 2px; }
.document blockquote {
	padding: 1rem;
	outline: 1px solid black;
	background-color: white;
	margin-bottom: 1em;
	font-style: italic;
}
.document blockquote>p { margin-bottom: 0.25rem; }

.contentimg:not(.noPadding) { padding-bottom: 1.2rem; }
.contentimg:not(.notPix) { image-rendering: pixelated; }

.floatingimg {
	height: 196px;
	width: 144px;
	float: left;
	margin: 0 1rem 1rem 0;
}

.medium-img {
	margin: auto;
	width: min(100%, 300px);
}

.full-img {
	width: min(100%);
}

.folder {
	position: absolute;
	width: 100%; height: 100%;
	inset: 0;
	display: flex; flex-direction: column;
	background-color: #eeeeee;
	font-size: 0.75rem;
}

.folder-info {
	text-align: center; display: table;
	border-image: var(--uiSlice); box-shadow: var(--columnHeadShadow);
	height: var(--folderInfoHeight);
	z-index: var(--folderInfoZ);
}

.folder-grid {
	--columnPMargin: 0 2em 0 0.5em !important;
	--gridRows: repeat(var(--rowCount), 1.7em);
	display: grid;
	grid-template-columns: repeat(calc(var(--columnCount) - 1), max-content) minmax(max-content, 1fr);
	grid-template-rows: var(--gridRows);
	margin-left: 7px;
}

.folder-grid:has(.column-head){
	--gridRows: var(--folderInfoHeight) repeat(var(--rowCount), 1.7em) !important;
}
.folder-grid p { position: relative; margin: var(--columnPMargin); padding: 0 0.2rem 0 0.1rem; }
.folder-grid p>button { position: absolute; top: 0; width: 100%; height: 100%; }
.folder-grid :has(.item_icon) { --columnPMargin: 0 2rem 0 1.5rem !important; }

.column-head { border-image: var(--uiSlice); box-shadow: var(--columnHeadShadow); line-height: 1.2rem !important; z-index: 10;}
.sorting-head { border-image: var(--uiSliceSelected) !important; }
.column { --label-color: var(--contentColor, black); position: relative; padding: 0.25rem 1.2rem 0.25rem 0.25rem; }
.column:not(.column-head) { box-shadow: 0 0.1em white; }
.c1 { grid-column: 1; }
.c2 { grid-column: 2; }
.c3 { grid-column: 3; }
.c4 { grid-column: 4; }
.column>p { width: fit-content; }

.settings {
	--previewBg: var(--userBg);
	--previewHighlightColor: var(--userHighlight);
	--previewVariationColor: var(--userVariation);

	position: absolute;
	inset: 0 3px 6px 0;
	border-image: var(--uiSlice);
	display: grid;
	grid-template-rows: 1fr 2fr 28fr;
	box-shadow: var(--settingsUnfocusedBoxShadow, none);
}
.settings * { color: var(--contentColor, black); }

.carousel {
	display: grid;
	grid-template-columns: repeat(var(--columnCount), 1fr);
}

.character {
	color: var(--characterColor);
	font-weight: bold;
}

.dialog {
	padding-left: 1rem;
}

summary {
	color: var(--userVariation);
	font-weight: bold;
}

details {
	padding-bottom: 0.25rem;
}

@container window (width < 500px) { .carousel { grid-template-columns: repeat(1, 1fr); } }

/*#endregion */
/*#region SETTINGS WINDOW */

.tabs { font-family: 'Virtue'; display: grid; grid-template-columns: repeat(100, max-content); z-index: 2; }
.tab {
	border-image: var(--tabUnfocused, url('/_assets/images/os/tab_slice.png') 4 10 1 10 fill / auto);
	font-size: 0.78rem; letter-spacing: -0.085rem !important; padding-inline: 1rem;
	width: fit-content; 
	image-rendering: pixelated; filter: var(--tabUnfocusFilter, brightness(80%));
}
.tab:not(.currentTab, .tab:active)::after { content: ""; box-shadow: inset 0 -1px 0 var(--unfocusedContrastColor, black); position: absolute; inset: 0; }
.currentTab { box-shadow: 0 2px 0 var(--unfocusedActiveTabBoxShadow, #eee); filter: var(--activeTabUnfocusFilter, none); }
.tab:active { border-image: url('/_assets/images/os/tabActive_slice.png') 4 10 1 10 fill / auto !important; filter: none; color: white; }
.caption { font-family: 'FindersKeepers'; font-size: 1.2rem; line-height: 1rem; vertical-align: top; }

.settings .current { border-image: var(--uiSliceLight); box-shadow: 0 -1px 0 var(--unfocusedContrastColor, black); padding: 1.5rem 1.5rem 1rem; filter: var(--activeTabUnfocusFilter); }
.settings .current > * { display: grid; }
#settingsTabAppearance { grid-template-rows: repeat(3, 50px); }
#settingsTabDesktop { grid-template-columns: 50% 50%; height: 290px; }

#settingsTabAppearance > * { font-family: 'Virtue'; font-size: 0.8rem; display: grid; grid-template-columns: 110px 1fr; column-gap: 0.5rem; }
#settingsTabAppearance .dropdown_button { width: max(60%, 200px); }
#settingsTabAppearance .caption { margin-left: 0.25rem; line-height: 0.8rem; }
#preview_panel { display: grid; grid-template-rows: 175px 65px; }
 
#desktop_preview {
	width: 100%; height: 100%;
	border-image: url("/_assets/images/os/settings_preview_slice.png") 5 2 2 fill / auto;
	background: var(--previewBg); background-size: 33%; border-radius: 3px;
}
#desktop_caption th { margin: 0; padding: 0; width: 55px; }
#patterns_container { display: grid; grid-template-rows: 20px 150px; }
#patterns_options { font-family: 'Virtue'; margin-left: 1.5rem; display: grid; grid-template-rows: 175px 115px; }
#patterns_list_box { 
	position: relative; height: 100%; margin-top: 0.25rem;
	outline: 1px solid black;
	box-shadow: 3px 0 0 var(--previewVariationColor), 0 3px 0 var(--previewVariationColor), -3px 0 0 var(--previewVariationColor), 0 -3px 0 var(--previewVariationColor);
}
#patterns_list { font-family: 'FindersKeepers'; font-size: 1.2rem; background-color: white; display: grid; grid-auto-flow: row; height: 100%; width: calc(100% - 10px); overflow: scroll; }
#patterns_list button { padding-left: 1rem; text-align: left; line-height: 1rem; }
.selected_pattern { background-color: var(--previewHighlightColor); }
#desktop_set { position: absolute; bottom: 1rem; right: 1rem; padding-inline: 1rem; }
.panel_sub { text-align: left; vertical-align: top; padding-top: 0.5rem; }

.color_swatch {
	position: absolute;
	width: 18px;
	inset: 8px 8px 8px 12px;
	background-color: plum;
	outline: solid var(--unfocusedContrastColor, black) 1px;
	filter: var(--activeTabUnfocusFilter, none);
}

	.color_swatch:is(.highlight) { 
		background-color: var(--previewHighlightColor);
	}

	.color_swatch:is(.variation) {
		background-color: var(--previewVariationColor);
	}

	.color_swatch:is(.inline) {
		background-color: var(--previewValueColor);
		inset: 4px 0 4px 1.5rem;
	}

/*#endregion */
/*#region POPUP WINDOW */

.popup_window_wrapper {
	position: absolute;
	display: grid;
	width: 100%;
	height: 100%;
	place-content: center;
	z-index: 1000;
	background-color: rgba(0, 0, 0, 0.25);
}

.popup_window {
	width: min(400px, 90dvw);
	position: relative;
	font-family: 'Virtue';
}

.popup_window::before {
	content: "";
	position: absolute;
	display: inline-block;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	border-image: url('/_assets/images/os/window_popup_slice.png') 31 9 5 5 fill / auto;
	transition: var(--opacityTransition);
	opacity: var(--popupOpacity, 1.0);
}

.popup_window .content {
	position: relative;
	display: grid;
	grid-template-columns: 0.5fr 3fr;
	column-gap: 0.5rem;
	width: 100%;
	height: 100%;
	font-weight: bold;
	font-size: 0.8rem;
	padding: 31px 2rem 1rem 0.6rem;
}

.popup_window .content img, .popup_window .content p { margin: auto; margin-top: 1rem; pointer-events: none; user-select: none; -webkit-user-select: none;}

.popup_window img {
	height: 32px;
	width: 32px;
}

.popup_window .button_wrapper {
	display: flex;
	justify-self: flex-end;
	column-gap: 0.5rem;
	padding-top: 1rem;
}

#popup_text { transition: color 2s ease-in-out; }

/*#endregion */
/*#region BLOG WINDOW */

.content:has(.blog) {
	overflow: inherit;
}

.blog {
	--displayMain: grid; --displayFallback: none;
	position: absolute;
	inset: 0 -4px 13px 7px;
	background: #dcdbe0;
	display: grid;
	grid-template:
		"inbox" 250px
		"doc" 1fr;
	/*grid-template-rows: 150px 8px 1fr ;*/
	row-gap: 8px;
}

@container window (width < 500px) or (height < 500px) {
	.blog { grid-template: "inbox" 27px "doc" 1fr; }
	.inbox { --displayMain: none !important; --displayFallback: ""; display: flex; }
	.spacer { --displayMain: none !important; }
}

@container window (height < 600px) and (width < 500px) {
	.blog { grid-template: "inbox" 27px "doc" 1fr; }
}

.main { display: var(--displayMain); } .fallback { display: var(--displayFallback); }
.spacer { grid-area: spacer; }

.inbox {
	grid-area: inbox;
	position: relative;
	font-family: 'FindersKeepers';
	font-size: 1.2rem;
}

.inbox::after {
	content: "";
	position: absolute;
	inset: 0;
	box-shadow: 
		1px 0 0 black, 
		7px 0 0 #dcdbe0,
		0 1px 0 black, 
		0 2px 0 white, 
		0 7px 0 #dcdbe0;
	pointer-events: none;
}

.content_box {
	background-color: white;
	grid-area: doc;
	position: relative;
	box-shadow: 
		-1px 0 0 black, 
		0 -1px 0 black;
}

.content_box .document {
	position: absolute;
	inset: 0;
	right: 11px;
	padding: 1rem;
	overflow: scroll;
}

.blog_grid_head {
	box-shadow: 0 1px 0 black;
}

.blog_grid_box {
	display: var(--displayMain);
	height: calc(100% - 30px);
	grid-template-rows: 27px 27px 1fr;
	grid-template: 
		"categories" 27px
		"inbox" 1fr;
	position: relative;
}

.inbox_header {
	display: flex;
	font-family: 'Virtue';
	font-size: 0.8rem;
	grid-area: header;
	filter: brightness(105%);
	height: 30px;
	width: 100%;
	column-gap: 1rem;
	padding: 0.25rem;
	z-index: 20;
}

.inbox_header .dropdown_button {
	position: relative;
	top: -2px;
	height: 26px;
	flex-grow: 1; 
	line-height: 0;
	container: dropdown / size;
}

.inbox_header .dropdown_button:nth-of-type(1) {
	flex-grow: 0.33; 
	min-width: 190px;
}

.categories {
	grid-area: categories;
	display: grid;
	grid-auto-flow: column;
	grid-template-columns: 30px 30px 2fr 1fr;
	column-gap: 1px;
	background: #504f50;
}

.blog_grid {
	padding: 0; margin: 0;
	display: grid;
	grid-template-rows: repeat(auto-fit, 27px);
	overflow: scroll;
	width: calc(100% - 8px);
	background-color: #eeeeee;
	position: relative;
	grid-area: inbox;
}

.column-head:has(img) {
	padding: 0;
	display: flex;
}

.column-head > img { width: 20px; height: 20px; margin: auto; }

.blog_grid .column {
	padding-left: 1rem;
}

.blog_post {
	display: none;
}

.blog_grid .column p {
	padding-inline: 0.2rem;
}

.blog_grid .column:is(.selected) {
	font-weight: bolder;
}

.blog_grid .column:is(.selected) p {
	position: relative;
	z-index: 1;
}

.blog_post:is(.selected) {
	display: block;
}

@container dropdown (width < 200px) {
	#blogCategoriesMenu .blogOption::before {
		content: "" !important;
		color: red;
	}
}

#blogCategoriesMenu .blogOption::before {
	content: "Category: ";
	color: #504f50;
}

#categoriesValue::before {
	content: "Category: ";
	color: #504f50;
}

/*#endregion */
/*#region DRIVE ANIMS*/
.hd_end {
	--hdEndAnim: var(--hueAnim, dummy 1s linear infinite);
	filter: var(--hdEndFilter);
	transition: filter 2s ease-in-out;
}

.p1 { --hdEndFilter: sepia(100%) contrast(100%) saturate(100%);  }
.p2 { --hdEndFilter: sepia(0%) contrast(200%) saturate(200%);  }
.p3 { --hdEndFilter: contrast(200%) saturate(200%) hue-rotate(var(--hueProgress, 0deg)); --hueAnim: hueProgress 0.8s linear infinite; }
.p4 { --hueAnim: dummy 1s linear infinite !important; --hdEndFilter: contrast(100%) saturate(0%) hue-rotate(0deg); }

	@property --hueProgress {
		initial-value: 0deg;
		inherits: false;
		syntax: "<angle>";
	}

	@keyframes hueProgress {
		from { --hueProgress: 0deg; }
		to { --hueProgress: 360deg; }
	}

.confirm_sine {
	--progressOffset: 0px;
	--waveCount: 2;
	--sinUnit: 1dvw;
	--radius: 10; /* radius in --sinUnit of circle we'll use as reference */

	--ANGLE: calc(var(--waveCount) * 2 * 3.1415);
	--LENGTH: 100; /* 100dvw/dvh */

	--currentAngle: calc((var(--ANGLE) / var(--LENGTH)) * var(--progressValue) * 1rad);
	--progressValue: calc(var(--sinProgress) * var(--LENGTH));
	--waveValue: calc(-1 * var(--radius) * sin(var(--currentAngle)));
	--progressToApply: calc(var(--progressValue) * var(--sinUnit) - var(--progressOffset));
	--waveToApply: calc(var(--waveValue) * var(--sinUnit));

	translate: var(--progressToApply) var(--waveToApply);
	animation: sinProgress 3s linear infinite; 
}

.v_sine {
	--sinUnit: 1dvh;
	translate: var(--waveToApply) var(--progressToApply);
}

@property --sinProgress {
	initial-value: 0;
	inherits: false;
	syntax: "<number>";
}

@keyframes sinProgress {
	from { --sinProgress: 0; }
	to { --sinProgress: 1; }
}
/*#endregion*/