:root {
	--bg-ground:#1b1022;
	--bg-surface:#25172e;
	--bg-elevated:#321f3d;
	--bg-hover:#3c2649;
	--bg-active:#472d56;

	--ink-primary:#f7f2fa;
	--ink-secondary:#c8bed2;
	--ink-muted:#8e7d9e;
	--ink-inverse:#1b1022;

	--rule-line:rgba(142, 125, 158, 0.22);
	--rule-line-strong:rgba(142, 125, 158, 0.45);
	--rule-line-accent:rgba(255, 62, 136, 0.35);

	--accent:#b81358;
	--accent-hover:#d41a68;
	--accent-active:#9a0c47;
	--accent-tint:rgba(255, 62, 136, 0.12);

	--status-green:#54f28d;
	--status-green-tint:rgba(84, 242, 141, 0.12);

	--error:#ff5a5a;
	--error-tint:rgba(255, 90, 90, 0.15);

	--focus-ring:#ff3e88;
	--focus-ring-offset:#1b1022;

	--hoco-06d:"Cinzel", Georgia, serif;
	--hoco-31d:"Crimson Pro", Garamond, "Times New Roman", serif;
	--hoco-a73:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

	--step--1:clamp(0.8125rem, 0.8rem + 0.1vw, 0.9rem);
	--hoco-415:clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
	--hoco-d17:clamp(1.2rem, 1.12rem + 0.45vw, 1.44rem);
	--hoco-ea1:clamp(1.44rem, 1.3rem + 0.8vw, 1.88rem);
	--hoco-0fd:clamp(1.75rem, 1.55rem + 1.2vw, 2.44rem);
	--hoco-a5f:clamp(2.1rem, 1.85rem + 1.8vw, 3.15rem);
	--hoco-37a:clamp(2.5rem, 2.15rem + 2.6vw, 4.1rem);

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

	--gutter:clamp(1.25rem, 0.9rem + 1.8vw, 3.5rem);
	--shell-max:1280px;

	--radius-xs:2px;
	--radius-sm:3px;
	--radius-md:4px;

	--ease-spring:cubic-bezier(0.18, 0.89, 0.32, 1.28);
	--ease-settle:cubic-bezier(0.16, 1, 0.3, 1);
	--ease-press:cubic-bezier(0.4, 0, 0.2, 1);

	--duration-fast:140ms;
	--duration-normal:220ms;
	--duration-spring:360ms;

	--shadow-subtle:0 4px 20px rgba(10, 5, 14, 0.4);
	--shadow-elevated:0 12px 36px rgba(10, 5, 14, 0.65);
	--shadow-accent:0 0 24px rgba(255, 62, 136, 0.25);
}

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

html {
	background-color:var(--bg-ground);
	color:var(--ink-primary);
	font-family:var(--hoco-31d);
	font-size:100%;
	line-height:1.65;
	text-rendering:optimizeLegibility;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	scroll-behavior:smooth;
	scroll-padding-top:6.5rem;
}

body {
	min-height:100vh;
	background-color:var(--bg-ground);
	color:var(--ink-primary);
	display:flex;
	flex-direction:column;
	position:relative;
	overflow-x:hidden;
	background-image: 
		linear-gradient(to bottom, rgba(27, 16, 34, 0.85), rgba(27, 16, 34, 0.98)),
		repeating-linear-gradient(0deg, transparent, transparent 31px, var(--rule-line) 31px, var(--rule-line) 32px);
	background-size:100% 100%, 100% 32px;
	background-attachment:fixed;
}

body::before {
	content:"";
	position:fixed;
	inset:0;
	pointer-events:none;
	background-image:radial-gradient(circle at 50% 10%, rgba(184, 19, 88, 0.04) 0%, transparent 60%);
	z-index:0;
}

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

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

h1, h2, h3, h4, h5, h6 {
	font-family:var(--hoco-06d);
	font-weight:700;
	color:var(--ink-primary);
	line-height:1.15;
	letter-spacing:0.02em;
	text-wrap:balance;
	overflow-wrap:break-word;
	word-break:break-word;
}

h1 {
	font-size:var(--hoco-37a);
	letter-spacing:0.03em;
}

h2 {
	font-size:var(--hoco-a5f);
	letter-spacing:0.025em;
}

h3 {
	font-size:var(--hoco-0fd);
	letter-spacing:0.02em;
}

h4 {
	font-size:var(--hoco-ea1);
	letter-spacing:0.015em;
}

h5 {
	font-size:var(--hoco-d17);
	letter-spacing:0.01em;
}

h6 {
	font-size:var(--hoco-415);
	font-weight:600;
	letter-spacing:0.04em;
	text-transform:uppercase;
}

p {
	font-size:var(--hoco-415);
	color:var(--ink-secondary);

	margin-bottom:1.25rem;
	max-width:68ch;
	overflow-wrap:break-word;
}

p.lead {
	font-size:var(--hoco-d17);
	line-height:1.5;
	color:var(--ink-primary);
}

p:last-child { margin-bottom:0; }

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

em, i { font-style:italic; }

small {
	font-size:var(--step--1);
	color:var(--ink-muted);
}

ul, ol {
	padding-left:1.5rem;
	margin-bottom:1.25rem;
	color:var(--ink-secondary);
}

li { margin-bottom:0.4rem; }

li::marker { color:var(--accent); }

blockquote {
	border-left:2px solid var(--accent);
	padding:0.75rem 0 0.75rem 1.5rem;
	margin:1.75rem 0;
	font-style:italic;
	font-size:var(--hoco-d17);
	color:var(--ink-primary);
	background:linear-gradient(90deg, var(--accent-tint) 0%, transparent 100%);
}

code, kbd, samp, pre {
	font-family:var(--hoco-a73);
	font-size:0.9em;
	letter-spacing:-0.01em;
}

code {
	padding:0.15em 0.4em;
	background-color:var(--bg-surface);
	border:1px solid var(--rule-line);
	border-radius:var(--radius-xs);
	color:var(--ink-primary);
}

pre {
	padding:1.25rem;
	background-color:var(--bg-surface);
	border:1px solid var(--rule-line);
	border-radius:var(--radius-sm);
	overflow-x:auto;
	margin-bottom:1.5rem;
}

pre code {
	padding:0;
	border:none;
	background:transparent;
}

hr {
	border:none;
	border-top:1px solid var(--rule-line);
	margin:3rem 0;
}

hr.ledger-rule {
	border-top:1px solid var(--rule-line);
	border-bottom:1px solid var(--rule-line);
	height:4px;
	background:transparent;
	margin:2rem 0;
}

a {
	color:var(--accent);
	text-decoration:underline;
	text-decoration-thickness:1px;
	text-underline-offset:3px;
	transition:color var(--duration-fast) ease, text-decoration-color var(--duration-fast) ease;
}

a:hover {
	color:var(--accent-hover);
	text-decoration-color:var(--accent-hover);
}

a:active { color:var(--accent-active); }

a:focus-visible {
	outline:2px solid var(--focus-ring);
	outline-offset:3px;
}

.skip-link {
	position:absolute;
	top:-100px;
	left:1rem;
	background:var(--accent);
	color:#ffffff;
	padding:0.75rem 1.5rem;
	z-index:9999;
	font-family:var(--hoco-a73);
	font-size:0.875rem;
	font-weight:500;
	text-decoration:none;
	border-radius:var(--radius-sm);
	box-shadow:var(--shadow-elevated);
	transition:top var(--duration-fast) ease;
}

.skip-link:focus {
	top:1rem;
	outline:2px solid #ffffff;
	outline-offset:2px;
}

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

.shell-container {
	width:100%;
	max-width:var(--shell-max);
	margin-inline:auto;
	padding-inline:var(--gutter);
	min-width:0;
}

.shell-main {
	flex:1 0 auto;
	position:relative;
	z-index:1;
}

.icon {
	width:1.25rem;
	height:1.25rem;
	fill:none;
	stroke:currentColor;
	stroke-width:2;
	stroke-linecap:round;
	stroke-linejoin:round;
	flex-shrink:0;
	display:inline-block;
	vertical-align:middle;
}

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

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

.tabular-num {
	font-family:var(--hoco-a73);
	font-variant-numeric:tabular-nums;
}

.ledger-frame {
	border:1px solid var(--rule-line);
	background:var(--bg-surface);
	position:relative;

}

.ledger-frame::after {
	content:"";
	position:absolute;
	inset:0;
	border:1px solid var(--rule-line);
	margin:3px;
	pointer-events:none;

}

.grid {
	display:grid;
	gap:var(--space-xl);
}

.grid > * { min-width:0; }

.flex {
	display:flex;
	gap:var(--space-md);
}

.flex > * { min-width:0; }

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