@import url("https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700;800&family=Source+Sans+3:wght@400;600;700&display=swap");

:root {
  --clawlter-bg: #f3f5f7;
  --clawlter-surface: #fbfcfd;
  --clawlter-surface-strong: #ffffff;
  --clawlter-ink: #23313d;
  --clawlter-muted: #556775;
  --clawlter-line: rgba(63, 81, 98, 0.18);
  --clawlter-line-strong: rgba(44, 61, 76, 0.28);
  --clawlter-panel: linear-gradient(145deg, #151c23 0%, #1e2833 100%);
  --clawlter-accent: #6f8fa6;
  --clawlter-accent-strong: #4d6a81;
  --clawlter-accent-soft: rgba(111, 143, 166, 0.14);
  --clawlter-bronze: #c88a53;
  --clawlter-shadow: 0 18px 36px rgba(19, 28, 37, 0.08);
  --clawlter-max-width: 76rem;
}

[data-md-color-scheme="default"] {
  --md-default-bg-color: var(--clawlter-bg);
  --md-default-fg-color: rgba(35, 49, 61, 0.94);
  --md-default-fg-color--light: rgba(72, 91, 108, 0.84);
  --md-default-fg-color--lighter: rgba(96, 113, 127, 0.56);
  --md-default-fg-color--lightest: rgba(96, 113, 127, 0.28);
  --md-primary-fg-color: #161c23;
  --md-primary-fg-color--light: #22303d;
  --md-primary-fg-color--dark: #0f1418;
  --md-primary-bg-color: #eef4f8;
  --md-primary-bg-color--light: rgba(238, 244, 248, 0.72);
  --md-accent-fg-color: var(--clawlter-accent-strong);
  --md-accent-fg-color--transparent: rgba(77, 106, 129, 0.12);
  --md-typeset-a-color: var(--clawlter-accent-strong);
  --md-code-fg-color: #dfe7ef;
  --md-code-bg-color: #182028;
  --md-code-hl-color: rgba(111, 143, 166, 0.32);
}

html,
body {
  background: var(--clawlter-bg);
}

body,
.md-typeset {
  font-family: "Source Sans 3", sans-serif;
}

.md-header {
  background: rgba(20, 27, 34, 0.94);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05);
}

.md-header,
.md-header a,
.md-header__button,
.md-header__title,
.md-header__source {
  color: rgba(238, 244, 248, 0.92);
}

.md-header__source:hover,
.md-header a:hover {
  color: #ffffff;
}

.md-header__title,
.md-nav__title,
.md-tabs__link,
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
  font-family: "Sora", sans-serif;
}

.md-header__button.md-logo img,
.md-nav__button.md-logo img {
  height: 1.8rem;
  width: 1.8rem;
}

.md-grid {
  max-width: var(--clawlter-max-width);
}

.md-main__inner {
  margin-top: 1.1rem;
}

.md-sidebar--primary,
.md-sidebar--secondary {
  padding-top: 0.4rem;
}

.md-sidebar__scrollwrap {
  border-radius: 1rem;
}

.md-nav--primary .md-nav__title,
.md-nav--secondary .md-nav__title {
  color: var(--clawlter-muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.md-nav__item .md-nav__link--active,
.md-nav__item .md-nav__link:hover,
.md-typeset a:hover {
  color: var(--clawlter-accent-strong);
}

.md-nav__item .md-nav__link--active {
  font-weight: 700;
}

.md-typeset {
  color: var(--clawlter-ink);
  line-height: 1.65;
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
  color: #1f2a34;
  letter-spacing: -0.03em;
  scroll-margin-top: 4.5rem;
}

.md-typeset h1 {
  font-size: clamp(2.3rem, 4vw, 3.8rem);
  line-height: 0.96;
  margin-bottom: 1rem;
}

.md-typeset h2 {
  font-size: clamp(1.45rem, 2vw, 2rem);
  margin-top: 3.2rem;
}

.md-typeset h3 {
  font-size: 1.1rem;
}

.md-typeset p,
.md-typeset li {
  max-width: 72ch;
}

.md-typeset .admonition,
.md-typeset details {
  border: 1px solid var(--clawlter-line);
  border-radius: 1rem;
  box-shadow: none;
}

.md-typeset code {
  border: 1px solid rgba(77, 106, 129, 0.18);
  border-radius: 0.45rem;
  color: var(--clawlter-accent-strong);
  padding: 0.12rem 0.38rem;
}

.md-typeset pre code {
  border: none;
  border-radius: 0;
  color: var(--md-code-fg-color);
  padding: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.md-typeset table:not([class]) {
  display: table;
}

.md-typeset .md-button {
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 0.78rem 1.2rem;
}

.md-typeset .md-button--primary {
  background: var(--clawlter-accent-strong);
  border-color: var(--clawlter-accent-strong);
  box-shadow: 0 8px 20px rgba(77, 106, 129, 0.22);
}

.md-typeset .md-button:not(.md-button--primary) {
  border-color: rgba(77, 106, 129, 0.26);
  color: var(--clawlter-accent-strong);
}

.md-search__form {
  border-radius: 999px;
}

.md-top {
  background: rgba(20, 27, 34, 0.9);
}

.md-footer {
  background: #161c23;
}

.md-footer,
.md-footer a,
.md-footer-meta,
.md-footer-meta a {
  color: rgba(238, 244, 248, 0.86);
}

.md-sidebar--secondary .md-nav {
  border-left: 1px solid rgba(77, 106, 129, 0.16);
  padding-left: 0.85rem;
}

.md-footer a:hover,
.md-footer-meta a:hover {
  color: #ffffff;
}