:root {
  --rollup-deep-teal: #1c8362;
  --rollup-deep-green: #11543e;
  --rollup-sage: #8ac9ae;
  --rollup-gold: #f3a504;
  --rollup-coral: #cf6139;
  --rollup-blue: #5488ca;
  --rollup-deep-blue: #225693;
  --rollup-sky: #cbdbef;
  --rollup-purple: #7b61c8;
  --rollup-deep-purple: #4f3a8a;
  --rollup-lavender: #ded7f4;
  --rollup-light-bg: #e6e8e7;
  --rollup-light-surface: #f2f4f3;
  --rollup-light-input: #d8dedb;
  --rollup-light-text: #323635;
  --rollup-light-muted: #6a726f;
  --rollup-dark-bg: #1a1c1b;
  --rollup-dark-surface: #2a2d2c;
  --rollup-dark-text: #f2f4f3;
  --rollup-dark-muted: #b4bbb8;
}

[data-md-color-scheme="rollup"] {
  --md-primary-fg-color: var(--rollup-deep-teal);
  --md-primary-fg-color--light: #369b77;
  --md-primary-fg-color--dark: var(--rollup-deep-green);
  --md-accent-fg-color: var(--rollup-gold);
  --md-default-bg-color: var(--rollup-light-bg);
  --md-default-fg-color: var(--rollup-light-text);
  --md-default-fg-color--light: var(--rollup-light-muted);
  --md-typeset-a-color: var(--rollup-deep-teal);
  --md-code-bg-color: var(--rollup-light-input);
}

[data-md-color-scheme="slate"] {
  --md-primary-fg-color: var(--rollup-deep-green);
  --md-primary-fg-color--light: var(--rollup-sage);
  --md-primary-fg-color--dark: #0b3729;
  --md-accent-fg-color: var(--rollup-gold);
  --md-default-bg-color: var(--rollup-dark-bg);
  --md-default-fg-color: var(--rollup-dark-text);
  --md-default-fg-color--light: var(--rollup-dark-muted);
  --md-typeset-a-color: var(--rollup-sage);
  --md-code-bg-color: #121413;
}

.md-header__title,
.md-tabs__link,
.md-nav__title {
  font-weight: 800;
}

.md-header__topic:first-child {
  font-family: "PT Serif Caption", "Roboto Flex", serif;
  letter-spacing: 0;
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
  color: var(--md-default-fg-color);
  font-weight: 850;
  letter-spacing: 0;
}

.md-typeset h1 {
  margin-bottom: 0.7rem;
}

.md-typeset .rollup-hero {
  background:
    linear-gradient(135deg, rgba(28, 131, 98, 0.16), rgba(243, 165, 4, 0.12)),
    var(--rollup-light-surface);
  border: 1px solid rgba(17, 84, 62, 0.12);
  border-radius: 14px;
  padding: 1.3rem;
}

[data-md-color-scheme="slate"] .md-typeset .rollup-hero {
  background:
    linear-gradient(135deg, rgba(138, 201, 174, 0.16), rgba(243, 165, 4, 0.10)),
    var(--rollup-dark-surface);
  border-color: rgba(138, 201, 174, 0.18);
}

.md-typeset .rollup-grid {
  display: grid;
  gap: 0.8rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.md-typeset .rollup-card {
  background: var(--rollup-light-surface);
  border: 1px solid rgba(17, 84, 62, 0.10);
  border-radius: 10px;
  padding: 0.9rem;
}

[data-md-color-scheme="slate"] .md-typeset .rollup-card {
  background: var(--rollup-dark-surface);
  border-color: rgba(138, 201, 174, 0.14);
}

.md-typeset .rollup-card strong {
  color: var(--rollup-deep-teal);
}

[data-md-color-scheme="slate"] .md-typeset .rollup-card strong {
  color: var(--rollup-sage);
}

.md-typeset .rollup-card--blue {
  background: linear-gradient(135deg, rgba(84, 136, 202, 0.14), rgba(203, 219, 239, 0.42));
  border-color: rgba(34, 86, 147, 0.18);
}

.md-typeset .rollup-card--purple {
  background: linear-gradient(135deg, rgba(123, 97, 200, 0.14), rgba(222, 215, 244, 0.42));
  border-color: rgba(79, 58, 138, 0.18);
}

.md-typeset .rollup-card--gold {
  background: linear-gradient(135deg, rgba(243, 165, 4, 0.16), rgba(242, 244, 243, 0.86));
  border-color: rgba(179, 121, 3, 0.18);
}

.md-typeset .rollup-card--coral {
  background: linear-gradient(135deg, rgba(207, 97, 57, 0.13), rgba(242, 244, 243, 0.86));
  border-color: rgba(207, 97, 57, 0.18);
}

[data-md-color-scheme="slate"] .md-typeset .rollup-card--blue {
  background: linear-gradient(135deg, rgba(84, 136, 202, 0.18), rgba(34, 86, 147, 0.18));
  border-color: rgba(84, 136, 202, 0.28);
}

[data-md-color-scheme="slate"] .md-typeset .rollup-card--purple {
  background: linear-gradient(135deg, rgba(123, 97, 200, 0.18), rgba(79, 58, 138, 0.20));
  border-color: rgba(123, 97, 200, 0.28);
}

[data-md-color-scheme="slate"] .md-typeset .rollup-card--gold {
  background: linear-gradient(135deg, rgba(243, 165, 4, 0.16), rgba(42, 45, 44, 0.90));
  border-color: rgba(243, 165, 4, 0.30);
}

[data-md-color-scheme="slate"] .md-typeset .rollup-card--coral {
  background: linear-gradient(135deg, rgba(207, 97, 57, 0.16), rgba(42, 45, 44, 0.90));
  border-color: rgba(207, 97, 57, 0.30);
}

.md-typeset .rollup-shot {
  background: var(--rollup-light-surface);
  border: 1px solid rgba(17, 84, 62, 0.12);
  border-radius: 12px;
  display: block;
  margin: 1rem auto;
  max-width: min(100%, 420px);
  padding: 0.45rem;
}

[data-md-color-scheme="slate"] .md-typeset .rollup-shot {
  background: var(--rollup-dark-surface);
  border-color: rgba(138, 201, 174, 0.18);
}

.md-typeset .rollup-callout {
  border-left: 0.25rem solid var(--rollup-gold);
  color: var(--md-default-fg-color--light);
  margin: 1rem 0;
  padding: 0.15rem 0 0.15rem 0.8rem;
}

.md-typeset .rollup-callout--blue {
  border-left-color: var(--rollup-blue);
}

.md-typeset .rollup-callout--purple {
  border-left-color: var(--rollup-purple);
}

.md-typeset .rollup-callout--coral {
  border-left-color: var(--rollup-coral);
}

.md-typeset .rollup-badge {
  background: rgba(28, 131, 98, 0.12);
  border-radius: 999px;
  color: var(--rollup-deep-green);
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0;
  padding: 0.18rem 0.55rem;
}

.md-typeset .rollup-badge--blue {
  background: rgba(84, 136, 202, 0.14);
  color: var(--rollup-deep-blue);
}

.md-typeset .rollup-badge--purple {
  background: rgba(123, 97, 200, 0.14);
  color: var(--rollup-deep-purple);
}

.md-typeset .rollup-badge--gold {
  background: rgba(243, 165, 4, 0.18);
  color: #774f00;
}

.md-typeset .rollup-badge--coral {
  background: rgba(207, 97, 57, 0.14);
  color: #943c1a;
}

[data-md-color-scheme="slate"] .md-typeset .rollup-badge {
  background: rgba(138, 201, 174, 0.16);
  color: var(--rollup-sage);
}

[data-md-color-scheme="slate"] .md-typeset .rollup-badge--blue {
  background: rgba(84, 136, 202, 0.20);
  color: #a8c5eb;
}

[data-md-color-scheme="slate"] .md-typeset .rollup-badge--purple {
  background: rgba(123, 97, 200, 0.22);
  color: #c8bdf0;
}

[data-md-color-scheme="slate"] .md-typeset .rollup-badge--gold {
  background: rgba(243, 165, 4, 0.18);
  color: #ffd77a;
}

[data-md-color-scheme="slate"] .md-typeset .rollup-badge--coral {
  background: rgba(207, 97, 57, 0.20);
  color: #f0aa92;
}

.md-typeset .md-button {
  border-radius: 8px;
  font-weight: 800;
}

.md-typeset .md-button--primary {
  background-color: var(--rollup-deep-teal);
  border-color: var(--rollup-deep-teal);
}

.md-footer {
  background-color: var(--rollup-deep-green);
}
