/* =========================================
   Graphik font family (self-hosted)
   ========================================= */

@font-face {
  font-family: "Graphik";
  src: url("/assets/fonts/Graphik/Graphik-Extralight.otf") format("opentype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Graphik";
  src: url("/assets/fonts/Graphik/Graphik-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Graphik";
  src: url("/assets/fonts/Graphik/Graphik-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Graphik";
  src: url("/assets/fonts/Graphik/Graphik-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Graphik";
  src: url("/assets/fonts/Graphik/Graphik-Semibold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Graphik";
  src: url("/assets/fonts/Graphik/Graphik-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Graphik";
  src: url("/assets/fonts/Graphik/Graphik-Black.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* =========================================
   Synerise / BaseModel Brand Tokens
   Full Color Palette
   ========================================= */

:root {
  /* -----------------------------------------
     PRIMARY: Blue
     Main brand color, used for primary actions,
     links, active states, and key UI elements
     ----------------------------------------- */
  --syn-blue-050: #f4faff;  /* Lightest tint, subtle backgrounds */
  --syn-blue-100: #d9eeff;  /* Light backgrounds, hover states */
  --syn-blue-200: #bce1ff;  /* Secondary backgrounds */
  --syn-blue-300: #8bcaff;  /* Borders, dividers */
  --syn-blue-400: #4da7fe;  /* Light accent, icons */
  --syn-blue-500: #238afe;  /* Secondary buttons, less emphasis */
  --syn-blue-600: #0b68ff;  /* PRIMARY - Main brand blue */
  --syn-blue-700: #0044d9;  /* Hover/pressed states for primary */
  --syn-blue-800: #00039e;  /* Dark accents */
  --syn-blue-900: #01026e;  /* Darkest, text on light backgrounds */

  /* -----------------------------------------
     PRIMARY: Grey
     Neutral palette for text, backgrounds,
     borders, and disabled states
     ----------------------------------------- */
  --syn-grey-050: #f9fafb;  /* Page background (light mode) */
  --syn-grey-100: #f3f5f6;  /* Card backgrounds, code blocks */
  --syn-grey-200: #e9edee;  /* Borders, dividers */
  --syn-grey-300: #dbe0e3;  /* Disabled backgrounds */
  --syn-grey-400: #b5bdc3;  /* Placeholder text, icons */
  --syn-grey-500: #949ea6;  /* Secondary text, captions */
  --syn-grey-600: #6a7580;  /* PRIMARY GREY - Body text alt */
  --syn-grey-700: #57616d;  /* Body text */
  --syn-grey-800: #384350;  /* Headings, emphasis */
  --syn-grey-900: #232936;  /* Primary text, highest contrast */

  /* -----------------------------------------
     ALERT: Success (Green)
     Positive feedback, completed actions,
     confirmations, valid states
     ----------------------------------------- */
  --syn-success: #54cb0b;   /* ALERT - Success green */

  /* -----------------------------------------
     ALERT: Warning (Yellow)
     Caution states, pending actions,
     non-critical alerts
     ----------------------------------------- */
  --syn-warning: #fab700;   /* ALERT - Warning yellow */

  /* -----------------------------------------
     ALERT: Error (Red)
     Errors, destructive actions,
     invalid states, critical alerts
     ----------------------------------------- */
  --syn-error: #f52922;     /* ALERT - Error red */

  /* -----------------------------------------
     SECONDARY: Yellow
     Warnings, highlights, attention-grabbing
     elements, badges
     ----------------------------------------- */
  --syn-yellow-050: #fffcf0;
  --syn-yellow-100: #fffae3;
  --syn-yellow-200: #fff8d7;
  --syn-yellow-300: #ffe873;
  --syn-yellow-400: #ffda24;
  --syn-yellow-500: #ffc300;
  --syn-yellow-600: #fab700;  /* Primary yellow (= warning) */
  --syn-yellow-700: #eda600;
  --syn-yellow-800: #bf8300;
  --syn-yellow-900: #5e3d00;

  /* -----------------------------------------
     SECONDARY: Orange
     Notifications, important callouts,
     secondary warnings
     ----------------------------------------- */
  --syn-orange-050: #fffaf0;
  --syn-orange-100: #fff5e0;
  --syn-orange-200: #ffe3a6;
  --syn-orange-300: #ffd373;
  --syn-orange-400: #ffba24;
  --syn-orange-500: #fd9f05;
  --syn-orange-600: #f97600;  /* Primary orange */
  --syn-orange-700: #ed5603;
  --syn-orange-800: #cc3a01;
  --syn-orange-900: #5f0900;

  /* -----------------------------------------
     SECONDARY: Mars
     Warm alerts, destructive hover states,
     accent for urgency
     ----------------------------------------- */
  --syn-mars-050: #fff3f3;
  --syn-mars-100: #ffe9e9;
  --syn-mars-200: #ffcbc1;
  --syn-mars-300: #ffa999;
  --syn-mars-400: #ff8770;
  --syn-mars-500: #ff6c4d;
  --syn-mars-600: #ff5831;  /* Primary mars */
  --syn-mars-700: #e43812;
  --syn-mars-800: #c41b03;
  --syn-mars-900: #770b05;

  /* -----------------------------------------
     SECONDARY: Red
     Errors, destructive actions, danger states,
     critical notifications
     ----------------------------------------- */
  --syn-red-050: #fff6f4;
  --syn-red-100: #ffece8;
  --syn-red-200: #ffd1c7;
  --syn-red-300: #ffab9e;
  --syn-red-400: #ff8475;
  --syn-red-500: #ff5a4d;
  --syn-red-600: #f52922;  /* Primary red (= error) */
  --syn-red-700: #cf1413;
  --syn-red-800: #87020b;
  --syn-red-900: #520004;

  /* -----------------------------------------
     SECONDARY: Pink
     Highlights, badges, playful accents,
     marketing elements
     ----------------------------------------- */
  --syn-pink-050: #fff5f5;
  --syn-pink-100: #ffebeb;
  --syn-pink-200: #ffc9ce;
  --syn-pink-300: #fe9da5;
  --syn-pink-400: #ff7586;
  --syn-pink-500: #ff4d67;
  --syn-pink-600: #ff2f52;  /* Primary pink */
  --syn-pink-700: #d41640;
  --syn-pink-800: #a80732;
  --syn-pink-900: #5d001c;

  /* -----------------------------------------
     SECONDARY: Violet
     Creative accents, premium features,
     AI/ML related elements
     ----------------------------------------- */
  --syn-violet-050: #fff0ff;
  --syn-violet-100: #fed6ff;
  --syn-violet-200: #fbadff;
  --syn-violet-300: #f585ff;
  --syn-violet-400: #e459f7;
  --syn-violet-500: #ce2feb;
  --syn-violet-600: #a41dc4;  /* Primary violet */
  --syn-violet-700: #7e109e;
  --syn-violet-800: #5b0678;
  --syn-violet-900: #3b0352;

  /* -----------------------------------------
     SECONDARY: Purple
     Tips, insights, special features,
     premium indicators
     ----------------------------------------- */
  --syn-purple-050: #f9f0ff;
  --syn-purple-100: #eedbff;
  --syn-purple-200: #d1adf7;
  --syn-purple-300: #b88cee;
  --syn-purple-400: #8e54e0;
  --syn-purple-500: #6d2ed3;  /* Primary purple */
  --syn-purple-600: #4e1daf;
  --syn-purple-700: #35108a;
  --syn-purple-800: #1f0763;
  --syn-purple-900: #10033d;

  /* -----------------------------------------
     SECONDARY: Cyan
     Info states, links (alt), data viz,
     cool accents
     ----------------------------------------- */
  --syn-cyan-050: #e6fffa;
  --syn-cyan-100: #b5f5ea;
  --syn-cyan-200: #87e8db;
  --syn-cyan-300: #6cdfd4;
  --syn-cyan-400: #36cfc4;
  --syn-cyan-500: #13c2bc;  /* Primary cyan */
  --syn-cyan-600: #089b9c;
  --syn-cyan-700: #007075;
  --syn-cyan-800: #00494f;
  --syn-cyan-900: #002429;

  /* -----------------------------------------
     SECONDARY: Fern
     Alternative success, growth indicators,
     positive trends in data viz
     ----------------------------------------- */
  --syn-fern-050: #edffed;
  --syn-fern-100: #ceffce;
  --syn-fern-200: #a0ffa2;
  --syn-fern-300: #7eff87;
  --syn-fern-400: #45ed58;
  --syn-fern-500: #25dc44;  /* Primary fern */
  --syn-fern-600: #0bcb38;
  --syn-fern-700: #039929;
  --syn-fern-800: #03701f;
  --syn-fern-900: #002b0d;

  /* -----------------------------------------
     SECONDARY: Green
     Success states, completed actions,
     positive feedback, valid inputs
     ----------------------------------------- */
  --syn-green-050: #f9ffed;
  --syn-green-100: #ecffce;
  --syn-green-200: #d9ffa0;
  --syn-green-300: #c5ff7e;
  --syn-green-400: #9aed45;
  --syn-green-500: #76dc25;
  --syn-green-600: #54cb0b;  /* Primary green (= success) */
  --syn-green-700: #399903;
  --syn-green-800: #2a7003;
  --syn-green-900: #0d2b00;
}

/* =========================================
   Light Scheme - Zensical/MkDocs Mapping
   ========================================= */
:root {
  /* Core UI */
  --md-primary-fg-color: var(--syn-blue-600);
  --md-accent-fg-color: var(--syn-blue-500);

  /* Page surfaces */
  --md-default-bg-color: var(--syn-grey-050);
  --md-default-fg-color: var(--syn-grey-900);

  /* Links */
  --md-typeset-a-color: var(--syn-blue-700);

  /* Code blocks */
  --md-code-bg-color: var(--syn-grey-100);
}

/* =========================================
   Dark Scheme - Zensical/MkDocs Mapping
   ========================================= */
[data-md-color-scheme="slate"] {
  /* Core UI */
  --md-primary-fg-color: var(--syn-blue-500);
  --md-accent-fg-color: var(--syn-blue-400);

  /* Page surfaces */
  --md-default-bg-color: #0b0f17;
  --md-default-fg-color: var(--syn-grey-200);

  /* Links */
  --md-typeset-a-color: var(--syn-blue-400);

  /* Code blocks */
  --md-code-bg-color: #0f172a;
}

/* =========================================
   Admonition Semantic Colors
   Synerise palette with unified backgrounds
   ========================================= */

/* Force dark body text inside all admonitions (light backgrounds need dark text in both modes) */
.md-typeset .admonition,
.md-typeset details {
  color: var(--syn-grey-800);
}

/* Note / Info (Cyan) */
.md-typeset .admonition.note,
.md-typeset details.note,
.md-typeset .admonition.info,
.md-typeset details.info {
  border-left-color: var(--syn-cyan-500);
  background-color: var(--syn-cyan-050);
}
.md-typeset .note > .admonition-title,
.md-typeset details.note > summary,
.md-typeset .info > .admonition-title,
.md-typeset details.info > summary {
  background-color: transparent;
  color: var(--syn-cyan-700);
}
.md-typeset .note > .admonition-title::before,
.md-typeset details.note > summary::before,
.md-typeset .info > .admonition-title::before,
.md-typeset details.info > summary::before {
  background-color: var(--syn-cyan-700);
}

/* Tip / Success (Green) */
.md-typeset .admonition.tip,
.md-typeset details.tip,
.md-typeset .admonition.success,
.md-typeset details.success {
  border-left-color: var(--syn-green-600);
  background-color: var(--syn-green-050);
}
.md-typeset .tip > .admonition-title,
.md-typeset details.tip > summary,
.md-typeset .success > .admonition-title,
.md-typeset details.success > summary {
  background-color: transparent;
  color: var(--syn-green-700);
}
.md-typeset .tip > .admonition-title::before,
.md-typeset details.tip > summary::before,
.md-typeset .success > .admonition-title::before,
.md-typeset details.success > summary::before {
  background-color: var(--syn-green-700);
}

/* Warning (Yellow) */
.md-typeset .admonition.warning,
.md-typeset details.warning,
.md-typeset .admonition.caution,
.md-typeset details.caution {
  border-left-color: var(--syn-yellow-600);
  background-color: var(--syn-yellow-050);
}
.md-typeset .warning > .admonition-title,
.md-typeset details.warning > summary,
.md-typeset .caution > .admonition-title,
.md-typeset details.caution > summary {
  background-color: transparent;
  color: var(--syn-yellow-700);
}
.md-typeset .warning > .admonition-title::before,
.md-typeset details.warning > summary::before,
.md-typeset .caution > .admonition-title::before,
.md-typeset details.caution > summary::before {
  background-color: var(--syn-yellow-700);
}

/* Danger / Error (Red) */
.md-typeset .admonition.danger,
.md-typeset details.danger,
.md-typeset .admonition.error,
.md-typeset details.error {
  border-left-color: var(--syn-red-600);
  background-color: var(--syn-red-050);
}
.md-typeset .danger > .admonition-title,
.md-typeset details.danger > summary,
.md-typeset .error > .admonition-title,
.md-typeset details.error > summary {
  background-color: transparent;
  color: var(--syn-red-700);
}
.md-typeset .danger > .admonition-title::before,
.md-typeset details.danger > summary::before,
.md-typeset .error > .admonition-title::before,
.md-typeset details.error > summary::before {
  background-color: var(--syn-red-700);
}

/* Important (Orange) */
.md-typeset .admonition.important,
.md-typeset details.important,
.md-typeset .admonition.failure,
.md-typeset details.failure {
  border-left-color: var(--syn-orange-600);
  background-color: var(--syn-orange-050);
}
.md-typeset .important > .admonition-title,
.md-typeset details.important > summary,
.md-typeset .failure > .admonition-title,
.md-typeset details.failure > summary {
  background-color: transparent;
  color: var(--syn-orange-700);
}
.md-typeset .important > .admonition-title::before,
.md-typeset details.important > summary::before,
.md-typeset .failure > .admonition-title::before,
.md-typeset details.failure > summary::before {
  background-color: var(--syn-orange-700);
}

/* Example / Abstract (Purple) */
.md-typeset .admonition.example,
.md-typeset details.example,
.md-typeset .admonition.abstract,
.md-typeset details.abstract {
  border-left-color: var(--syn-purple-500);
  background-color: var(--syn-purple-050);
}
.md-typeset .example > .admonition-title,
.md-typeset details.example > summary,
.md-typeset .abstract > .admonition-title,
.md-typeset details.abstract > summary {
  background-color: transparent;
  color: var(--syn-purple-700);
}
.md-typeset .example > .admonition-title::before,
.md-typeset details.example > summary::before,
.md-typeset .abstract > .admonition-title::before,
.md-typeset details.abstract > summary::before {
  background-color: var(--syn-purple-700);
}

/* Question / FAQ (Pink) */
.md-typeset .admonition.question,
.md-typeset details.question,
.md-typeset .admonition.faq,
.md-typeset details.faq {
  border-left-color: var(--syn-pink-800);
  background-color: var(--syn-pink-050);
}
.md-typeset .question > .admonition-title,
.md-typeset details.question > summary,
.md-typeset .faq > .admonition-title,
.md-typeset details.faq > summary {
  background-color: transparent;
  color: var(--syn-pink-800);
}
.md-typeset .question > .admonition-title::before,
.md-typeset details.question > summary::before,
.md-typeset .faq > .admonition-title::before,
.md-typeset details.faq > summary::before {
  background-color: var(--syn-pink-800);
}
.md-typeset details.question > summary::after {
  color: var(--syn-pink-800);
}

/* =========================================
   Custom "highlight" admonition
   No icon/title, larger text
   ========================================= */
.md-typeset .admonition.highlight {
  border-left-color: var(--md-primary-fg-color);
  font-size: 1.15em;
}
.md-typeset .admonition.highlight > .admonition-title {
  display: none;
}
.md-typeset .admonition.highlight p {
  font-weight: 500;
  margin: 0.5em 0;
}
[data-md-color-scheme="slate"] .md-typeset .admonition.highlight {
  color: var(--syn-grey-100);
}

/* =========================================
   Content Width & Layout Proportions
   Target: 20% left nav / 65% content / 15% ToC
   at the max grid width of 90 rem (~1440 px).
   Theme hardcodes sidebar width to 12.1 rem,
   so we override the actual elements.
   Responsive hide order (built into Material):
     ≤76.25em  → Left nav becomes drawer
     ≤60em     → ToC hides completely
   ========================================= */
.md-grid {
  max-width: 90rem;        /* ~1440 px — fills most of a 1920 screen */
}

/* --- Desktop: 20/65/15 split ----------------------------------------- */
@media screen and (min-width: 76.25em) {
  /* Left nav — 20% of 90 rem = 18 rem */
  .md-sidebar--primary {
    width: 18rem;
  }
  [dir=ltr] .md-sidebar--primary .md-sidebar__inner {
    padding-right: calc(100% - 17.4rem);
  }
  [dir=rtl] .md-sidebar--primary .md-sidebar__inner {
    padding-left: calc(100% - 17.4rem);
  }
  /* ToC — 15% of 90 rem = 13.5 rem */
  .md-sidebar--secondary {
    width: 13.5rem;
  }
  [dir=ltr] .md-sidebar--secondary .md-sidebar__inner {
    padding-right: calc(100% - 12.9rem);
  }
  [dir=rtl] .md-sidebar--secondary .md-sidebar__inner {
    padding-left: calc(100% - 12.9rem);
  }
}

/* Breathing room between nav sidebar, content, and TOC */
.md-content {
  padding-left: 2rem;
  padding-right: 2rem;
}

/* =========================================
   Header & Navigation
   ========================================= */
.md-header {
  backdrop-filter: blur(8px);
}

/* =========================================
   Typography
   ========================================= */

/* Headings use Graphik */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
  font-family: "Graphik", system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -0.015em;
}

/* Glossary abbreviations */
.md-typeset abbr {
  font-weight: inherit;
}

/* =========================================
   Components
   ========================================= */

/* Version switcher — sits inside .md-header__title next to the site name.
   The JS appends .md-version into the title div; we make it a flex row
   so the version label sits inline after the text. */
.md-header__title {
  display: flex;
  align-items: center;
}
.md-header__title > .md-header__ellipsis {
  flex: 0 1 auto;
  min-width: 0;
}
.md-header__title > .md-version {
  flex-shrink: 0;
  margin-left: .5rem;
}

/* Version switcher — styles from Zensical's classic variant, needed for
   the built-in mike-compatible version switcher in the modern variant. */
:root {
  --md-version-icon: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M140.3 376.8c12.6 10.2 31.1 9.5 42.8-2.2l128-128c9.2-9.2 11.9-22.9 6.9-34.9S301.4 192 288.5 192h-256c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 7 34.8l128 128z"/></svg>');
}
.md-version {
  flex-shrink: 0;
  font-size: .8rem;
  height: 2.4rem;
}
.md-version__current {
  color: inherit;
  cursor: pointer;
  margin-left: 1.4rem;
  margin-right: .4rem;
  outline: none;
  position: relative;
  top: .05rem;
}
.md-version__current:after {
  background-color: currentcolor;
  content: "";
  display: inline-block;
  height: .6rem;
  margin-left: .4rem;
  mask-image: var(--md-version-icon);
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
  width: .4rem;
}
.md-version__alias {
  margin-left: .3rem;
  opacity: .7;
}
.md-version__list {
  background-color: var(--md-default-bg-color);
  border-radius: .1rem;
  box-shadow: var(--md-shadow-z2);
  color: var(--md-default-fg-color);
  list-style-type: none;
  margin: .2rem .8rem;
  max-height: 0;
  opacity: 0;
  overflow: auto;
  padding: 0;
  position: absolute;
  scroll-snap-type: y mandatory;
  top: .15rem;
  transition: max-height 0ms .5s, opacity .25s .25s;
  z-index: 3;
}
.md-version:focus-within .md-version__list,
.md-version:hover .md-version__list {
  max-height: 10rem;
  opacity: 1;
  transition: max-height 0ms, opacity .25s;
}
.md-version__item {
  line-height: 1.8rem;
}
.md-version__link {
  cursor: pointer;
  display: block;
  outline: none;
  padding-left: .6rem;
  padding-right: 1.2rem;
  scroll-snap-align: start;
  transition: color .25s, background-color .25s;
  white-space: nowrap;
  width: 100%;
}
.md-version__link:focus,
.md-version__link:hover {
  color: var(--md-accent-fg-color);
}
.md-version__link:focus {
  background-color: var(--md-default-fg-color--lightest);
}

/* Version-switch toast notification */
.bm-version-toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%) translateY(100%);
  background: var(--md-default-fg-color);
  color: var(--md-default-bg-color);
  padding: .75rem 1.25rem;
  border-radius: .5rem;
  font-size: .85rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .3);
  display: flex;
  align-items: center;
  gap: .75rem;
  z-index: 100;
  opacity: 0;
  transition: transform .3s ease, opacity .3s ease;
  max-width: 90vw;
}
.bm-version-toast--visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}
.bm-version-toast__close {
  background: none;
  border: none;
  color: var(--md-default-bg-color);
  font-size: 1.25rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  opacity: .7;
}
.bm-version-toast__close:hover {
  opacity: 1;
}

/* Dark/light logo switcher */
[data-md-color-scheme="slate"] .md-header__button.md-logo img,
[data-md-color-scheme="slate"] .md-nav__button.md-logo img {
  filter: invert(1);
}

/* =========================================
   Mermaid Diagrams
   ========================================= */
.md-typeset .mermaid .node foreignObject {
  min-width: 800px;
}

.md-typeset .mermaid .node foreignObject div {
  min-width: 800px;
  text-align: center;
}

/* =========================================
   Data Visualization Palette
   Use these for charts, graphs, dashboards
   ========================================= */
:root {
  --syn-dataviz-1: var(--syn-blue-600);    /* Primary series */
  --syn-dataviz-2: var(--syn-purple-500);  /* Secondary series */
  --syn-dataviz-3: var(--syn-cyan-500);    /* Tertiary series */
  --syn-dataviz-4: var(--syn-orange-600);  /* Quaternary series */
  --syn-dataviz-5: var(--syn-green-600);   /* Positive/success */
  --syn-dataviz-6: var(--syn-pink-600);    /* Highlight series */
  --syn-dataviz-7: var(--syn-yellow-600);  /* Warning/caution */
  --syn-dataviz-8: var(--syn-red-600);     /* Negative/error */
}

/* =========================================
   Recipe format switcher
   ========================================= */
.bm-recipe-format-switcher {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem;
  margin: .45rem 0 1rem;
}

.bm-recipe-format-switcher__label {
  margin-right: .15rem;
  color: var(--syn-grey-500);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.bm-recipe-format-switcher__option,
.md-typeset a.bm-recipe-format-switcher__option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.7rem;
  padding: .16rem .58rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--syn-grey-100);
  color: var(--syn-grey-700);
  font-size: .74rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}

.md-typeset a.bm-recipe-format-switcher__option:hover,
.md-typeset a.bm-recipe-format-switcher__option:focus {
  border-color: var(--syn-blue-300);
  color: var(--syn-blue-700);
  background: color-mix(in srgb, var(--syn-blue-500) 8%, white);
}

.bm-recipe-format-switcher__option--active {
  border-color: var(--syn-blue-300);
  background: color-mix(in srgb, var(--syn-blue-500) 12%, white);
  color: var(--syn-blue-700);
}

[data-md-color-scheme="slate"] .bm-recipe-format-switcher__label {
  color: var(--syn-grey-400);
}

[data-md-color-scheme="slate"] .bm-recipe-format-switcher__option,
[data-md-color-scheme="slate"] .md-typeset a.bm-recipe-format-switcher__option {
  background: var(--syn-grey-800);
  color: var(--syn-grey-200);
}

[data-md-color-scheme="slate"] .md-typeset a.bm-recipe-format-switcher__option:hover,
[data-md-color-scheme="slate"] .md-typeset a.bm-recipe-format-switcher__option:focus,
[data-md-color-scheme="slate"] .bm-recipe-format-switcher__option--active {
  border-color: var(--syn-blue-400);
  background: color-mix(in srgb, var(--syn-blue-500) 18%, var(--syn-grey-800));
  color: var(--syn-blue-100);
}