:root {
  --white: #ffffff;
  --paper: #f4f7fb;
  --ink: #12141a;
  --ink-soft: #3a4050;
  --blue: #0b5fff;
  --blue-soft: #e8f0ff;
  --magenta: #ff2d8a;
  --magenta-soft: #ffe6f2;
  --line: #c5d0e0;
  --grid: rgba(11, 95, 255, 0.06);
  --shadow: 0 8px 24px rgba(18, 20, 26, 0.08);
  --font-serif: "Source Serif 4", "Libre Baskerville", Georgia, serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --radius: 12px;
  --max: 1120px;
  --narrow: 42rem;
  --measure: 68ch;
}

.u-container {
  width: min(100% - 2rem, var(--max));
  margin-inline: auto;
}

.u-narrow {
  width: min(100% - 2rem, var(--narrow));
  margin-inline: auto;
}

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

.u-stack-sm { gap: var(--space-2); }
.u-stack-lg { gap: var(--space-6); }
.u-stack-xl { gap: var(--space-7); }

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

.u-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
}

.u-row > * { flex: 1 1 16rem; }

.u-between {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
}

.u-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.u-grow { flex: 1 1 auto; }
.u-shrink-0 { flex-shrink: 0; }

.u-gap-2 { gap: var(--space-2); }
.u-gap-3 { gap: var(--space-3); }
.u-gap-4 { gap: var(--space-4); }
.u-gap-5 { gap: var(--space-5); }
.u-gap-6 { gap: var(--space-6); }

.u-mt-0 { margin-top: 0; }
.u-mt-2 { margin-top: var(--space-2); }
.u-mt-4 { margin-top: var(--space-4); }
.u-mt-5 { margin-top: var(--space-5); }
.u-mt-6 { margin-top: var(--space-6); }
.u-mt-7 { margin-top: var(--space-7); }
.u-mb-0 { margin-bottom: 0; }
.u-mb-2 { margin-bottom: var(--space-2); }
.u-mb-4 { margin-bottom: var(--space-4); }
.u-mb-5 { margin-bottom: var(--space-5); }
.u-mb-6 { margin-bottom: var(--space-6); }
.u-mb-7 { margin-bottom: var(--space-7); }

.u-pad { padding: var(--space-5); }
.u-pad-lg { padding: var(--space-6); }
.u-pad-y { padding-block: var(--space-7); }
.u-pad-y-sm { padding-block: var(--space-5); }

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

.u-mono {
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}

.u-small {
  font-size: 0.9rem;
  line-height: 1.5;
}

.u-tiny {
  font-size: 0.78rem;
  line-height: 1.45;
}

.u-measure { max-width: var(--measure); }
.u-w-full { width: 100%; }
.u-text-ink { color: var(--ink); }
.u-text-soft { color: var(--ink-soft); }
.u-text-blue { color: var(--blue); }
.u-text-mag { color: var(--magenta); }
.u-bg-paper { background: var(--paper); }
.u-bg-white { background: var(--white); }
.u-bg-blue { background: var(--blue); color: var(--white); }
.u-bg-mag { background: var(--magenta); color: var(--white); }