/* v5pol: carousel cues. A 24px edge fade on the side that still has content, plus a dot row (or "n / N" when long).
   Applied by js/gen6-cues.js to horizontal scrollers only while they actually overflow (phones/tablets). */
.g6-cue-scroll { --g6-fade-l: 0px; --g6-fade-r: 24px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--g6-fade-l), #000 calc(100% - var(--g6-fade-r)), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 var(--g6-fade-l), #000 calc(100% - var(--g6-fade-r)), transparent 100%); }
.g6-cue-scroll.g6-cue-mid { --g6-fade-l: 24px; }
.g6-cue-scroll.g6-cue-end { --g6-fade-r: 0px; --g6-fade-l: 24px; }
.g6-cue-scroll.g6-cue-start { --g6-fade-l: 0px; }
.g6-cue { position: relative; z-index: 3; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 20px; margin: 8px 0 0; padding: 0; list-style: none; pointer-events: none; font: 700 12px/1 Manrope, sans-serif; letter-spacing: .04em; color: #46596b; }
.g6-cue i { display: block; width: 7px; height: 7px; border-radius: 50%; background: rgba(43,128,187,.28); transition: width .2s, background .2s; }
.g6-cue i.is-on { width: 20px; border-radius: 4px; background: #2b80bb; }
.g6-cue--dark { color: rgba(255,255,255,.85); }
.g6-cue--dark i { background: rgba(255,255,255,.55); }
.g6-cue--dark i.is-on { background: #fff; }
@media (min-width: 1001px) { .g6-cue { display: none; } }
@media (prefers-reduced-motion: reduce) { .g6-cue i { transition: none; } }
/* 2026-09-29 Opus: a mask-image on a scroll container let its 5 cards leak into document width on phones
   (home scrollWidth 1157 @390). Contain every cue scroller and clip its section horizontally. */
.g6-cue-scroll { contain: paint; max-width: 100%; }
.g6-library, .g6-band { overflow-x: clip; }