:root {
  /* ---- Core palette (Nature-journal inspired: navy, ink, muted teal) ---- */
  --md-primary-fg-color: #1b4f72;          /* Deep navy-blue, links/buttons/active TOC */
  --md-primary-fg-color--light: #2e6da4;
  --md-primary-fg-color--dark: #0f2f45;
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: #eef3f7;

  --md-accent-fg-color: #148f77;           /* Muted teal accent */
  --md-accent-bg-color: #ffffff;
  --md-typeset-a-color: #1b4f72;

  /* Custom ProMaya palette */
  --pm-deep-blue: #1b4f72;
  --pm-teal: #148f77;
  --pm-cyan: #2e86ab;
  --pm-light-blue: #eef3f7;
  --pm-ice: #f7f8f9;
  --pm-marine: #14213d;

  /* Sidebar palette — white background, dark text, green hover */
  --pm-sidebar-bg: #bbda99;
  --pm-sidebar-text: #000000;
  --pm-sidebar-heading: #000000;
  --pm-sidebar-link-hover: #1b4f72;
  --pm-sidebar-active: #000000;

  --text-main: #222831;
  --text-muted: #000000;

  /* Fonts */
  --pm-serif: Georgia, Cambria, "Times New Roman", Times, serif;
  --pm-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ==========================================================================
   Base body / typography — smaller, serif, Nature-style
   ========================================================================== */
body {
  background-color: var(--pm-ice);
  color: var(--text-main);
  font-family: var(--pm-sans);
  font-size: 0.92rem;
  line-height: 1.6;
}

.md-typeset {
  font-size: 0.8rem;
}

.md-typeset p,
.md-typeset li {
  font-family: var(--pm-serif);
  color: var(--text-main);
  font-size: 0.95rem;
  line-height: 1.65;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--pm-marine);
  font-family: var(--pm-serif);
}

h1 {
  font-weight: 700 !important;
  font-size: 1.5rem !important;
  letter-spacing: -0.3px;
}

h2 {
  font-weight: 700 !important;
  font-size: 1.1rem !important;
  border-bottom: 2px solid var(--pm-light-blue);
  padding-bottom: 0.3rem;
}

h3 {
  font-size: 0.92rem !important;
  font-weight: 700 !important;
}

/* Force standard hyperlinks — crisp, no blur */
.md-typeset a {
  color: var(--pm-deep-blue) !important;
  font-weight: 600;
  text-decoration: none;
}

.md-typeset a:hover {
  color: var(--pm-cyan) !important;
  text-decoration: underline;
}

/* ==========================================================================
   Header ribbon — solid, crisp (no translucency / blur)
   ========================================================================== */
.md-header {
  background-color: var(--pm-deep-blue) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  fill: #ffffff !important;
}

.md-header-nav__button,
.md-header__button {
  color: #ffffff !important;
}

.md-header__topic .md-ellipsis {
  font-family: var(--pm-serif);
  font-weight: 700;
}

.md-tabs {
  background-color: var(--pm-deep-blue) !important;
  color: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.md-tabs__link {
  color: rgba(255, 255, 255, 0.85) !important;
  font-weight: 600;
  font-size: 0.78rem;
}

.md-tabs__link--active,
.md-tabs__item--active .md-tabs__link {
  color: #ffffff !important;
}

/* ==========================================================================
   Sidebar navigation — dark, DeepPrep-style
   ========================================================================== */
.md-sidebar--primary .md-sidebar__inner {
  background-color: var(--pm-sidebar-bg);
  border-radius: 6px;
}

.md-sidebar--primary .md-nav {
  background-color: var(--pm-sidebar-bg);
}

/* Kill Material's built-in scroll-fade mask/gradient on the sidebar —
   this is the "diffuse white blur" seen at the top of the nav box. It's
   normally a light-to-transparent gradient meant for a light background,
   which looks like a smear on our dark sidebar. */
.md-sidebar--primary .md-sidebar__scrollwrap {
  mask-image: none !important;
  -webkit-mask-image: none !important;
  background-image: none !important;
}

.md-sidebar--primary .md-sidebar__scrollwrap::before,
.md-sidebar--primary .md-sidebar__scrollwrap::after,
.md-sidebar--primary .md-nav::before,
.md-sidebar--primary .md-nav::after,
.md-sidebar--primary .md-nav--integrated::before,
.md-sidebar--primary .md-nav--integrated::after,
.md-sidebar--primary li::before,
.md-sidebar--primary li::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

.md-sidebar--primary * {
  mask-image: none !important;
  -webkit-mask-image: none !important;
}

.md-sidebar--primary .md-nav__item,
.md-sidebar--primary .md-nav__link,
.md-sidebar--primary .md-nav__link:hover,
.md-sidebar--primary .md-nav__link:focus {
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

.md-nav__title {
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--pm-marine);
}

.md-sidebar--primary .md-nav__title {
  background-color: var(--pm-deep-blue);
  color: #ffffff !important;
  border-radius: 4px;
  padding: 0.6rem 0.6rem;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.md-sidebar--primary .md-nav__title .md-ellipsis {
  font-family: var(--pm-serif);
}

.md-sidebar--primary .md-nav__link {
  color: var(--pm-sidebar-text) !important;
  font-size: 0.78rem;
  font-family: var(--pm-sans);
}

.md-sidebar--primary .md-nav__item--section > .md-nav__link,
.md-sidebar--primary label.md-nav__link {
  color: var(--pm-sidebar-heading) !important;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.68rem;
  letter-spacing: 0.4px;
}

/* Hover must win over the heading rule above, so give it matching
   specificity plus source-order priority (placed after). This makes
   every link — leaf items and section labels alike — turn green on hover. */
.md-sidebar--primary .md-nav__link:hover,
.md-sidebar--primary label.md-nav__link:hover,
.md-sidebar--primary .md-nav__item--section > .md-nav__link:hover {
  color: var(--pm-sidebar-link-hover) !important;
}

.md-sidebar--primary .md-nav__link--active,
.md-sidebar--primary .md-nav__item--active > .md-nav__link {
  color: var(--pm-sidebar-active) !important;
  font-weight: 700 !important;
}

/* Material's toc.integrate feature paints the active page's label/link with
   a light "current page" card background — intended for light themes, it
   shows up as a near-white box on our dark sidebar with white text on top
   of it (invisible). Strip that background explicitly. */
.md-sidebar--primary .md-nav__link--active,
.md-sidebar--primary .md-nav__item--active > .md-nav__link,
.md-sidebar--primary label.md-nav__link,
.md-sidebar--primary .md-nav__link[for] {
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Search bar restyled like a clean rounded input (kept hidden per prior request,
   re-enable by removing the rule below if search should show again) */
.md-search {
  display: none !important;
}

/* ==========================================================================
   Table of contents (secondary sidebar) — crisp header, no blur
   ========================================================================== */
.md-sidebar--secondary {
  display: block !important;
}

.md-sidebar--secondary .md-sidebar__inner,
.md-sidebar--secondary .md-nav,
.md-nav--secondary {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background-color: var(--pm-sidebar-bg);
}

.md-nav--secondary .md-nav__title {
  color: var(--pm-deep-blue);
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  border-bottom: 2px solid var(--pm-deep-blue);
  padding-bottom: 0.3rem;
  background: none;
}

.md-nav--secondary .md-nav__link {
  font-size: 0.75rem;
  color: var(--text-muted) !important;
}

.md-nav--secondary .md-nav__link:hover {
  color: var(--pm-sidebar-link-hover) !important;
}

.md-nav--secondary .md-nav__link--active {
  color: var(--pm-deep-blue) !important;
  font-weight: 700 !important;
}

.md-grid {
  max-width: 1277px;
}

/* ==========================================================================
   Hero section — solid card, no gradient / no blur
   ========================================================================== */
.hero-section {
  text-align: center;
  padding: 1rem 0.5rem;
  background-color: var(--pm-light-blue);
  border-radius: 10px;
  margin-bottom: 0.8rem;
  box-shadow: 0 2px 8px rgba(11, 75, 124, 0.08);
  border: 1px solid rgba(11, 79, 114, 0.12);
}

.hero-logo {
  max-height: 100px !important;
  width: auto !important;
  margin-bottom: 0.2rem;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.08));
}

.hero-title {
  font-size: 1rem !important;
  font-weight: 700 !important;
  font-family: var(--pm-serif);
  color: var(--pm-deep-blue) !important;
  margin-bottom: 0.2rem !important;
  letter-spacing: -0.3px;
}

.hero-subtitle {
  font-family: var(--pm-sans);
  font-size: 0.78rem;
  color: var(--text-muted);
  max-width: 700px;
  margin: 0 auto 0.5rem auto;
  line-height: 1.45;
}

/* Badges */
.hero-badges {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-bottom: 0.6rem;
}

.hero-badge {
  padding: 0.2rem 0.6rem;
  border-radius: 50px;
  font-weight: 600;
  font-size: 0.68rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.badge-blue   { background-color: #d6e6f2; color: var(--pm-marine); }
.badge-teal   { background-color: #d3ede7; color: var(--pm-marine); }
.badge-cyan   { background-color: #d9edf5; color: var(--pm-marine); }
.badge-indigo { background-color: #dcdfef; color: var(--pm-marine); }
.badge-slate  { background-color: #e2e6e8; color: var(--pm-marine); }

/* Call to Action Buttons — both share one solid, crisp "highlight" style.
   NOTE: selectors are scoped through .hero-section so they out-specify the
   generic ".md-typeset a" rule above — without this, that rule's navy text
   wins and the button labels become invisible navy-on-navy. */
.hero-section a.hero-cta,
.hero-section a.hero-cta-secondary {
  display: inline-block;
  background-color: var(--pm-deep-blue) !important;
  color: #ffffff !important;
  border: 2px solid var(--pm-deep-blue);
  padding: 0.45rem 1.1rem;
  border-radius: 4px;
  font-weight: 700;
  font-family: var(--pm-sans);
  font-size: 0.78rem;
  text-decoration: none;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.hero-section a.hero-cta:hover,
.hero-section a.hero-cta-secondary:hover {
  background-color: var(--pm-cyan) !important;
  border-color: var(--pm-cyan);
  color: #ffffff !important;
  transform: translateY(-1px);
}

/* ==========================================================================
   Feature grid
   ========================================================================== */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin: 1.2rem 0;
}

.feature-card {
  background: #ffffff;
  padding: 0.8rem 1rem;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  border-left: 4px solid;
  display: flex;
  flex-direction: column;
}

.feature-card.blue   { border-color: var(--pm-deep-blue); }
.feature-card.teal   { border-color: var(--pm-teal); }
.feature-card.cyan   { border-color: var(--pm-cyan); }
.feature-card.marine { border-color: var(--pm-marine); }

.feature-card h3 {
  margin-top: 0 !important;
  color: var(--pm-marine) !important;
  font-size: 0.9rem !important;
  margin-bottom: 0.3rem !important;
}

.feature-card p {
  font-family: var(--pm-sans);
  color: var(--text-muted);
  margin: 0;
  padding-bottom: 0.2rem;
  font-size: 0.78rem;
  line-height: 1.35;
  flex-grow: 1;
}

.feature-card .hero-badge {
  align-self: flex-start;
  margin-top: auto;
}

/* ==========================================================================
   System requirements card
   ========================================================================== */
.sys-req-card {
  background: #ffffff;
  padding: 0.5rem 0.8rem;
  border-radius: 6px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.03);
  border-left: 3px solid;
  display: flex;
  flex-direction: column;
}
.sys-req-card h3 {
  margin-top: 0 !important;
  color: var(--pm-marine) !important;
  font-size: 0.82rem !important;
  margin-bottom: 0.2rem !important;
}
.sys-req-card p {
  font-family: var(--pm-sans);
  color: var(--text-muted);
  font-size: 0.72rem;
  line-height: 1.3;
  margin: 0 0 0.4rem 0;
}
.sys-req-card.blue { border-color: var(--pm-deep-blue); }
.sys-req-card.cyan { border-color: var(--pm-cyan); }
.sys-req-card.teal { border-color: var(--pm-teal); }

/* ==========================================================================
   Figures
   ========================================================================== */
.doc-figure {
  margin: 1.5rem auto;
  text-align: center;
  background: #ffffff;
  padding: 0.15rem;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.06);
  width: 100%;
  display: block;
}

.doc-figure img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}

.doc-figure figcaption {
  margin-top: 0.2rem;
  margin-bottom: 0.2rem;
  padding: 0;
  text-align: center;
  font-family: var(--pm-sans);
  font-style: normal;
  color: var(--text-muted);
  font-size: 0.85rem;
  line-height: 1.5;
  width: 100%;
  max-width: 100%;
  display: block;
}

/* Download link */
.download-link {
  display: inline-flex;
  align-items: center;
  background-color: var(--pm-light-blue);
  color: var(--pm-deep-blue) !important;
  padding: 0.4rem 1rem;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: none;
  border: 1px solid rgba(11, 75, 124, 0.15);
  transition: all 0.2s ease;
}

.download-link:hover {
  background-color: #dcebf7;
  transform: translateY(-1px);
}

/* ==========================================================================
   Admonitions — solid fill like the DeepPrep "Note" box (no translucency)
   ========================================================================== */
.md-typeset .admonition,
.md-typeset details {
  border-radius: 4px;
  border: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.md-typeset .admonition.info,
.md-typeset details.info,
.md-typeset .admonition.note,
.md-typeset details.note {
  border: none;
}

.md-typeset .admonition.info > .admonition-title,
.md-typeset details.info > summary,
.md-typeset .admonition.note > .admonition-title,
.md-typeset details.note > summary {
  background-color: var(--pm-deep-blue);
  color: #ffffff;
  font-weight: 700;
  border-radius: 4px 4px 0 0;
}

.md-typeset .admonition.info > .admonition-title::before,
.md-typeset details.info > summary::before,
.md-typeset .admonition.note > .admonition-title::before,
.md-typeset details.note > summary::before {
  color: #ffffff;
}

.md-typeset .admonition.info,
.md-typeset .admonition.note {
  background-color: var(--pm-light-blue);
}

/* ==========================================================================
   Stats cards
   ========================================================================== */
.stats-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin: 1rem 0;
  max-width: 420px;
}

.stat-card {
  flex: 1;
  min-width: 80px;
  background: #ffffff;
  border-radius: 6px;
  padding: 0.4rem 0.3rem;
  text-align: center;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
}

.stat-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
}

.stat-blue::after { background-color: var(--pm-deep-blue); }
.stat-teal::after { background-color: var(--pm-teal); }
.stat-cyan::after { background-color: var(--pm-cyan); }

.stat-value {
  display: block;
  font-family: var(--pm-serif);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--pm-marine);
  margin-bottom: 0.1rem;
  line-height: 1;
}

.stat-label {
  font-family: var(--pm-sans);
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ==========================================================
   Code Blocks (Terminal Style)
   ========================================================== */
.md-typeset .highlight,
.md-typeset pre {
    background: #d2deeb !important;
    border: 1px solid #d0d7de;
    border-radius: 8px;
}

.md-typeset pre code {
    color: #24292f;
}