@layer utilities {
	.screen-reader-text,
	.fg-visually-hidden {
		position: absolute !important;
		inline-size: 1px !important;
		block-size: 1px !important;
		margin: -1px !important;
		padding: 0 !important;
		overflow: hidden !important;
		clip: rect(0 0 0 0) !important;
		clip-path: inset(50%) !important;
		border: 0 !important;
		white-space: nowrap !important;
	}

	.screen-reader-text:focus,
	.fg-visually-hidden:focus {
		clip: auto !important;
		clip-path: none !important;
		inline-size: auto !important;
		block-size: auto !important;
		margin: 0 !important;
		overflow: visible !important;
		white-space: normal !important;
	}

	.skip-link:focus {
		position: fixed !important;
		inset-block-start: var(--fg-space-3);
		inset-inline-start: var(--fg-space-3);
		z-index: var(--fg-z-skip-link);
		padding: var(--fg-space-3) var(--fg-space-4) !important;
		border-radius: var(--fg-radius-sm);
		background: var(--fg-color-text);
		color: var(--fg-color-background);
		font-size: var(--fg-font-size-sm);
		font-weight: var(--fg-font-weight-semibold);
		text-decoration: none;
	}

	@media (forced-colors: active) {
		.fg-button,
		.site-header__menu-toggle,
		.mobile-navigation__close {
			border-color: ButtonText;
		}

		.flow-line__node {
			background: Highlight;
		}
	}

	@media (prefers-reduced-motion: reduce) {
		html:focus-within {
			scroll-behavior: auto;
		}

		*,
		*::before,
		*::after {
			scroll-behavior: auto !important;
			animation-duration: 0.01ms !important;
			animation-iteration-count: 1 !important;
			transition-duration: 0.01ms !important;
		}
	}
}