/*
 * A full-bleed announcement band whose items scroll past as one continuous
 * tape.
 *
 * The loop rests on one measured number, --seq: the width of a single copy of
 * the item sequence, measured in the component. The track holds as many
 * identical copies as it takes to cover the band plus one, and the animation
 * translates it left by exactly --seq. After one iteration the pixels under
 * the viewport are identical to the ones at the start, so the restart is
 * invisible and there is no gap to chase.
 *
 * Speed is authored in pixels per second rather than as a duration, so adding
 * or shortening a message does not change how fast the tape reads — the
 * component converts it to --dur from the measured width.
 *
 * Per-item colours arrive as --c (solid), --cSoft (14% chip fill) and --cLine
 * (34% chip border), mixed in JS so a non-hex value in the Designer degrades
 * to the flat colour rather than a transparent chip.
 */

.sWv6ua2fCeU9f4K0pNEv {
  /* Overridden inline by the theme props. */
  --bg: #001727;
  --ink: #f4f7fb;
  --muted: #93a3b8;
  --line: rgba(255, 255, 255, 0.14);
  --accent: #0066ff;
  --font: Figtree, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --h: 48px;
  --gap: 28px;

  /* Fallbacks for the first paint, before the sequence has been measured. */
  --seq: 0px;
  --dur: 30s;

  box-sizing: border-box;
  width: 100%;
  /*
   * The tape is many times wider than the band, so both of these are load
   * bearing. As a grid or flex item the band would inherit min-width: auto —
   * a minimum of the track's min-content width, tens of thousands of pixels —
   * and overflow its own column; zero lets it shrink to what the parent
   * offers. max-width then pins it to that width rather than to the tape,
   * which is what makes it read as full-bleed instead of stretching the page.
   */
  min-width: 0;
  max-width: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

.sWv6ua2fCeU9f4K0pNEv *,
.sWv6ua2fCeU9f4K0pNEv *::before,
.sWv6ua2fCeU9f4K0pNEv *::after {
  box-sizing: border-box;
}

.dqR4b_RwcnUiZZD228m1,
.YPle93AxCuoPP3YuqZSw {
  border-top: 1px solid var(--line);
}

.YemkhQVJDRQvGazS_77k,
.YPle93AxCuoPP3YuqZSw {
  border-bottom: 1px solid var(--line);
}

/* ---------------------------------------------------------------- track -- */

.VIWLNxhz0DSZhIjp_YUO {
  height: var(--h);
  overflow: hidden;
}

.MldLw0Acl3JXSs0IivNf .VIWLNxhz0DSZhIjp_YUO {
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 clamp(24px, 6%, 96px),
    #000 calc(100% - clamp(24px, 6%, 96px)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 clamp(24px, 6%, 96px),
    #000 calc(100% - clamp(24px, 6%, 96px)),
    transparent 100%
  );
}

.NVDkP5jZcBHjMJmNrJCQ {
  display: flex;
  align-items: center;
  height: 100%;
  width: max-content;
  will-change: transform;
}

.boAtixc4AWCRg9M1Um42 {
  animation: oDGuqgZJB_RexIGnvNxV var(--dur) linear infinite;
}

@keyframes oDGuqgZJB_RexIGnvNxV {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(calc(var(--seq) * -1), 0, 0);
  }
}

/* Hover pauses only where a pointer can actually hover — on a touch screen the
   :hover state sticks after a tap and would freeze the tape for good. */
@media (hover: hover) {
  .OxCvW448qBvm0Rk6EMRH:hover .boAtixc4AWCRg9M1Um42 {
    animation-play-state: paused;
  }
}

/* Focus always pauses: a keyboard visitor tabbing into a link cannot read or
   activate a target that is still sliding away. */
.OxCvW448qBvm0Rk6EMRH:focus-within .boAtixc4AWCRg9M1Um42 {
  animation-play-state: paused;
}

.IODDwtByQQkhzIYDHr7a {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

/* ----------------------------------------------------------------- cell -- */

.kELkOisxIpWfRT63wV2H {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex: 0 0 auto;
  padding: 0 calc(var(--gap) / 2);
  font-size: 0.9375rem;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  color: inherit;
}

.hs9caZ8ohIvx6N3w5kAM {
  border-radius: 8px;
  transition: background-color 0.15s ease;
}

.hs9caZ8ohIvx6N3w5kAM:hover {
  background: var(--cSoft);
}

.hs9caZ8ohIvx6N3w5kAM:focus-visible {
  outline: 2px solid var(--c);
  outline-offset: -2px;
}

.IrvkMmujBmStFnr3YVw3 {
  width: 1.0625rem;
  height: 1.0625rem;
  flex: 0 0 auto;
  color: var(--c);
}

.tou9VrsPJfgId5rj7OET {
  flex: 0 0 auto;
  padding: 0.1875rem 0.4375rem;
  border: 1px solid var(--cLine);
  border-radius: 5px;
  background: var(--cSoft);
  color: var(--c);
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.wDk6FSet1UvWvY3lQL1z {
  font-weight: 500;
}

.vV5aC4pk4UDUPThZv19f {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
}

/* Sits before the meta line so a date reads as an aside rather than a second
   sentence. Dropped when there is no meta, since :empty never matches here. */
.vV5aC4pk4UDUPThZv19f::before {
  content: '·';
  margin-right: 0.4375rem;
  opacity: 0.6;
}

.yi_kxYoX3xsrU9YgQh9t {
  width: 0.875rem;
  height: 0.875rem;
  flex: 0 0 auto;
  color: var(--c);
  opacity: 0;
  transform: translateX(-3px);
  transition:
    opacity 0.15s ease,
    transform 0.15s ease;
}

.hs9caZ8ohIvx6N3w5kAM:hover .yi_kxYoX3xsrU9YgQh9t,
.hs9caZ8ohIvx6N3w5kAM:focus-visible .yi_kxYoX3xsrU9YgQh9t {
  opacity: 1;
  transform: translateX(0);
}

/* ------------------------------------------------------------ separator -- */

.BvYWtIW1WG4hUb_IUDYB {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1;
  opacity: 0.55;
  user-select: none;
}

.gLRAy_Tb9KxlcZUJbhZ3 {
  width: 1px;
  height: 1.125rem;
  background: currentColor;
}

/* ------------------------------------------------- reduced motion / empty -- */

/*
 * With motion off the tape becomes a plain scrollable row: one sequence, no
 * duplicates, and the viewport hands over horizontal scrolling so everything
 * past the right edge stays reachable by scroll, drag or keyboard.
 */
.LfMUen4sNWfTmwEGAdaC .VIWLNxhz0DSZhIjp_YUO {
  /* Height goes auto so a classic (space-taking) scrollbar sits below the
     items rather than across them. */
  height: auto;
  min-height: var(--h);
  overflow-x: auto;
  scrollbar-width: thin;
}

.LfMUen4sNWfTmwEGAdaC .NVDkP5jZcBHjMJmNrJCQ {
  height: var(--h);
}

.LfMUen4sNWfTmwEGAdaC .NVDkP5jZcBHjMJmNrJCQ {
  animation: none;
  transform: none;
}

.LfMUen4sNWfTmwEGAdaC.MldLw0Acl3JXSs0IivNf .VIWLNxhz0DSZhIjp_YUO {
  -webkit-mask-image: none;
  mask-image: none;
}

@media (prefers-reduced-motion: reduce) {
  .NVDkP5jZcBHjMJmNrJCQ {
    animation: none !important;
    transform: none !important;
  }

  .yi_kxYoX3xsrU9YgQh9t {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ----------------------------------------------------------------- misc -- */

@media (max-width: 600px) {
  .kELkOisxIpWfRT63wV2H {
    font-size: 0.875rem;
  }

  .vV5aC4pk4UDUPThZv19f {
    font-size: 0.75rem;
  }
}