:root {
	--ground:#EEF4F7;

	--surface:#FFF;
	--surface-subtle:#F5F8FA;
	--surface-lift:#FFF;
	--ink:#13222B;
	--ink-muted:#48606E;
	--ink-faint:#48606E;
	--accent:#095E64;
	--accent-hover:#095E64;
	--accent-active:#06454A;
	--accent-light:#E0EFF2;
	--accent-ring:rgba(13, 122, 130, 0.35);
	--ledger-line:#D7E7ED;
	--ledger-line-strong:#BDD4DD;
	--border-subtle:#DDE8ED;
	--border-focus:#0D7A82;
	--danger:#9B2C2C;
	--danger-light:#FDE8E8;
	--success:#1E6643;
	--success-light:#E6F4EA;

	--sidebar-w:300px;
	--max-content:1160px;
	--radius-xs:2px;
	--radius-sm:4px;
	--radius-md:6px;

	--masu-391:'Cinzel', serif;
	--masu-299:'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--masu-1a9:'Space Mono', SFMono-Regular, Menlo, Monaco, Consolas, monospace;

	--ease-standard:cubic-bezier(0.2, 0, 0, 1);
	--ease-out:cubic-bezier(0, 0, 0.2, 1);
	--ease-in:cubic-bezier(0.4, 0, 1, 1);
	--dur-fast:140ms;
	--dur-medium:220ms;
	--dur-slow:380ms;

	--type-display:clamp(2rem, 1.45rem + 2.75vw, 3.5rem);
	--type-h1:clamp(1.75rem, 1.35rem + 2vw, 2.75rem);
	--type-h2:clamp(1.4rem, 1.15rem + 1.25vw, 2rem);
	--type-h3:clamp(1.15rem, 1.05rem + 0.5vw, 1.45rem);
	--type-lead:clamp(1.05rem, 0.98rem + 0.35vw, 1.25rem);
	--type-body:1rem;
	--type-small:0.875rem;
	--type-caption:0.775rem;

	--space-3xs:0.25rem;
	--space-2xs:0.5rem;
	--space-xs:0.75rem;
	--space-sm:1rem;
	--space-md:1.5rem;
	--space-lg:2.25rem;
	--space-xl:3.5rem;
	--space-2xl:5rem;
	--space-3xl:7.5rem;
}

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

html {
	background-color:var(--ground);
	color:var(--ink);
	font-family:var(--masu-299);
	font-size:16px;
	line-height:1.55;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	text-rendering:optimizeLegibility;
	scroll-behavior:smooth;
	scroll-padding-top:72px;
	height:100%;
}

body {
	min-height:100%;
	background-color:var(--ground);
	color:var(--ink);
	overflow-x:hidden;
	position:relative;
}

img,
picture,
svg {
	display:block;

	max-width:100%;
	height:auto;
}

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

a {
	color:inherit;
	text-decoration-skip-ink:auto;
}

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

ul,
ol {
	list-style:none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family:var(--masu-391);
	font-weight:600;
	line-height:1.2;
	letter-spacing:0.02em;
	color:var(--ink);
	text-wrap:balance;
}

h1 {
	font-size:var(--type-h1);
	letter-spacing:0.03em;
}

h2 {
	font-size:var(--type-h2);
}

h3 {
	font-size:var(--type-h3);
}

p {
	max-width:72ch;
	text-wrap:pretty;
}

p + p {
	margin-top:1rem;
}

small {
	font-size:var(--type-small);
}

code,
pre,
kbd,
samp {
	font-family:var(--masu-1a9);
	font-size:0.9em;
}

address {
	font-style:normal;
}

.skip-link {
	position:absolute;
	top:-100px;
	left:1rem;
	z-index:1000;
	background:var(--ink);
	color:var(--surface);
	padding:0.75rem 1.25rem;
	min-height:44px;
	font-family:var(--masu-1a9);
	font-size:var(--type-small);
	border:1px solid var(--accent);
	border-radius:var(--radius-xs);
	text-decoration:none;
	transition:top var(--dur-fast) var(--ease-out);
}

.skip-link:focus-visible {
	top:1rem;
	outline:2px solid var(--accent);
	outline-offset:2px;
}

.shell-layout {
	display:flex;
	min-height:100vh;
	width:100%;
	position:relative;
}

.shell-sidebar {
	width:var(--sidebar-w);
	flex-shrink:0;
	position:fixed;
	top:0;
	bottom:0;
	left:0;
	z-index:90;
	background-color:var(--surface);
	border-right:1px solid var(--ledger-line);
	display:flex;
	flex-direction:column;
	overflow-y:auto;
	overflow-x:hidden;
}

.shell-content {
	flex:1 1 auto;
	min-width:0;
	margin-left:var(--sidebar-w);
	background-color:var(--ground);
	display:flex;
	flex-direction:column;
	position:relative;
}

.main-column {

	flex:1 0 auto;
	min-width:0;
	width:100%;
	max-width:var(--max-content);
	padding:var(--space-xl) var(--space-lg);
	margin:0 auto;
}

.icon {
	width:1.15em;
	height:1.15em;
	fill:currentColor;
	display:inline-block;
	vertical-align:middle;
	flex-shrink:0;
}

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

.ledger-rule {
	border:0;
	height:1px;
	background-color:var(--ledger-line);
	margin:var(--space-md) 0;
	width:100%;
}

.mono-meta {
	font-family:var(--masu-1a9);
	font-size:var(--type-caption);
	letter-spacing:0.06em;
	text-transform:uppercase;
	color:var(--ink-muted);
}

.price-tag {
	font-family:var(--masu-1a9);
	font-size:var(--type-small);
	font-weight:700;
	color:var(--ink);
	letter-spacing:-0.01em;
}

@media (max-width: 1023px) {
	.shell-layout {
		flex-direction:column;
	}

	.shell-sidebar {
		position:fixed;
		top:0;
		left:0;
		width:320px;
		max-width:86vw;
		height:100vh;
		transform:translateX(-100%);
		transition:transform var(--dur-medium) var(--ease-standard);
		box-shadow:10px 0 30px rgba(19, 34, 43, 0.15);
		visibility:hidden;
		pointer-events:none;
	}

	.shell-sidebar.is-open {
		transform:translateX(0);
		visibility:visible;
		pointer-events:auto;
	}

	.shell-content {
		margin-left:0;
		width:100%;
		padding-top:68px;
	}

	.mobile-bar {
		display:flex !important;
	}

	.main-column {
		padding:var(--space-lg) var(--space-sm);
	}
}

@media (min-width: 1024px) {
	.mobile-bar {
		display:none !important;
	}
}

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

	[data-depth] {
		transform:none !important;
	}
}

.prose {
	color:var(--ink);
	font-size:var(--type-body);
	line-height:1.65;
}

.prose h1,
.prose h2,
.prose h3,
.prose h4 {
	margin-top:var(--space-lg);
	margin-bottom:var(--space-xs);
	color:var(--ink);
}

.prose p {
	margin-bottom:var(--space-sm);
}

.prose strong {
	font-weight:600;
	color:var(--ink);
}

.prose em {
	font-style:italic;
}

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

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

.prose a:focus-visible {
	outline:2px solid var(--accent);
	outline-offset:2px;
	border-radius:var(--radius-xs);
}

.prose ul,
.prose ol {
	margin:var(--space-sm) 0 var(--space-md) var(--space-md);
}

.prose ul {
	list-style-type:square;
}

.prose ol {
	list-style-type:decimal;
}

.prose li {
	margin-bottom:var(--space-2xs);
	padding-left:var(--space-3xs);
}

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

.prose hr {
	border:0;
	border-top:1px solid var(--ledger-line);
	margin:var(--space-lg) 0;
}

.layout-stack {
	display:flex;
	flex-direction:column;
	gap:var(--space-md);
}

.layout-cluster {
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:var(--space-xs);
}

.layout-split {
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:var(--space-sm);
}

.layout-center {
	max-width:var(--max-content);
	margin-left:auto;
	margin-right:auto;
	padding-left:var(--space-md);
	padding-right:var(--space-md);
}

.depth-bg,
.depth-fg {
	will-change:transform;
}