:root {
  --logo-color: #8c5bd4;
  --logo-color-dark: #7748bd;
  --account-color-asset: #007eb8;
  --account-color-expense: #d90032;
  --account-color-liability: #b87900;
  --account-color-equity: #a000bd;
  --account-color-income: #668c00;
  --md-text-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --md-code-font: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

[data-md-color-scheme="slate"] {
  --logo-color: #b388ff;
  --account-color-asset: #40c4ff;
  --account-color-expense: #ff5274;
  --account-color-liability: #ffc44d;
  --account-color-equity: #e45cff;
  --account-color-income: #c6ef59;
}

:root > * {
  --md-code-hl-keyword-color: #8959a8;
  --md-code-hl-number-color: #6c71c4;
  --md-code-hl-function-color: #4271ae;
  --md-code-hl-string-color: #c82829;
  --md-code-hl-name-color: #3e999f;
  --md-code-hl-operator-color: #f5871f;
  --md-code-hl-comment-color: #6d6d6d;
  --md-code-hl-variable-color: #587000;
}

.md-header__topic:first-child {
  color: var(--logo-color);
}

.hero {
  margin: 2rem 0 2.5rem;
  text-align: center;
}

.hero img {
  height: 88px;
  margin: -3rem auto 0.75rem;
}

.hero h1 {
  margin: -0.5rem 0 0;
  color: var(--logo-color);
  font-size: clamp(2.4rem, 8vw, 3.2rem);
  font-weight: 700;
}

.hero h1 a {
  display: none !important;
}

.hero .subtitle {
  margin: 0 auto;
  color: var(--md-default-fg-color--light);
  font-size: 1rem;
}

.md-content img[src*="images/showcase/"] {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.5rem;
}

.split-codeview {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(9rem, 1fr);
  overflow-x: auto;
}

.split-codeview .sheet code {
  border-radius: 0.2rem 0 0 0.2rem;
}

.split-codeview .sheet-result code {
  border-left: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0 0.2rem 0.2rem 0;
  font-family: var(--md-text-font-family);
  text-align: right;
}

.split-codeview .sheet-result-1 code span:nth-child(1),
.split-codeview .sheet-result-1 code span:nth-child(10),
.split-codeview .sheet-result-2 code span:nth-child(1),
.split-codeview .sheet-result-3 code span:nth-child(1),
.split-codeview .sheet-result-3 code span:nth-child(6),
.split-codeview .sheet-result-3 code span:nth-child(9),
.split-codeview .sheet-result-3 code span:nth-child(20),
.split-codeview .sheet-result-3 code span:nth-child(23) {
  display: block;
  overflow: hidden;
  font-weight: 700;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.assets-color { color: var(--account-color-asset); }
.expenses-color { color: var(--account-color-expense); }
.liabilities-color { color: var(--account-color-liability); }
.equity-color { color: var(--account-color-equity); }
.income-color { color: var(--account-color-income); }

.language-ledger pre code {
  max-height: 500px;
}

@media screen and (max-width: 44.9844em) {
  .hero {
    margin-top: 1rem;
  }

  .hero img {
    margin-top: -1.5rem;
  }

  .split-codeview {
    grid-template-columns: minmax(18rem, 3fr) minmax(9rem, 1fr);
  }
}