/* ---------- CSS-only image carousel for the home page ---------- */
.spq-carousel {
  position: relative;
  width: 100%;
  max-width: 950px;
  aspect-ratio: 950 / 355;
  margin: 1.5rem auto 2rem auto;
  overflow: hidden;
  border-radius: 0.4rem;
  box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.2);
  background: #000;
}

.spq-carousel img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: spq-fade 36s infinite;
}

/*
 * 6 slides × 6s per slide (including fade overlap) → 36s full cycle.
 * Each slide stays fully visible for ~4s, then fades out over 2s
 * while the next fades in.
 */
.spq-carousel img:nth-child(1) { animation-delay:  0s; }
.spq-carousel img:nth-child(2) { animation-delay:  6s; }
.spq-carousel img:nth-child(3) { animation-delay: 12s; }
.spq-carousel img:nth-child(4) { animation-delay: 18s; }
.spq-carousel img:nth-child(5) { animation-delay: 24s; }
.spq-carousel img:nth-child(6) { animation-delay: 30s; }

@keyframes spq-fade {
  0%   { opacity: 0; }
  3%   { opacity: 1; }
  17%  { opacity: 1; }
  22%  { opacity: 0; }
  100% { opacity: 0; }
}

/* ---------- "Under Construction" admonition (cli.md / iqrecording.md) ---------- */
/*
 * Material's admonition extension reads the word after "!!!" as the type.
 * We add a custom "construction" flavor so the under-construction callouts
 * use their own color + icon rather than generic "note".
 */
:root {
  --md-admonition-icon--construction:
    url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 8h-2.81c-.45-.78-1.07-1.45-1.82-1.96L17 4.41 15.59 3l-2.17 2.17C12.96 5.06 12.49 5 12 5s-.96.06-1.41.17L8.41 3 7 4.41l1.62 1.63C7.88 6.55 7.26 7.22 6.81 8H4v2h2.09c-.05.33-.09.66-.09 1v1H4v2h2v1c0 .34.04.67.09 1H4v2h2.81c1.04 1.79 2.97 3 5.19 3s4.15-1.21 5.19-3H20v-2h-2.09c.05-.33.09-.66.09-1v-1h2v-2h-2v-1c0-.34-.04-.67-.09-1H20V8z"/></svg>');
}
.md-typeset .admonition.construction,
.md-typeset details.construction {
  border-color: #ff9800;
}
.md-typeset .construction > .admonition-title,
.md-typeset .construction > summary {
  background-color: rgba(255, 152, 0, 0.1);
}
.md-typeset .construction > .admonition-title::before,
.md-typeset .construction > summary::before {
  background-color: #ff9800;
  -webkit-mask-image: var(--md-admonition-icon--construction);
  mask-image: var(--md-admonition-icon--construction);
}