:root {
	--mkb-color-canvas: #f8f8f6;
	--mkb-color-surface: #ffffff;
	--mkb-color-surface-soft: #f2f4f1;
	--mkb-color-ink: #111111;
	--mkb-color-muted: #666666;
	--mkb-color-subtle: #8a918d;
	--mkb-color-primary: #4f7c67;
	--mkb-color-primary-strong: #315f4a;
	--mkb-color-primary-soft: #e8f2ec;
	--mkb-color-border: #e3e8e4;
	--mkb-color-border-strong: #cfd9d2;
	--mkb-color-danger: #b34848;
	--mkb-color-warning: #9a6b1f;
	--mkb-color-info: #496c82;

	--mkb-font-sans: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--mkb-font-data: "SFMono-Regular", Consolas, "Liberation Mono", monospace;

	--mkb-text-xs: 0.75rem;
	--mkb-text-sm: 0.875rem;
	--mkb-text-base: 1.0625rem;
	--mkb-text-lg: 1.25rem;
	--mkb-text-xl: 1.5rem;
	--mkb-text-2xl: clamp(1.75rem, 3vw, 2.5rem);
	--mkb-text-hero: clamp(2.5rem, 5.4vw, 4rem);

	--mkb-space-1: 0.25rem;
	--mkb-space-2: 0.5rem;
	--mkb-space-3: 0.75rem;
	--mkb-space-4: 1rem;
	--mkb-space-5: 1.25rem;
	--mkb-space-6: 1.5rem;
	--mkb-space-8: 2rem;
	--mkb-space-10: 2.5rem;
	--mkb-space-12: 3rem;
	--mkb-space-16: 4rem;
	--mkb-space-20: 5rem;
	--mkb-space-24: 6rem;

	--mkb-radius-sm: 12px;
	--mkb-radius-md: 18px;
	--mkb-radius-lg: 24px;
	--mkb-radius-xl: 32px;
	--mkb-radius-pill: 999px;

	--mkb-shadow-xs: 0 1px 2px rgba(17, 17, 17, 0.04);
	--mkb-shadow-sm: 0 10px 30px rgba(31, 55, 43, 0.06);
	--mkb-shadow-md: 0 22px 60px rgba(31, 55, 43, 0.09);
	--mkb-focus-ring: 0 0 0 4px rgba(79, 124, 103, 0.2);

	--mkb-container: 1200px;
	--mkb-reading: 760px;
	--mkb-header-height: 76px;
	--mkb-transition: 180ms ease;
}

html {
	scroll-behavior: smooth;
}

body {
	background: var(--mkb-color-canvas);
	color: var(--mkb-color-ink);
	font-family: var(--mkb-font-sans);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

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

img,
svg {
	max-width: 100%;
}

.mkb-ds-container {
	width: min(var(--mkb-container), calc(100% - 40px));
	margin-inline: auto;
}

.mkb-ds-section {
	padding-block: var(--mkb-space-24);
}

.mkb-ds-surface {
	background: var(--mkb-color-surface);
}

.mkb-ds-visually-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

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

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