/* @import "./fix.css"; */
@font-face {
	font-display: swap;
	font-family: 'Noto Sans';
	font-style: normal;
	font-weight: 400;
	src: local('Noto Sans Regular'), local('NotoSans-Regular') format('woff2');
	unicode-range: U+0-24F, U+1E00-1EFF, U+20A0-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF, U+FB00-FBFF;
}
@font-face { font-display: swap; font-family: "Dyslexic"; src: url("./mul/opendyslexic-regular.otf") format("opentype") }
@font-face {
	font-family: "emoji";
	src: local("Noto Color Emoji"), local("Twemoji Mozilla"), local("EmojiOne Color"),local("Segoe UI Emoji"), local("Segoe UI Symbol"), local("Apple Color Emoji"), local("Android Emoji"), local("Segoe UI Emoji"), local(EmojiSymbols), local(Symbola); unicode-range: U+231A-231B, U+23E9-23EC, U+23F0, U+23F3, U+25FD-25FE, U+2614-2615, U+2648-2653, U+267F, U+2693, U+26A1, U+26AA-26AB, U+26BD-26BE, U+26C4-26C5, U+26CE, U+26D4, U+26EA, U+26F2-26F3, U+26F5, U+26FA, U+26FD, U+2705, U+270A-270B, U+2728, U+274C, U+274E, U+2753-2755, U+2757, U+2795-2797, U+27B0, U+27BF, U+2B1B-2B1C, U+2B50, U+2B55, U+FE0F, U+1F004, U+1F0CF, U+1F18E, U+1F191-1F19A, U+1F1E6-1F1FF, U+1F201, U+1F21A, U+1F22F, U+1F232-1F236, U+1F238-1F23A, U+1F250-1F251, U+1F300-1F320, U+1F32D-1F335, U+1F337-1F393, U+1F3A0-1F3CA, U+1F3CF-1F3D3, U+1F3E0-1F3F0, U+1F3F4, U+1F3F8-1F43E, U+1F440, U+1F442-1F4FC, U+1F4FF-1F53D, U+1F54B-1F567, U+1F57A, U+1F595-1F596, U+1F5A4, U+1F5FB-1F64F, U+1F680-1F6CC, U+1F6D0-1F6D2, U+1F6D5-1F6D7, U+1F6DC-1F6DF, U+1F6EB-1F6EC, U+1F6F4-1F6FC, U+1F7E0-1F7EB, U+1F7F0, U+1F90C-1F93A, U+1F93C-1F945, U+1F947-1FA7C, U+1FA80-1FAC5, U+1FACE-1FADB, U+1FAE0-1FAE8, U+1FAF0-1FAF8 }
:root {
	--systf: "Segoe UI Variable Display", Avenir Next, Helvetica Neue, Cantarell, Ubuntu, Roboto, system-ui;
	--snsrf: "Noto Sans", sans-serif;
	--serif: "Noto Serif", serif;
	--mnspf: "Noto Sans Mono", monospace;
	--latte: rgb(255, 248, 231);
	--rosmx: rgb(195, 60, 105);
	--slctv: rgb(255, 186, 0);
	--crdnl: rgb(196, 30, 58);
	--egngr: rgb(22, 22, 29);
	--chlmn: rgb(39, 65, 91);
}
@media screen {
	@view-transition { navigation: auto }
	@keyframes bounce {
		0%, 20%, 50%, 80%, 100% { transform: translateY(0) }
		40% { transform: translateY(-35px) }
		60% { transform: translateY(-20px) }
	}
	@keyframes textflicker {
		from { text-shadow: 2px 1px 0 #f00, -2px -1px 0 #00f }
		to { text-shadow: -2px -1px 0 #f00, 2px 1px 0 #00f }
	}
	@keyframes show {
		from { opacity: 0; scale: 10% }
		to { opacity: 1; scale: 100% }
	}
	@keyframes weirdblur {
		97% { filter: blur(0) }
		98% { filter: blur(3px) }
		100% { filter: blur(0) }
	}
	:where(label:has(> input:disabled), label:has(+ input:disabled)) { cursor: not-allowed }
	:focus-visible, :target { scroll-margin-block: 8vb }
	:focus-visible {
		border-radius: 50px;
		box-shadow: 0 0 0 0.1em transparent, 0 0 0 0.1em var(--crdnl);
		outline: 1px solid var(--crdnl);
		outline-offset: 5px;
		transition: outline-offset 0.25s ease;
		z-index: 9
	}
	::marker {
		color: var(--crdnl);
		font-size: 125%
	}
	:not(img, video, button, input, select)::selection {
		color: var(--egngr);
		text-shadow: 1px 0 1px var(--slctv), 0 1px 1px #fff, 2px 1px 1px var(--slctv), 1px 2px 1px #fff, 3px 2px 1px var(--slctv), 2px 3px 1px #fff, 4px 3px 1px var(--slctv), 3px 4px 1px #fff, 5px 4px 1px var(--slctv), 4px 5px 1px #fff, 6px 5px 1px var(--slctv), 5px 6px 1px #fff, 7px 6px 1px var(--slctv)
	}
	::selection:window-inactive { background-color: var(--slctv) }
	::spelling-error, ::grammar-error {
		color: var(--crdnl);
		text-decoration: wavy
	}
	:target { scroll-margin-block-start: 5ex }
	[aria-busy="true"] { cursor: progress }
	[aria-controls] { cursor: pointer }
	[aria-disabled="true"], [disabled] { cursor: not-allowed }
	[aria-hidden="false"][hidden] { display: initial }
	[aria-hidden="false"][hidden]:not(:focus) {
		clip: rect(0, 0, 0, 0);
		position: absolute
	}
	[id] { scroll-margin-top: 3ex }
	html {
		accent-color: var(--crdnl);
		color-scheme: light dark;
		cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='48' viewport='0 0 40 48' style='font-size:24px;'><text y='50%'>🌮</text></svg>"), auto;
		font-family: "emoji", var(--systf);
		interpolate-size: allow-keywords;
		overflow-x: hidden;
		tab-size: 4;
		scrollbar-color: var(--crdnl) transparent;
		scrollbar-gutter: stable;
		text-size-adjust: none;
		&:focus-within { scroll-behavior: smooth }
		&:has(.thm) { color-scheme: dark light }
	}
	html[lang="en-US"] {
		& ol li { list-style-type: decimal-leading-zero }
	}
	@counter-style mayan {
		system: additive;
		additive-symbols: 10 "𝋪", 9 "𝋩", 8 "𝋨", 7 "𝋧", 6 "𝋦", 5 "𝋥", 4 "𝋤", 3 "𝋣", 2 "𝋢", 1 "𝋡", 0 "𝋠"; /* 𝋠𝋡𝋢𝋣𝋤𝋥𝋦𝋧𝋨𝋩𝋪𝋫𝋬𝋭 */
		suffix: ""
	}
	html[lang="yua"] {
		& li {
			font-family: "Noto Sans Mayan Numerals";
			font-style: normal;
			font-weight: 400;
			list-style: mayan
		}
		& ul { columns: 1 }
	}
	html:where([lang="he-IL"], [lang="ja-JP"]) {
		& > * {
			font-optical-sizing: auto;
			font-style: normal;
			font-weight: 400;
			hyphens: none;
			text-wrap: initial
		}
		& :where(address, dt, th, td, caption) {
			font-family: inherit;
			font-style: inherit
		};
		& ins { text-wrap: nowrap }
		& ul { columns: 1 }
		& #dys { display: none }
	}
	html[lang="he-IL"], .translated-rtl {
		& > * {
			direction: rtl;
			font-family: "emoji", "Noto Sans Hebrew", "Ezra SIL SR", "Taamey David CLM", "Keter YG", "Keter Aram Sova", "Cardo", serif;
			font-size: 125%
		}
		& article { padding-inline-start: 3ch }
		& tr:has(:hover) td:nth-of-type(1)::after { content: " ➡️"}
		& li { list-style-type: hebrew }
		& em { letter-spacing: 3px }
		& .tree { direction: ltr }
	}
	html[lang="ja-JP"] {
		& > * {
			font-family: "emoji", "Noto Sans JP", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "游明朝", "游明朝体", YuMincho, serif;
			font-variant-east-asian: full-width;
			letter-spacing: 0.2em;
			line-height: 1.8;
			text-orientation: mixed
		}
		& article {
			align-items: safe center;
			direction: ltr;
			display: flex;
			flex-direction: column;
			justify-content: center;
			overscroll-behavior: contain;
			word-break: auto-phrase;
			writing-mode: vertical-rl
		}
		& details {
			direction: rtl;
			overflow: auto
		}
		& p, dd { max-inline-size: 50ch }
		& td { min-inline-size: 9ch }
		& li { list-style-type: japanese-informal }
		& abbr { text-orientation: upright }
		& time {
			text-combine-upright: digits;
			text-transform: full-width
		}
		& :where(hr, button, input, .tree ul, .tree li) {
			max-inline-size: revert;
			line-height: initial;
			writing-mode: horizontal-tb
		}
		& .gal { all: initial }
		& > :where(.tree ul, .tree li) { display: initial }
	}
	body {
		background: radial-gradient(farthest-side at -33% 50%, transparent 52%, var(--rosmx) 54% 57%, transparent 59%) 0 calc(128px/2), radial-gradient(farthest-side at 50% 133%, transparent 52%, var(--rosmx) 54% 57%, transparent 59%) calc(128px/2) 0, radial-gradient(farthest-side at 133% 50%, transparent 52%, var(--rosmx) 54% 57%, transparent 59%), radial-gradient(farthest-side at 50% -33%, transparent 52%, var(--rosmx) 54% 57%, transparent 59%), #fff;
		background-size: calc(128px/3) 128px,128px calc(128px/3);
		background-color: light-dark(var(--latte), var(--egngr));
		color: light-dark(var(--egngr), var(--latte));
		display: grid;
		font-family: "emoji", var(--snsrf);
		font-optical-sizing: auto;
		font-size: clamp(1rem, 0.9643rem + 0.1786vw, 1.125rem);
		font-style: normal;
		font-variation-settings: "wdth" 100;
		font-weight: 500;
		gap: 3.5vb 2.5vi;
		grid-auto-flow: row;
		line-height: 1.4;
		margin: 4vb 3vi;
		text-rendering: optimizeSpeed;
		transition-property: font-size;
		transition-duration: 0.5s
	}
	aside, footer, header, main, nav {
		background-color: light-dark(var(--latte), var(--egngr));
		border: 4px inset var(--rosmx);
		cursor: crosshair;
		isolation: isolate;
		padding: 2.5vb 3vi;
		transition: all 0.3s cubic-bezier(0.17, 0.88, 0.32, 2.2);
	}
	aside :is(img, [href^="tel"]) { display: none }
	nav, footer {
		align-items: center;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between
	}
	nav { block-size: min-content;
		& label { margin-inline-start: auto }
	}
	footer {
		content-visibility: auto;
		& img {
			max-block-size: 2em;
			vertical-align: text-bottom
		}
		& object { max-inline-size: 2em }
	}
	main {
		display: flex;
		flex-direction: column
	}
	details {
		animation-name: show;
		animation-fill-mode: both;
		animation-range: entry 25% cover 50%;
		animation-timeline: --reveal;
		display: block;
		padding: 1.5vb 2.5vi;
		transform: rotate(0);
		transition: .25s transform ease;
		view-timeline-name: --reveal;
		&::details-content {
			block-size: 0;
			opacity: 0;
			overflow-y: clip;
			transition: content-visibility .5s allow-discrete, opacity .5s, block-size .5s
		}
		&[open] {
			animation-name: none;
			&::details-content {
				block-size: auto;
				opacity: 1
			}
			&::marker { transform: rotate(90deg) translate(2rem) }
			& summary ~ * { animation: sweep .5s ease-in-out }
			& summary > span, & summary > small { visibility: hidden }
		}
		&:nth-of-type(3) > article {
			overflow: auto;
		}
	}
	summary {
		cursor: pointer;
		display: list-item;
		margin-inline-end: 2em;
		text-transform: uppercase;
		&::first-letter { font-size: 133% }
	}
	article {
		content-visibility: auto;
		contain: style paint;
		margin-trim: block
	}
	dl {
		cursor: text;
		padding-block: .5em
	}
	dt { font-style: oblique }
	dd {
		border-inline-start: 2px var(--rosmx) dashed;
		font-family: inherit;
		hyphens: auto;
		padding: .5em 1em;
		text-indent: 1em;
		max-inline-size: min(100%, 75ch)
	}
	table {
		border-collapse: collapse;
		border-spacing: 0;
		font-variant-numeric: lining-nums;
		margin: auto;
		white-space: nowrap;
		inline-size: clamp(300px, 90%, 750px)
	}
	caption {
		font-style: italic;
		padding: 1em;
		text-align: end
	}
	thead {
		inset-inline-start: 0;
		position: sticky;
		z-index: 8
	}
	tbody tr:nth-child(even) { background-color: color-mix(in oklab, var(--latte), var(--egngr)) }
	tr:has(:hover) td:nth-of-type(1)::after { content: " ⬅️" }
	td, th {
		border-block-end: 1px solid var(--rosmx);
		cursor: cell;
		inline-size: fit-content;
		padding: .25em .5em;
		text-wrap: initial;
		text-align: start
	}
	th {
		background-color: light-dark(var(--egngr), var(--latte));
		color: light-dark(var(--latte), var(--egngr));
		font-weight: bold;
		position: sticky;
		inset-block-start: 0;
		vertical-align: bottom;
		z-index: 6
	}
	[popover] {
		background-color: inherit;
		border: 5px double var(--rosmx);
		color: currentColor;
		inline-size: min(100%, 65ch);
		padding: 1em;
		text-align: justify;
		text-align-last: center;
		&::backdrop { backdrop-filter: blur(5px) } }
	h1, h2, h3, h4, h5 {
		cursor: text;
		letter-spacing: clamp(-0.05em, calc((1em - 1rem) / -10), 0em);
		line-height: calc(1em + 2rem);
		margin: .5em 0
	}
	h1 {
		font-size: clamp(3.0518rem, 2.5709rem + 2.4044vw, 4.7348rem);
		font-weight: 900;
		text-align: center;
		text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
		& span span:first-child { display: none }
	}
	h2 {
		font-size: clamp(2.4414rem, 2.1241rem + 1.5866vw, 3.552rem);
		will-change: transform;
		&:where(:hover, :focus) {
			animation-direction: alternate;
			animation-duration: 0.01s;
			animation-iteration-count: infinite;
			animation-name: textflicker;
			text-shadow: -.05em 0 0 var(--crdnl), .05em 0 0 #0FF
		}
	}
	h3, summary span { font-size: clamp(1.9531rem, 1.7498rem + 1.0165vw, 2.6647rem) }
	h4 { font-size: clamp(1.5625rem, 1.4378rem + 0.6236vw, 1.999rem) }
	h5 { font-size: clamp(1.25rem, 1.1787rem + 0.3566vw, 1.4996rem) }
	li, p {
		cursor: text;
		word-wrap: break-word
	}
	p, dd {
		hyphenate-limit-chars: 7 3 4;
		max-inline-size: 65ch;
		hyphens: auto;
		margin-block: 1lh;
		overflow-wrap: break-word;
		text-wrap: pretty
	}
	ol ol, ol ul, ul ol, ul ul { margin: 0 }
	li {
		padding-inline-start: 1ch;
		text-wrap: balance;
		&::marker { color: var(--rosmx) }
	}
	ol li { list-style-type: upper-roman }
	a, button, input, select, textarea, label, summary { touch-action: manipulation;
		&:focus:not(:focus-visible) { outline: none }
	}
	a {
		color: light-dark(var(--egngr), var(--latte));
		line-height: 2;
		line-clamp: 3;
		text-decoration: underline var(--crdnl);
		text-decoration-skip-ink: auto;
		text-decoration-thickness: .1em;
		text-underline-offset: .25em;
		transition: color 0.2s;
		& sup, & sub {
			border-block-end: 1px solid;
			display: inline-block;
			padding-block-end: 1.8ex
		}
		&:where(:hover, :focus) { color: var(--crdnl) }
	}
	:where([href^="http"], [href^="https"])::before { content: "🔗\0000a0" / "URL" }
	[href^="mailto"]::before { content: "📧\0000a0" / "E-mail" }
	:where([href$=".docx"], [href$=".txt"], [href$=".doc"])::before { content: "📝\0000a0" / "Document File" }
	:where([href$=".xls"], [href$=".xlsx"])::before { content: "📈\0000a0" / "Spreadsheet File" }
	:where([href$=".ppt"], [href$=".pptx"])::before { content: "📊\0000a0" / "Presentation File" }
	:where([href$=".rar"], [href$=".7z"], [href$=".zip"])::before { content: "🗜️\0000a0" / "Compressed File" }
	[href$=".mp3"]::before { content: "🎵\0000a0" / "Audio File" }
	:where([href$=".mp4"], [href$=".webm"])::before { content: "🎥\0000a0" / "Video File" }
	:where([href$=".jpg"], [href$=".gif"], [href$=".png"], [href$=".webp"])::before { content: "🖼️\0000a0" / "Image File" }
	[href$=".pdf"][data-size]::before { content: "[PDF, " attr(data-size) "] " / "PDF" }
	abbr {
		cursor: help;
		font-variant: small-caps;
		font-variant-caps: all-small-caps;
		hyphens: none;
		letter-spacing: 0.1em;
		text-decoration: underline overline dotted var(--crdnl);
		text-underline-offset: .25em
	}
	small { font-size: clamp(0.8rem, 0.7874rem + 0.0628vw, 0.844rem) }
	sub, sup {
		font-size: .85em;
		position: relative;
		vertical-align: baseline
	}
	sub { inset-block-end: -.25em }
	sup { inset-block-start: -.25em }
	del {
		filter: blur(6px);
		padding-inline: 1ex;
		text-decoration: none;
		user-select: none;
		&:hover { filter: blur(0) }
	}
	ins {
		border: 1px solid var(--rosmx);
		border-radius: 50px;
		border-width: medium thin thick 5px;
		box-decoration-break: clone;
		padding-inline: 1ex;
		text-decoration: none;
		word-break: auto-phrase
	}
	blockquote {
		text-indent: -.45em;
		&::after, &::before {
			color: currentColor;
			line-height: 0.8
		}
		&::after { content: " \275E" }
		&::before { content: "\275D " }
		@supports (hanging-punctuation: first) { & {
			hanging-punctuation: first;
			text-indent: 0
		} }
	}
	q {
		font-style: normal;
		hanging-punctuation: first last;
		&[cite] {
			&::after { content: " \275E" }
			&::before { content: "\275D " }
			&:hover::after { content: " ("attr(cite)") \275E" }
		}
	}
	code, kbd, pre, samp {
		font-family: "emoji", var(--mspf);
		font-style: normal;
		word-wrap: normal
	}
	code {
		animation: weirdblur 3s infinite;
		background-image: radial-gradient(rgb(68, 68, 68), rgb(40, 40, 40));
		background-color: rgb(40, 40, 40);
		color: rgb(102, 255, 102);
		font-size: 90%;
		padding: 2ex 0;
		white-space: nowrap
	}
	kbd {
		background: linear-gradient(180deg, #fff, #fff, #fff, #ddd);
		border: 1px solid #aaa;
		border-radius: 50px;
		color: #000;
		display: inline-block;
		font-weight: bold;
		padding: .1ex .5ex;
		user-select: none;
		&:hover { background: linear-gradient(0deg, #fff, #fff, #fff, #ddd) }
	}
	pre {
		display: block;
		tab-size: 4;
		white-space: pre
	}
	time { color: currentColor }
	u { text-decoration: underline;
		& > u { text-decoration: underline double }
	}
	s { text-decoration: line-through;
		& > s { text-decoration: line-through double }
	}
	hr {
		border: transparent;
		border-block-start: 1px solid var(--rosmx);
		font-size: 1em;
		block-size: 1px;
		line-height: 1;
		margin: 2ex;
		text-align: center;
		overflow: visible;
		&::after {
			background-color: light-dark(var(--latte), var(--egngr));
			content: "⍼";
			color: var(--rosmx);
			display: inline;
			padding-inline: 0.5em
		}
	}
	audio, canvas, iframe, img, svg, object, video {
		display: block;
		max-inline-size: 100%;
		object-fit: contain
	}
	audio:not([controls]) {
		display: none;
		block-size: 0
	}
	iframe {
		block-size: auto;
		border-style: none;
		inline-size: 100%
	}
	figure {
		--a: transparent 25%, var(--rosmx) 0;
		background-repeat: no-repeat;
		background-size: 50px 50px;
		border: 2px inset var(--rosmx);
		break-inside: avoid;
		content-visibility: auto;
		cursor: default;
		fill: currentColor;
		inline-size: fit-content;
		margin-inline: auto;
		padding: 10px
	}
	figcaption { contain: inline-size }
	img, video {
		block-size: auto;
		border-style: none;
		transform-origin: top;
		transition: all .2s ease-in-out;
		&::selection {
			background-color: transparent;
			box-shadow: none
		}
		&[alt] {
			color: var(--crdnl);
			font-weight: bold;
			text-align: center
		}
	}
	svg {
		display: block;
		inline-size: 100%;
		&:not([fill]) { fill: currentColor }
		&:not(:root) { overflow: hidden }
	}
	object { max-block-size: 95vh; }
	button, input, select, textarea {
		background: transparent;
		border: 2px outset var(--rosmx);
		border-radius: calc(100%/(3 + sqrt(2)));
		color: currentColor;
		font: inherit;
		line-height: 1;
		user-select: none;
		&:where(:hover, :focus) {
			background-color: var(--crdnl)
		}
	}
	button, input {
		appearance: button;
		cursor: pointer;
		overflow: visible;
		padding: .5em .5em;
		text-decoration: none;
		text-transform: uppercase;
		transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
		white-space: nowrap;
		&:active { scale: 0.8 }
	}
	input {
		&[type="checkbox"], &[type="radio"] {
			display: inline;
			padding: 0
		}
		&[type="search"] {
			appearance: textfield;
			outline-offset: -2px;
		}
		&:not(:placeholder-shown):invalid {
			color: var(--crdnl);
			font-weight: bolder
		}
	}
	select, textarea, input {
		caret-color: var(--crdnl);
		cursor: pointer;
		field-sizing: content
	}
	select {
		appearance: none;
		line-height: 1.4;
		padding: .5em 1.4em .5em .7em;
		&[multiple] { block-size: auto }
		@supports (appearance: base-select) {
			&, &::picker(select) { appearance: base-select }
		}
	}
	option, optgroup {
		background-color: light-dark(var(--latte), var(--egngr));
		font-family: inherit;
		user-select: none
	}
	option { text-align: center }
	fieldset { padding: 0.35em 0.75em 0.625em }
	legend {
		color: inherit;
		display: block;
		font-weight: bold;
		margin-block-end: .5em;
		padding: 0;
		white-space: normal
	}
	meter, progress {
		vertical-align: top;
		inline-size: min(200px, 100%)
	}
	progress {
		box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
		height: 20px;
		margin-inline: 5px;
		&::-webkit-progress-bar {
			background-color: transparent;
			border-radius: 12px
		}
		&::-webkit-progress-value {
			background: var(--crdnl);
			border-radius: 12px
		}
	}
	textarea {
		caret-shape: block;
		caret-color: var(--crdnl);
		overflow: auto;
		padding: 6ex 0;
		resize: vertical;
		inline-size: 90%;
		&:not([rows]) { min-block-size: 10em }
	}
	[contenteditable]::spelling-error { text-decoration: underline wavy red 2px }
	label {
		display: inline-block;
		margin-inline: .5em;
		user-select: none
	}
	.viewerComponent { max-block-size: 90% }
	.nonoto { font-family: var(--systf) }
	.lat { text-transform: uppercase;
		& sub {
			font-size: .9em;
			margin: -.1ch -.025ch 0 -.1667ch
		}
		& sup {
			font-size: .85em;
			margin: 0 -.05ch .2ch -.26ch
		}
	}
	.dys {
		color: light-dark(#000, #fff);
		font-family: "emoji", "Dyslexic", "Comic Sans", Helvetica, Courier, Verdana, Arial, sans-serif;
		font-variant-ligatures: none;
		hyphens: none;
		letter-spacing: 2%;
		line-height: 1.5;
		text-rendering: optimizeLegibility;
		word-spacing: 1.2ch;
		& :where(q, blockquote, button, input, option) { font-family: inherit }
		& a { word-break: normal }
	}
	.tree {
		border: 2px inset var(--rosmx);
		display: table;
		margin-trim: block inline;
		padding: 0;
		text-align: center;
		& ul, & li {
			list-style: none;
			margin: 0;
			padding: 0;
			position: relative;
			transition: all 0.3s
		}
		& ul { display: table;
			&::before { inset-block-start: -.5em }
		}
		& li {
			display: table-cell;
			padding: .5em 0;
			vertical-align: top;
			&::before {
				content: "";
				inset-inline-start: 0;
				outline: 1px dashed var(--rosmx);
				position: absolute;
				inset-inline-end: 0;
				inset-block-start: 0
			}
			&:first-child::before { inset-inline-start: 50% }
			&:last-child::before { inset-inline-end: 50% }
			& span:hover, & span:hover + ul li span {
				background-color: light-dark(var(--egngr), var(--latte));
				color: light-dark(var(--latte), var(--egngr))
			}
		}
		& span {
			anchor-name: --desc;
			border: 1px inset var(--rosmx);
			display: inline-block;
			margin: 0 .2em .5em;
			padding: .2em .5em;
			position: relative;
			text-align: center;
			&::before { inset-block-start: -.55em }
			&:hover::after, &:focus::after {
				background-color: #fff;
				box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.75);
				color: #000;
				content: attr(data-count);
				font-size: 75%;
				font-family: var(--mnspf);
				inline-size: min-content;
				inset-block-start: 4ch;
				padding: 1ex;
				position: absolute;
				position-anchor: --desc;
				position-area: bottom;
				position-try: top, left, right;
				transition: all 0.18s ease-out 0.18s;
				white-space: wrap;
				z-index: 7
			}
		}
		& > li { margin-block-start: 0 }
		& > :where(li::before, li::after, li > span::before) { outline: none }
		& ul::before, & span::before {
			content: "";
			block-size: .5em;
			inset-inline-start: 50%;
			outline: 1px dashed var(--rosmx);
			position: absolute
		}
	}
	.nube {
		hyphens: none;
		padding-block: 1lh;
		list-style: none;
		text-align: center;
		& li {
			cursor: default;
			display: inline-flex;
			transform-origin: center;
			transition: transform .7s cubic-bezier(0.16, 1, 0.3, 1), opacity .2s linear;
			will-change: transform;
			&:where(:hover, :focus) {
				scale: 1.4;
				text-shadow: 0 0 10px currentColor;
				& + li {
					opacity: .1;
					scale: 1.3
				}
				& + li + li {
					opacity: .5;
					scale: 1.2
				}
				& + li + li + li {
					opacity: .9;
					scale: 1.1
				}
			}
			&:has(+ li + li + li:hover) {
				opacity: .9;
				scale: 1.1
			}
			&:has(+ li + li:hover) {
				opacity: .5;
				scale: 1.2
			}
			&:has(+ li:hover) {
				opacity: .1;
				scale: 1.3
			}
		}
	}
	.pad {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 10px
	}
	#gal {
		content-visibility: auto;
		& :where(img:not(:hover), img:not(:focus)) { filter: brightness(0.75) contrast(1.25) }
		& :where(img:hover, img:focus) {
			filter: brightness(1) contrast(1);
			inset-block-start: 0;
			scale: 2
		}
		@supports (display: grid-lanes) {
			& {
				display: grid-lanes;
				gap: 9px;
				grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
			}
		}
		@supports not (display: grid-lanes) {
			& { columns: 200px }
		}
	}
	.thm {
		background-color: light-dark(var(--egngr), var(--latte));
		color: light-dark(var(--latte), var(--egngr));
		& :where(aside, footer, header, main, nav) { background-color: light-dark(var(--egngr), var(--latte)); }
		& th {
			background-color: light-dark(var(--latte), var(--egngr));
			color: light-dark(var(--egngr), var(--latte))
		}
		& a { color: light-dark(var(--latte), var(--egngr)) }
		& hr::after { background-color: light-dark(var(--egngr), var(--latte)) }
		& option, & optgroup { background-color: light-dark(var(--egngr), var(--latte)) }
		& .tree li :is(span:hover, span:hover + ul li span) {
			background-color: light-dark(var(--latte), var(--egngr));
			color: light-dark(var(--egngr), var(--latte))
		}
	}
	#tope {
		animation: bounce 2s infinite;
		cursor: pointer;
		will-change: transform;
		z-index: calc(infinity)
	}
}
@media screen and (430px < width < 1024px) {
	body { grid-template-columns: 1fr min-content }
	header, main, footer { grid-column: 1 / 3 }
	nav {
		grid-column: 2 / 3;
		grid-row: 2 / 3
	}
	aside {
		grid-column: 1 / 2;
		grid-row: 2 / 3
	}
	footer { content-visibility: auto }
	a {
		line-height: 1.8;
		margin: .5em
	}
	.dys {
		letter-spacing: normal;
		word-spacing: normal
	}
}
@media screen and (width > 1023px) {
	html[lang="ja-JP"] {
		& body { grid-template-columns: 30% 1fr min-content }
		& header { grid-column: 2 / 4 }
		& nav { grid-column: 1 / 2 }
		& main { grid-column: 1 / 3 }
		& aside {
			align-self: start;
			block-size: min-content;
			grid-column: 3 / 4;
			grid-row: 2 / 3;
			position: sticky
		}
	}
	body {
		grid-template-columns: min-content 1fr 30%;
		grid-template-rows: auto 1fr auto
	}
	header { grid-column: 1 / 3 }
	nav {
		grid-column: 3 / 4;
		grid-row: 1 / 2
	}
	main { grid-column: 2 / 4 }
	aside {
		align-self: start;
		block-size: min-content;
		grid-column: 1 / 2;
		position: sticky;
		inset-block-start: 1em
	}
	footer { grid-column: 1 / 4 }
	ul:not([class]):not(li ul) {
		columns: 2;
		column-rule-style: solid;
		column-rule-width: 2px;
		list-style-position: inside
	}
	li {
		break-inside: avoid-column;
		text-wrap: revert
	}
	a { line-height: revert }
	hr[aria-orientation="vertical"] {
		block-size: 100%;
		inline-size: 2px
	}
}
@media (hover: none) and (pointer: coarse) {
	html {
		padding-top: env(safe-area-inset-top);
		padding-right: env(safe-area-inset-right);
		padding-bottom: env(safe-area-inset-bottom);
		padding-left: env(safe-area-inset-left)
	}
	button, input { padding: .9em }
	abbr {
		anchor-name: --sign;
		position: relative;
		&:hover::after, &:focus::after {
			background-color: #fff;
			box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.75);
			color: #000;
			content: attr(title);
			font-size: 75%;
			font-family: var(--mnspf);
			inline-size: min-content;
			inset-block-start: 1ch;
			padding: 1ex;
			position: absolute;
			position-anchor: --sign;
			position-area: bottom;
			position-try: top, left, right;
			transition: all 0.18s ease-out 0.18s;
			white-space: wrap;
			z-index: 7
		}
	}
}
@media screen and (inverted-colors) { img, video { filter: invert(100%) } }
@media (prefers-reduced-motion: reduce), (update: slow) {
	*, *::before, *::after {
		animation-delay: -1ms;
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		background-attachment: initial;
		transition-duration: .001ms !important;
		transition-delay: 0s
	}
	:focus {
		outline-offset: 5px;
		transition: outline-offset 0.25s ease
	}
	html:focus-within { scroll-behavior: auto }
}
@media screen and (prefers-contrast: more) {
	::placeholder {
		color: rgba(16, 16, 16, 0.8);
		opacity: 1
	}
	[disabled] { color: rgba(16, 16, 16, 0.8) }
	body { font-weight: 800 }
}
@media screen and (prefers-contrast: less) { body { font-weight: 400 } }
@media (prefers-reduced-data: reduce) {
	:root {
		--snsrf: Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans", source-sans-pro, sans-serif;
		--serif: Superclarendon, Palatino, "Bookman Old Style", "URW Bookman", "Book Antiqua", Georgia, serif;
		--mnspf: "Nimbus Mono PS", "Courier New", Menlo, Consolas, Monaco, Liberation Mono, monospace;
	}
	:is(html[lang="he-IL"], .translated-rtl) * { font-family: "emoji", "Ezra SIL SR", "Taamey David CLM", "Keter YG", "Keter Aram Sova", "Cardo", serif; }
	html[lang="ja-JP"] * { font-family: "emoji", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "游明朝", "游明朝体", YuMincho, serif; }
}
@media print, (overflow-block: paged) {
	@page {
		margin: 0;
		padding: 0;
		size: letter portrait;
		@left-middle {
			content: string(title);
			font-size: 8pt;
			margin: 30pt 0 10pt 0;
			transform: rotate(-90deg)
		}
		@top-center {
			border-top: .25pt solid #666;
			color: #333;
			content: "CV desde HTML";
			font-size: 9pt;
			margin: 10pt 0 30pt 0
		}
	}
	@page:left {
		margin: 1cm 1.5cm 1cm 1cm;
		@bottom-left { content: "Pág. " counter(page) " de " counter(pages) }
	}
	@page:right {
		margin: 1cm 1cm 1cm 1.5cm;
		@bottom-right { content: "Pág. " counter(page) " de " counter(pages) }
	}
	@page front-matter:left { @bottom-left { content: counter(page, lower-roman) } }
	@page covers { margin: 1cm }
	@page:blank { @top-center { content: "Intencionalmente" } }
	*, *::before, *::after, *::first-letter, *::first-line {
		background: #fff;
		box-shadow: initial;
		box-sizing: border-box;
		color: #000;
		text-shadow: initial
	}
	header p, footer, nav, details:nth-of-type(n+3), summary, del, blockquote, q, hr, audio, video, meter { display: none !important }
	body {
		font-family: var(--serif);
		font-optical-sizing: auto;
		font-size: 12pt;
		font-style: normal;
		font-variation-settings: "wdth" 100;
		letter-spacing: 0.2pt;
		line-break: normal;
		line-height: 1.3;
		text-rendering: optimizeLegibility;
		word-spacing: 1.1pt
	}
	/* header { page: covers } */
	main {
		counter-reset: ChNo FiNo;
		margin-block-start: 14pt
	}
	aside img {
		display: block;
		float: inline-end;
		margin-block-start: -80pt
	}
	dt { font-style: oblique }
	dd {
		font-family: var(--serif);
		margin-block-end: 9pt
	}
	dl, table, figure, dl, li ul, li ol, a, img { break-inside: avoid }
	p, blockquote, table, ul, ol, dl { margin-block: 0 18pt }
	table {
		border: 2pt solid #000;
		border-collapse: collapse;
		border-spacing: 0;
		margin: 5pt
	}
	thead { display: table-header-group }
	caption { text-align: right }
	th, td {
		border-block-end: 1px solid #333;
		font-family: var(--serif);
		min-inline-size: 75pt;
		padding: 1pt 6pt;
		vertical-align: top
	}
	th { font-weight: bold }
	h1, h2, h3, h4, h5 {
		font-weight: bold;
		line-height: 1.2;
		margin-block: 0 9pt;
		break-after: avoid;
		&::before { content: "§ " }
	}
	h1 {
		font-size: 20pt;
		string-set: title content("&emsp;");
		text-align: center;
		/* &::before {
			counter-increment: ChNo;
			content: "§ " counter(ChNo) " "
		} */
	}
	h2 { font-size: 16pt }
	h3 { font-size: 15pt }
	h4 { font-size: 14pt }
	h5 { font-size: 12pt }
	:where(p, ul, ol):last-child { margin-block-end: 0 }
	p {
		orphans: 3;
		text-indent: 1.463rem;
		widows: 2
	}
	ul, ol { columns: 2 }
	a {
		border: transparent;
		font-weight: bold;
		text-decoration-style: underline;
		text-underline-offset: .4ch;
		word-wrap: break-word;
		&::after { content: " (página " target-counter(attr(href, url), page) ")" }
	}
	:where([href^="http://"], [href^="https://"])::after {
		content: ": " attr(href)"";
		font-size: 90%
	}
	:where([href^="#"], [href^="tel"], [href^="javascript:"])::after { content: "" }
	[href^="mailto"]::after {
		content: "";
		break-inside: avoid
	}
	sub, sup {
		font-size: 75%;
		line-height: 0;
		position: relative;
		vertical-align: baseline
	}
	abbr, ins { text-underline-offset: .4ch }
	blockquote, pre {
		border: 1px solid var(--rosmx);
		break-inside: avoid
	}
	code, pre, kbd {
		border: 1px solid #999;
		font-family: var(--mspf);
		font-size: 85%;
		padding: 0 2pt;
		break-inside: avoid
	}
	pre { white-space: pre-wrap }
	hr {
		block-size: 1pt;
		box-sizing: content-box;
		color: #ccc;
		margin: 17pt 0
	}
	figure {
		inline-size: 40%;
		margin-block-end: 2pt;
		overflow: hidden;
		& img { border: 1px solid #000 }
	}
	figcaption {
		margin: 0 auto;
		text-align: center;
		&::after {
			counter-increment: FiNo;
			content: " " counter(FiNo) "."
		}
	}
	img {
		block-size: auto;
		filter: invert(100%);
		image-resolution: from-image;
		max-inline-size: 100%;
		print-color-adjust: exact;
		vertical-align: middle
	}
}