@layer reset {
	*,
	::before,
	::after {
		box-sizing: border-box;
	}

	:where(:not(dialog)) {
		margin: 0;
	}

	:where(:not(fieldset, progress, meter)) {
		border-width: 0;
		border-style: solid;
		background-origin: border-box;
		background-repeat: no-repeat;
	}

	:where(html) {
		block-size: 100%;
		font: var(--font-body-md-default);
		-webkit-font-smoothing: antialiased;
		-webkit-text-size-adjust: none;
	} /* https://kilianvalkhof.com/2022/css-html/your-css-reset-needs-text-size-adjust-probably/ */

		@media (--motionOK) {

	:where(html) {
			scroll-behavior: smooth
	}
		}

	@media (--motionOK) {
		:where(:focus-visible) {
			transition: outline-offset 145ms cubic-bezier(0.25, 0, 0.4, 1);
		}
		:where(:not(:active):focus-visible) {
			transition-duration: 0.25s;
		}
	}

	:where(:not(:active):focus-visible) {
		outline-offset: 5px;
	}

	:where(body) {
		min-block-size: 100%;
	}

	:where(h1, h2, h3, h4, h5, h6) {
		text-wrap: balance;
	}

	:where(h1) {
		font: var(--font-heading-lg);
		max-inline-size: 20ch;
	}

	:where(h2) {
		font: var(--font-heading-md);
		max-inline-size: 25ch;
	}

	:where(h3) {
		font: var(--font-heading-sm);
	}
	:where(h4) {
		font: var(--font-title-lg);
	}
	:where(h5) {
		font: var(--font-title-md);
	}
	:where(h6) {
		font: var(--font-title-sm);
	}

	:where(h3, h4, h5, h6, dt) {
		max-inline-size: 35ch;
	}

	:where(p, ul, ol, dl) {
		font: var(--font-body-md-default);
	}

	:where(a, u, ins, abbr) {
		text-underline-offset: 1px;
	}

		@supports (-moz-appearance: none) {

	:where(a, u, ins, abbr) {
			text-underline-offset: 2px
	}
		}

	:where(
		a[href],
		area,
		button,
		input:not([type='text'], [type='email'], [type='number'], [type='password'], [type=''], [type='tel'], [type='url']),
		label[for],
		select,
		summary,
		[tabindex]:not([tabindex*='-'], pre)
	) {
		cursor: pointer;
	}

	:where(a[href], area, button, input, label[for], select, summary, textarea, [tabindex]:not([tabindex*='-'])) {
		touch-action: manipulation;
		-webkit-tap-highlight-color: transparent;
	}
		:where(a):where([href]) {
			text-decoration-color: var(--stroke-default);
		}

			:where(a):where([href]):where(:visited) {
				text-decoration-color: var(--stroke-subtle);
			}

		:where(a):where(:not(:hover)) {
			text-decoration: inherit;
		}

	:where(img, svg, video, canvas, audio, iframe, embed, object) {
		display: block;
	}

	:where(img, svg, video) {
		max-inline-size: 100%;
		block-size: auto;
	}

	:where(input, button, textarea, select),
	:where(input[type='file'])::-webkit-file-upload-button {
		color: inherit;
		letter-spacing: inherit;
	}

	::-moz-placeholder {
		color: var(--fg-subtle);
		opacity: 0.75;
	}

	::placeholder {
		color: var(--fg-subtle);
		opacity: 0.75;
	}

	:where(input:not([type='range']), textarea) {
		padding-inline: var(--size-50);
		padding-block: var(--size-25);
	}

	:where(select) {
		padding-inline: var(--component-spacing-md) 0;
		padding-block: 0.75ch;
	}

	:where(textarea, select, input:not([type='button'], [type='submit'], [type='reset'])) {
		background-color: var(--color-neutral-canvas-default-bg);
		border-radius: var(--component-radii-md);
	}

	:where(textarea) {
		resize: block;
	}

	:where(input[type='checkbox'], input[type='radio']) {
		block-size: var(--size-100);
		inline-size: var(--size-100);
	}

	:where(svg:not([width])) {
		inline-size: var(--size-500);
	}

	:where(code, kbd, samp, pre) {
		font: var(--font-code-md);
	}
	:where(:not(pre) > code, kbd) {
		white-space: nowrap;
	}

	:where(pre) {
		white-space: pre;
		min-inline-size: 0;
		max-inline-size: -moz-max-content;
		max-inline-size: max-content;
		writing-mode: lr;
		direction: ltr;
	}

	:where(:not(pre) > code) {
		padding: var(--component-spacing-2xs) var(--component-spacing-xs);
		background: var(--color-neutral-canvas-default-bg);
		border-radius: var(--component-radii-md);
		font: var(--font-code-md);
		writing-mode: lr;
	}

	:where(kbd, var) {
		padding: var(--component-spacing-3xs) var(--component-spacing-2xs);
		border-width: var(--component-border-width-md);
		border-color: var(--stroke-subtle);
		border-radius: var(--component-radii-md);
	}

	:where(mark) {
		border-radius: var(--component-radii-md);
		padding-inline: var(--component-spacing-sm);
	}

	:where(ol, ul) {
		padding-inline-start: var(--component-spacing-xl);
	}
	:where(li) {
		padding-inline-start: var(--component-spacing-2xs);
	}
	:where(li, dd, figcaption) {
		max-inline-size: 45ch;
	}
	:where(p) {
		max-inline-size: 60ch;
		text-wrap: pretty;
	}
	:where(dt, summary) {
		font-weight: bold;
	}

	:where(dt:not(:first-of-type)) {
		margin-block-start: var(--size-150);
	}

	:where(small) {
		/* font-size: max(.5em, var(--font-size-0)); */
		max-inline-size: 20ch;
	}

	:where(hr) {
		/* margin-block: var(--size-fluid-5); */
		height: var(--component-border-width-md);
		background-color: var(--stroke-subtle);
	}

	:where(figure) {
		display: grid;
		grid-gap: var(--component-spacing-md);
		gap: var(--component-spacing-md);
		place-items: center;
	}

		:where(figure) > :where(figcaption) {
			font: var(--font-body-sm-default);
			text-wrap: balance;
		}

	:where(blockquote, :not(blockquote) > cite) {
		border-inline-start-width: var(--component-border-width-lg);
	}

	:where(blockquote) {
		display: grid;
		grid-gap: var(--component-spacing-md);
		gap: var(--component-spacing-md);
		padding-block: var(--component-spacing-md);
		padding-inline: var(--component-spacing-lg);
		max-inline-size: 45ch;
	}

	:where(:not(blockquote) > cite) {
		padding-inline-start: var(--component-spacing-md);
	}

	:where(summary) {
		background: var(--color-neutral-canvas-subtle-bg);
		padding: var(--component-spacing-sm) var(--component-spacing-md);
		margin: calc(var(--component-spacing-sm) * -1) calc(var(--component-spacing-md) * -1);
		border-radius: var(--component-radii-md);
	}

	:where(details) {
		padding-inline: var(--component-spacing-md);
		padding-block: var(--component-spacing-sm);
		background: var(--color-neutral-canvas-minimal-bg);
		border-radius: var(--component-radii-md);
	}

	:where(details[open] > summary) {
		margin-bottom: var(--component-spacing-sm);
		border-end-start-radius: 0;
		border-end-end-radius: 0;
	}

	:where(fieldset) {
		border-radius: var(--component-radii-md);
		border: var(--component-border-width-md) solid var(--stroke-subtle);
	}

	:where(del) {
		background: var(--color-danger-surface-default-idle-bg);
		color: var(--color-danger-surface-default-idle-fg-default);
	}

	:where(ins) {
		background: var(--color-success-surface-default-idle-bg);
		color: var(--color-success-surface-default-idle-fg-default);
	}

	:where(abbr) {
		text-decoration-color: var(--stroke-default);
	}

	:where(dialog) {
		background-color: var(--color-neutral-canvas-default-bg);
		color: var(--color-neutral-canvas-default-fg-default);
		border-radius: var(--component-radii-md);
		/* box-shadow: var(--shadow-6); */
	}

	:where(menu) {
		padding-inline-start: 0;
		display: flex;
		gap: var(--component-spacing-md);
	}

	:where(sup) {
		font-size: 0.5em;
	}

	:where(table) {
		width: -moz-fit-content;
		width: fit-content;
		border: 1px solid var(--stroke-subtle);
		background: var(--color-neutral-canvas-minimal-bg);
		border-radius: var(--component-radii-md);

		--nice-inner-radius: calc(var(--component-radii-md) - 2px);
	}

	:where(table:not(:has(tfoot)) tr:last-child td:first-child) {
		border-end-start-radius: var(--nice-inner-radius);
	}

	:where(table:not(:has(tfoot)) tr:last-child td:last-child) {
		border-end-end-radius: var(--nice-inner-radius);
	}

	:where(table thead tr:first-child th:first-child) {
		border-start-start-radius: var(--nice-inner-radius);
	}

	:where(table thead tr:first-child th:last-child) {
		border-start-end-radius: var(--nice-inner-radius);
	}

	:where(tfoot tr:last-child :is(th, td):first-of-type) {
		border-end-start-radius: var(--nice-inner-radius);
	}

	:where(tfoot tr:last-child :is(th, td):last-of-type) {
		border-end-end-radius: var(--nice-inner-radius);
	}

	:where(th) {
		background-color: var(--color-neutral-canvas-minimal-bg);
		color: var(--color-neutral-canvas-minimal-fg-default);
	}

	:where(table :is(a, button, [contenteditable]):is(:focus-visible)) {
		outline-offset: -2px;
	}

	:where(td) {
		background: var(--color-neutral-canvas-default-bg);
		max-inline-size: 45ch;
		text-wrap: pretty;
	}

	:where(td, th) {
		text-align: left;
		padding: var(--component-spacing-md);
	}

	:where(:is(td, th):not([align])) {
		text-align: center;
	}

	:where(thead) {
		border-collapse: collapse;
	}

	:where(table tr:hover td),
	:where(tbody tr:nth-child(even):hover td) {
		background-color: var(--color-neutral-canvas-default-bg-hover);
	}

		@media (prefers-color-scheme: light) {

	:where(table tr:hover td),
	:where(tbody tr:nth-child(even):hover td) {
			background-color: white
	}
		}

	:where(table > caption) {
		margin: var(--component-spacing-md);
	}

	:where(tfoot button) {
		padding-block: var(--component-spacing-xs);
		padding-inline: var(--component-spacing-md);
	}

	:where(html) {
		/* --brand: your-brand-color-here; */

		scrollbar-color: var(--scrollthumb-color) transparent;
		accent-color: var(--accent-color, var(--color-neutral-canvas-default-fg-default));
		caret-color: var(--accent-color, var(--color-neutral-canvas-default-fg-default));
		color: var(--color-neutral-canvas-default-fg-default);
		background-color: var(--color-neutral-canvas-default-bg);
	}

	:where(a[href]) {
		color: var(--accent-color, var(--color-neutral-canvas-default-fg-default));
	}

		:where(a[href]):where(:visited) {
			color: var(--color-neutral-canvas-default-fg-default);
		}

	:focus-visible {
		outline-color: var(--accent-color, var(--color-neutral-canvas-default-fg-default));
	}
}