:root,
[data-md-color-scheme="default"] {
  --md-primary-fg-color: #176b68;
  --md-primary-fg-color--light: #23857e;
  --md-primary-fg-color--dark: #114c4a;
  --md-accent-fg-color: #147f85;
}

[data-md-color-scheme="slate"] {
  --md-hue: 215;
  --md-primary-fg-color: #70d4c8;
  --md-primary-bg-color: #102727;
  --md-accent-fg-color: #70d4c8;
}

[data-md-color-scheme="slate"] .md-header {
  background-color: #185c5e;
  color: #ffffff;
}

.md-typeset h1,
.md-typeset h2 {
  color: var(--md-default-fg-color);
}

.md-typeset a:not(.md-content__button):not(.headerlink):not(.md-button) {
  color: var(--md-primary-fg-color);
}

.md-typeset h1 {
  font-weight: 750;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

.md-typeset h2 {
  font-weight: 650;
  letter-spacing: -0.015em;
}

.md-typeset .grid.cards > ul > li {
  border-radius: 0.6rem;
  padding: 1.1rem;
}

.md-typeset .md-button {
  border-radius: 0.35rem;
  margin: 0.25rem 0.3rem 0.25rem 0;
}

.md-typeset table:not([class]) th {
  min-width: 5rem;
}

.md-typeset img[src$="survey-workflow.svg"] {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.6rem;
  width: 100%;
}

.md-typeset a:focus-visible {
  outline: 2px solid var(--md-accent-fg-color);
  outline-offset: 3px;
}

.md-typeset .showcase-report {
  background: var(--md-default-bg-color);
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.6rem;
  display: block;
  height: 52rem;
  max-height: 85vh;
  min-height: 32rem;
  width: 100%;
}

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

.md-typeset .flow-example-preview {
  border-block: 1px solid var(--md-default-fg-color--lightest);
  margin: 1.5rem 0;
  padding: 1rem 0;
}

.md-typeset .flow-example-preview__eyebrow {
  color: var(--md-default-fg-color--light);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin: 0 0 0.7rem;
  text-transform: uppercase;
}

.md-typeset .flow-example-preview ol {
  display: grid;
  gap: 0.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.md-typeset .flow-example-preview li {
  align-items: baseline;
  display: grid;
  gap: 0.3rem 1rem;
  grid-template-columns: minmax(8rem, 0.38fr) 1fr;
  margin: 0;
  padding: 0.45rem 0;
}

.md-typeset .flow-example-preview li + li {
  border-top: 1px solid var(--md-default-fg-color--lightest);
}

.md-typeset .flow-example-preview strong {
  color: var(--md-primary-fg-color);
}

.md-typeset .flow-example-preview em {
  color: var(--md-default-fg-color--light);
  font-style: normal;
}

.md-typeset .dbml-model {
  background: var(--md-default-bg-color);
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.6rem;
  display: block;
  height: 40rem;
  max-height: 80vh;
  min-height: 26rem;
  width: 100%;
}

@media (max-width: 600px) {
  .md-typeset .flow-example-preview li {
    grid-template-columns: 1fr;
  }

  .md-typeset .showcase-report {
    min-height: 26rem;
  }

  .md-typeset .dbml-model {
    height: 30rem;
    min-height: 22rem;
  }
}