:root {
	--font: -apple-system, BlinkMacSystemFont, "Segoe UI",
		"Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic UI",
		"Apple SD Gothic Neo", "Malgun Gothic",
		"PingFang SC", "PingFang TC", "Microsoft YaHei",
		sans-serif;
	--font-mono: ui-monospace, "Cascadia Code", "SF Mono", "Fira Code", monospace;

	--measure: 860px;
	--space: 1rem;
	--space-sm: 0.5rem;
	--space-lg: 2rem;
	--radius: 4px;

	--color-bg: #fff;
	--color-bg-1: #fff;
	--color-bg-2: #eed;
	--color-bg-alt: #f5f5f5;
	--color-bg-code: #f0f0f0;
	--color-fg: #111;
	--color-fg-alt: #333;
	--color-fg-mute: #666;
	--color-link: #0265dc;

	--color-stat-action: #0265dc;
	--color-stat-success: #09825d;
	--color-stat-error: #d31510;

	--border: 1px solid #ccc;
	--border-mute: 1px solid #e5e5e5;
}
@media (prefers-color-scheme: dark) {
	:root {
		--color-bg: #222;
		--color-bg-1: #222;
		--color-bg-2: #333;
		--color-bg-alt: #1c1c1c;
		--color-bg-code: #1a1a1a;
		--color-fg: #e8e8e8;
		--color-fg-alt: #ccc;
		--color-fg-mute: #888;
		--color-link: #4da6ff;

		--color-stat-action: #4da6ff;
		--color-stat-success: #3db88a;
		--color-stat-error: #f56565;

		--border: 1px solid #3a3a3a;
		--border-mute: 1px solid #282828;
	}
}
*, *::before, *::after { box-sizing: border-box; }
html {
	color-scheme: light dark;
	min-height: 100%;
	background: linear-gradient(to bottom, var(--color-bg-1), var(--color-bg-2));
}
body {
	margin: 0;
	padding: var(--space) var(--space-lg);
	/* background: var(--color-bg); */
	color: var(--color-fg);
	font-family: var(--font);
	font-size: 1rem;
	line-height: 1.7;
}

main {
	max-width: var(--measure);
	margin-inline: auto;
}

h1, h2, h3, h4, h5, h6 {
	line-height: 1.25;
	margin-block: var(--space-lg) var(--space-sm);
	color: var(--color-fg);
	scroll-margin-top: 3rem;
}

h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; border-bottom: var(--border-mute); padding-bottom: var(--space-sm); }
h3 { font-size: 1.25rem; }
h4, h5, h6 { font-size: 1rem; }

p { margin-block: 0 var(--space); }

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

::selection {
    background: var(--color-fg);
    color:      var(--color-bg);
}
mark {
    background: var(--color-fg-mute);
    color:      var(--color-bg);
    padding-inline: 0.15em;
}

tr:hover > td {
	border-bottom-color: var(--color-fg-mute);
	/*
	background: var(--color-fg);
	color:      var(--color-bg);
	*/
}
/* code block: border sharpens on hover — not color-inverted,
   content is LTR technical text, inversion makes it unreadable */
pre:hover {
	border-color: var(--color-fg-mute);
}
kbd:hover {
	background: var(--color-fg);
	color:      var(--color-bg);
	border-color: var(--color-fg);
}

strong { color: var(--color-fg-alt); }
small { font-size: 0.875em; color: var(--color-fg-mute); }
abbr[title] { text-decoration: underline dotted; cursor: help; }

/* Code tokens inside RTL sentences (Arabic, Hebrew) must not be
 visually reversed. direction: ltr + isolate achieves this without
 affecting surrounding bidi text flow. */
code, pre, kbd, samp { direction: ltr; unicode-bidi: isolate; }

code {
	font-family: var(--font-mono);
	font-size: 0.875em;
	/* background: var(--color-bg-code); */
	padding: 0.1em 0.35em;
	border-radius: var(--radius);
}

pre {
	background: var(--color-bg-code);
	border: var(--border-mute);
	border-radius: var(--radius);
	padding: var(--space);
	overflow-x: auto;
	font-family: var(--font-mono);
	font-size: 0.875rem;
	line-height: 1.5;
}

pre code {
	background: none;
	padding: 0;
	border-radius: 0;
	font-size: inherit;
}

kbd {
	font-family: var(--font-mono);
	font-size: 0.8em;
	background: var(--color-bg-alt);
	border: var(--border);
	border-radius: var(--radius);
	padding: 0.1em 0.4em;
}

/* padding-inline-start auto-flips to the correct side on RTL pages */
ul, ol { padding-inline-start: 1.5rem; margin-block: 0 var(--space); }
li + li { margin-block-start: 0.25rem; }

dt { font-weight: 600; margin-block-start: var(--space); }
dd { margin-inline-start: var(--space-lg); color: var(--color-fg-alt); }

/* border-inline-start auto-flips to the correct side on RTL pages */
blockquote {
	margin-inline: 0;
	padding-inline-start: var(--space);
	border-inline-start: 3px solid var(--color-fg-mute);
	color: var(--color-fg-mute);
}

table {
	border-collapse: collapse;
	width: 100%;
	margin-block: var(--space-lg);
	font-size: 0.9375rem;
}

th, td {
	text-align: start;
	padding: var(--space-sm) var(--space);
	border-bottom: var(--border-mute);
	vertical-align: top;
}


th {
	background: var(--color-bg-alt);
	font-weight: 600;
	border-bottom: var(--border);
}
thead th {
	position: sticky;
	top: 0;
	z-index: 1;
	background: var(--color-bg-alt);
	box-shadow: 0 1px 0 var(--border);
}

hr {
	border: none;
	border-top: var(--border-mute);
	margin-block: var(--space-lg);
}

img, video, svg {
	max-width: 100%;
	height: auto;
	display: block;
}

details {
	border: var(--border-mute);
	border-radius: var(--radius);
	padding: var(--space-sm) var(--space);
	margin-block: var(--space);
}

summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--color-fg-alt);
}
summary:hover {
	background: var(--color-fg);
	color:      var(--color-bg);
	padding-inline: var(--space-sm);
}

figure {
    margin-inline: 0;
    padding: var(--space);
    border: var(--border-mute);
    border-radius: var(--radius);
}

figcaption {
    font-size: 0.875rem;
    color: var(--color-fg-mute);
    margin-block-start: var(--space-sm);
}

details[open] summary { margin-bottom: var(--space-sm); }

a:is(:link, :visited) {
	color: var(--color-link);
}
a:is(:link, :visited):is(:hover, :active) {
	background: var(--color-fg);
	color:      var(--color-bg);
}
a:is(:link, :visited):focus-visible {
	text-decoration: none;
	outline: 1px solid currentColor;
	outline-offset: 0.2em;
}
:is(
	a:is(:link, :visited),
	summary,
	kbd
):is(:hover, :active) {
	background: var(--color-fg);
	color:      var(--color-bg);
}

:is(
	a:is(:link, :visited),
	summary,
	kbd,
	[tabindex]
):focus-visible {
	outline: 1px solid currentColor;
	outline-offset: 0.2em;
}


/* ── Language: RTL ──────────────────────────────────────────────────── */
:lang(ar), :lang(he), :lang(fa), :lang(ur) { direction: rtl; }

/* ── Language: CJK ──────────────────────────────────────────────────── */
:lang(ja), :lang(zh) {
	text-align: justify;
	word-break: break-all;
}

:lang(ko) {
	word-break: keep-all; /* Preserve Korean syllable block boundaries */
}

:lang(ja) {
	word-break: keep-all; /* Prefer reading-unit boundaries over max line-fill */
	font-feature-settings: "palt" 1; /* Proportional punctuation: prevents fullwidth
	 punctuation gaps in mixed ja/Latin text */
}

/* ── Language: Indic scripts ────────────────────────────────────────── */

/* Devanagari vowel marks extend above the headline; standard line-height
 clips them. 2.0 is the minimum safe value. */
:lang(hi), :lang(mr), :lang(ne), :lang(bn), :lang(ta), :lang(si) {
	line-height: 2.0;
}

/* ── Language: Thai ─────────────────────────────────────────────────── */

/* Thai has no word spaces; line-breaking depends on the browser's ICU
 dictionary. word-break: break-all disables that algorithm entirely. */
:lang(th) {
	word-break: normal;
	overflow-wrap: break-word;
	line-height: 1.9;
}

/* ── Language: hyphenation ──────────────────────────────────────────── */

/* hyphens: auto requires a correct lang attribute on the element or an
 ancestor — it selects the browser's hyphenation dictionary from it. */
:lang(de) { hyphens: auto; hyphenate-limit-chars: 6 3 3; overflow-wrap: break-word; }
:lang(fr) { hyphens: auto; hyphenate-limit-chars: 5 3 3; overflow-wrap: break-word; }
:lang(nl), :lang(pl), :lang(sv), :lang(cs),
:lang(pt), :lang(es), :lang(it) { hyphens: auto; overflow-wrap: break-word; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}
@media print {
	body { padding: 0; font-size: 11pt; }
	a::after { content: " (" attr(href) ")"; font-size: 0.8em; color: var(--color-fg-mute); }
	pre, code { border: 1px solid #ccc; }
	h2, h3 { break-after: avoid; }
	pre, table, figure { break-inside: avoid; }
}