:root {
  --repi-ink: #242039;
  --repi-muted: #665f7f;
  --repi-cream: #fbfaf4;
  --repi-lilac: #dfd8ff;
  --repi-lavender: #7c5cff;
  --repi-violet: #5d3ee6;
  --repi-mint: #d8f7dd;
  --repi-mint-strong: #77d891;
  --repi-yellow: #fff07a;
  --repi-peach: #ffb365;
  --repi-rose: #ff8fa8;
  --repi-sky: #d9f2ff;
  --wa-color-brand-95: #f2f0ff;
  --wa-color-brand-90: #e5e0ff;
  --wa-color-brand-80: #c9beff;
  --wa-color-brand-70: #aa99ff;
  --wa-color-brand-60: #8c73ff;
  --wa-color-brand-50: #7057f2;
  --wa-color-brand-40: #5d43d8;
  --wa-color-brand-30: #4630a8;
  --wa-color-brand-20: #30226f;
  --wa-color-brand-10: #1f1746;
  --wa-color-brand-05: #120d2b;
  --wa-color-brand: var(--repi-lavender);
  --wa-color-surface-default: var(--repi-cream);
  --wa-color-surface-lowered: #f1efff;
  --wa-color-surface-raised: #ffffff;
  --wa-color-surface-border: rgba(93, 62, 230, 0.16);
  --wa-color-text-normal: var(--repi-ink);
  --wa-color-text-quiet: var(--repi-muted);
  --wa-color-text-link: var(--repi-violet);
  --wa-color-shadow: rgba(54, 42, 113, 0.14);
}

body {
  background:
    radial-gradient(circle at 18% 8%, rgba(223, 216, 255, 0.9), transparent 24rem),
    radial-gradient(circle at 88% 14%, rgba(255, 240, 122, 0.55), transparent 20rem),
    linear-gradient(180deg, #fbfaf4 0%, #f7f5ff 48%, #fbfaf4 100%);
  overflow-x: hidden;
}

html {
  overflow-x: hidden;
}

body > div > header {
  border-color: rgba(93, 62, 230, 0.12);
  background: rgba(251, 250, 244, 0.84);
  box-shadow: 0 16px 50px rgba(54, 42, 113, 0.08);
}

body > div > header a,
body > div > header summary {
  border-radius: 999px;
}

body > div > header a[href="/"],
body > div > header a[href="/"] span {
  color: var(--repi-ink);
}

body > div > header .bg-\[linear-gradient\(135deg\,var\(--wa-color-brand-60\)\,var\(--wa-color-brand-40\)\)\] {
  background: linear-gradient(135deg, var(--repi-yellow), var(--repi-rose));
  color: var(--repi-violet);
}

body > div > footer {
  border-color: rgba(36, 32, 57, 0.08);
  background:
    radial-gradient(circle at 78% 12%, rgba(255, 240, 122, 0.24), transparent 20rem),
    linear-gradient(135deg, #2a2344, #1f1935);
}

.repi-shell {
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: 1rem;
  box-sizing: border-box;
}

.repi-shell,
.repi-shell > *,
.repi-card,
.repi-button {
  min-width: 0;
}

.repi-eyebrow {
  color: var(--repi-violet);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.repi-button {
  display: inline-flex;
  min-height: 2.85rem;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 999px;
  background: var(--repi-violet);
  padding: 0.75rem 1.25rem;
  color: #fff;
  font-size: 0.92rem;
  font-weight: 800;
  box-shadow: 0 16px 36px rgba(93, 62, 230, 0.24);
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.repi-button:hover {
  transform: translateY(-1px);
  background: #4e35c7;
  box-shadow: 0 18px 42px rgba(93, 62, 230, 0.32);
}

.repi-button-light {
  background: #fff;
  color: var(--repi-violet);
  box-shadow: 0 12px 30px rgba(54, 42, 113, 0.12);
}

.repi-button-light:hover {
  background: #fff8c7;
  color: var(--repi-ink);
}

.repi-card {
  border: 1px solid rgba(93, 62, 230, 0.14);
  border-radius: 1.6rem;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 20px 60px rgba(54, 42, 113, 0.1);
}

.repi-band {
  position: relative;
  overflow: hidden;
}

.repi-band::before {
  position: absolute;
  inset: -4rem -2rem auto;
  height: 10rem;
  background: radial-gradient(circle at 20% 50%, rgba(255, 240, 122, 0.42), transparent 18rem), radial-gradient(circle at 72% 20%, rgba(216, 247, 221, 0.6), transparent 20rem);
  content: "";
  pointer-events: none;
}

.repi-wave-top {
  clip-path: ellipse(78% 100% at 50% 100%);
}

.repi-wave-bottom {
  clip-path: ellipse(84% 100% at 50% 0%);
}

.content-prose {
  color: var(--repi-ink);
}

.content-prose a {
  color: var(--repi-violet);
  font-weight: 700;
}

.content-prose h2,
.content-prose h3 {
  color: var(--repi-ink);
}

.content-prose table {
  overflow: hidden;
  border-radius: 1rem;
}

@media (min-width: 640px) {
  .repi-shell {
    padding-inline: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .repi-shell {
    padding-inline: 2rem;
  }
}

@media (max-width: 767px) {
  body > div > header .md\:hidden > a {
    max-width: 9.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .repi-shell {
    max-width: calc(100vw - 2rem);
    padding-inline: 0;
  }

  .repi-button {
    width: 100%;
  }

  .repi-button-light {
    width: 100%;
  }

  h1 {
    overflow-wrap: anywhere;
  }
}