:root > * {
    --md-primary-fg-color:        #F0324C;
    --md-primary-fg-color--light: #f06b87;
    --md-primary-fg-color--dark:  #cc133b;
    --md-accent-fg-color:         #F0324C;
    --md-accent-fg-color--transparent: rgba(240, 50, 76, 0.12);
    --md-admonition-icon--sw-update: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-rss-icon lucide-rss"><path d="M4 11a9 9 0 0 1 9 9"/><path d="M4 4a16 16 0 0 1 16 16"/><circle cx="5" cy="19" r="1"/></svg>');
    --md-admonition-icon--fm-icon:   url('data:image/svg+xml;charset=utf-8,<svg stroke="currentColor" stroke-width="2" version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path class="st3" d="m4.3591 4.5478a7.4405 4.4412 89.997 0 1 4.4405 7.4392" style="color-interpolation-filters:sRGB;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3"/> <path class="st3" d="m19.716 4.4741a4.4412 7.5811 0.0029996 0 0-4.4409 7.5805" style="color-interpolation-filters:sRGB;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3"/> <path class="st3" d="m19.719 19.497a7.4405 4.4412 89.997 0 1-4.4404-7.4392" style="color-interpolation-filters:sRGB;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3"/> <path class="st3" d="m4.362 19.569a4.4412 7.5811 0.0027004 0 0 4.4408-7.5805" style="color-interpolation-filters:sRGB;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3"/> <circle class="st2" transform="rotate(-90)" cx="-11.987" cy="12.039" r="10.79" style="color-interpolation-filters:sRGB;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3"/></svg>');
  }
  

  [data-md-color-scheme="slate"] {
  --md-default-bg-color: #252729;
  --md-default-fg-color: #c7c7c7;
}

[data-md-color-scheme="default"] {
    --md-default-bg-color: #e6e6e6;
}

  .md-tooltip {
    top: inherit;
    left: inherit;
    margin-left: 12px;
    margin-top: 7px;
}


.md-banner {
  background-color: var(--md-default-bg-color--light);  /* Your custom color */
}


/* Custom Software Admonition */
.md-typeset .admonition.sw-update,
.md-typeset details.sw-update {
  background-color: #ce302d40;
}

.md-typeset .sw-update > .admonition-title::before,
.md-typeset .sw-update > summary::before {
  background-color: #ce302d;
  -webkit-mask-image: var(--md-admonition-icon--sw-update);
          mask-image: var(--md-admonition-icon--sw-update);
}

/* Custom flowmeter Admonition */
.md-typeset .admonition.fm-icon,
.md-typeset details.fm-icon {
  background-color: #ce2d3f40;
}

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



[data-md-color-scheme="default"] .md-header__button.md-logo img, [data-md-color-scheme="default"] .md-header__button.md-logo svg {
    fill: #ee2722;
}

.pswp__svg-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.pswp__svg-container svg {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

@keyframes led-pulse-orange {
  0%, 100% {
    opacity: 0.4;
    transform: scale(1, 0.8);
    color: rgba(255, 140, 0, 0.338);
    filter: drop-shadow(0 0 0 rgba(255, 140, 0, 0));
  }
  50% {
    opacity: 1;
    transform: scale(1, 0.8);
    color: rgba(255, 140, 0, 1);
    filter: drop-shadow(0 0 6px rgba(255, 140, 0, 0.45));
  }
}
@keyframes led-flash-orange-random {
  /* mostly off */
  0%, 7%, 18%, 31%, 44%, 58%, 73%, 89%, 100% {
    opacity: 0.3;
    transform: scale(1, 0.8);
    color: rgba(160, 88, 0, 0.68);
    filter: drop-shadow(0 0 0 rgba(255, 140, 0, 0));
  }

  /* short flashes */
  2%, 2.8%,
  12%, 12.8%,
  24%, 24.7%,
  39%, 39.8%,
  52%, 52.7%,
  66%, 66.8%,
  81%, 81.7%,
  94%, 94.6% {
    opacity: 1;
    transform: scale(1, 0.8);
    color: rgba(255, 140, 0, 1);
    filter: drop-shadow(0 0 6px rgba(255, 140, 0, 0.45));
  }
}

@keyframes led-orange-off {
  0%, 100% {
    opacity: 0.3;
    transform: scale(1, 0.8);
    color: rgba(160, 88, 0, 0.68);
    filter: drop-shadow(0 0 6px rgba(232, 128, 1, 0.45));
  }
  50% {
    opacity: 0.3;
    transform: scale(1, 0.8);
    color: rgba(160, 88, 0, 0.68);
    filter: drop-shadow(0 0 6px rgba(232, 128, 1, 0.45));
  }
}


@keyframes led-orange {
  0%, 100% {
    opacity: 0.9;
    transform: scale(1, 0.8);
    color: rgba(255, 140, 0, 1);
    filter: drop-shadow(0 0 6px rgba(232, 128, 1, 0.45));
  }
  50% {
    opacity: 1;
    transform: scale(1, 0.8);
    color: rgb(232, 128, 2);
    filter: drop-shadow(0 0 6px rgba(255, 140, 0, 0.45));
  }
}

@keyframes led-green {
  0%, 100% {
    opacity: 0.95;
    transform: scale(1, 0.8);
    color: rgb(1, 189, 79);
    filter: drop-shadow(0 0 6px rgba(3, 215, 13, 0.45));
  }
  50% {
    opacity: 1;
    transform: scale(1, 0.8);
    color: rgb(0, 181, 75);
    filter: drop-shadow(0 0 6px rgba(0, 255, 13, 0.45));
  }
}

@keyframes led-green-off {
  0%, 100% {
    opacity: 0.3;
    transform: scale(1, 0.8);
    color: rgba(0, 100, 41, 0.68);
    filter: drop-shadow(0 0 6px rgba(0, 128, 6, 0.45));
  }
  50% {
    opacity: 0.3;
    transform: scale(1, 0.8);
    color: rgba(0, 100, 41, 0.68);
    filter: drop-shadow(0 0 6px rgba(0, 128, 6, 0.45));
  }
}

@keyframes led-flash-orange-once {
  /* ON: 0ms → 120ms = 0% → 12% */
  0%, 12% {
    opacity: 1;
    transform: scale(1, 0.8);
    color: rgba(255, 140, 0, 1);
    filter: drop-shadow(0 0 6px rgba(255, 140, 0, 0.45));
  }
  /* OFF: 120ms → 1000ms */
  12.001%, 100% {
    opacity: 0.3;
    transform: scale(1, 0.8);
    color: rgba(192, 106, 0, 0.838);
    filter: drop-shadow(0 0 0 rgba(255, 140, 0, 0));
  }
}

@keyframes led-flash-orange-twice {
  /* ON: 0ms → 120ms */
  0%, 12% {
    opacity: 1;
    transform: scale(1, 0.8);
    color: rgba(255, 140, 0, 1);
    filter: drop-shadow(0 0 6px rgba(255, 140, 0, 0.45));
  }
  /* OFF: 120ms → 340ms (220ms gap) */
  12.001%, 34% {
    opacity: 0.3;
    transform: scale(1, 0.8);
    color: rgba(192, 106, 0, 0.838);
    filter: drop-shadow(0 0 0 rgba(255, 140, 0, 0));
  }
  /* ON: 340ms → 460ms */
  34.001%, 46% {
    opacity: 1;
    transform: scale(1, 0.8);
    color: rgba(255, 140, 0, 1);
    filter: drop-shadow(0 0 6px rgba(255, 140, 0, 0.45));
  }
  /* OFF: 460ms → 1000ms */
  46.001%, 100% {
    opacity: 0.3;
    transform: scale(1, 0.8);
    color: rgba(192, 106, 0, 0.838);
    filter: drop-shadow(0 0 0 rgba(255, 140, 0, 0));
  }
}

.led-orange-once {
  animation: led-flash-orange-once 1000ms steps(1, end) infinite;
}

.led-orange-twice {
  animation: led-flash-orange-twice 1000ms steps(1, end) infinite;
}

.led {
  display: inline-block;
  margin-right: 0.5rem;
}

.led-small-margin {
  display: inline-block;
  margin-left: 0.1rem;
  margin-right: 0.1rem;
}

.led-orange-pulse {
  animation: led-pulse-orange 1000ms ease-in-out infinite;
}


.led-orange-off {
  animation: led-orange-off 700ms ease-in-out infinite;
}


.led-orange {
  animation: led-orange 700ms ease-in-out infinite;
}

.led-green {
  animation: led-green 700ms ease-in-out infinite;
}


.led-green-off {
  animation: led-green-off 700ms ease-in-out infinite;
}


.led-orange-random {
  animation: led-flash-orange-random 1500ms steps(1, end) infinite;
}

/* Pill container adapted for cards */
.filter-card-pill {
  background-color: #252729; /* Requested dark gray */
  border-radius: 12px;
  height: 48px;
  width: 100%;
  
  /* CRITICAL FIXES FOR GRID BLOWOUT: */
  max-width: 100%; 
  min-width: 0;
  display: block; 
  
  box-sizing: border-box;
  margin: 12px 0;
  padding: 8px 16px;
}

.filter-card-pill svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.filter-card-pill .curve {
  fill: none;
  stroke: #e0e0e0; /* Light gray to contrast the dark background */
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: drawCurve 3s ease-in-out infinite;
}

/* Stagger animations slightly */
.delay-1 .curve { animation-delay: 0.1s; }
.delay-2 .curve { animation-delay: 0.2s; }
.delay-3 .curve { animation-delay: 0.3s; }
.delay-4 .curve { animation-delay: 0.4s; }
.delay-5 .curve { animation-delay: 0.5s; }

@keyframes drawCurve {
  0% { stroke-dashoffset: 100; opacity: 0; }
  10% { opacity: 1; }
  50% { stroke-dashoffset: 0; opacity: 1; }
  80% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}