@font-face {
  font-family: "Figtree";
  src: url("/Figtree-VariableFont_wght.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
}
@font-face {
  font-family: "Figtree";
  src: url("/Figtree-Italic-VariableFont_wght.woff2") format("woff2");
  font-weight: 300 900;
  font-style: italic;
}

@layer {
	*:focus {outline:unset}
	*::after {color:inherit}
	@property --effectively-light {
	  syntax: "<boolean>";
	  initial-value: false;
	  inherits: true;
	}
	figure, ul, ol, li {padding:0;margin:0}
	html {
		contain:strict;
		--effectively-light: false;
		&:has(input[aria-label="Light theme"]:checked) {
		    --effectively-light: true}
		color-scheme: dark light;
		&:has(input[aria-label="Light theme"]:checked) {
		  color-scheme: only light}
		&:has(input[aria-label="Dark theme"]:checked) {
		  color-scheme: only dark}
		@media (prefers-color-scheme: light) {
		    &:not(:has(input[aria-label="Dark theme"]:checked)) {
		        --effectively-light: true;
		    }
		}
	 	--height-header: max(1cm,calc(20cqi * 674/1219) + 3px);
		--frame-color: ButtonBorder;
		--emphasis-color: light-dark(MarkText,gold);
		--max-body-width: min(100%,29cm);
		--background-color: light-dark(canvas,#110e0e);
		--emoji-size: 1em;
		--main-inline-margin : .4em;
		--menu-width: 25%;
		align-content: center;
		block-size:100%;
	    font-family: "Figtree", serif;
	    font-size: 24px;
		background-color: var(--background-color);
	}
	body {
		display:flex;
	    font-variant-ligatures: contextual;
		overflow-wrap: break-word;
		inline-size: var(--max-body-width);
		block-size: var(--max-body-width);
		margin: auto;
		contain: content;
		container: body / size;
		>* {overflow:auto;
			scrollbar-width:none;}}
	a:empty {text-decoration:unset;display:inline-block;block-size:0}
	:is(figcaption,li):has(>[aria-current], >:target-current) {
	    color: var(--emphasis-color);		
		&::after{
			content: "←";
			position: absolute;
			inset: 1lh 0 0 auto;
		}
	}

	main {
		white-space: pre-line;
		inline-size:100%;
		anchor-name: --main-anchor;
		counter-set: externalEmptyCounter 0;
		::marker {color:var(--emphasis-color)}
		> * {padding-inline-start:var(--main-inline-margin)}
		p {margin-block:.3em;text-wrap:pretty}
		a {	text-decoration: LinkText underline;
			text-decoration-thickness: 1.5px;
			text-underline-position: under;
			&[rel^="external"][aria-label] {counter-increment: externalEmptyCounter}
			&[rel^="external"][aria-label]::after {
				content: counter(externalEmptyCounter);
				outline: thin solid currentColor}
			&::after {color: LinkText}
			&:visited {text-decoration-color: VisitedText}
			&:visited::after {color: VisitedText}}
		figure{
			inline-size: 45%;
			max-inline-size: var(--data-max-width, 512px)}
		> header {
			padding:unset;
			display:flex;
			block-size:var(--height-header);
			place-items:center;
			input {
				display:none;
				background: var(--background-color);
				transition: background .3s, color .3s, rotate .3s;
				&::before {
					content: "☰"}
				&:checked {rotate: 90deg}
			}
		}
	}
	ul.carousel {
	    anchor-name: --carousel;
	    display: flex;
	    overflow-x: auto;
	    scroll-snap-type: x mandatory;
	    scrollbar-width: none;
		figure {contain: paint;clear:unset}
	    img {content-visibility:auto}
	    &::scroll-button(*) {
	        font-size: 2.2rem;
	        position: absolute;
	        position-anchor: --carousel;
	        position-area: center;
	        background: none;
	        color: GrayText;
	        outline: thin solid var(--frame-color);
	    }
	    &::scroll-button(*):enabled { color: CanvasText; }
	    &::scroll-button(right) {
	        content: ">";
	        justify-self: right;
	    }
	    &::scroll-button(left) {
	        content: "<";
	        justify-self: left;
	    }
	    li {
	        display: flex;
	        flex: 0 0 100%;
	        container-type: scroll-state;
	        scroll-snap-align: center;
	        justify-content: center;
	        align-items: center;
	    }
	}
	main>header {border: thin solid var(--frame-color);border-left:none}
	body>header{
		border: thin solid var(--frame-color);
		display:flex;
		flex-direction:column;
		filter: blur(2px) opacity(if(style(--effectively-light: true): 70%; else: 40%));
		&:is(:hover,:focus-within) {filter:unset}
		width:var(--menu-width);
		li:has(>a) {padding-inline-start: 4px}
		svg {fill: canvasText}
		button+div:has(div) {outline: thin solid var(--frame-color)}
		input[type="text"] {padding:unset !important}
		figcaption {
			contain: content;
			text-align:center;
			font-size: max(20px,2.3cqi);
			text-transform: uppercase;
			line-height:1;
		}
		p {margin:0}
		text-wrap-style: balance;
		button {
			place-items: center;
			background: none;
			border: none;}
		address a {display:block}
		>* {font-size: min(1em,3cqi);}
		> form{display:flex;}
		ol+address, [download] {margin-block-start:auto}
		nav {scroll-target-group: auto}
		ol {	list-style-type:upper-roman;}
		nav ol {list-style-type:roman}
		>nav {border-top: thin solid var(--frame-color)}
		li {contain:content}
	}
	[name=Theme]::after,button,body>header [data-emoji]::before {
		content: attr(data-emoji);
	    display: inline-flex;
	    justify-content: center;
		line-height:1;
	    inline-size: var(--emoji-size);
		font-size: var(--emoji-size)}
	[data-emoji]::before {float: inline-end;}
	input {
	    font-size: inherit;
		inline-size:100%;
		background: unset;
		border: unset;
		margin:0;		
		appearance:none;
		overflow:clip;
		text-align:center;
		&:checked {outline: thin solid var(--frame-color)}
		&[name=Theme]::after{content: attr(value)}}
	.center {
		margin-inline:auto;
		inline-size: unset;
		max-inline-size: 100%;
		float:unset;
		clear:both;
		blockquote {text-align:revert}}
	ul.center {
		padding:0;
		display:grid;
		list-style:none;
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
		figure {inline-size:100%}}
	.alert, section {
		background: var(--color);
		color: contrast-color(var(--color))
	}
	section {
		padding-inline: var(--main-inline-margin);
		p{display:contents}
		--emphasis-color: currentColor;
		display: flex;
		align-items: center;
		box-shadow: 0 0 0 3px var(--color);
		&::before {content: var(--emoji);font-size:2em;float:left}
		&:has(h4) {display: flow-root}
		h4 {margin:0;font-size:x-large}
	}

	.caution   {
		--emoji:  "🚨";
		--color: #b71c1c; }
	.warning   {
		--emoji: "⚠️";
		--color: #bf6d00; }
	.important {
	  	--emoji: "📍";
		--color: #0d47a1; }
	.tip       {
	  	--emoji: "💡";
		--color: #1b5e20; }
	.note     {
	  	--emoji: "ℹ️";
		--color: #455a64; }
	ul {list-style-type: " ‒ "}
	ol, ul {list-style-position: inside}
	table {
		text-align:center;
		border-collapse: collapse;
		margin-inline:auto;
		empty-cells: hide;
		th, td {border:thin solid var(--frame-color)}
		font-size: clamp(.9rem, .75em, 1.25rem);
	}
	div.footnotes {
		padding: unset;
		text-align:start;
		figure {
			inline-size:100%;
			max-inline-size: 100%;
			margin-inline-start: 0;
			text-align:revert;
			float: none}
		>ol>li {
			margin-inline-start:var(--main-inline-margin);
			>p:first-child {display:inline}}
	}
	main li {white-space:pre-line;}
	main svg, main img {
		inline-size:100%;
		block-size: auto;
		object-fit: contain;
		vertical-align: middle;
		grid-column: 1 / span 2;
		anchor-name: --anch-img;}
	figcaption {
		div {font-style:italic}
		text-box: trim-start cap alphabetic;
		text-align: end;
		>*{text-wrap:balance;
			display:flow;
			contain:inline-size}}
	span {
		font-size: smaller;
		grid-row:3;
		grid-column:1;
		overflow-wrap: anywhere;
		&:has(+cite)::after, cite+&::after { content: ", "}}
	div{text-align:center;
		grid-column: 1 / span 2}
	cite {
		grid-row:3;
		font-size: smaller;
		margin-inline-end: 1ex;
		padding-block-end: 3px}
	main figure {
		block-size:auto;
		padding: 0;
		contain: layout paint;
		float:inline-end;
		clear: inline-end;
		&:has(blockquote) {inline-size: 50%}
		&:has(img) {
			display:grid;
			figcaption {display:contents}}
		&:not(:has(cite+span)) :is(span,cite) {grid-column: span 2}}
	sup a {
		outline: thin solid currentColor;
		color: revert;text-decoration:unset;
		&::after {content:"↓"}}
	a[rel^="external"][aria-label]::after, sup[id] {
		background:inherit;
		font-weight:1000;
		padding-inline:1px;
		font-size:small;
		vertical-align:super;
		line-height:0}
	mark {box-decoration-break: clone}
	h1 {font-size: min(4.3cqi,33px);
		margin:auto;
		text-box: trim-start;
		color: var(--emphasis-color);
		text-transform: uppercase;
		text-align:center;
		background: hsl(from var(--background-color) h s l / .8);
		padding: 3px}
	.headings {
		margin-block:.3em;
		color: var(--emphasis-color);
		&:target {scroll-margin-block-start: var(--height-header)}
	}
	h2{	font-size:1.8em; counter-increment:h2}
	h2 a::before{content:counter(h2, roman)". "}
	h3 {font-variant: small-caps}
	[role=doc-noteref]{cursor:s-resize}
	blockquote {
		margin: unset;
		font-size:.9em;
		font-style:italic;
		text-align:start;
		border-inline-start: thick groove var(--emphasis-color);
		>h3{font-weight: 1000;
		  	font-size: smaller}
		> * {padding-inline-start:var(--main-inline-margin)}}
	strong, q, em {color: var(--emphasis-color)}
	.fake-buttons {
		padding: unset;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		text-align:center;
		li {display:contents}
		a {text-decoration:none;
			outline: thin solid var(--frame-color);
			min-inline-size:11ch}
	}
	main li {white-space: pre-wrap}
	abbr, dfn {
		cursor:help;
		text-decoration:underline dotted var(--emphasis-color);
		text-decoration-thickness: 5px; }
	abbr::before {
		font-weight:bolder;
		text-transform : capitalize}
	.headings a, a {text-decoration:unset;color:unset;cursor:revert}
	[role="doc-backlink"] {text-underline-position: from-font}
	:where(figure>a)::after {
		background: white;
		color: black !important;
		content: "🖼";
		line-height:1;
		position: absolute;
		scale:0;
		transition: .3s scale;
		font-size:1.5em;
	  	text-box: trim-both;
		position-area: center;
		position-anchor: --anch-img;}
	figure:is(:focus-within,:hover)>a::after {color:initial;scale:2}
	q {	font-style: italic;}

} /* End layer */

@layer {
	[title], a[aria-label] {
		--offset-bottom: 1rlh;
	    figure &::before {--offset-bottom:0}
		&::before {
		    content: attr(title);
		    text-wrap: balance;
		    color: canvas;
		    background: var(--emphasis-color);
		    forced-color-adjust: preserve-parent-color;
		    pointer-events: none;
		    position: fixed;
		    translate: 0 calc(100% + 1rlh);
		    inset-inline-start: anchor(--main-anchor left,0);
		    inset-block-end: var(--offset-bottom);
		    inline-size: anchor-size(--main-anchor,100%);
		    text-align:center;
		    transition: translate .3s;
		    z-index: 1;
		  }
	  &:hover::before, &:focus::before { translate:unset; }
	}
	a[aria-label]::before {content: attr(aria-label);}
	:is([type*="video"],[type*="gif"])+a::after { content: '📹'}
	*:focus-visible {outline:none}
}
.headings {font-weight: unset}}
header li:is(:hover,:focus-within) {--emphasis-color: canvas}
:where(header li:has(>a:only-child),.headings, button,q,input,dfn,abbr,label, a):is(:hover,:focus-within), label:has(input:checked) {
	background: canvasText;
	color: canvas;
	forced-color-adjust: preserve-parent-color;
	*,&::after {color:inherit}
}
@container body (width <= 300px) {
	table {
		margin:auto;
		writing-mode: vertical-rl}
	figure {
		inline-size: 100%;
		float:none}
	ul.center {grid:revert}
}
@container body (width <= 650px) {
	main header::after {
		background-color:canvas;
		content: "Alt-m";
		bottom:0;
		right:0;
		text-align: right;
		font-size: small;
		position: absolute;
	}
	figure:has(blockquote) {
		float: none;
		inline-size: 100% }
	main>header {
		& ~ * {
			transition: opacity .3s}
		position: sticky;
		z-index: 1;
		inset-block-start: 0;
		> input {
			display: block;
			inline-size:unset}}
	body>header {
		position: fixed;
		filter:unset;
		background: var(--background-color);
		margin-block-start: var(--height-header);
		max-block-size: calc(100cqb - var(--height-header));
		inline-size: min(5.8cm, 100cqi);
		place-self: anchor-center;
		visibility:hidden;
		opacity: 0;
		z-index: 1;
		position-anchor: --main-anchor;
		* {font-size:unset}
		transition: opacity 0.3s ease, scale 0.3s ease}
	&:has(#showmenu:checked) {
		main {background-color: unset}
		main>header~* { interactivity: inert; opacity: 0.2; }
		body>header {
			pointer-events: auto;
			visibility:revert;
			opacity: 1;
		}
	}
}
@media print {
	@page {
	    size: A4 portrait;
	    margin: 20mm}
	* {padding-inline:0}
	body {
		outline: none;
		display:unset;
		block-size:100%;
		inline-size:100%;
		font-size: 15px;
		clear:inline-end}
	img {z-index:1}
	figure>a {display:none}
	figure[aria-label] {
		display:grid;
		grid-template-columns: repeat(2, 1fr);
		grid-auto-flow: row;
		label {display:none}
		figure {display:revert;grid-column:unset}
		figcaption {display:revert}}
	figcaption div {border: thin solid var(--frame-color)}
	a {text-decoration:unset}
	figure {
		outline:unset;
		break-inside:avoid}
	h1 {font-size:unset}
	img[src] {background:unset}
	[title]::after {
		content: counter(externalEmptyCounter);
		outline: thin solid currentColor}
	html {
		--effectively-light: true;
		color-scheme:only light;
		--color-link: black;
		--visited: black}
	main input, body>header {display:none}
	*::after,*::before {color:inherit}
	[aria-label],[title] {counter-increment:externalEmptyCounter}
	:is([aria-label],[title])::before{
		z-index:1;
		max-inline-size: 40%;
		break-inside:avoid;
		position:relative;
		border: thin solid var(--frame-color);
		text-wrap: balance;
		font-size: smaller;
		text-align:unset;
		float:inline-end;
		clear:inline-end;}
	[title]::before {content: counter(externalEmptyCounter)". "attr(title)}
	[aria-label]::before {content: counter(externalEmptyCounter)". "attr(aria-label)" :\a"attr(href)}
}
@container style(--effectively-light: true) {
	:target-current, [aria-current] {
    	color: unset;
  		font-weight: 600;
	}
}