.preset-preview.ticker-tape {
  background:
    repeating-linear-gradient(168deg, transparent 0 5px, rgba(232, 204, 145, 0.3) 5px 6px, transparent 6px 9px),
    linear-gradient(180deg, #322a1b, #11110f);
}

.theme-tv-preview.theme-preset-ticker-tape {
  --ticker-tape-brass: var(--theme-accent-color, #e8cc91);
  --ticker-tape-ink: var(--theme-text-color, #f5f1e9);
  --ticker-tape-up: #78dfa0;
  --ticker-tape-down: var(--theme-crash-color, #ff8886);
  --ticker-tape-tip: #8ed7f6;
  --ticker-tape-name-price-gap: clamp(12px, 1.75vw, 28px);
}

.theme-tv-preview.theme-preset-ticker-tape.event-open:not(.market-crashing) {
  background:
    radial-gradient(ellipse at 79% 0%, rgba(232, 204, 145, 0.14), transparent 60%),
    var(--theme-background-color, #11110f);
  box-shadow: inset 0 1px rgba(232, 204, 145, 0.42);
}

.theme-tv-preview.theme-preset-ticker-tape.event-open:not(.market-crashing) .animated-market-bg {
  display: block;
  opacity: 1;
}

.theme-tv-preview.theme-preset-ticker-tape.event-open:not(.market-crashing):not(.market-opening)::before,
.theme-tv-preview.theme-preset-ticker-tape.event-open:not(.market-crashing):not(.market-opening)::after,
.theme-tv-preview.theme-preset-ticker-tape.event-open:not(.market-crashing) .animated-market-bg > span {
  display: none;
}

/* This decorative tape stays static. The board's live ticker has its own settings. */
.theme-tv-preview.theme-preset-ticker-tape.event-open:not(.market-crashing) .animated-market-bg::before {
  content: "TDE  ▲  •  EXCH  ▼  •  TRADE  ▲  •  TDE  ▼  •  EXCH  ▲\A EXCH  ▲  •  TDE  ▼  •  TRADE  ▼  •  EXCH  ▲  •  TDE  ▲\A TRADE  ▼  •  EXCH  ▲  •  TDE  ▲  •  TRADE  ▲  •  EXCH  ▼";
  position: absolute;
  top: 4%;
  left: 16%;
  padding: 0 0.6em;
  color: var(--ticker-tape-brass);
  font: 700 clamp(19px, 4vw, 86px)/1.32 "Courier New", monospace;
  letter-spacing: 0.07em;
  white-space: pre;
  opacity: 0.19;
  transform: rotate(-8deg);
  transform-origin: left top;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0 calc(1.32em - 1px),
    rgba(232, 204, 145, 0.65) calc(1.32em - 1px) 1.32em
  );
  mask-image: linear-gradient(to right, transparent, #000 17%);
}

.theme-tv-preview.theme-preset-ticker-tape.event-open:not(.market-crashing):not(.crash-imminent):not(.market-opening) :is(.ticker, .instruction-scroller) {
  background: #171612;
  border-color: rgba(232, 204, 145, 0.34);
  color: var(--ticker-tape-ink);
  box-shadow: none;
}

.theme-tv-preview.theme-preset-ticker-tape.event-open:not(.market-crashing) .price-board {
  border-color: rgba(232, 204, 145, 0.28);
  background: #171613;
}

.theme-tv-preview.theme-preset-ticker-tape.event-open:not(.market-crashing, .layout-boxes, .layout-minimal-grid, .layout-strips, .layout-large-tiles) .price-board {
  /* Place the price near the middle of each pair, with room for the movement badge. */
  grid-template-columns: repeat(var(--theme-product-columns, 2), minmax(0, calc(47% / var(--theme-product-columns, 2))) minmax(max-content, 1fr)) !important;
}

.theme-tv-preview.theme-preset-ticker-tape.event-open:not(.market-crashing, .layout-boxes, .layout-minimal-grid, .layout-strips, .layout-large-tiles) :is(.price-board[data-theme-columns="2"], [data-theme-columns="2"] .price-board) {
  /* Let the first price track absorb the space between pairs. */
  grid-template-columns: minmax(0, 23.5%) minmax(max-content, 1fr) minmax(0, 23.5%) max-content !important;
}

.theme-tv-preview.theme-preset-ticker-tape.event-open:not(.market-crashing) .price-board > :is(span, strong):not(.category-header):not(.price-board-page-marker):not(.price-crashed) {
  border-color: rgba(232, 204, 145, 0.13);
  border-inline-width: 0;
  background: #1a1916;
  color: var(--ticker-tape-ink);
  backdrop-filter: none;
  animation: none;
}

.theme-tv-preview.theme-preset-ticker-tape.event-open:not(.market-crashing) .price-board .category-header {
  border-color: rgba(232, 204, 145, 0.23);
  background: #2c261b;
  color: var(--ticker-tape-brass);
  align-content: center;
}

body.tv-display-body .theme-tv-preview.theme-preset-ticker-tape.event-open:not(.market-crashing) .price-board .category-header {
  min-height: clamp(23px, 4vh, 42px) !important;
}

.theme-tv-preview.theme-preset-ticker-tape.event-open:not(.market-crashing) .price-board > strong {
  justify-content: flex-start;
  gap: 0.4em;
  padding-inline-start: var(--ticker-tape-name-price-gap);
  text-align: left;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* The public TV page uses fixed padding and gaps for its default theme. */
body.tv-display-body .theme-tv-preview.theme-preset-ticker-tape.event-open:not(.market-crashing) .price-board > strong {
  gap: 0.4em !important;
  padding-inline: var(--ticker-tape-name-price-gap) clamp(5px, 0.6vw, 12px) !important;
}

.theme-tv-preview.theme-preset-ticker-tape.event-open:not(.market-crashing) .price-board > strong > em {
  display: inline-flex;
  flex-shrink: 0;
  justify-content: flex-start;
  align-items: center;
  min-width: 0;
  border: 0;
  background: none;
  color: var(--ticker-tape-movement, #c5bfb1);
  box-shadow: none;
  white-space: nowrap;
}

body.tv-display-body .theme-tv-preview.theme-preset-ticker-tape.event-open:not(.market-crashing) .price-board > strong > em {
  min-width: 0 !important;
}

.theme-tv-preview.theme-preset-ticker-tape.event-open:not(.market-crashing) .price-board > strong > em::before {
  margin-right: 0.3em;
  font-size: 1.3em;
}

.theme-tv-preview.theme-preset-ticker-tape .price-board .price-up {
  --ticker-tape-movement: var(--ticker-tape-up);
}

.theme-tv-preview.theme-preset-ticker-tape .price-board :is(.price-down, .price-crashed) {
  --ticker-tape-movement: var(--ticker-tape-down);
}

.theme-tv-preview.theme-preset-ticker-tape.event-open:not(.market-crashing) .price-board > .mover-spotlight-row:not(.price-crashed) {
  background: #302720;
  box-shadow: none;
}

.theme-tv-preview.theme-preset-ticker-tape.event-open:not(.market-crashing) .price-board > .cheapest-row:not(.price-crashed) {
  background: #1c2627;
  box-shadow: none;
}

.theme-tv-preview.theme-preset-ticker-tape.event-open:not(.market-crashing) .cheapest-callout {
  border-color: rgba(142, 215, 246, 0.38);
  border-left: 3px solid var(--ticker-tape-tip);
  background: #121b1e;
  box-shadow: none;
}

.theme-tv-preview.theme-preset-ticker-tape.event-open:not(.market-crashing) .cheapest-callout::before {
  display: none;
}

.theme-tv-preview.theme-preset-ticker-tape.event-open:not(.market-crashing) .cheapest-callout :is(span, b) {
  color: var(--ticker-tape-tip);
}

/* Give the title and the tip a shared header in the Branding preview. */
.branding-preview-hero .branding-demo-preview.theme-preset-ticker-tape.event-open:not(.market-crashing) {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  grid-template-rows: auto auto auto minmax(0, 1fr);
  container: ticker-tape-preview / inline-size;
  --ticker-tape-name-price-gap: clamp(12px, 2.1cqw, 28px);
  --ticker-tape-preview-gutter: clamp(12px, 2.2cqw, 30px);
  --ticker-tape-preview-header-space: clamp(10px, 1.8cqw, 26px);
}

.branding-preview-hero .branding-demo-preview.theme-preset-ticker-tape.event-open:not(.market-crashing, .ticker-bottom) > .ticker {
  grid-area: 1 / 1 / 2 / -1;
  position: relative !important;
  inset: auto !important;
  width: auto !important;
}

.branding-preview-hero .branding-demo-preview.theme-preset-ticker-tape.event-open:not(.market-crashing) > .board-title {
  grid-area: 2 / 1;
  align-self: center;
  max-width: none;
  padding: 0;
  margin: var(--ticker-tape-preview-header-space) 10px var(--ticker-tape-preview-header-space) var(--ticker-tape-preview-gutter);
  font-size: clamp(16px, calc(var(--theme-heading-size) * 0.56), min(58px, 4.6cqw));
  line-height: 0.98;
  overflow-wrap: anywhere;
}

.branding-preview-hero .branding-demo-preview.theme-preset-ticker-tape.event-open:not(.market-crashing) > .cheapest-callout {
  position: relative;
  inset: auto;
  grid-area: 2 / 2;
  align-self: center;
  justify-self: end;
  min-width: 0;
  margin: var(--ticker-tape-preview-header-space) var(--ticker-tape-preview-gutter) var(--ticker-tape-preview-header-space) 0;
  padding: clamp(5px, 0.7cqw, 10px) clamp(6px, 0.9cqw, 12px);
  grid-template-columns: minmax(0, auto) minmax(0, auto) max-content;
  gap: clamp(4px, 0.7cqw, 10px);
}

.branding-preview-hero .branding-demo-preview.theme-preset-ticker-tape.event-open:not(.market-crashing) > .cheapest-callout :is(span, strong) {
  overflow-wrap: anywhere;
}

.branding-preview-hero .branding-demo-preview.theme-preset-ticker-tape.event-open:not(.market-crashing) > .price-board {
  grid-area: 3 / 1 / 4 / -1;
  width: auto;
  margin: 0 var(--ticker-tape-preview-gutter);
}

.branding-preview-hero .branding-demo-preview.theme-preset-ticker-tape.event-open:not(.market-crashing) > .price-board.board-density-large > :is(span, strong):not(.category-header) {
  min-height: min(calc(var(--theme-row-height) * 0.9), 5.2cqw);
}

@container ticker-tape-preview (max-width: 560px) {
  .branding-preview-hero .branding-demo-preview.theme-preset-ticker-tape.event-open:not(.market-crashing) > .cheapest-callout {
    grid-template-columns: minmax(0, 1fr) max-content;
    column-gap: 6px;
    row-gap: 2px;
  }

  .branding-preview-hero .branding-demo-preview.theme-preset-ticker-tape.event-open:not(.market-crashing) > .cheapest-callout > span {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .branding-preview-hero .branding-demo-preview.theme-preset-ticker-tape.event-open:not(.market-crashing) > .cheapest-callout > :is(strong, b) {
    grid-row: 2;
  }

  .branding-preview-hero .branding-demo-preview.theme-preset-ticker-tape.event-open:not(.market-crashing) > .price-board > :is(span, strong) {
    min-height: 4cqw;
    padding-block: 2px;
    font-size: clamp(8px, 2.2cqw, 13px);
  }

  .branding-preview-hero .branding-demo-preview.theme-preset-ticker-tape.event-open:not(.market-crashing) > .price-board.board-density-large > :is(span, strong):not(.category-header) {
    min-height: 4cqw;
  }

  .branding-preview-hero .branding-demo-preview.theme-preset-ticker-tape.event-open:not(.market-crashing) > .price-board > .category-header {
    min-height: 3.2cqw;
    font-size: clamp(8px, 1.6cqw, 11px);
  }
}