/* Scoped component only. Supply --logo-loop-background, --logo-loop-control-color,
   --logo-loop-cell-width, --logo-loop-height and per-logo sizes where needed. */
.final-logo-loop {
  --logo-loop-cell-width: clamp(112px, 16vw, 224px);
  --logo-loop-height: 64px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: var(--logo-loop-height);
  padding-inline-end: 8px;
  overflow: hidden;
  isolation: isolate;
  background: var(--logo-loop-background, #242423);
  color: var(--logo-loop-control-color, #CDFF00);
}
.final-logo-loop *, .final-logo-loop *::before, .final-logo-loop *::after { box-sizing: border-box; }
.final-logo-loop [hidden] { display: none !important; }
.final-logo-loop__viewport {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  contain: inline-size paint;
  padding-block: 8px;
}
.final-logo-loop__track, .final-logo-loop__set, .final-logo-loop__unit { display: flex; align-items: center; }
.final-logo-loop__track, .final-logo-loop__set, .final-logo-loop__unit { width: 100%; }
.final-logo-loop__set, .final-logo-loop__unit { flex: 0 0 auto; gap: 0; }
.final-logo-loop__cell {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: calc(var(--logo-loop-height) - 16px);
  padding-inline: 12px;
}
.final-logo-loop__cell svg { display: block; flex: 0 1 auto; width: auto; max-width: 100%; }
.final-logo-loop [data-loop-logo="emblem"] svg { height: var(--logo-loop-emblem-height, 32px); }
.final-logo-loop [data-loop-logo="wordmark"] svg { height: var(--logo-loop-wordmark-height, 24px); }
.final-logo-loop [data-loop-logo="handwritten"] svg { height: var(--logo-loop-handwritten-height, 29px); }
.final-logo-loop[data-loop-ready="true"] .final-logo-loop__track { width: max-content; will-change: transform; }
.final-logo-loop[data-loop-ready="true"] .final-logo-loop__set,
.final-logo-loop[data-loop-ready="true"] .final-logo-loop__unit { width: auto; }
.final-logo-loop[data-loop-ready="true"] .final-logo-loop__cell { flex: 0 0 var(--logo-loop-cell-width); width: var(--logo-loop-cell-width); }
.final-logo-loop__toggle {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: 16px/1 system-ui, sans-serif;
  touch-action: manipulation;
}
.final-logo-loop__toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.final-logo-loop__toggle:disabled { cursor: default; opacity: .65; }
.final-logo-loop__sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
/* One static unit shows all three marks when motion is reduced or JS/WAAPI is
   unavailable. Clones are decorative and never create extra accessible logos. */
.final-logo-loop[data-loop-reduced="true"] .final-logo-loop__track { transform: none !important; width: 100%; will-change: auto; }
.final-logo-loop[data-loop-reduced="true"] .final-logo-loop__set,
.final-logo-loop[data-loop-reduced="true"] .final-logo-loop__unit { width: 100%; }
.final-logo-loop[data-loop-reduced="true"] .final-logo-loop__cell { flex: 1 1 0; width: auto; }
.final-logo-loop[data-loop-reduced="true"] [data-loop-clone],
.final-logo-loop[data-loop-reduced="true"] [data-loop-unit]:not(:first-child) { display: none; }
@media (prefers-reduced-motion: reduce) {
  .final-logo-loop .final-logo-loop__track { transform: none !important; width: 100%; will-change: auto; }
  .final-logo-loop .final-logo-loop__set, .final-logo-loop .final-logo-loop__unit { width: 100%; }
  .final-logo-loop .final-logo-loop__cell { flex: 1 1 0; width: auto; }
  .final-logo-loop [data-loop-clone], .final-logo-loop [data-loop-unit]:not(:first-child) { display: none; }
}