.market-ribbon { position: relative; z-index: 3; color-scheme: dark; border-bottom: 1px solid rgba(242,181,68,.22); background: linear-gradient(90deg,#102e3e,#0c2534 48%,#102e3e); font-family: Montserrat,"Avenir Next","Segoe UI",Arial,sans-serif; line-height: 1.45; }
.market-ribbon[hidden] { display: none; }
.market-ribbon * { box-sizing: border-box; }
.market-ribbon .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.market-ribbon-inner { display: flex; align-items: center; width: min(1216px,calc(100% - 72px)); min-height: 64px; margin-inline: auto; gap: 0; }
.market-ribbon-label { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; padding-right: 20px; color: #ffd681; font-size: 9px; font-weight: 800; letter-spacing: .17em; white-space: nowrap; }
.market-ribbon-signal { width: 7px; height: 7px; border-radius: 50%; background: #ff6b6b; box-shadow: 0 0 0 3px rgba(255,107,107,.16); transition: background .2s, box-shadow .2s; }
.market-ribbon[data-state="fresh"]:not([data-paused="true"]) .market-ribbon-signal { background: #45d9a5; box-shadow: 0 0 0 3px rgba(69,217,165,.17); }
.market-ribbon-toggle { display: inline-grid; place-items: center; width: 23px; height: 23px; margin-left: 2px; padding: 0; border: 1px solid rgba(242,181,68,.35); border-radius: 4px; background: transparent; color: #ffd681; font: 700 11px/1 "Segoe UI",Arial,sans-serif; cursor: pointer; }
.market-ribbon-toggle:hover { border-color: #f2b544; background: rgba(242,181,68,.08); }
.market-ribbon-toggle:focus-visible { outline: 2px solid #ffd681; outline-offset: 2px; }
.market-ribbon-viewport { position: relative; flex: 1 1 auto; min-width: 0; overflow: hidden; mask-image: linear-gradient(90deg,transparent,#000 18px,#000 calc(100% - 18px),transparent); }
.market-ribbon-track { display: flex; width: max-content; min-height: 64px; align-items: center; }
.market-ribbon-track.is-moving { animation: market-ribbon-scroll var(--market-scroll-duration,55s) linear infinite; }
.market-ribbon:hover .market-ribbon-track, .market-ribbon[data-paused="true"] .market-ribbon-track { animation-play-state: paused; }
.market-ribbon-group { display: flex; align-items: center; width: max-content; padding-right: 10px; }
.market-ribbon-quote { display: inline-flex; align-items: baseline; gap: 8px; min-width: 177px; padding: 0 18px; border-left: 1px solid rgba(194,213,213,.13); white-space: nowrap; }
.market-ribbon-quote strong { color: #eaf2ed; font-size: 11px; font-weight: 700; letter-spacing: .01em; }
.market-ribbon-quote .level { color: #d0ddda; font-variant-numeric: tabular-nums; font-size: 11px; font-weight: 600; }
.market-ribbon-quote .change { font-variant-numeric: tabular-nums; font-size: 10px; font-weight: 700; }
.market-ribbon-quote .change.up { color: #82d4b6; }
.market-ribbon-quote .change.down { color: #ff998e; }
.market-ribbon-quote .change.flat { color: #9eb8bd; }
.market-ribbon-placeholder { display: inline-flex; align-items: center; padding: 0 18px; color: #9bb5b9; font-size: 11px; }
.market-ribbon[data-state="stale"] .market-ribbon-quote, .market-ribbon[data-state="offline"] .market-ribbon-quote { opacity: .65; }
@keyframes market-ribbon-scroll { to { transform: translateX(-50%); } }

@media (max-width: 1020px) {
  .market-ribbon-inner { width: min(1216px,calc(100% - 48px)); }
}
@media (max-width: 760px) {
  .market-ribbon-inner { position: relative; flex-wrap: wrap; width: min(1216px,calc(100% - 38px)); min-height: 70px; padding-block: 7px; }
  .market-ribbon-label { width: 100%; height: 18px; padding-right: 0; font-size: 8px; }
  .market-ribbon-viewport { order: 2; flex-basis: 100%; }
  .market-ribbon-track { min-height: 34px; }
  .market-ribbon-quote { min-width: 160px; padding-inline: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .market-ribbon-toggle { display: none; }
  .market-ribbon-viewport { overflow-x: auto; mask-image: none; }
  .market-ribbon-track.is-moving { animation: none; }
  .market-ribbon-group[aria-hidden="true"] { display: none; }
}