@import url("https://fonts.bunny.net/css?family=source-serif-4:400,400i,700,700i|source-sans-3:400,700|source-code-pro:400,700|noto-sans-arabic:400,700&display=swap"); :root { color-scheme: light dark; --font-serif-latin: "Source Serif 4", "Iowan Old Style", "Apple Garamond", Baskerville, "Times New Roman", "Droid Serif", Times, "Source Serif Pro", serif; --font-sans-latin: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", Helvetica, Cantarell, Ubuntu, Roboto, Noto, Arial, sans-serif; --font-serif: var(--font-serif-latin); --font-sans: var(--font-sans-latin); --font-mono: "Source Code Pro", Menlo, Consolas, Monaco, "Liberation Mono", "Lucida Console", monospace; --weight-regular: 400; --weight-bold: 700; --color-bg: light-dark(#FFFFFF, #11191F); --color-heading: light-dark(#181C25, #F1F3F5); --color-body: light-dark(#2B3440, #C2C7D0); --color-meta: light-dark(#46596D, #9FA6B2); --color-border: light-dark(#E0E5EB, #2D3540); --color-code-bg: light-dark(#F3F5F7, #181C25); --color-link: light-dark(#015887, #7AB4DF); --color-link-hover: light-dark(#013F61, #B2D3EC); --color-focus-ring: light-dark(rgba(1, 88, 135, 0.15), rgba(122, 180, 223, 0.2)); --color-error: light-dark(#CF222E, #F85149); --color-success: light-dark(#1A7F37, #3FB950); --color-selection: color-mix(in srgb, var(--color-link) 20%, var(--color-bg)); --color-ink-on-accent: light-dark(#FFFFFF, #11191F); --ease-out-strong: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); --duration-fast: 150ms; --duration-medium: 250ms; --radius: 4px; --space-3xs: 0.25rem; --space-2xs: 0.5rem; --space-xs: 0.75rem; --space-s: 1rem; --space-m: 1.5rem; --space-l: 2rem; --space-xl: 2.5rem; --space-2xl: 3rem; --space-3xl: 4rem; } /* Arabic has no serif/sans distinction to match Latin's; one Naskh-style text face covers both reading and interface voices. Reads from --font-serif-latin/--font-sans-latin, not --font-serif/--font-sans: :root and :lang(ar) both match , so self-referencing the property this rule is setting would be a same-element cycle. */ :lang(ar) { --font-serif: "Noto Sans Arabic", var(--font-serif-latin); --font-sans: "Noto Sans Arabic", var(--font-sans-latin); } /* Non-zero letter-spacing breaks cursive glyph joining in Arabic script */ :lang(ar) :is(h1, h2, h5, h6, legend) { letter-spacing: normal; } @media (prefers-color-scheme: dark) { img:not([src*=".svg"]) { filter: brightness(0.85) contrast(1.1); } @media (hover: hover) and (pointer: fine) { a:hover img { box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5); } } a:focus-visible img { box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5); } } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } :root[data-theme="sepia"] { color-scheme: light; --color-bg: #FFFCF0; --color-heading: #100F0F; --color-body: #100F0F; --color-meta: #565552; --color-border: #E6E4D9; --color-code-bg: #F2F0E5; --color-link: #1A4F8C; --color-link-hover: #154071; --color-focus-ring: rgba(26, 79, 140, 0.18); } :root[data-theme="mint"] { color-scheme: light; --color-bg: #C5E7CE; --color-heading: #121E15; --color-body: #121E15; --color-meta: #384841; --color-border: #99C7A4; --color-code-bg: #D4EEDB; --color-link: #0B4C45; --color-link-hover: #083934; --color-focus-ring: rgba(11, 76, 69, 0.18); } html { background-color: var(--color-bg); -webkit-font-smoothing: antialiased; font-synthesis: none; /* Safari has no unprefixed version; Firefox has no equivalent and ignores both harmlessly */ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; font-kerning: normal; scrollbar-color: var(--color-border) transparent; scrollbar-width: thin; } ::selection { background-color: var(--color-selection); } body, pre, code, kbd, details, dialog, th, td, blockquote, hr, input, textarea, select { transition: background-color var(--duration-medium) ease, color var(--duration-medium) ease, border-color var(--duration-medium) ease; } *, *::before, *::after { box-sizing: border-box; } body { font-family: var(--font-serif); font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem); font-weight: var(--weight-regular); line-height: 1.6; color: var(--color-body); margin: 0; font-optical-sizing: auto; font-variant-numeric: oldstyle-nums; } body > :is(main, article) { max-inline-size: 65ch; margin-inline: auto; padding-block: clamp(var(--space-l), 6vh, var(--space-3xl)); padding-inline-start: max(1rem, env(safe-area-inset-left)); padding-inline-end: max(1rem, env(safe-area-inset-right)); /* env() insets are physical; swap them so the notch side still lands on the actual device edge once inline-start/end flip for RTL */ &:dir(rtl) { padding-inline-start: max(1rem, env(safe-area-inset-right)); padding-inline-end: max(1rem, env(safe-area-inset-left)); } } :focus-visible { outline: 2px solid var(--color-link); outline-offset: 2px; } *[id] { scroll-margin-block-start: var(--space-l); } a, button, input, select, textarea, summary, label { touch-action: manipulation; /* No standard equivalent on any engine */ -webkit-tap-highlight-color: transparent; } button, summary, label, input[type="checkbox"] { user-select: none; /* Safari's unprefixing attempt (bug 208677) was reverted in 2022 and remains unshipped */ -webkit-user-select: none; } h1, h2, h3, h4, h5, h6 { color: var(--color-heading); } h1 { margin-block: 0 var(--space-s); } h2 { margin-block: var(--space-2xl) var(--space-s); } h3 { margin-block: var(--space-xl) var(--space-xs); } h4 { margin-block: var(--space-l) var(--space-xs); } h5, h6 { margin-block: var(--space-l) var(--space-2xs); } :is(h1, h2, h3, h4, h5, h6) + :is(h1, h2, h3, h4, h5, h6) { margin-block-start: var(--space-s); } body > :is(main, article) > :first-child, details > summary + *, dialog > :first-child { margin-block-start: 0; } body > :is(main, article) > :last-child, details > :last-child, dialog > :last-child { margin-block-end: 0; } h1 { font-size: clamp(1.625rem, 1.35rem + 1.2vw, 2rem); font-weight: var(--weight-bold); line-height: 1.25; letter-spacing: -0.02em; } h2 { font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.625rem); font-weight: var(--weight-bold); line-height: 1.3; letter-spacing: -0.01em; } h3 { font-family: var(--font-sans); font-size: 1.25rem; font-weight: var(--weight-bold); line-height: 1.4; } h4 { font-family: var(--font-sans); font-size: 1rem; font-weight: var(--weight-bold); line-height: 1.45; } h5, h6 { font-family: var(--font-sans); font-weight: var(--weight-bold); line-height: 1.5; letter-spacing: 0.06em; text-transform: uppercase; } h5 { font-size: 0.875rem; } h6 { font-size: 0.8125rem; color: var(--color-meta); } :is(h1, h2, h3, h4, h5, h6) a { color: inherit; text-decoration: none; } p, ul, ol { margin-block-start: 0; margin-block-end: var(--space-m); } pre, blockquote, table, figure, details, dialog:not(:modal) { margin-block-start: var(--space-l); margin-block-end: var(--space-l); } p, li, blockquote, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } h1, h2, h3, h4, h5, h6, figcaption, summary { text-wrap: balance; } p, li, blockquote { text-wrap: pretty; hyphens: auto; hyphenate-limit-chars: 6 3 3; } a { color: var(--color-link); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--color-link) 40%, transparent); text-underline-offset: 0.2em; transition: color var(--duration-fast) ease, text-decoration-color var(--duration-fast) ease; } a:focus-visible { border-radius: 2px; } strong { font-weight: var(--weight-bold); color: var(--color-heading); } em { font-style: italic; } em em, i em, em i, cite em { font-style: normal; } cite { font-style: italic; } del { text-decoration: line-through; color: var(--color-meta); } mark { background-color: color-mix(in srgb, var(--color-link) 15%, transparent); color: inherit; padding: 0.1em 0.3em; border-radius: 3px; } kbd { font-family: var(--font-mono); font-size: 0.85em; background-color: var(--color-code-bg); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 0.15em 0.4em; color: var(--color-heading); font-variant-ligatures: none; /* Key names read left-to-right even inside RTL prose */ direction: ltr; unicode-bidi: isolate; } sub, sup { font-size: 0.75em; line-height: 0; position: relative; vertical-align: baseline; } sup { inset-block-start: -0.5em; } sub { inset-block-end: -0.25em; } abbr[title] { text-decoration: underline dotted; text-decoration-color: var(--color-meta); cursor: help; } ul, ol { padding-inline-start: 2rem; } li { margin-block-end: var(--space-2xs); } li::marker { color: inherit; } ol > li::marker { font-family: var(--font-sans); font-weight: var(--weight-bold); font-variant-numeric: lining-nums tabular-nums; } li > ul, li > ol { margin-block-start: var(--space-2xs); margin-block-end: 0; } dl { margin-block-end: var(--space-m); } dt { font-weight: var(--weight-bold); color: var(--color-heading); } dd { margin-inline-start: 0; margin-block-end: var(--space-s); } blockquote { margin-inline: 0; padding-inline-start: clamp(1rem, 3vw, 1.5rem); border-inline-start: 1px solid var(--color-border); font-size: 1em; font-style: normal; line-height: 1.6; color: var(--color-meta); } blockquote p:last-child { margin-block-end: 0; } pre, code { font-family: var(--font-mono); font-size: 0.875em; font-weight: var(--weight-regular); background-color: var(--color-code-bg); border-radius: var(--radius); font-variant-ligatures: none; /* Code reads left-to-right regardless of surrounding prose direction */ direction: ltr; unicode-bidi: isolate; } code { padding-block: 0.2em; padding-inline: 0.4em; overflow-wrap: anywhere; } pre { padding: 1.25rem; overflow-x: auto; overscroll-behavior-x: contain; line-height: 1.6; border: 1px solid var(--color-border); } /* Needs tabindex="0" injected by the pipeline for keyboard scrolling, see REQUIREMENTS.md */ pre code { padding: 0; background-color: transparent; white-space: pre; } p code, li code, td code { line-height: normal; } table { display: block; overflow-x: auto; overscroll-behavior-x: contain; max-inline-size: 100%; border-collapse: collapse; font-family: var(--font-sans); font-size: 0.9375rem; font-variant-numeric: lining-nums tabular-nums; } th, td { padding-block: 0.75rem; padding-inline: 1.25rem; text-align: start; border-block-end: 1px solid var(--color-border); white-space: nowrap; } th { font-weight: var(--weight-bold); color: var(--color-heading); border-block-end: 1px solid var(--color-heading); } table caption { caption-side: bottom; padding-block-start: 0.5rem; font-size: 0.875rem; color: var(--color-meta); text-align: start; } tr > :first-child { position: sticky; inset-inline-start: 0; background-color: var(--color-bg); } hr { border: 0; border-block-start: 1px solid var(--color-border); margin-block: var(--space-2xl); margin-inline: auto; inline-size: 50%; } figure { margin-inline: 0; img, video, iframe { margin-block: 0; } } img, video, iframe { max-inline-size: 100%; block-size: auto; display: block; margin-inline: auto; margin-block: var(--space-l); border-radius: var(--radius); border: none; } iframe { aspect-ratio: 16 / 9; } /* Only the overflow guard, not the img/video/iframe block treatment: an inline icon should stay inline, not get forced full-width */ svg { max-inline-size: 100%; } figcaption { font-family: var(--font-sans); font-size: 0.875rem; color: var(--color-meta); text-align: center; margin-block-start: var(--space-xs); } a img { transition: transform var(--duration-fast) var(--ease-out-strong), box-shadow var(--duration-fast) var(--ease-out-strong); transform-origin: bottom center; } a:focus-visible img { transform: scale(1.02); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.15); } input, textarea, select, button { font-family: var(--font-sans); font-size: 1rem; font-weight: var(--weight-regular); color: inherit; box-sizing: border-box; } input[type="text"], input[type="email"], input[type="search"], input[type="password"], input[type="tel"], input[type="url"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="time"], input[type="color"], textarea, select { inline-size: 100%; padding-block: 0.5rem; padding-inline: 0.75rem; margin-block-start: var(--space-2xs); margin-block-end: var(--space-m); background-color: transparent; border: 1px solid var(--color-border); border-radius: var(--radius); transition: border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease, background-color var(--duration-medium) ease, color var(--duration-medium) ease; } /* Windows dark mode needs explicit colors or the native option list can render invisible (white-on-white or black-on-black) */ select { background-color: var(--color-bg); color: var(--color-body); } input:focus, textarea:focus, select:focus { outline: 2px solid var(--color-link); outline-offset: 2px; /* :focus, not :focus-visible: fields ring on click too */ border-color: var(--color-link); box-shadow: 0 0 0 4px var(--color-focus-ring); } input:user-invalid, textarea:user-invalid, select:user-invalid { border-color: var(--color-error); } input:user-valid, textarea:user-valid, select:user-valid { border-color: var(--color-success); } input[type="checkbox"], input[type="radio"], input[type="range"] { accent-color: var(--color-link); } input[type="file"] { border: none; padding-inline-start: 0; } input[type="file"]::file-selector-button { font-family: var(--font-sans); font-weight: var(--weight-bold); padding-block: 0.4rem; padding-inline: 1rem; margin-inline-end: 0.75rem; background-color: var(--color-link); color: var(--color-ink-on-accent); border: none; border-radius: var(--radius); cursor: pointer; transition: background-color var(--duration-fast) ease; } fieldset { border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1rem 1.5rem 1.5rem; margin-block-end: var(--space-m); } legend { font-family: var(--font-sans); font-weight: var(--weight-bold); font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-meta); padding-inline: 0.5rem; } progress, meter { accent-color: var(--color-link); inline-size: 100%; } button { display: inline-block; padding-block: 0.6rem; padding-inline: 1.5rem; background-color: var(--color-link); /* Dark ink on the lighter dark-mode blue keeps text at AA; white failed */ color: var(--color-ink-on-accent); border: none; border-radius: var(--radius); font-weight: var(--weight-bold); font-family: var(--font-sans); cursor: pointer; transition: background-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease, transform var(--duration-fast) var(--ease-out-strong); } button:focus-visible { box-shadow: 0 0 0 4px var(--color-focus-ring); } button:active { transform: scale(0.97); } button:disabled, input:disabled, select:disabled, textarea:disabled { opacity: 0.5; cursor: not-allowed; } ul:has(> li > input[type="checkbox"]) { list-style-type: none; padding-inline-start: 0; } li:has(> input[type="checkbox"]):not([hidden]) { display: flex; align-items: flex-start; } li input[type="checkbox"] { appearance: none; inline-size: 1.2rem; block-size: 1.2rem; border: 2px solid var(--color-meta); border-radius: 3px; margin-inline-end: 0.75rem; margin-block-start: var(--space-3xs); cursor: pointer; position: relative; background-color: transparent; transition: background-color var(--duration-fast) ease, border-color var(--duration-fast) ease; &:checked { background-color: var(--color-link); border-color: var(--color-link); } &::after { content: ""; position: absolute; inset-inline-start: 30%; inset-block-start: 10%; inline-size: 30%; block-size: 60%; border: solid var(--color-ink-on-accent); border-width: 0 2px 2px 0; opacity: 0; transform: rotate(45deg) scale(0.95); transition: opacity var(--duration-fast) var(--ease-out-strong), transform var(--duration-fast) var(--ease-out-strong); } &:checked::after { opacity: 1; transform: rotate(45deg) scale(1); } } a[data-footnote-ref], a[data-footnote-backref] { text-decoration: none; color: var(--color-link); padding: 0.5rem; margin-inline: -0.5rem; transition: color var(--duration-fast) ease, text-decoration-color var(--duration-fast) ease; } section[data-footnotes] { margin-block-start: clamp(var(--space-2xl), 8vh, var(--space-3xl)); padding-block-start: var(--space-l); border-block-start: 1px solid var(--color-border); } section[data-footnotes] ol { padding-inline-start: 1.5rem; font-size: 0.875rem; color: var(--color-meta); font-family: var(--font-sans); } section[data-footnotes] li { margin-block-end: var(--space-2xs); } section[data-footnotes] li p { display: inline; margin-block-end: 0; } a[data-footnote-backref] { font-family: var(--font-sans); margin-inline-start: -0.25rem; } details { background-color: var(--color-code-bg); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1rem; /* Lets height animate to/from auto, pure CSS, no scripts */ interpolate-size: allow-keywords; &::details-content { block-size: 0; overflow: clip; opacity: 0; transition: block-size var(--duration-fast) var(--ease-in-out), opacity var(--duration-fast) var(--ease-in-out), content-visibility var(--duration-fast) allow-discrete; } &[open]::details-content { block-size: auto; opacity: 1; transition-duration: var(--duration-medium); } } summary { font-family: var(--font-sans); font-weight: var(--weight-bold); color: var(--color-heading); cursor: pointer; list-style: none; transition: color var(--duration-fast) ease; } /* Safari ignores list-style/::marker on ; only this non-standard pseudo-element hides its native triangle */ summary::-webkit-details-marker { display: none; } summary::before { content: "\25B8"; /* ▸ */ display: inline-block; margin-inline-end: 0.5rem; color: var(--color-meta); transition: transform var(--duration-fast) var(--ease-in-out), color var(--duration-fast) ease; } details[open] > summary::before { transform: rotate(90deg); } summary:focus-visible { border-radius: 2px; } /* The UA default positions every dialog absolutely, even one shown with the plain open attribute instead of .showModal(); without this it floats over whatever follows it instead of sitting in the flow. :modal keeps the UA's own fixed, centered, top-layer behavior. */ dialog:not(:modal) { position: static; } dialog { background-color: var(--color-bg); color: var(--color-body); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-m); max-inline-size: 40rem; margin-inline: auto; } dialog::backdrop { background-color: light-dark(rgba(17, 25, 31, 0.4), rgba(0, 0, 0, 0.6)); } @media (hover: hover) and (pointer: fine) { h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover { color: inherit; opacity: 0.8; text-decoration: underline; } a:hover { color: var(--color-link-hover); text-decoration-color: var(--color-link-hover); } a:hover img { transform: scale(1.02); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.15); } button:hover { background-color: var(--color-link-hover); } a[data-footnote-ref]:hover, a[data-footnote-backref]:hover { text-decoration: underline; text-decoration-color: var(--color-link-hover); } summary:hover { color: var(--color-link); } summary:hover::before { color: var(--color-link); } } @media print { body { color: #000; background: #FFF; } a, a:visited { text-decoration: underline; } a[href^="http"]::after { content: " (" attr(href) ")"; } abbr[title]::after { content: " (" attr(title) ")"; } a[href^="#"]::after, a[href^="javascript:"]::after { content: ""; } pre, blockquote, tr, img, figure { break-inside: avoid; } p, h2, h3 { orphans: 3; widows: 3; } h1, h2, h3 { break-after: avoid; } }