:root {
	--pattrix-color-bg: var(--wp--preset--color--background);
	--pattrix-color-surface: var(--wp--preset--color--surface);
	--pattrix-color-surface-strong: var(--wp--preset--color--surface-strong);
	--pattrix-color-surface-deep: var(--wp--preset--color--surface-deep);
	--pattrix-color-header: var(--wp--preset--color--header);
	--pattrix-color-inverse: var(--wp--preset--color--inverse);
	--pattrix-color-inverse-mid: var(--wp--preset--color--inverse-mid);
	--pattrix-color-inverse-soft: var(--wp--preset--color--inverse-soft);
	--pattrix-color-inverse-muted: var(--wp--preset--color--inverse-muted);
	--pattrix-color-inverse-faint: var(--wp--preset--color--inverse-faint);
	--pattrix-color-inverse-border: var(--wp--preset--color--inverse-border);
	--pattrix-color-base: var(--wp--preset--color--base);
	--pattrix-color-base-2: var(--wp--preset--color--base-2);
	--pattrix-color-contrast: var(--wp--preset--color--contrast);
	--pattrix-color-contrast-2: var(--wp--preset--color--contrast-2);
	--pattrix-color-contrast-3: var(--wp--preset--color--contrast-3);
	--pattrix-color-brand: var(--wp--preset--color--brand);
	--pattrix-color-interaction: var(--wp--preset--color--interaction);
	--pattrix-color-on-inverse: var(--wp--preset--color--on-inverse);
	--pattrix-color-text: var(--wp--preset--color--text);
	--pattrix-color-text-secondary: var(--wp--preset--color--text-secondary);
	--pattrix-color-text-muted: var(--wp--preset--color--muted);
	--pattrix-color-text-subtle: var(--wp--preset--color--subtle);
	--pattrix-color-border: var(--wp--preset--color--border);
	--pattrix-color-border-strong: var(--wp--preset--color--border-strong);
	--pattrix-color-input: var(--wp--preset--color--border-strong);
	--pattrix-color-focus: var(--wp--preset--color--interaction);
	--pattrix-color-status-error: #8d2218;
	--pattrix-color-status-error-border: #d29a94;
	--pattrix-color-status-success: #225c31;
	--pattrix-color-status-success-border: #7aa887;
	--pattrix-layout-wide: 1440px;
	--pattrix-layout-home: 1296px;
	--pattrix-layout-content: 720px;
	--pattrix-layout-gutter: clamp(20px, 4vw, 72px);
	--pattrix-header-height: 76px;
	--pattrix-hero-min-height: clamp(560px, 42vw, 780px);
	--pattrix-radius-control: 2px;
	--pattrix-shadow-float: 0 12px 32px rgba(29, 29, 31, 0.08);
	--pattrix-duration-fast: 160ms;
	--pattrix-duration-base: 240ms;
	--pattrix-ease-standard: cubic-bezier(0.2, 0, 0, 1);
	--pattrix-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
	--pattrix-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
	--pattrix-duration-enter: 220ms;
	--pattrix-duration-fade: 700ms;
	--pattrix-duration-hover: 160ms;
	--pattrix-font-sans: var(--wp--preset--font-family--sans);
	--pattrix-font-display: var(--wp--preset--font-family--display);
	--pattrix-font-mono: var(--wp--preset--font-family--mono);
	--pattrix-font-size-caption: var(--wp--preset--font-size--caption);
	--pattrix-font-size-small: var(--wp--preset--font-size--small);
	--pattrix-font-size-body: var(--wp--preset--font-size--body);
	--pattrix-font-size-body-large: var(--wp--preset--font-size--body-large);
	--pattrix-font-size-h4: var(--wp--preset--font-size--h4);
	--pattrix-font-size-section-title: var(--wp--preset--font-size--section-title);
	--pattrix-font-size-h3: var(--wp--preset--font-size--h3);
	--pattrix-font-size-h2: var(--wp--preset--font-size--h2);
	--pattrix-font-size-h1: var(--wp--preset--font-size--h1);
	--pattrix-font-size-hero: var(--wp--preset--font-size--hero);
	--pattrix-font-size-label: var(--wp--preset--font-size--caption);
	--pattrix-font-size-button: var(--wp--preset--font-size--caption);
	--pattrix-space-1: var(--wp--preset--spacing--10);
	--pattrix-space-2: var(--wp--preset--spacing--20);
	--pattrix-space-3: var(--wp--preset--spacing--30);
	--pattrix-space-4: var(--wp--preset--spacing--40);
	--pattrix-space-5: var(--wp--preset--spacing--50);
	--pattrix-space-6: var(--wp--preset--spacing--60);
	--pattrix-space-7: var(--wp--preset--spacing--70);
	--pattrix-space-8: var(--wp--preset--spacing--80);
	--pattrix-space-9: var(--wp--preset--spacing--90);
	--pattrix-space-10: var(--wp--preset--spacing--100);
	--pattrix-space-11: var(--wp--preset--spacing--110);
	--pattrix-space-xs: var(--pattrix-space-2);
	--pattrix-space-sm: var(--pattrix-space-4);
	--pattrix-space-md: var(--pattrix-space-6);
	--pattrix-space-lg: var(--pattrix-space-7);
	--pattrix-space-xl: var(--pattrix-space-9);
	--pattrix-space-2xl: var(--pattrix-space-11);
}

html,
body {
	/* 两个根节点同时裁剪，避免移动浏览器将溢出像素识别为横向手势。 */
	max-width: 100%;
	overflow-x: clip;
}

body:has(.pattrix-homepage) {
	touch-action: pan-y;
}

@supports not (overflow: clip) {
	html,
	body {
		overflow-x: hidden;
	}
}

.pattrix-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--pattrix-color-inverse);
	outline-offset: 3px;
}

:where(button, input, select, textarea, summary, .wp-block-button__link) {
	min-height: 44px;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
	}
}