@font-face
{
	font-family: Inter;
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("Inter-Variable.woff2") format("woff2");
}

@font-face
{
	font-family: Inter;
	font-style: italic;
	font-weight: 100 900;
	font-display: swap;
	src: url("Inter-Variable-Italic.woff2") format("woff2");
}

@font-face
{
	font-family: 'JetBrains Mono';
	font-style: normal;
	font-weight: 100 800;
	font-display: swap;
	src: url("JetBrainsMono-Variable.woff2") format("woff2");
}

@font-face
{
	font-family: 'JetBrains Mono';
	font-style: italic;
	font-weight: 100 800;
	font-display: swap;
	src: url("JetBrainsMono-Variable-Italic.woff2") format("woff2");
}










:root
{
	/* Accents */
	--PrimaryColor: #3C96E1;
	--ContrastColor: #C87D0F;
	--FocusColor: #C87D0F;
	--ErrorColor: #D11616;

	/* Borders */
	--BorderColor0: color-mix(in oklab, var(--PrimaryColor) 2%, #303030);
	--BorderColor1: color-mix(in oklab, var(--PrimaryColor) 4%, #3C3C3C);
	--BorderColor2: color-mix(in oklab, var(--PrimaryColor) 8%, #5B5B5B);

	/* Scrollbars */
	--ThumbColor: color-mix(in oklab, var(--PrimaryColor) 4%, #555);
	--ThumbActiveColor: color-mix(in oklab, var(--PrimaryColor) 5%, #666);

	/* Backgrounds */
	--BackColor0: color-mix(in oklab, var(--PrimaryColor) 1%, #101010);
	--BackColor1: color-mix(in oklab, var(--PrimaryColor) 1%, #202020);
	--BackColor2: color-mix(in oklab, var(--PrimaryColor) 2%, #262626);
	--BackColor3: color-mix(in oklab, var(--PrimaryColor) 3%, #2D2D2D);

	/* Text */
	--TextColor0: color-mix(in oklab, var(--ContrastColor) 1%, #888);
	--TextColor1: color-mix(in oklab, var(--ContrastColor) 2%, #CCC);
	--TextColor2: color-mix(in oklab, var(--ContrastColor) 3%, #EEE);
	--LinkInterfaceColor: #688BA8;
	--LinkColor: #6693D6;

	/* Sizes */
	--BorderSize: 2px;
	--ScrollbarSize: 14px;
	--ThinScrollbarSize: 10px;
	--MaxContentInlineSize: 1360px;
	--PanelsInlineSize: 200px;
	--HeaderBlockSize: 60px;

	/* Font */
	--FontSize: 16px;
	--SmallFontSize: .9rem;
	--FontFamily: 'Inter', sans-serif;
	--MonoFontFamily: 'JetBrains Mono', monospace;

	/* Other */
	--Radius0: 2px;
	--Radius1: 4px;
	--Radius2: 6px;
	--TransitionSpeed: .2s;
	--ShadowColor: #0003;
	--Shadow: 0 0 4px 2px var(--ShadowColor);

	/* Presets */
	--Border0: var(--BorderSize) solid var(--BorderColor0);
	--Border1: var(--BorderSize) solid var(--BorderColor1);
	--Border2: var(--BorderSize) solid var(--BorderColor2);
}

* { box-sizing: border-box; }

html
{
	min-block-size: 100%;
	background-image: linear-gradient(var(--BackColor1) 64px, var(--BackColor0) 256px);
	color: var(--TextColor1);
	font-size: var(--FontSize);
	font-family: var(--FontFamily);
	line-height: 1.5;
	text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	scroll-behavior: smooth;
	-webkit-tap-highlight-color: transparent;
}

html:has(#NavigationList:checked)
{
	overflow: hidden;
	visibility: hidden;
}

body
{
	display: flex;
	justify-content: center;
	margin: 0;
	container-type: inline-size;
	inline-size: 100%;
	min-block-size: 100dvh;
	justify-items: center;
}

::selection
{
	background-color: color-mix(in oklab, var(--PrimaryColor) 45%, #0000);
	color: var(--TextColor2);
}

::target-text, mark
{
	margin-inline: -2px;
	padding-inline: 2px;
	background-color: color-mix(in oklab, var(--ContrastColor) 45%, #0000);
	color: var(--TextColor2);
}

:focus:not(:focus-visible)
{
	outline: none;
}

:focus-visible
{
	z-index: 1;
	outline: var(--BorderSize) solid var(--FocusColor);
	outline-offset: 1px;
	border-radius: var(--Radius0);
}

@media (prefers-reduced-motion: reduce)
{
    :root { --TransitionSpeed: 0s; }
    html { scroll-behavior: auto; }
}










::-webkit-scrollbar
{
	width: var(--ScrollbarSize);
	height: var(--ScrollbarSize);
	background-color: var(--BackColor1);
}

nav::-webkit-scrollbar
{
	width: var(--ThinScrollbarSize);
	height: var(--ThinScrollbarSize);
	background-color: transparent;
}

nav:hover::-webkit-scrollbar { background-color: transparent; }

::-webkit-scrollbar-corner { background-color: var(--BackColor1); }

nav::-webkit-scrollbar-thumb
{
	border: 2px solid transparent;
	background-color: transparent;
	background-clip: padding-box;
}

::-webkit-scrollbar-thumb
{
	border: 3px solid transparent;
	border-radius: calc(var(--ScrollbarSize) / 2);
	background-color: var(--ThumbColor);
	background-clip: padding-box;
}

nav:hover::-webkit-scrollbar-thumb
{
	border: 2px solid transparent;
	border-radius: calc(var(--ThinScrollbarSize) / 2);
	background-color: var(--ThumbColor);
	background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover,
nav:hover::-webkit-scrollbar-thumb:hover
{
	background-color: var(--ThumbActiveColor);
	background-clip: padding-box;
}










header
{
	display: flex;
	align-items: center;
	gap: 1rem;
	inline-size: 100%;
	block-size: var(--HeaderBlockSize);
	padding-block-end: var(--BorderSize);
	padding-inline: 1.5rem;
	overflow-wrap: anywhere;
	pointer-events: all;
}

nav
{
	display: flex;
	flex-direction: column;
	gap: .2rem;
	inline-size: var(--PanelsInlineSize);
	max-block-size: calc(100dvh - var(--HeaderBlockSize));
	padding: 1.5rem;
	overflow-inline: hidden;
	overflow-block: auto;
	overflow-wrap: anywhere;
	font-size: var(--SmallFontSize);
	pointer-events: all;
	hyphens: auto;
}

nav > :first-child,
article > :first-child,
li:first-child,
dt:first-child,
details > div > :first-child
{
	margin-block-start: 0;
}

nav > :last-child,
article > :last-child,
li:last-child,
details > div > :last-child
{
	margin-block-end: 0;
}

nav h2, nav h3
{
	font-size: var(--SmallFontSize);
	font-weight: normal;
	margin-block-end: .5rem;
}

main
{
	margin-block-start: calc(var(--HeaderBlockSize) + 1.5rem);
	inline-size: stretch;
	max-inline-size: var(--MaxContentInlineSize);
}










a:any-link
{
	--color: var(--LinkInterfaceColor);
	color: var(--color);
	text-decoration: none;
	transition: color var(--TransitionSpeed);
}

@media (hover: hover)
{
	a:hover
	{
		color: color-mix(in oklab, #FFF 8%, var(--color));
		text-decoration: underline;
	}
}

a:active { color: color-mix(in oklab, #000 12%, var(--color)); }
a::selection { background-color: color-mix(in oklab, var(--PrimaryColor) 60%, transparent); }

a.External
{
	padding-inline-end: 1.12em;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23688BA8' d='M9 4l2 2V1H6L8 3 4 7 5 8ZM2 3A1 1 0 001 4v6a1 1 0 001 1H8a1 1 0 001-1V8H7.8V9.8H2.2V4.2H4V3Z'/%3E%3C/svg%3E");
	background-position: center right;
	background-repeat: no-repeat;
	background-size: .9em;
}

[dir="rtl"] a.External { background-position: center left; }

article
{
	position: relative;
	z-index: 0;
	border-block: var(--Border1);
	padding-block: 1.75rem;
	padding-inline: 2rem;
	overflow-wrap: anywhere;
	background: var(--BackColor2);
	box-shadow: var(--Shadow);
}

article a:any-link { --color: var(--LinkColor); }

article a.External
{
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236693D6' d='M9 4l2 2V1H6L8 3 4 7 5 8ZM2 3A1 1 0 001 4v6a1 1 0 001 1H8a1 1 0 001-1V8H7.8V9.8H2.2V4.2H4V3Z'/%3E%3C/svg%3E");
}

footer
{
	margin-inline: 1.5rem;
	overflow-wrap: anywhere;
	color: var(--TextColor0);
	font-size: var(--SmallFontSize);
}

footer, .PageCategories { margin-block: 1.5rem; }










[id], [tabindex], a, button, input, select, textarea, summary
{
	scroll-margin-block-start: calc(var(--HeaderBlockSize) + 1.5rem);
}

button { border: none; background: transparent; font: inherit; }
input:placeholder-shown { user-select: none; }
svg { flex-shrink: 0; fill: currentColor; }
p, ul, ol, dl { margin-block: .75rem; }
table, details, blockquote { margin-block: 1rem; }

h1, h2, h3, h4, h5, h6
{
	position: relative;
	color: var(--TextColor2);
	font-weight: 500;
	line-height: 1.5;
}

h1, h2
{
	padding-block-end: .4rem;
}

h1:after, h2:after
{
	content: '';
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 0;
	inline-size: 100%;
	block-size: var(--BorderSize);
	border-radius: var(--BorderSize);
	background-color: var(--BorderColor1);
	box-shadow: 0 0 4px 0px var(--ShadowColor);
}

h1
{
	margin-block: 3rem 1rem;
	font-size: 1.75rem;
}

h2
{
	margin-block: 2.75rem .75rem;
	font-size: 1.5rem;
}

h3
{
	margin-block: 2.5rem .5rem;
	font-size: 1.25rem;
}

h4, h5, h6 { margin-block-end: .25rem; font-size: 1rem; }
h4 { margin-block-start: 2.25rem; }
h5 { margin-block-start: 2rem; }
h6 { margin-block-start: 1.75rem; }

:is(h1, h2, h3, h4, h5) + :is(h2, h3, h4, h5, h6)
{
	margin-block-start: 1rem;
}

hr
{
	block-size: var(--BorderSize);
	border: 0;
	border-radius: var(--BorderSize);
	background-color: var(--BorderColor1);
	box-shadow: 0 0 4px 0px var(--ShadowColor);
}










ul, ol
{
	margin-inline-start: 2rem;
	padding: 0;
}

ul { list-style-type: disc; }
li { margin-block: .3rem; }
li::marker { color: var(--TextColor0); }

li > ul, li > ol
{
	margin-inline-start: 1.5rem;
	margin-block: .3rem;
}

code, pre, kbd, samp, .Mono
{
	font-family: var(--MonoFontFamily);
	font-variant-ligatures: none;
	text-rendering: optimizeLegibility;
}

code
{
	border-radius: var(--Radius1);
	padding-block: 1px;
	padding-inline: .3rem;
	background-color: #0003;
	box-decoration-break: clone;
}

.pre
{
	border: var(--Border1);
	border-radius: var(--Radius2);
	background-color: #0005;
	box-shadow: inset 0 0 2px 2px var(--ShadowColor);
}

.pre > div
{
	position: relative;
	display: flex;
	align-items: center;
	gap: .4rem;
	padding-block: .6rem;
	padding-inline: .9rem;
	color: var(--TextColor0);
}

.pre > div:after
{
	content: '';
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 0;
	inline-size: stretch;
	margin-inline: .45rem;
	block-size: var(--BorderSize);
	border-radius: var(--BorderSize);
	background-color: var(--BorderColor0);
	box-shadow: var(--Shadow);
}

pre
{
	margin: 0;
	padding-block: .8rem;
	padding-inline: .9rem;
	overflow: auto;
	white-space: pre-wrap;
	word-wrap: break-word;
	tab-size: 4;
}

kbd
{
	position: relative;
	top: -2px;
	display: inline-block;
	margin-inline: 2px;
	border: var(--Border1);
	border-radius: var(--Radius1);
	padding-block: 1px;
	padding-inline: 4px;
	background-color: var(--BackColor3);
	box-shadow: 0 2px 0 var(--BorderColor1), 0 2px 4px 0px var(--ShadowColor);
	color: var(--TextColor2);
	font-size: var(--SmallFontSize);
	line-height: 1;
	white-space: nowrap;
}

kbd:active
{
	top: 0;
	box-shadow: none;
}










table
{
	inline-size: 100%;
	border: var(--Border1);
	border-radius: var(--Radius2);
	border-collapse: separate;
	border-spacing: 2px;
	background-color: var(--BackColor0);
	box-shadow: var(--Shadow);
	font-size: var(--SmallFontSize);
}

table.Fixed { table-layout: fixed; }
caption { padding: .25rem; }

th, td
{
	border: 1px solid transparent;
	padding-block: .8rem;
	padding-inline: .9rem;
	text-align: start;
}

th
{
	background-color: var(--BackColor3);
	color: var(--TextColor2);
	font-weight: 500;
	hyphens: auto;
}

tr
{
	background-color: var(--BackColor1);
	transition: background-color var(--TransitionSpeed);
}

td
{
	transition: border-color var(--TransitionSpeed);
}

@media (hover: hover)
{
	tr:hover { background-color: var(--BackColor2); }
	tr:hover td { border-color: var(--BorderColor1); }
}

tr:first-child > :first-child { border-start-start-radius: calc(var(--Radius2) / 2.5); }
tr:first-child > :last-child { border-start-end-radius: calc(var(--Radius2) / 2.5); }
tr:last-child > :first-child { border-end-start-radius: calc(var(--Radius2) / 2.5); }
tr:last-child > :last-child { border-end-end-radius: calc(var(--Radius2) / 2.5); }

dt
{
	margin-block-start: 1rem;
	color: color-mix(in oklab, var(--ContrastColor) 50%, var(--TextColor1));
	font-family: var(--MonoFontFamily);
	font-weight: 600;
}

dt::after
{
	content: ':';
	margin-inline-start: 2px;
	opacity: .5;
}

dt + dt
{
	margin-block-start: .3rem;
}

dd
{
	margin-block-start: .25rem;
	margin-inline-start: 1.5rem;
	line-height: 1.5;
}

dd + dd
{
	margin-block-start: .3rem;
}

abbr[title]
{
	text-underline-offset: 2px;
	cursor: help;
}

sup, sub
{
	position: relative;
	vertical-align: baseline;
	font-size: 70%;
	line-height: 0;
}

sup { inset-block-start: -.45em; }
sub { inset-block-end: -.3em; }












summary
{
	display: flex;
	align-items: center;
	gap: .5rem;
	border: var(--Border1);
	border-radius: var(--Radius2);
	padding-block: .6rem;
	padding-inline: .7rem;
	background-color: var(--BackColor2);
	color: var(--TextColor2);
	font-weight: 500;
	cursor: pointer;
	list-style: none;
	transition: background-color var(--TransitionSpeed);
}

details[open] > summary
{
	border-end-start-radius: 0;
	border-end-end-radius: 0;
}

summary::-webkit-details-marker { display: none; }

summary:before
{
	content: '⌄';
	position: relative;
	inset-inline-start: -.125rem;
	color: var(--PrimaryColor);
	font-weight: bold;
	transform: rotate(-90deg);
}

[dir="rtl"] summary:before { transform: rotate(90deg); }

details[open] > summary:before
{
	inset-inline-start: 0;
	inset-block-start: -.125rem;
	transform: rotate(0deg);
}

@media (hover: hover)
{
	summary:hover
	{
		background-color: var(--BackColor3);
	}
}

summary:active { background-color: var(--BackColor1); }
summary > span { flex: 1; }

details > div
{
	border: var(--Border1);
	border-block-start: 0;
	border-end-start-radius: var(--Radius2);
	border-end-end-radius: var(--Radius2);
	padding: 1rem;
	background-color: var(--BackColor1);
	box-shadow: inset 0 0 2px 2px var(--ShadowColor);
	font-size: var(--SmallFontSize);
}

blockquote
{
	position: relative;
	margin-inline: 0;
	border-inline-start: var(--Radius1) solid var(--BorderColor1);
	padding-block: 1rem;
	padding-inline: 1.25rem;
	border-radius: var(--Radius1);
	background-color: #0002;
	color: var(--TextColor2);
	font-style: italic;
	box-shadow: inset var(--Shadow);
}

blockquote cite
{
	display: block;
	margin-block-start: .5rem;
	font-size: .85rem;
	font-style: normal;
	opacity: .75;
}

blockquote cite:before
{
	content: '—';
	margin-inline-end: .5rem;
	font-size: .85rem;
	opacity: .75;
}

img
{
	vertical-align: middle;
	image-rendering: pixelated;
}










.Fill
{
	flex: 1;
	pointer-events: none;
}

.Subtext
{
	color: var(--TextColor0);
	font-size: 84%;
}

.Dropdown, .Button
{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .25rem;
	color: var(--TextColor1);
	user-select: none;
	transition-property: border-color, background-color, color;
	transition-duration: var(--TransitionSpeed);
	cursor: pointer;
}

.Dropdown:after
{
	content: '⌄';
	position: relative;
	inset-block-start: -.125rem;
	padding-inline: 1px;
	font-weight: bold;
}

.Button
{
	min-block-size: 2rem;
	min-inline-size: 2rem;
	padding-inline: .25rem;
	border: var(--Border1);
	border-radius: var(--Radius1);
	background-color: var(--BackColor2);
}

@media (hover: hover)
{
	.Button:hover, .Dropdown:hover { color: var(--TextColor2); }
	
	.Button:hover
	{
		background-color: var(--BackColor3);
		border-color: var(--BorderColor2);
	}
}

.Button:active, .Dropdown:active { color: var(--TextColor0); }

.Button:active
{
	border-color: var(--BorderColor0);
	background-color: var(--BackColor1);
}

.Columns
{
	column-count: 2;
	column-gap: 2rem;
}

.Columns li
{
	break-inside: avoid-column;
}










.UILayout
{
	position: fixed;
	z-index: 1000;
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	justify-content: center;
	inline-size: 100%;
	block-size: 100dvh;
	user-select: none;
	pointer-events: none;
}

.HeaderBackground
{
	inline-size: 100%;
	block-size: var(--HeaderBlockSize);
	border-block-end: var(--Border1);
	background-color: var(--BackColor1);
	background-image: repeating-linear-gradient(315deg, #0000, #0000 3px, #FFFFFF05 4px, #FFFFFF05 7px, #0000 8px);
	box-shadow: var(--Shadow);
}

.UIWrapper
{
	position: fixed;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	inline-size: 100%;
	max-inline-size: calc(var(--MaxContentInlineSize) + (var(--PanelsInlineSize) * 2));
}

.UIWrapper .Logo
{
	--color: var(--PrimaryColor);
	display: flex;
	align-items: center;
	gap: .5rem;
	font-size: 20px;
	text-decoration: none;
	filter: drop-shadow(0 0 2px #0009);
}

.PageNotice
{
	inline-size: stretch;
	padding-block: .9rem;
	padding-inline: 1rem;
	overflow-wrap: anywhere;
	border: var(--BorderSize) solid color-mix(in oklab, var(--FocusColor), transparent 77%);
	border-radius: var(--Radius2);
	background: color-mix(in oklab, var(--FocusColor), transparent 88%);
	box-shadow: var(--Shadow);
}

.PageBreadcrumbs
{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .5rem;
	padding-block: .75rem;
	overflow-wrap: anywhere;
	font-size: var(--SmallFontSize);
	user-select: none;
}

.PageCategories
{
	border: var(--Border0);
	border-radius: var(--Radius2);
	padding-block: .9rem;
	padding-inline: 1rem;
	overflow-wrap: anywhere;
	background: var(--BackColor1);
	box-shadow: var(--Shadow);
}










[popover]
{
	position: fixed;
	inset: 0px;
    width: fit-content;
    height: fit-content;
	margin: 0;
	border: var(--Border2);
	border-radius: var(--Radius2);
	padding: 0;
	background: var(--BackColor2);
}

[popovertarget="LangList"]
{
	anchor-name: --LangAnchor;
}

#LangList
{
	padding: .25rem;
	position-anchor: --LangAnchor;
	inset-block: calc(anchor(end, var(--HeaderBlockSize)) + .5rem) auto;
	inset-inline: auto anchor(end, 1rem);
	min-inline-size: anchor-size(inline);
	box-shadow: 0 0px 10px #0009;
}

#LangList:popover-open
{
	display: flex;
	flex-direction: column;
}

#LangList > a
{
	padding-block: .2rem;
	padding-inline: .45rem;
	border: var(--BorderSize) solid transparent;
	--color: var(--TextColor1);
	text-decoration: none;
	border-radius: var(--Radius1);
	transition-property: background, border-color, color;
	transition-duration: var(--TransitionSpeed);
}

#LangList > a:hover
{
	border-color: var(--BorderColor1);
	background: var(--BackColor3);
}

#NavigationList, #NavigationClose > input
{
	appearance: none;
	cursor: pointer;
}

#NavigationClose
{
	display: none;
}

#NavigationList,
#NavigationClose > input
{
	margin: 0;
	position: absolute;
	inset-block-start: calc(0px - var(--BorderSize));
	inset-inline-start: calc(0px - var(--BorderSize));
	block-size: calc(100% + var(--BorderSize) * 2);
	inline-size: calc(100% + var(--BorderSize) * 2);
	border-radius: var(--Radius1);
}

body:has(#NavigationList:checked) #NavigationContainer
{
	display: flex !important;
	visibility: visible;
	position: fixed;
	inset-block-start: 0;
	inset-inline-start: 0;
	block-size: 100%;
	max-block-size: none;
	inline-size: 100%;
	overflow: unset;
	background-color: var(--BackColor1);
}

body:has(#NavigationList:checked) #NavigationClose
{
	display: flex;
	position: absolute;
	inset-block-start: 1rem;
	inset-inline-end: 1.5rem;
}

body:has(#NavigationList:checked) #NavigationContainer > a
{
	border-radius: var(--Radius1);
	padding: .25rem;
	background: var(--BackColor2);
}

body:has(#NavigationList:checked) #NavigationContainer > a:nth-of-type(even)
{
	background: var(--BackColor3);
}










@container (min-inline-size: 1201px)
{
	main { margin-inline: var(--PanelsInlineSize); }
	
	article
	{
		border: var(--Border1);
		border-radius: var(--Radius2);
	}
	
	.HideOnLarge { display: none !important; }
}

@container (min-inline-size: 801px) and (max-inline-size: 1200px)
{
	.HideOnMedium { display: none !important; }
	.PageNotice, .PageCategories, .PageBreadcrumbs { margin-inline: 1.5rem; }
	article { padding-inline: 1.5rem; }
}

@container (max-inline-size: 800px)
{
	article
	{
		padding-block: 1.25rem;
		padding-inline: 1rem;
	}
	
	th, td
	{
		padding-block: .5rem;
		padding-inline: .6rem;
	}
	
	header { padding-inline: 1rem; }
	.HideOnSmall { display: none !important; }
	.Columns { column-count: 1; }
	.PageNotice, .PageCategories, .PageBreadcrumbs, footer { margin-inline: 1rem; }
}