:root {
	--ground: #e9edf1;
	--ground-subtle: #dfe5eb;
	--ground-elevated: #f8fafc;
	--surface: #f4f7f9;
	--surface-pure: #fff;
	--ink: #0f1720;
	--ink-muted: #334155;
	--ink-subtle: #475569;
	--ink-faint: #475569;
	--accent: #026aa2;
	--accent-hover: #075985;
	--accent-active: #0c4a6e;
	--accent-soft: #e0f2fe;
	--accent-contrast: #fff;
	--line: #cbd5e1;
	--line-dark: #94a3b8;
	--line-ledger: rgba(15, 23, 32, 0.12);
	--line-grid: rgba(2, 132, 199, 0.15);
	--status-ok: #0d9488;
	--status-warn: #d97706;
	--status-err: #dc2626;


	--tuhu-98c: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--tuhu-a82: "Barlow Semi Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--tuhu-c97: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;


	--text-2xs: clamp(0.6875rem, 0.65rem + 0.18vw, 0.75rem);
	--text-xs: clamp(0.75rem, 0.71rem + 0.2vw, 0.8125rem);
	--text-sm: clamp(0.8125rem, 0.77rem + 0.22vw, 0.875rem);
	--text-base: clamp(0.9375rem, 0.89rem + 0.28vw, 1.0625rem);
	--text-md: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
	--text-lg: clamp(1.25rem, 1.14rem + 0.55vw, 1.5rem);
	--text-xl: clamp(1.5rem, 1.34rem + 0.8vw, 1.875rem);
	--text-2xl: clamp(1.875rem, 1.62rem + 1.25vw, 2.375rem);
	--text-3xl: clamp(2.25rem, 1.92rem + 1.7vw, 3rem);
	--text-4xl: clamp(2.75rem, 2.25rem + 2.5vw, 4rem);
	--text-display: clamp(3.25rem, 2.6rem + 3.5vw, 5.25rem);


	--leading-none: 1;
	--leading-tight: 1.15;
	--leading-snug: 1.25;
	--leading-normal: 1.5;
	--leading-loose: 1.65;
	--leading-extra: 1.8;


	--tracking-tight: -0.035em;
	--tracking-snug: -0.015em;
	--tracking-normal: 0;
	--tracking-wide: 0.05em;
	--tracking-wider: 0.1em;
	--tracking-widest: 0.18em;


	--space-3xs: 0.25rem;
	--space-2xs: 0.5rem;
	--space-xs: 0.75rem;
	--space-sm: 1rem;
	--space-md: 1.5rem;
	--space-lg: 2rem;
	--space-xl: 3rem;
	--space-2xl: 4.5rem;
	--space-3xl: 6rem;
	--space-4xl: 8rem;


	--ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
	--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
	--dur-fast: 140ms;
	--dur-normal: 200ms;
	--dur-slow: 360ms;
	--dur-marquee: 36s;


	--shell-max-width: 1560px;
	--nav-rail-width: 290px;
	--content-max: 1240px;
	--radius-none: 0px;
	--focus-ring: 2px solid var(--accent);
	--focus-offset: 3px;
}


*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	border-radius: 0;
}


html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
	background-color: var(--ground);
}


body {
	background-color: var(--ground);
	color: var(--ink);
	font-family: var(--tuhu-a82);
	font-size: var(--text-base);
	line-height: var(--leading-loose);
	min-height: 100vh;
	overflow-x: hidden;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}


input,
button,
textarea,
select {
	font: inherit;
	color: inherit;
}


img,
svg,
video {
	display: block;
	max-width: 100%;
	height: auto;
}


a {
	color: inherit;
	text-decoration: none;
}


main a:not([class]), .prose a {
	color: #0369a1;
}


button {
	background: none;
	border: none;
	cursor: pointer;
	text-align: left;
}


table {
	border-collapse: collapse;
	width: 100%;
}


ul,
ol {
	list-style: none;
}


h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--tuhu-98c);
	font-weight: 700;
	color: var(--ink);
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-snug);
	text-wrap: balance;
}


h1 {
	font-size: var(--text-4xl);
	letter-spacing: var(--tracking-tight);
}


h2 {
	font-size: var(--text-3xl);
	letter-spacing: var(--tracking-tight);
}


h3 {
	font-size: var(--text-2xl);
}


h4 {
	font-size: var(--text-xl);
}


h5 {
	font-size: var(--text-lg);
}


h6 {
	font-size: var(--text-md);
}


p {
	color: var(--ink);
	font-size: var(--text-base);

	line-height: var(--leading-loose);
	max-width: 72ch;
}


p.lead {
	font-size: var(--text-md);
	line-height: var(--leading-snug);
	color: var(--ink-muted);
}


strong,
b {
	font-weight: 600;
	color: var(--ink);
}


small {
	font-size: var(--text-xs);
	line-height: var(--leading-normal);
}


hr {
	border: 0;
	border-top: 1px solid var(--line);
	margin: var(--space-xl) 0;
}


code,
kbd,
samp,
pre {
	font-family: var(--tuhu-c97);
	font-size: var(--text-sm);
}


.skip-link {
	position: absolute;
	top: -100px;
	left: var(--space-md);
	background-color: var(--ink);
	color: var(--surface-pure);
	padding: var(--space-xs) var(--space-md);
	font-family: var(--tuhu-c97);
	font-size: var(--text-sm);
	font-weight: 500;
	letter-spacing: var(--tracking-wide);
	z-index: 99999;
	border: 1px solid var(--accent);
	transition: top var(--dur-fast) var(--ease-out-quad);
}


.skip-link:focus {
	top: var(--space-md);
	outline: var(--focus-ring);
	outline-offset: var(--focus-offset);
}


.icon {
	width: 1.25rem;
	height: 1.25rem;
	fill: currentColor;
	flex-shrink: 0;
	display: inline-block;
	vertical-align: middle;

}


.icon-sm {
	width: 1rem;
	height: 1rem;
}


.icon-lg {
	width: 1.75rem;
	height: 1.75rem;
}


.font-mono {
	font-family: var(--tuhu-c97);
}


.font-display {
	font-family: var(--tuhu-98c);
}


.font-body {
	font-family: var(--tuhu-a82);
}


.coord-tag {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2xs);
	font-family: var(--tuhu-c97);
	font-size: var(--text-xs);
	font-weight: 600;
	color: #0f1720;
	letter-spacing: var(--tracking-wider);
	text-transform: uppercase;
	background-color: #fff;
	border: 1px solid var(--line);

	padding: 0.25rem 0.625rem;
	min-height: 28px;
}


.coord-tag-accent {
	background-color: var(--accent-soft);
	color: var(--accent-hover);
	border-color: rgba(2, 132, 199, 0.4);
}


.coord-indicator {
	width: 6px;
	height: 6px;
	background-color: var(--accent);
	flex-shrink: 0;
}


.ledger-rule {
	border: 0;
	border-top: 1px solid var(--line);
	width: 100%;
}


.ledger-border-t {
	border-top: 1px solid var(--line);
}


.ledger-border-b {
	border-bottom: 1px solid var(--line);
}


.ledger-border-l {
	border-left: 1px solid var(--line);
}


.ledger-border-r {
	border-right: 1px solid var(--line);
}


.ledger-border-x {
	border-left: 1px solid var(--line);
	border-right: 1px solid var(--line);
}


.ledger-border-y {
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}


.ledger-box {
	border: 1px solid var(--line);
	background-color: var(--surface);
}


.ledger-grid-bg {
	background-image:
		linear-gradient(to right, var(--line-ledger) 1px, transparent 1px),
		linear-gradient(to bottom, var(--line-ledger) 1px, transparent 1px);
	background-size: 32px 32px;
}


.site-frame {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	width: 100%;
	max-width: var(--shell-max-width);
	margin: 0 auto;
	border-left: 1px solid var(--line);
	border-right: 1px solid var(--line);
	background-color: var(--ground);
}


.layout-with-rail {
	display: flex;
	flex-direction: column;
	width: 100%;
	min-height: 100vh;
}


@media (min-width: 1080px) {
	.layout-with-rail {
		display: grid;
		grid-template-columns: minmax(0, 1fr) var(--nav-rail-width);
		align-items: start;
	}
}


.main-stage {
	min-width: 0;
	width: 100%;
	display: flex;
	flex-direction: column;
}


.split-2-1 {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-xl);
}


@media (min-width: 840px) {
	.split-2-1 {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	}
}


.split-1-2 {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-xl);
}


@media (min-width: 840px) {
	.split-1-2 {
		grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	}
}


.split-1-1 {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-lg);
}


@media (min-width: 768px) {
	.split-1-1 {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}


.content-measure {
	max-width: 76ch;
}


.content-pad {
	padding-left: clamp(1rem, 0.6rem + 2vw, 2.5rem);
	padding-right: clamp(1rem, 0.6rem + 2vw, 2.5rem);
}


.section-pad-y {
	padding-top: clamp(2.5rem, 1.8rem + 3.5vw, 5.5rem);
	padding-bottom: clamp(2.5rem, 1.8rem + 3.5vw, 5.5rem);
}


.prose {
	color: var(--ink);
	font-size: var(--text-base);
	line-height: var(--leading-loose);
}


.prose > * + * {
	margin-top: var(--space-md);
}


.prose h2 {
	margin-top: var(--space-2xl);
	margin-bottom: var(--space-sm);
}


.prose h3 {
	margin-top: var(--space-xl);
	margin-bottom: var(--space-xs);
}


.prose ul {
	list-style: disc;
	padding-left: 1.5rem;
}


.prose ol {
	list-style: decimal;
	padding-left: 1.5rem;
}


.prose li + li {
	margin-top: var(--space-2xs);
}


.prose blockquote {
	border-left: 3px solid var(--accent);
	padding-left: var(--space-md);
	color: var(--ink-muted);
	font-style: normal;
}


.prose a {
	color: #0369a1;
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color var(--dur-fast) var(--ease-out-quad);
}


.prose a:hover {
	color: var(--accent-hover);
}


.prose a:focus-visible {
	outline: var(--focus-ring);
	outline-offset: var(--focus-offset);
}


.table-responsive {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--line);
	background-color: var(--surface-pure);
}


.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;
}


@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;
	}
}