@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400&display=swap');

/* --- DESIGN TOKENS --- */
:root,
[data-md-color-scheme="default"] {
  /* Color Palette - Light Theme */
  --color-primary: #171717;
  --color-on-primary: #ffffff;
  --color-ink: #171717;
  --color-body: #4d4d4d;
  --color-mute: #888888;
  --color-hairline: #ebebeb;
  --color-hairline-strong: #a1a1a1;
  --color-canvas: #ffffff;
  --color-canvas-soft: #fafafa;
  --color-canvas-soft-2: #f5f5f5;
  --color-link: #0070f3;
  --color-link-deep: #0761d1;
  --color-success: #0070f3;
  --color-error: #ee0000;
  --color-error-soft: #f7d4d6;
  --color-warning: #f5a623;
  --color-warning-soft: #ffefcf;
  --color-violet: #7928ca;
  --color-cyan: #50e3c2;
  --color-highlight-pink: #ff0080;

  /* MkDocs Material Theme Variables Integration */
  --md-primary-fg-color: var(--color-canvas) !important;
  --md-primary-fg-color--dark: var(--color-canvas-soft) !important;
  --md-primary-bg-color: var(--color-canvas) !important;
  --md-primary-bg-color--light: var(--color-canvas-soft) !important;
  
  --md-accent-fg-color: var(--color-link) !important;
  --md-accent-fg-color--transparent: rgba(0, 112, 243, 0.08) !important;
  
  --md-default-fg-color: var(--color-ink) !important;
  --md-default-fg-color--light: var(--color-body) !important;
  --md-default-fg-color--lighter: var(--color-mute) !important;
  --md-default-fg-color--lightest: var(--color-hairline) !important;
  
  --md-default-bg-color: var(--color-canvas-soft) !important;
  --md-default-bg-color--light: var(--color-canvas) !important;
  --md-default-bg-color--lighter: var(--color-canvas-soft-2) !important;
  --md-default-bg-color--lightest: var(--color-hairline) !important;
  
  --md-code-fg-color: var(--color-ink) !important;
  --md-code-bg-color: var(--color-canvas-soft-2) !important;
  
  --md-typeset-color: var(--color-ink) !important;
  --md-typeset-a-color: var(--color-link) !important;

  /* Font Families */
  --md-text-font: "Inter", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif !important;
  --md-code-font: "JetBrains Mono", SFMono-Regular, Consolas, Menlo, monospace !important;

  /* Grid Layout Width */
  --md-grid-width: 100% !important;

  /* Elevation Shadows */
  --shadow-l1: 0 0 0 1px var(--color-hairline);
  --shadow-l2: 0px 1px 1px rgba(0, 0, 0, 0.02), 0px 2px 2px rgba(0, 0, 0, 0.04), 0 0 0 1px var(--color-hairline);
  --shadow-l3: 0px 2px 2px rgba(0, 0, 0, 0.04), 0px 8px 8px -8px rgba(0, 0, 0, 0.04), 0 0 0 1px var(--color-hairline);
  --shadow-l4: 0px 2px 2px rgba(0, 0, 0, 0.04), 0px 8px 16px -4px rgba(0, 0, 0, 0.04), 0 0 0 1px var(--color-hairline);
  --shadow-l5: 0px 1px 1px rgba(0, 0, 0, 0.02), 0px 8px 16px -4px rgba(0, 0, 0, 0.04), 0px 24px 32px -8px rgba(0, 0, 0, 0.06), 0 0 0 1px var(--color-hairline);
}

[data-md-color-scheme="slate"] {
  /* Color Palette - Dark Theme */
  --color-primary: #000000;
  --color-on-primary: #ffffff;
  --color-ink: #ffffff;
  --color-body: #a1a1a1;
  --color-mute: #888888;
  --color-hairline: #333333;
  --color-hairline-strong: #4d4d4d;
  --color-canvas: #0a0a0a;
  --color-canvas-soft: #000000;
  --color-canvas-soft-2: #121212;
  --color-link: #50e3c2;
  --color-link-deep: #29bc9b;
  --color-success: #50e3c2;
  --color-error: #ee0000;
  --color-error-soft: #2e080a;
  --color-warning: #f5a623;
  --color-warning-soft: #2d1c00;
  --color-violet: #7928ca;
  --color-cyan: #50e3c2;
  --color-highlight-pink: #ff0080;

  /* MkDocs Material Theme Variables Integration */
  --md-primary-fg-color: var(--color-canvas) !important;
  --md-primary-fg-color--dark: var(--color-canvas-soft) !important;
  --md-primary-bg-color: var(--color-canvas) !important;
  --md-primary-bg-color--light: var(--color-canvas-soft) !important;
  
  --md-accent-fg-color: var(--color-link) !important;
  --md-accent-fg-color--transparent: rgba(80, 227, 194, 0.08) !important;
  
  --md-default-fg-color: var(--color-ink) !important;
  --md-default-fg-color--light: var(--color-body) !important;
  --md-default-fg-color--lighter: var(--color-mute) !important;
  --md-default-fg-color--lightest: var(--color-hairline) !important;
  
  --md-default-bg-color: var(--color-canvas-soft) !important;
  --md-default-bg-color--light: var(--color-canvas) !important;
  --md-default-bg-color--lighter: var(--color-canvas-soft-2) !important;
  --md-default-bg-color--lightest: var(--color-hairline) !important;
  
  --md-code-fg-color: var(--color-ink) !important;
  --md-code-bg-color: var(--color-canvas-soft-2) !important;
  
  --md-typeset-color: var(--color-ink) !important;
  --md-typeset-a-color: var(--color-link) !important;

  /* Elevation Shadows */
  --shadow-l1: 0 0 0 1px var(--color-hairline);
  --shadow-l2: 0px 1px 1px rgba(0, 0, 0, 0.1), 0px 2px 2px rgba(0, 0, 0, 0.2), 0 0 0 1px var(--color-hairline);
  --shadow-l3: 0px 2px 2px rgba(0, 0, 0, 0.2), 0px 8px 8px -8px rgba(0, 0, 0, 0.2), 0 0 0 1px var(--color-hairline);
  --shadow-l4: 0px 2px 2px rgba(0, 0, 0, 0.2), 0px 8px 16px -4px rgba(0, 0, 0, 0.2), 0 0 0 1px var(--color-hairline);
  --shadow-l5: 0px 1px 1px rgba(0, 0, 0, 0.1), 0px 8px 16px -4px rgba(0, 0, 0, 0.2), 0px 24px 32px -8px rgba(0, 0, 0, 0.3), 0 0 0 1px var(--color-hairline);
}

/* --- GENERAL & FONTS --- */
.md-grid {
  max-width: 100% !important;
}
body, input {
  font-family: var(--md-text-font);
  -webkit-font-smoothing: antialiased;
}
code, kbd, pre, samp {
  font-family: var(--md-code-font) !important;
}

/* Logo styling reverted */

/* --- HEADER RESKIN (NAV BAR) --- */
.md-header {
  background-color: var(--md-primary-bg-color) !important;
  color: var(--md-default-fg-color) !important;
  border-bottom: 1px solid var(--md-default-fg-color--lightest) !important;
  box-shadow: none !important;
  height: 64px;
}
.md-header__inner {
  height: 64px;
  align-items: center;
  padding: 0 24px !important;
}
.md-header__button {
  color: var(--md-default-fg-color) !important;
  margin: 0 !important;
}
.md-header__button:hover {
  background-color: var(--md-default-bg-color--lighter) !important;
}
.md-header__ellipsis {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.md-header__topic {
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -0.3px !important;
  color: var(--md-default-fg-color) !important;
}
/* Header topic separator reverted */
.md-header__topic .md-ellipsis {
  font-weight: 600 !important;
}

/* --- TOP TABS BAR --- */
.md-tabs {
  display: none !important;
}
.md-tabs__list {
  padding: 0 12px !important;
}
.md-tabs__link {
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--md-default-fg-color--light) !important;
  padding: 16px 12px !important;
  margin-top: 0 !important;
  border-bottom: 2px solid transparent !important;
  transition: color 0.2s, border-color 0.2s !important;
  opacity: 1 !important;
}
.md-tabs__link:hover {
  color: var(--md-default-fg-color) !important;
}
.md-tabs__item--active .md-tabs__link {
  color: var(--md-default-fg-color) !important;
  font-weight: 500 !important;
  border-bottom-color: var(--md-default-fg-color) !important;
}

/* --- SEARCH BAR WITH ⌘K BADGE --- */
.md-search__form {
  position: relative !important;
  background-color: var(--md-default-bg-color--lighter) !important;
  border: 1px solid var(--md-default-fg-color--lightest) !important;
  border-radius: 6px !important;
  height: 36px !important;
  transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
}
.md-search__form:hover {
  border-color: var(--color-hairline-strong) !important;
}
.md-search__form:focus-within {
  background-color: var(--md-default-bg-color--light) !important;
  border-color: var(--md-default-fg-color) !important;
  box-shadow: 0 0 0 2px var(--md-accent-fg-color--transparent) !important;
}
.md-search__input {
  height: 36px !important;
  font-size: 14px !important;
  color: var(--md-default-fg-color) !important;
}
.md-search__icon {
  top: 6px !important;
  color: var(--md-default-fg-color--light) !important;
}

/* --- SIDEBAR & NAV (LEFT COLUMN) --- */
.md-sidebar__scrollwrap {
  scrollbar-width: none;
}
.md-sidebar__scrollwrap::-webkit-scrollbar {
  display: none;
}
.md-main__inner {
  margin-top: 12px !important;
}
.md-sidebar {
  padding-top: 12px !important;
}
.md-sidebar__inner {
  padding-top: 0 !important;
}
.md-nav__link {
  font-size: 14px !important;
  color: var(--md-default-fg-color--light) !important;
  padding: 6px 12px !important;
  border-radius: 6px !important;
  transition: background-color 0.15s, color 0.15s !important;
}
.md-nav__link:hover {
  background-color: var(--md-default-bg-color--lighter) !important;
  color: var(--md-default-fg-color) !important;
}
.md-nav__link--active {
  color: var(--md-default-fg-color) !important;
  font-weight: 500 !important;
  background-color: transparent !important;
  border-left: none !important;
  padding-left: 12px !important;
}


.md-nav__title {
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--md-default-fg-color--lighter) !important;
  padding: 12px 12px 4px !important;
}

/* Section titles for nested sections inside menu */
.md-nav__item--nested > .md-nav__link {
  font-family: var(--md-text-font) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  color: var(--md-default-fg-color--lighter) !important;
  margin-top: 24px !important;
  margin-bottom: 4px !important;
  cursor: default !important;
  background-color: transparent !important;
}
.md-nav__item--nested > .md-nav__link:hover {
  background-color: transparent !important;
  color: var(--md-default-fg-color--lighter) !important;
}
.md-nav__item--nested > .md-nav__link .md-nav__icon {
  display: none !important; /* Hide arrows for a clean Vercel layout */
}

/* --- TABLE OF CONTENTS (RIGHT COLUMN - VERTICAL TIMELINE TRACK) --- */
.md-sidebar--secondary .md-nav__title {
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  color: var(--md-default-fg-color--lighter) !important;
  margin-bottom: 12px !important;
  padding-left: 12px !important;
}
.md-sidebar--secondary .md-nav__link {
  font-size: 13px !important;
  color: var(--md-default-fg-color--light) !important;
  border-left: 1px solid var(--md-default-fg-color--lightest) !important;
  border-radius: 0 !important;
  padding: 6px 0 6px 12px !important;
  margin-left: 12px !important;
  transition: color 0.15s, border-left-color 0.15s !important;
}
.md-sidebar--secondary .md-nav__link:hover {
  color: var(--md-default-fg-color) !important;
  background-color: transparent !important;
  border-left-color: var(--md-default-fg-color--light) !important;
}
.md-sidebar--secondary .md-nav__link--active {
  color: var(--md-default-fg-color) !important;
  font-weight: 500 !important;
  border-left-color: var(--md-default-fg-color) !important;
  background-color: transparent !important;
}

/* --- TYPOGRAPHY & CONTENT --- */
.md-content__inner {
  max-width: 52rem !important;
  margin: 0 !important;
  padding-top: 12px !important;
  padding-bottom: 96px !important;
}
@media screen and (min-width: 76.25em) {
  .md-content {
    padding: 0 48px !important;
  }
}
.md-typeset {
  font-size: 16px !important;
  line-height: 1.6 !important;
}
.md-typeset h1 {
  font-size: 38px !important;
  font-weight: 600 !important;
  line-height: 1.15 !important;
  letter-spacing: -1.6px !important;
  margin-top: 0 !important;
  margin-bottom: 24px !important;
  color: var(--md-default-fg-color) !important;
}
.md-typeset h2 {
  font-size: 26px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.9px !important;
  margin-top: 48px !important;
  margin-bottom: 16px !important;
  color: var(--md-default-fg-color) !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
}
.md-typeset h3 {
  font-size: 20px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.5px !important;
  margin-top: 32px !important;
  margin-bottom: 12px !important;
  color: var(--md-default-fg-color) !important;
}
.md-typeset h4 {
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  margin-top: 24px !important;
  margin-bottom: 8px !important;
  color: var(--md-default-fg-color) !important;
}
.md-typeset p {
  color: var(--md-default-fg-color--light) !important;
  margin-bottom: 20px !important;
}
.md-typeset strong {
  color: var(--md-default-fg-color) !important;
  font-weight: 500 !important;
}

/* --- LINKS --- */
.md-typeset a {
  color: var(--md-typeset-a-color) !important;
  text-decoration: none !important;
  font-weight: 450;
  border-bottom: 1px dashed transparent;
  transition: color 0.15s, border-bottom-color 0.15s;
}
.md-typeset a:hover {
  color: var(--color-link-deep) !important;
  border-bottom-color: var(--color-link-deep);
}
.md-typeset a.md-button {
  border-bottom: none !important;
}

/* --- BUTTONS --- */
.md-typeset .md-button {
  font-size: 14px !important;
  font-weight: 500 !important;
  border-radius: 100px !important; /* Rounded pill shape */
  padding: 8px 20px !important;
  border: 1px solid var(--color-primary) !important;
  background-color: var(--color-primary) !important;
  color: var(--color-on-primary) !important;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s, transform 0.1s !important;
}
.md-typeset .md-button:hover {
  background-color: transparent !important;
  color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  opacity: 1 !important;
}
.md-typeset .md-button--primary {
  background-color: var(--color-primary) !important;
  color: var(--color-on-primary) !important;
}
.md-typeset .md-button:not(.md-button--primary) {
  background-color: var(--color-canvas) !important;
  color: var(--color-ink) !important;
  border-color: var(--color-hairline-strong) !important;
}
.md-typeset .md-button:not(.md-button--primary):hover {
  background-color: var(--color-canvas-soft-2) !important;
  border-color: var(--color-primary) !important;
}

/* --- CODE BLOCKS & INLINE CODE --- */
.md-typeset pre,
.md-typeset .highlight {
  background-color: var(--md-code-bg-color) !important;
  border: 1px solid var(--md-default-fg-color--lightest) !important;
  border-radius: 8px !important;
  margin: 24px 0 !important;
  box-shadow: none !important;
}
.md-typeset pre code {
  color: var(--md-code-fg-color) !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 16px !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
}
.md-typeset code {
  font-family: var(--md-code-font) !important;
  background-color: var(--md-code-bg-color) !important;
  color: var(--md-code-fg-color) !important;
  font-size: 13px !important;
  border-radius: 4px !important;
  padding: 2px 6px !important;
  word-break: break-word;
}
.md-typeset pre code::-webkit-scrollbar {
  height: 6px;
  width: 6px;
}
.md-typeset pre code::-webkit-scrollbar-thumb {
  background-color: var(--md-default-fg-color--lightest);
  border-radius: 4px;
}

/* --- ADMONITIONS & CALLOUTS --- */
.md-typeset .admonition,
.md-typeset admonition {
  border: 1px solid var(--md-default-fg-color--lightest) !important;
  border-left: 4px solid var(--md-default-fg-color--lighter) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  background-color: var(--md-default-bg-color--light) !important;
  margin: 24px 0 !important;
  padding: 16px 20px !important;
}
.md-typeset .admonition-title,
.md-typeset admonition-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 8px 0 !important;
  padding: 0 !important;
  color: var(--md-default-fg-color) !important;
}
.md-typeset .admonition-title::before,
.md-typeset admonition-title::before {
  display: none !important; /* Hide default icons to keep it minimal */
}
.md-typeset .admonition.note,
.md-typeset .admonition.info {
  border-left-color: var(--color-link) !important;
}
.md-typeset .admonition.warning,
.md-typeset .admonition.attention {
  border-left-color: var(--color-warning) !important;
}
.md-typeset .admonition.danger,
.md-typeset .admonition.error {
  border-left-color: var(--color-error) !important;
}

/* --- TABLES --- */
.md-typeset table:not([class]) {
  border-collapse: collapse;
  width: 100%;
  margin: 24px 0 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  border: 1px solid var(--md-default-fg-color--lightest) !important;
  box-shadow: var(--shadow-l2) !important;
}
.md-typeset th {
  background-color: var(--md-default-bg-color--lighter) !important;
  font-family: var(--md-code-font) !important;
  font-size: 12px !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 500 !important;
  color: var(--md-default-fg-color--light) !important;
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--md-default-fg-color--lightest) !important;
}
.md-typeset td {
  padding: 12px 16px !important;
  font-size: 14px !important;
  color: var(--md-default-fg-color--light) !important;
  border-bottom: 1px solid var(--md-default-fg-color--lightest) !important;
}
.md-typeset tr:last-child td {
  border-bottom: none !important;
}

/* --- TABS (PYMDOWNX.TABBED) --- */
.tabbed-set {
  margin: 24px 0 !important;
}
.tabbed-labels {
  border-bottom: 1px solid var(--md-default-fg-color--lightest) !important;
  box-shadow: none !important;
  padding: 0 !important;
  gap: 16px !important;
}
.tabbed-labels label {
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--md-default-fg-color--light) !important;
  padding: 12px 4px !important;
  border-bottom: 2px solid transparent !important;
  transition: color 0.2s, border-bottom-color 0.2s !important;
}
.tabbed-labels label:hover {
  color: var(--md-default-fg-color) !important;
}
.tabbed-set > input:checked + label {
  color: var(--md-default-fg-color) !important;
  font-weight: 500 !important;
  border-bottom-color: var(--md-default-fg-color) !important;
}

/* --- FOOTER RESKIN --- */
.md-footer {
  background-color: var(--color-canvas) !important;
  color: var(--md-default-fg-color--light) !important;
  border-top: 1px solid var(--md-default-fg-color--lightest) !important;
  margin-top: 120px;
}
.md-footer-meta {
  background-color: var(--color-canvas) !important;
  border-top: 1px solid var(--md-default-fg-color--lightest) !important;
  padding: 24px 0;
}
.md-footer-meta__inner {
  align-items: center;
  padding: 0 24px !important;
}
.md-footer-copyright__highlight {
  color: var(--md-default-fg-color--lighter) !important;
  font-size: 13px;
}

/* --- PREMIUM HOMEPAGE DECORATIONS & EFFECTS --- */
.homepage-hero {
  position: relative;
  overflow: hidden;
  padding: 96px 0 64px 0;
  text-align: center;
  margin-bottom: 48px;
}

/* Atmospheric Mesh Gradient Backdrop */
.homepage-hero::before {
  content: "";
  position: absolute;
  top: -20%;
  left: 10%;
  right: 10%;
  height: 120%;
  z-index: -1;
  background-image: radial-gradient(at 27% 37%, hsla(188, 98%, 75%, 0.12) 0px, transparent 50%),
                    radial-gradient(at 97% 21%, hsla(256, 98%, 72%, 0.12) 0px, transparent 50%),
                    radial-gradient(at 52% 99%, hsla(338, 98%, 79%, 0.12) 0px, transparent 50%),
                    radial-gradient(at 10% 29%, hsla(174, 98%, 75%, 0.12) 0px, transparent 50%),
                    radial-gradient(at 97% 96%, hsla(38, 98%, 74%, 0.12) 0px, transparent 50%),
                    radial-gradient(at 33% 50%, hsla(222, 98%, 60%, 0.12) 0px, transparent 50%),
                    radial-gradient(at 79% 53%, hsla(343, 98%, 65%, 0.12) 0px, transparent 50%);
  filter: blur(80px);
  pointer-events: none;
}

.homepage-hero h1 {
  font-size: 52px !important;
  line-height: 1.1 !important;
  letter-spacing: -2.8px !important;
  font-weight: 600 !important;
  margin-bottom: 20px !important;
  color: var(--md-default-fg-color) !important;
}

/* Gradient text effect on brand name */
.homepage-hero h1 span.brand-gradient {
  background: linear-gradient(135deg, #007cf0, #00dfd8, #7928ca, #ff0080);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient-shift 12s ease infinite;
}

@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.homepage-hero .hero-subtitle {
  font-size: 20px;
  line-height: 1.5;
  color: var(--md-default-fg-color--light);
  max-width: 680px;
  margin: 0 auto 36px auto;
  font-weight: 400;
}

.homepage-hero .hero-ctas {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-bottom: 48px;
}

/* Custom Grid Cards for Features on Home */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin: 48px 0;
}
.feature-card {
  background-color: var(--color-canvas) !important;
  border: 1px solid var(--color-hairline) !important;
  border-radius: 8px !important;
  padding: 24px !important;
  box-shadow: var(--shadow-l2) !important;
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
  text-decoration: none !important;
  display: block;
}
.feature-card:hover {
  border-color: var(--color-hairline-strong) !important;
  box-shadow: var(--shadow-l3) !important;
  transform: translateY(-2px);
  text-decoration: none !important;
}
.feature-card h3 {
  font-size: 18px !important;
  margin: 0 0 8px 0 !important;
  font-weight: 500 !important;
  color: var(--md-default-fg-color) !important;
}
.feature-card p {
  font-size: 14px !important;
  line-height: 1.5 !important;
  margin: 0 !important;
  color: var(--md-default-fg-color--light) !important;
}

/* Badge secondary */
.badge-secondary {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 8px;
  border-radius: 100px;
  background-color: var(--md-default-bg-color--lighter);
  color: var(--md-default-fg-color--light);
  margin-bottom: 12px;
}