/*
 * SPDX-License-Identifier: MIT AND BSD-2-Clause
 * SPDX-FileCopyrightText: Copyright (c) 2018-2025 Pygments and Chroma authors
 * SPDX-FileCopyrightText: Copyright (c) 2026 Runxi Yu <https://runxiyu.org>
 */

/*
 * This stylesheet *may* use features up to Baseline 2025 newly available such
 * as native CSS nesting, :has, etc.
 */

/*
 * Default box-sizing is content-box on most browsers, which is not how the box
 * model intuitively works for me. Instead of forcing every element to use
 * border-box let's set it to use border-box by default and inherit others if
 * set.
 */

html {
	box-sizing: border-box;
}

*, *::before, *::after {
	box-sizing: inherit;
}

/*
 * Most colors and variables should be defined here, along with a few basics
 * such as colors and fonts.
 */

html {
	--bg: oklch(1 0 0);
	--fg: oklch(0 0 0);
	--link-fg: oklch(0.428 0.088 249.2);
	--text-decoration-color: oklch(0.85 0.000 0.0);
	--muted-fg: color-mix(in oklch, var(--fg) 65%, var(--bg));
	--surface: color-mix(in oklch, var(--bg) 97%, var(--fg));
	--diff-added-bg: color-mix(in oklch, oklch(0.88 0.10 155) 40%, var(--bg));
	--diff-removed-bg: color-mix(in oklch, oklch(0.9 0.14 25) 35%, var(--bg));
	color: var(--fg);
	background-color: var(--bg);
	font-family: ui-sans-serif, system-ui, sans-serif;
	padding: 1rem;
}

body {
	margin: 0 auto;
}

@media(prefers-color-scheme:dark) {
	html {
		--bg: oklch(0.239 0.004 264.5);
		--fg: oklch(0.952 0.003 264.5);
		--link-fg: oklch(0.710 0.127 248.6);
		--text-decoration-color: oklch(0.42 0.000 0.0);
	}
}

/*
 * By default, some browsers seem to set a smaller font size for monospace
 * content in pre and code. Here we fix it by just setting it explicitly.
 */

pre, code {
	font-size: inherit;
	line-height: inherit;
	font-family: ui-monospace, monospace;
}

/*
 * This makes it less ugly than the default of using the same blue color of the
 * text in the underline while still remaining accessible and making it
 * possible to distinguish adjacent links.
 */

a:link {
	text-decoration-color: var(--text-decoration-color);
	text-decoration-thickness: 1.89px;
	color: var(--link-fg);
}

a:visited {
	text-decoration-color: var(--text-decoration-color);
	color: var(--link-fg);
}

/*
 * Child navigation could just look like a normal list for now.
 * This should be revisited later.
 */

nav.children {
}

/*
 * Standard-ish breadcrumbs.
 */

nav.breadcrumbs {
	ul {
		padding: 0;
		margin: 0;
		list-style: none;
		display: flex;
		gap: 0.5rem;  

		li {
			display: inline-flex;
			align-items: center;
		}

		li + li::before {
			content: "»";
			padding-right: 0.5rem;
		}

		li:nth-child(2)::before {
			content: "::";
			padding-right: 0.5rem;
		}
	}
}

/*
 * Various horizontal scrolling fixes.
 */

pre {
	overflow-x: auto;
}

img {
	max-width: 100%;
	height: auto;
}

.scrollable {
	overflow-x: auto;
}

/*
 * Domain-specific styles.
 */

address { /* Typically used for git names and email addresses */
	display: inline-block;
}

vl-hash, vl-filemode, vl-filename {
	font-size: inherit;
	line-height: inherit;
	font-family: ui-monospace, monospace;
	white-space: nowrap;
}

dl, pre {
	margin: 0;
}

/*
 * More distinct header sizes.
 */

h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.17em; }
h4 { font-size: 1em; }
h5 { font-size: 0.83em; }
h6 { font-size: 0.67em; }


/*
 * Chroma/pygments styling
 */

@media (prefers-color-scheme: light) {
	/* Background */ .bg { ; }
	/* PreWrapper */ .chroma { ; }
	/* Error */ .chroma .err {  }
	/* LineLink */ .chroma .lnlinks { outline: none; text-decoration: none; color: inherit }
	/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
	/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
	/* LineHighlight */ .chroma .hl { background-color: #e5e5e5 }
	/* LineNumbersTable */ .chroma .lnt { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
	/* LineNumbers */ .chroma .ln { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
	/* Line */ .chroma .line { display: flex; }
	/* Keyword */ .chroma .k { color: #008000; font-weight: bold }
	/* KeywordConstant */ .chroma .kc { color: #008000; font-weight: bold }
	/* KeywordDeclaration */ .chroma .kd { color: #008000; font-weight: bold }
	/* KeywordNamespace */ .chroma .kn { color: #008000; font-weight: bold }
	/* KeywordPseudo */ .chroma .kp { color: #008000 }
	/* KeywordReserved */ .chroma .kr { color: #008000; font-weight: bold }
	/* KeywordType */ .chroma .kt { color: #b00040 }
	/* NameAttribute */ .chroma .na { color: #7d9029 }
	/* NameBuiltin */ .chroma .nb { color: #008000 }
	/* NameClass */ .chroma .nc { color: #0000ff; font-weight: bold }
	/* NameConstant */ .chroma .no { color: #880000 }
	/* NameDecorator */ .chroma .nd { color: #aa22ff }
	/* NameEntity */ .chroma .ni { color: #999999; font-weight: bold }
	/* NameException */ .chroma .ne { color: #d2413a; font-weight: bold }
	/* NameFunction */ .chroma .nf { color: #0000ff }
	/* NameLabel */ .chroma .nl { color: #a0a000 }
	/* NameNamespace */ .chroma .nn { color: #0000ff; font-weight: bold }
	/* NameTag */ .chroma .nt { color: #008000; font-weight: bold }
	/* NameVariable */ .chroma .nv { color: #19177c }
	/* LiteralString */ .chroma .s { color: #ba2121 }
	/* LiteralStringAffix */ .chroma .sa { color: #ba2121 }
	/* LiteralStringBacktick */ .chroma .sb { color: #ba2121 }
	/* LiteralStringChar */ .chroma .sc { color: #ba2121 }
	/* LiteralStringDelimiter */ .chroma .dl { color: #ba2121 }
	/* LiteralStringDoc */ .chroma .sd { color: #ba2121; font-style: italic }
	/* LiteralStringDouble */ .chroma .s2 { color: #ba2121 }
	/* LiteralStringEscape */ .chroma .se { color: #bb6622; font-weight: bold }
	/* LiteralStringHeredoc */ .chroma .sh { color: #ba2121 }
	/* LiteralStringInterpol */ .chroma .si { color: #bb6688; font-weight: bold }
	/* LiteralStringOther */ .chroma .sx { color: #008000 }
	/* LiteralStringRegex */ .chroma .sr { color: #bb6688 }
	/* LiteralStringSingle */ .chroma .s1 { color: #ba2121 }
	/* LiteralStringSymbol */ .chroma .ss { color: #19177c }
	/* LiteralNumber */ .chroma .m { color: #666666 }
	/* LiteralNumberBin */ .chroma .mb { color: #666666 }
	/* LiteralNumberFloat */ .chroma .mf { color: #666666 }
	/* LiteralNumberHex */ .chroma .mh { color: #666666 }
	/* LiteralNumberInteger */ .chroma .mi { color: #666666 }
	/* LiteralNumberIntegerLong */ .chroma .il { color: #666666 }
	/* LiteralNumberOct */ .chroma .mo { color: #666666 }
	/* Operator */ .chroma .o { color: #666666 }
	/* OperatorWord */ .chroma .ow { color: #aa22ff; font-weight: bold }
	/* Comment */ .chroma .c { color: #408080; font-style: italic }
	/* CommentHashbang */ .chroma .ch { color: #408080; font-style: italic }
	/* CommentMultiline */ .chroma .cm { color: #408080; font-style: italic }
	/* CommentSingle */ .chroma .c1 { color: #408080; font-style: italic }
	/* CommentSpecial */ .chroma .cs { color: #408080; font-style: italic }
	/* CommentPreproc */ .chroma .cp { color: #bc7a00 }
	/* CommentPreprocFile */ .chroma .cpf { color: #bc7a00 }
	/* GenericDeleted */ .chroma .gd { color: #a00000 }
	/* GenericEmph */ .chroma .ge { font-style: italic }
	/* GenericError */ .chroma .gr { color: #ff0000 }
	/* GenericHeading */ .chroma .gh { color: #000080; font-weight: bold }
	/* GenericInserted */ .chroma .gi { color: #00a000 }
	/* GenericOutput */ .chroma .go { color: #888888 }
	/* GenericPrompt */ .chroma .gp { color: #000080; font-weight: bold }
	/* GenericStrong */ .chroma .gs { font-weight: bold }
	/* GenericSubheading */ .chroma .gu { color: #800080; font-weight: bold }
	/* GenericTraceback */ .chroma .gt { color: #0044dd }
	/* GenericUnderline */ .chroma .gl { text-decoration: underline }
	/* TextWhitespace */ .chroma .w { color: #bbbbbb }
}
@media (prefers-color-scheme: dark) {
	/* Background */ .bg { ; }
	/* PreWrapper */ .chroma { ; }
	/* Error */ .chroma .err { color: #f85149 }
	/* LineLink */ .chroma .lnlinks { outline: none; text-decoration: none; color: inherit }
	/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
	/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
	/* LineHighlight */ .chroma .hl { background-color: #6e7681 }
	/* LineNumbersTable */ .chroma .lnt { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #737679 }
	/* LineNumbers */ .chroma .ln { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #6e7681 }
	/* Line */ .chroma .line { display: flex; }
	/* Keyword */ .chroma .k { color: #ff7b72 }
	/* KeywordConstant */ .chroma .kc { color: #79c0ff }
	/* KeywordDeclaration */ .chroma .kd { color: #ff7b72 }
	/* KeywordNamespace */ .chroma .kn { color: #ff7b72 }
	/* KeywordPseudo */ .chroma .kp { color: #79c0ff }
	/* KeywordReserved */ .chroma .kr { color: #ff7b72 }
	/* KeywordType */ .chroma .kt { color: #ff7b72 }
	/* NameClass */ .chroma .nc { color: #f0883e; font-weight: bold }
	/* NameConstant */ .chroma .no { color: #79c0ff; font-weight: bold }
	/* NameDecorator */ .chroma .nd { color: #d2a8ff; font-weight: bold }
	/* NameEntity */ .chroma .ni { color: #ffa657 }
	/* NameException */ .chroma .ne { color: #f0883e; font-weight: bold }
	/* NameFunction */ .chroma .nf { color: #d2a8ff; font-weight: bold }
	/* NameLabel */ .chroma .nl { color: #79c0ff; font-weight: bold }
	/* NameNamespace */ .chroma .nn { color: #ff7b72 }
	/* NameProperty */ .chroma .py { color: #79c0ff }
	/* NameTag */ .chroma .nt { color: #7ee787 }
	/* NameVariable */ .chroma .nv { color: #79c0ff }
	/* Literal */ .chroma .l { color: #a5d6ff }
	/* LiteralDate */ .chroma .ld { color: #79c0ff }
	/* LiteralString */ .chroma .s { color: #a5d6ff }
	/* LiteralStringAffix */ .chroma .sa { color: #79c0ff }
	/* LiteralStringBacktick */ .chroma .sb { color: #a5d6ff }
	/* LiteralStringChar */ .chroma .sc { color: #a5d6ff }
	/* LiteralStringDelimiter */ .chroma .dl { color: #79c0ff }
	/* LiteralStringDoc */ .chroma .sd { color: #a5d6ff }
	/* LiteralStringDouble */ .chroma .s2 { color: #a5d6ff }
	/* LiteralStringEscape */ .chroma .se { color: #79c0ff }
	/* LiteralStringHeredoc */ .chroma .sh { color: #79c0ff }
	/* LiteralStringInterpol */ .chroma .si { color: #a5d6ff }
	/* LiteralStringOther */ .chroma .sx { color: #a5d6ff }
	/* LiteralStringRegex */ .chroma .sr { color: #79c0ff }
	/* LiteralStringSingle */ .chroma .s1 { color: #a5d6ff }
	/* LiteralStringSymbol */ .chroma .ss { color: #a5d6ff }
	/* LiteralNumber */ .chroma .m { color: #a5d6ff }
	/* LiteralNumberBin */ .chroma .mb { color: #a5d6ff }
	/* LiteralNumberFloat */ .chroma .mf { color: #a5d6ff }
	/* LiteralNumberHex */ .chroma .mh { color: #a5d6ff }
	/* LiteralNumberInteger */ .chroma .mi { color: #a5d6ff }
	/* LiteralNumberIntegerLong */ .chroma .il { color: #a5d6ff }
	/* LiteralNumberOct */ .chroma .mo { color: #a5d6ff }
	/* Operator */ .chroma .o { color: #ff7b72; font-weight: bold }
	/* OperatorWord */ .chroma .ow { color: #ff7b72; font-weight: bold }
	/* Comment */ .chroma .c { color: #8b949e; font-style: italic }
	/* CommentHashbang */ .chroma .ch { color: #8b949e; font-style: italic }
	/* CommentMultiline */ .chroma .cm { color: #8b949e; font-style: italic }
	/* CommentSingle */ .chroma .c1 { color: #8b949e; font-style: italic }
	/* CommentSpecial */ .chroma .cs { color: #8b949e; font-weight: bold; font-style: italic }
	/* CommentPreproc */ .chroma .cp { color: #8b949e; font-weight: bold; font-style: italic }
	/* CommentPreprocFile */ .chroma .cpf { color: #8b949e; font-weight: bold; font-style: italic }
	/* GenericDeleted */ .chroma .gd { color: #ffa198; background-color: #490202 }
	/* GenericEmph */ .chroma .ge { font-style: italic }
	/* GenericError */ .chroma .gr { color: #ffa198 }
	/* GenericHeading */ .chroma .gh { color: #79c0ff; font-weight: bold }
	/* GenericInserted */ .chroma .gi { color: #56d364; background-color: #0f5323 }
	/* GenericOutput */ .chroma .go { color: #8b949e }
	/* GenericPrompt */ .chroma .gp { color: #8b949e }
	/* GenericStrong */ .chroma .gs { font-weight: bold }
	/* GenericSubheading */ .chroma .gu { color: #79c0ff }
	/* GenericTraceback */ .chroma .gt { color: #ff7b72 }
	/* GenericUnderline */ .chroma .gl { text-decoration: underline }
	/* TextWhitespace */ .chroma .w { color: #6e7681 }
}