.markdown-page .markdown-shell {
  padding: clamp(1.6rem, 2.2vw, 2.2rem);
}

.markdown-page .markdown-intro {
  margin-top: 0.75rem;
  max-width: min(100%, 70ch);
}

.markdown-prose {
  --md-flow-space: clamp(0.84rem, 0.76rem + 0.3vw, 1.08rem);
  --md-heading-space: clamp(1.5rem, 1.26rem + 0.72vw, 2rem);
  --md-list-indent: 1.35rem;
  --md-border-tone: color-mix(in srgb, var(--border) 74%, var(--page-accent) 26%);
  --md-callout-bg: color-mix(in srgb, var(--surface) 86%, var(--page-accent-soft) 14%);
  --md-callout-title: color-mix(in srgb, var(--text) 86%, var(--page-accent) 14%);
  max-width: min(100%, var(--measure-readable, 66ch));
  font-size: var(--type-body);
  line-height: var(--line-height-body);
  color: var(--text-muted);
}

.markdown-prose > * {
  margin: 0;
}

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

.markdown-prose > :last-child {
  margin-bottom: 0;
}

.markdown-prose > :first-child {
  margin-top: 0;
}

.markdown-prose h1,
.markdown-prose h2,
.markdown-prose h3,
.markdown-prose h4,
.markdown-prose h5,
.markdown-prose h6 {
  margin-top: var(--md-heading-space);
  margin-bottom: calc(var(--md-flow-space) * 0.5);
  color: var(--text);
  line-height: var(--line-height-heading);
  letter-spacing: calc(var(--tracking-tight) * 0.45);
}

.markdown-prose h2 {
  font-size: clamp(1.42rem, 1.2rem + 0.88vw, 1.92rem);
}

.markdown-prose h3 {
  font-size: clamp(1.24rem, 1.1rem + 0.56vw, 1.5rem);
}

.markdown-prose h4,
.markdown-prose h5,
.markdown-prose h6 {
  font-size: clamp(1.05rem, 0.98rem + 0.32vw, 1.18rem);
}

.markdown-prose p {
  margin: 0;
  line-height: var(--line-height-body);
  color: var(--text-muted);
  max-width: min(100%, var(--measure-readable, 66ch));
}

.markdown-prose p + p {
  margin-top: calc(var(--md-flow-space) * 0.72);
}

.markdown-prose a {
  color: color-mix(in srgb, var(--page-accent) 62%, var(--text) 38%);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 0.08em;
  text-decoration-color: color-mix(in srgb, var(--page-accent) 58%, transparent);
}

.markdown-prose a:hover {
  color: color-mix(in srgb, var(--page-accent) 74%, var(--text) 26%);
}

.markdown-prose ul,
.markdown-prose ol {
  margin: calc(var(--md-flow-space) * 0.38) 0 calc(var(--md-flow-space) * 0.92);
  padding-left: var(--md-list-indent);
}

.markdown-prose li {
  margin: 0.42rem 0;
  padding-left: 0.2rem;
  color: var(--text-muted);
}

.markdown-prose li::marker {
  color: color-mix(in srgb, var(--page-accent) 56%, var(--text) 44%);
}

.markdown-prose li > p {
  margin: 0;
  max-width: 100%;
}

.markdown-prose ul ul,
.markdown-prose ul ol,
.markdown-prose ol ul,
.markdown-prose ol ol {
  margin: 0.46rem 0 0.34rem;
}

.markdown-prose blockquote {
  margin: calc(var(--md-flow-space) * 1.25) 0;
  padding: 0.9rem 1rem 0.92rem 1.08rem;
  border-inline-start: 3px solid var(--md-border-tone);
  border-radius: 0.72rem;
  background: linear-gradient(
    118deg,
    color-mix(in srgb, var(--surface) 84%, var(--page-accent-soft) 16%),
    color-mix(in srgb, var(--surface) 92%, transparent)
  );
}

.markdown-prose blockquote p {
  margin: 0;
  color: color-mix(in srgb, var(--text) 82%, var(--text-muted) 18%);
  max-width: 100%;
}

.markdown-prose blockquote p + p {
  margin-top: 0.58rem;
}

.markdown-prose .markdown-callout {
  margin: calc(var(--md-flow-space) * 1.25) 0;
  padding: 0.92rem 1rem;
  border: 1px solid var(--md-border-tone);
  border-radius: 0.78rem;
  background: var(--md-callout-bg);
}

.markdown-prose .markdown-callout-title {
  margin: 0 0 0.46rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--type-body-sm);
  font-weight: 700;
  color: var(--md-callout-title);
}

.markdown-prose .markdown-callout p {
  margin: 0;
  max-width: 100%;
  color: color-mix(in srgb, var(--text) 84%, var(--text-muted) 16%);
}

.markdown-prose .markdown-callout p + p {
  margin-top: 0.56rem;
}

.markdown-prose .markdown-callout--tip {
  --md-border-tone: color-mix(in srgb, var(--color-success) 54%, var(--border) 46%);
  --md-callout-bg: color-mix(in srgb, var(--surface) 84%, var(--color-success) 16%);
  --md-callout-title: color-mix(in srgb, var(--color-success) 74%, var(--text) 26%);
}

.markdown-prose .markdown-callout--important {
  --md-border-tone: color-mix(in srgb, var(--page-accent) 62%, var(--border) 38%);
  --md-callout-bg: color-mix(in srgb, var(--surface) 82%, var(--page-accent) 18%);
  --md-callout-title: color-mix(in srgb, var(--page-accent) 78%, var(--text) 22%);
}

.markdown-prose .markdown-callout--warning,
.markdown-prose .markdown-callout--caution {
  --md-border-tone: color-mix(in srgb, var(--color-warning) 54%, var(--border) 46%);
  --md-callout-bg: color-mix(in srgb, var(--surface) 84%, var(--color-warning) 16%);
  --md-callout-title: color-mix(in srgb, var(--color-warning) 74%, var(--text) 26%);
}

.markdown-prose code {
  padding: 0.1rem 0.35rem;
  border-radius: 0.3rem;
  background: rgba(255, 255, 255, 0.08);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.92em;
}

.markdown-page-grid {
  margin-top: 1.5rem;
}

.markdown-page-grid .card {
  height: 100%;
}

.markdown-page-grid h3 {
  margin-top: 0.2rem;
}

@media (max-width: 860px) {
  .markdown-page .markdown-shell {
    padding: 1.25rem;
  }

  .markdown-prose {
    max-width: 100%;
  }

  .markdown-prose ul,
  .markdown-prose ol {
    padding-left: 1.18rem;
  }
}