element.css

*, ::after, ::before {
	box-sizing: inherit;
	max-width: 100%;
}

[data-before]::before {
	content: attr(data-before);
}

[data-after]::after {
	content: attr(data-after);
}

[hidden], template, dialog:not([open]), details:not([open]) > :not(summary),
menu[type="context"] {
	display: none;
}

dialog[open] {
	border: var(--dialog-border, solid);
	background: var(--dialog-background, var(--primary-color, white));
	color: var(--dialog-color, var(--default-color, black));
	max-height: var(--dialog-max-height, 95vh);
	max-width: var(--dialog-max-width, 95vw);
	overflow: var(--dialog-overflow, auto);
}

.no-dialog dialog {
	position: absolute;
	left: 0;
	right: 0;
	width: -moz-fit-content;
	width: -webkit-fit-content;
	width: fit-content;
	height: -moz-fit-content;
	height: -webkit-fit-content;
	height: fit-content;
	margin: auto;
	padding: 1em;
	z-index: 2147483647;
}

.no-dialog dialog[open] {
	display: block;
}

dialog + .backdrop {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 99;
}

dialog + .backdrop, dialog::backdrop {
	background: var(--backdrop-background, rgba(0, 0, 0, 0.7));
}

dialog.modal {
	position: fixed;
	top: 50%;
	transform: translate(0, -50%);
}

.no-details details > summary::before {
	content: '\25B6';
	padding-right: 0.5em;
}

.no-details details[open] > summary::before {
	content: '\25BC';
}

.no-details details > summary:only-child,
.no-details details > summary:only-child::before,
.no-details details > summary:only-child::after {
	display: none;
}

.no-details details > summary:empty::after {
	content: 'Details';
}

.no-details summary.block::before {
	content: '';
}

body {
	margin: 0;
	padding: 0;
	min-height: 100vh;
	scroll-behavior: smooth;
	box-sizing: border-box;
	line-height: var(--line-height, normal);
}

a, button:not(:disabled), [role="button"]:not([disabled]), input[type="submit"],
input[type="reset"], input[type="image"] {
	cursor: var(--pointer, pointer);
}

/* @TODO Do not apply color/background to `.btn` alone */
.btn:not([hidden]) {
	appearance: button;
	display: inline-block;
	padding: var(--button-padding, 0.3em);
	font-family: var(--button-font, inherit);
	border-radius: var(--button-border-radius, initial);
	box-sizing: border-box;

	&.round {
		border-radius: 50%;
	}

	&.rounded, &.outline.rounded {
		border-radius: var(--button-rounded-border-radius, 2em);
	}

	&:disabled, &.disabled, &._state--disabled {
		box-shadow: 0 0 0.3rem var(--shadow-color, rgba(0,0,0,0.4)) inset;
		border: var(--button-disabled-border, var(--button-border, 0.2rem inset black));
	}

	&:focus {
		outline-width: var(--focus-outline-width, thin);
		outline-style: var(--focus-outline-style, dotted);
		outline-color: var(--focus-outline-color, currentColor);
		outline-offset: var(--focus-outline-offset, 0);
	}
}

:disabled, .disabled, [disabled], ._state--disabled {
	cursor: not-allowed;
	pointer-events: none;
}

summary:focus, input:focus,
select:focus, textarea:focus, .input:focus, [tabindex]:focus, a:focus {
	outline-width: var(--focus-outline-width, thin);
	outline-style: var(--focus-outline-style, dotted);
	outline-color: var(--focus-outline-color, currentColor);
	outline-offset: var(--focus-outline-offset, 0);
}

details > summary {
	cursor: var(--pointer, pointer);
}

a, [download] {
	color: var(--link-color, currentColor);
	text-decoration: var(--link-decoration, none);
}

a:visited:hover:not([rel="bookmark"]) {
	color: var(--visited-color, var(--link-color, inherit));
}

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

figure figcaption {
	color: var(--figcaption-color, dimgray);
	text-decoration: underline;
	font-style: italic;
}

blockquote {
	color: var(--blockquote-color, #777);
	background: var(--blockquote-background, inherit);
	font-family: var(--blockquote-font, inherit);
	font-style: var(--blockquote-font-style, italic);
	padding: var(--blockquote-padding, 0px 15px);
	border-color: var(--blockquote-border-color, #DDD);
	border-width: var(--blockquote-border-width, 0 0 0 4px);
	border-style: var(--blockquote-border-style, solid);
}

blockquote cite::before {
	content: var(--cite-prefix, ' — ');
}

code:not([hidden]) {
	display: inline-block;
	padding: var(--code-padding, 0.1rem);
	font-size: var(--code-font-size, 0.9rem);
	font-family: var(--code-font, monospace);
	border-radius: var(--code-border-radius, 0.2em);
	white-space: pre;
	background-color: var(--code-background, inherit);
}

pre > code:not([hidden]) {
	display: block;
	padding: 1rem;
	border-radius: 0.3rem;
	overflow-x: auto;
}

::backdrop, .backdrop {
	background: var(--backdrop-background, rgba(0, 0, 0, 0.7));
}

.backdrop {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 2147483646;
}

[contenteditable="true"]:empty {
	min-height: 1.3rem;
	border: 1px dotted dimgray;
}

[contenteditable="true"] img {
	resize: both;
}

ol > ol {
	list-style-type: upper-alpha;
}

ol > ol > ol {
	list-style-type: upper-roman;
}

ol > ol > ol > ol {
	list-style-type: lower-alpha;
}

ol > ol > ol > ol > ol {
	list-style-type: lower-roman;
}

[inert] {
	pointer-events: none;
}

@supports not selector(:popover-open) {
	:is([popover]:not(._popover-open)) {
		display: none;
	}

	:is([popover]._popover-open) {
		position: fixed;
		z-index: 2147483647;
		margin: auto;
		inset: 0;
		border: 3px solid currentColor;
		height: fit-content;
		width: fit-content;
		padding: 0.25em;
		background-color: #ffffff;
		color: #070707;
	}

	@media (prefers-color-scheme: dark) {
		:is([popover]._popover-open) {
			background-color: #1c1b22;
			color: #fbfbfe;
		}
	}
}