:root {
  /* Black logo outline for light theme */
  --logo-outline-color: #001135;
}

[data-md-color-scheme="slate"] {
  /* set logo outline color to white when dark theme is used */
  --logo-outline-color: #ffffff;
}

#outline {
  fill: var(--logo-outline-color);
}

/* START brand accent (custom cyan) --------------------------------------------
   accent: custom is set in mkdocs.yml; the header stays white because the modern
   theme variant drives the header from neither primary nor accent. */
:root {
  --clab-brand: #00c9ff;
}

[data-md-color-accent="custom"] {
  --md-accent-fg-color: var(--clab-brand);
  --md-accent-fg-color--transparent: color-mix(in srgb, var(--clab-brand) 10%, transparent);
}

/* brand-colored links — a darker cyan keeps contrast on the light background,
   the full brand cyan pops against the dark one */
[data-md-color-scheme="default"] {
  --md-typeset-a-color: #0098c4;
}

[data-md-color-scheme="slate"] {
  --md-typeset-a-color: var(--clab-brand);
}
/* END brand accent */

.md-grid {
  /* a slightly increased width for the main content ~1300px */
  max-width: 65rem;
}

.md-post--excerpt {
  /* a slightly increased width for the main content ~1300px */
  max-width: 40rem;
}

.mdx-content__footer {
  margin-top: 20px;
  text-align: center;
}

.mdx-content__footer a {
  display: inline-block;
  transition: transform 250ms cubic-bezier(0.1, 0.7, 0.1, 1), color 125ms;
}

.mdx-content__footer a:focus,
.mdx-content__footer a:hover {
  transform: scale(1.2);
}

.mdx-content__footer hr {
  display: inline-block;
  width: 40px;
  margin: 16px;
  vertical-align: middle;
  background-color: currentColor;
  border: none;
}

@-webkit-keyframes heart {

  0%,
  40%,
  80%,
  to {
    transform: scale(1)
  }

  20%,
  60% {
    transform: scale(1.15)
  }
}

@keyframes heart {

  0%,
  40%,
  80%,
  to {
    transform: scale(1)
  }

  20%,
  60% {
    transform: scale(1.15)
  }
}

.heart {
  animation: heart 1s infinite;
  color: #e91e63
}

/* classes to make iframe elements responsive */
.iframe-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
}

.iframe-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* this is for anchor.fm iframes */
.iframe-audio-container {
  position: relative;
  width: 100%;
  padding-bottom: 7rem;
  height: 0;
}

.iframe-audio-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* this is for low-height iframe audio containers */
.iframe-audio2-container {
  position: relative;
  width: 100%;
  padding-bottom: 2rem;
  height: 0;
}

.iframe-audio2-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* shadow effect for images and divs for video */
.img-shadow {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

/* embedded output for code blocks
  use as
  ```
  echo test
  ```
  <div class="embed-result">
  ```
  test
  ```
  </div>
 */
.md-typeset .embed-result {
  margin-top: -1.125em;
}

/* START border for content tabs 
https://github.com/squidfunk/mkdocs-material/discussions/4157#discussioncomment-8270993
*/
.md-typeset .tabbed-set {
  border: 0.5px solid var(--md-typeset-table-color);
}

.md-typeset .tabbed-content {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-bottom: 0.5rem;
  padding-top: 0.5rem;
}

/* END border for content tabs */

/* scrollable code blocks used in code snippets */
div.highlight.code-scroll-lg pre>code {
  max-height: 80vh;
}

div.highlight.code-scroll-sm pre>code {
  max-height: 50vh;
}

/* START code-example admonition styles */
:root {
  --md-admonition-icon--code-example: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.22 4.97a.75.75 0 0 1 1.06 0l6.5 6.5a.75.75 0 0 1 0 1.06l-6.5 6.5a.749.749 0 0 1-1.275-.326.75.75 0 0 1 .215-.734L21.19 12l-5.97-5.97a.75.75 0 0 1 0-1.06m-6.44 0a.75.75 0 0 1 0 1.06L2.81 12l5.97 5.97a.749.749 0 0 1-.326 1.275.75.75 0 0 1-.734-.215l-6.5-6.5a.75.75 0 0 1 0-1.06l6.5-6.5a.75.75 0 0 1 1.06 0"/></svg>')
}

.md-typeset .admonition.code-example,
.md-typeset details.code-example {
  border-color: #9e9e9e;
}

.md-typeset .code-example>.admonition-title,
.md-typeset .code-example>summary {
  background-color: #9e9e9e1a;
}

.md-typeset .code-example>.admonition-title::before,
.md-typeset .code-example>summary::before {
  background-color: #9e9e9e;
  -webkit-mask-image: var(--md-admonition-icon--code-example);
  mask-image: var(--md-admonition-icon--code-example);
}

.md-typeset .code-example>.admonition-title::after,
.md-typeset .code-example>summary::after {
  background-color: #9e9e9e;
}

/* END code-example admonition styles */

/* START subtle-note admonition styles */
:root {
  --md-admonition-icon--subtle-note: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2m3.1 5.07c.14 0 .28.05.4.16l1.27 1.27c.23.22.23.57 0 .78l-1 1-2.05-2.05 1-1c.1-.11.24-.16.38-.16m-1.97 1.74 2.06 2.06-6.06 6.06H7.07v-2.06z"/></svg>')
}

.md-typeset .admonition.subtle-note,
.md-typeset details.subtle-note {
  border-color: #9e9e9e;
}

.md-typeset .subtle-note>.admonition-title,
.md-typeset .subtle-note>summary {
  background-color: #9e9e9e1a;
}

.md-typeset .subtle-note>.admonition-title::before,
.md-typeset .subtle-note>summary::before {
  background-color: #9e9e9e;
  -webkit-mask-image: var(--md-admonition-icon--subtle-note);
  mask-image: var(--md-admonition-icon--subtle-note);
}

.md-typeset .subtle-note>.admonition-title::after,
.md-typeset .subtle-note>summary::after {
  background-color: #9e9e9e;
}

/* END subtle-note admonition styles */

/* START subtle-info admonition styles */
:root {
  --md-admonition-icon--subtle-info: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 9h-2V7h2m0 10h-2v-6h2m-1-9A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2Z"/></svg>')
}

.md-typeset .admonition.subtle-info,
.md-typeset details.subtle-info {
  border-color: #9e9e9e;
}

.md-typeset .subtle-info>.admonition-title,
.md-typeset .subtle-info>summary {
  background-color: #9e9e9e1a;
}

.md-typeset .subtle-info>.admonition-title::before,
.md-typeset .subtle-info>summary::before {
  background-color: #9e9e9e;
  -webkit-mask-image: var(--md-admonition-icon--subtle-info);
  mask-image: var(--md-admonition-icon--subtle-info);
}

.md-typeset .subtle-info>.admonition-title::after,
.md-typeset .subtle-info>summary::after {
  background-color: #9e9e9e;
}

/* END subtle-info admonition styles */

/* START subtle-question admonition styles */
:root {
  --md-admonition-icon--subtle-question: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m15.07 11.25-.9.92C13.45 12.89 13 13.5 13 15h-2v-.5c0-1.11.45-2.11 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41a2 2 0 0 0-2-2 2 2 0 0 0-2 2H8a4 4 0 0 1 4-4 4 4 0 0 1 4 4 3.2 3.2 0 0 1-.93 2.25M13 19h-2v-2h2M12 2A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10c0-5.53-4.5-10-10-10Z"/></svg>')
}

.md-typeset .admonition.subtle-question,
.md-typeset details.subtle-question {
  border-color: #9e9e9e;
}

.md-typeset .subtle-question>.admonition-title,
.md-typeset .subtle-question>summary {
  background-color: #9e9e9e1a;
}

.md-typeset .subtle-question>.admonition-title::before,
.md-typeset .subtle-question>summary::before {
  background-color: #9e9e9e;
  -webkit-mask-image: var(--md-admonition-icon--subtle-question);
  mask-image: var(--md-admonition-icon--subtle-question);
}

.md-typeset .subtle-question>.admonition-title::after,
.md-typeset .subtle-question>summary::after {
  background-color: #9e9e9e;
}

/* END subtle-question admonition styles */

/* START thin scrollbar styles */
/* First unset all rules that break Chrome styling */
.md-typeset pre>code,
.md-search__scrollwrap,
.md-sidebar__scrollwrap {
  scrollbar-color: unset;
  scrollbar-width: unset;
}

.md-typeset pre>code:hover,
.md-search__scrollwrap:hover,
.md-sidebar__scrollwrap:focus-within,
.md-sidebar__scrollwrap:hover {
  scrollbar-color: unset;
}

.md-tooltip2__inner {
  scrollbar-width: unset;
}

/* Wrap new scrollbar properties in @supports rule for browsers without `::-webkit-scrollbar-*` support */
/* This way chrome won't override `::-webkit-scrollbar-*` selectors */
/* https://developer.chrome.com/docs/css-ui/scrollbar-styling */
@supports not selector(::-webkit-scrollbar) {

  .md-typeset pre>code,
  .md-search__scrollwrap,
  .md-sidebar__scrollwrap {
    scrollbar-color: var(--md-default-fg-color--lighter) #0000;
    scrollbar-width: thin;
  }

  .md-typeset pre>code:hover,
  .md-search__scrollwrap:hover,
  .md-sidebar__scrollwrap:focus-within,
  .md-sidebar__scrollwrap:hover {
    scrollbar-color: var(--md-accent-fg-color) #0000;
  }

  .md-tooltip2__inner {
    scrollbar-width: thin;
  }
}

/* Restore hover color for Chrome */
@supports selector(::-webkit-scrollbar) {

  .md-typeset pre>code:hover::-webkit-scrollbar-thumb,
  .md-search__scrollwrap:hover::-webkit-scrollbar-thumb,
  .md-sidebar__scrollwrap:focus-within::-webkit-scrollbar-thumb,
  .md-sidebar__scrollwrap:hover::-webkit-scrollbar-thumb {
    background-color: var(--md-accent-fg-color);
  }
}

/* END thin scrollbar styles */


[dir="ltr"] .md-typeset blockquote {
  border-left: .1rem solid var(--md-default-fg-color--lightest);
}

/* quote styling */
[dir="ltr"] .md-typeset blockquote {
  position: relative;
  padding-left: 1rem;
  border: none;

}

[dir="ltr"] .md-typeset blockquote::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.1rem;
  bottom: 0.1rem;
  width: 0.15em;
  border-radius: 0.25rem;
  background: linear-gradient(to bottom, var(--md-default-fg-color--lighter), var(--md-accent-fg-color));
}

/* accent-colored square bullets for unordered lists */
.md-typeset ul li {
  list-style-type: square;
}

.md-typeset ul li::marker {
  color: var(--md-accent-fg-color);
}

/* START refreshed home page */
.clab-home {
  --clab-cyan: #00c9ff;
  --clab-border: color-mix(in srgb, var(--md-default-fg-color) 16%, transparent);
  max-width: 62rem;
  margin: 0 auto;
  color: var(--md-default-fg-color);
}

.clab-home h1,
.clab-home h2,
.clab-home h3 {
  letter-spacing: 0;
}

/* hero --------------------------------------------------------------------- */
.clab-hero {
  position: relative;
  margin: 0 0 2.6rem;
  padding: 1rem 0 2.2rem;
  text-align: center;
  border-bottom: 1px solid var(--clab-border);
}

/* soft brand glow behind the hero logo */
.clab-hero::before {
  content: "";
  position: absolute;
  top: -2rem;
  left: 50%;
  transform: translateX(-50%);
  width: 36rem;
  max-width: 90%;
  height: 15rem;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--clab-cyan) 20%, transparent), transparent);
  filter: blur(6px);
  z-index: 0;
  pointer-events: none;
}

.clab-hero > * {
  position: relative;
  z-index: 1;
}

.clab-hero__content {
  max-width: 42rem;
  margin: 0 auto;
}

/* the logo lives in the first paragraph of the hero */
.clab-hero__content > p:first-child {
  margin: 0;
}

.clab-hero__content > p:first-child img {
  width: auto;
  max-height: 8rem;
  margin: 0 auto;
}

.clab-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  justify-content: center;
  margin: 1.4rem 0 1.6rem;
}

.clab-badges img {
  margin: 0;
}

.clab-hero__content > p {
  color: var(--md-default-fg-color--light);
}

/* sections ----------------------------------------------------------------- */
.clab-section {
  margin: 2.6rem 0;
}

.clab-section > h2 {
  position: relative;
  display: inline-block;
  margin-bottom: 0.5rem;
  padding-bottom: 0.3rem;
  font-size: 1.6rem;
}

.clab-section > h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 2.4rem;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--clab-cyan), color-mix(in srgb, var(--clab-cyan) 15%, transparent));
}

.clab-section > p {
  max-width: 46rem;
  margin-top: 0;
  color: var(--md-default-fg-color--light);
  font-size: 0.95rem;
}

/* diagrams & video ---------------------------------------------------------- */
.clab-diagram {
  margin: 1.4rem 0 0;
  text-align: center;
}

/* the diagrams.net viewer pins .mxgraph to an inline pixel width/height; cap it
   to the column, let the SVG viewBox drive proportional scaling, and center the
   figure with auto margins */
.clab-diagram .mxgraph {
  display: block;
  width: 100%;
  height: auto !important;
  margin: 0 auto;
  border: 1px solid transparent;
}

.clab-diagram .mxgraph svg {
  width: 100% !important;
  height: auto !important;
  max-width: 100%;
}

.clab-section .iframe-container {
  max-width: 44rem;
  height: auto;
  margin: 1.2rem auto 0;
  padding-bottom: 0;
  aspect-ratio: 16 / 9;
}

/* center any standalone images placed inside home-page sections */
.clab-home .clab-section img {
  display: block;
  margin-inline: auto;
}

/* cards -------------------------------------------------------------------- */
.clab-card-grid.grid.cards {
  margin-top: 1.2rem;
}

/* every home section ships exactly four cards: lay them out as one balanced
   row on the desktop, 2x2 on tablets and a single column on phones */
.clab-card-grid.grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media screen and (min-width: 64em) {
  .clab-card-grid.grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media screen and (max-width: 30em) {
  .clab-card-grid.grid {
    grid-template-columns: 1fr;
  }
}

.clab-card-grid.grid.cards > ul > li,
.clab-card-grid.grid.cards > ol > li {
  border-color: var(--clab-border);
  border-radius: 8px;
  transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}

.clab-card-grid.grid.cards > ul > li:hover,
.clab-card-grid.grid.cards > ol > li:hover {
  border-color: color-mix(in srgb, var(--clab-cyan) 65%, var(--clab-border));
  transform: translateY(-3px);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--clab-cyan) 22%, transparent);
}

@media screen and (max-width: 48em) {
  .clab-section {
    margin: 2rem 0;
  }
}

[data-md-color-scheme="slate"] .clab-home {
  --clab-border: color-mix(in srgb, #fff 18%, transparent);
}
/* END refreshed home page */
