@layer reset {
	/* 1. Standardize box model and clear space */
	*,
	*::before,
	*::after {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}

	/* 2. Seamless height & layout shifts */
	html,
	body {
		block-size: 100%;
		scrollbar-gutter: stable;
	}

	/* 3. Smooth keyword animations (auto height transitions) */
	@media (prefers-reduced-motion: no-preference) {
		html {
			interpolate-size: allow-keywords;
		}
	}

	/* 4. Typography & rendering upgrades */
	body {
		line-height: 1.5;
		-webkit-font-smoothing: antialiased;
	}

	/* 5. Smart line wrapping to avoid layout orphans */
	p,
	figcaption {
		text-wrap: pretty;
		max-width: 70ch; /* Optimal line length */
	}

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

	/* 6. Remove text decorations from Lists */
	ol,
	ul {
		list-style-type: none;
	}

	/* 7. Media element fixes (eliminates unexpected gaps) */
	img,
	picture,
	video,
	canvas,
	svg {
		display: block;
		max-width: 100%;
		height: auto;
	}

	/* 8. Core form element normalization */
	input,
	button,
	textarea,
	select {
		font: inherit;
		color: inherit;
	}

	/* 9. Auto-expanding form fields (2026 standard) */
	textarea {
		field-sizing: content;
	}

	/* 10. Maintain native accessibility for interactive elements */
	@media (prefers-reduced-motion: reduce) {
		*,
		*::before,
		*::after {
			animation-duration: 0.01ms !important;
			animation-iteration-count: 1 !important;
			transition-duration: 0.01ms !important;
			scroll-behavior: auto !important;
		}
	}
}