@font-face {
  font-family: "SquareX ElementX";
  src: url("../fonts/ElementX.ttf") format("truetype");
  font-display: swap;
}
* {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}
body {
  background: #071713;
  color: #fff;
  font-family: Arial, sans-serif;
}
.sqx-tv {
  background: var(--queue-background, #0a2822);
  display: grid;
  grid-template-columns: 30% 70%;
  grid-template-rows: minmax(0, 1fr) 86px;
  height: 100vh;
  width: 100vw;
}
.sqx-tv__queue {
  background: var(--queue-background, #0a2822);
  display: flex;
  flex-direction: column;
  font-family: var(--queue-font, "SquareX ElementX", Arial, sans-serif);
  min-height: 0;
  overflow: hidden;
  padding: var(--queue-padding-top, 20px) var(--queue-padding-right, 20px)
    var(--queue-padding-bottom, 20px) var(--queue-padding-left, 20px);
}
.sqx-tv__logo {
  display: none;
  height: auto;
  max-height: calc(
    100% - var(--logo-top-space, 32px) - var(--logo-bottom-space, 40px)
  );
  max-width: 100%;
  object-fit: contain;
  pointer-events: none;
  position: absolute;
  top: var(--logo-top-space, 32px);
  z-index: 3;
}
.sqx-tv__queue > section + section {
  margin-top: var(--queue-card-gap, 24px);
}
.sqx-tv__queue-card {
  min-height: 0;
  padding: var(--queue-card-padding, 18px);
}
.sqx-tv__queue-card--current {
  background: var(--current-box-background, #0f3a31);
  border-radius: var(--current-radius-tl, 18px) var(--current-radius-tr, 18px)
    var(--current-radius-br, 18px) var(--current-radius-bl, 18px);
}
.sqx-tv__queue-card--next {
  background: var(--next-box-background, #0f3a31);
  border-radius: var(--next-radius-tl, 18px) var(--next-radius-tr, 18px)
    var(--next-radius-br, 18px) var(--next-radius-bl, 18px);
  flex: 1 1 auto;
  overflow: hidden;
}
.sqx-tv__eyebrow {
  color: var(--queue-label-color, #75d9bc);
  display: block;
  font-size: var(--queue-label-size, 28px);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.sqx-tv__current {
  color: var(--queue-current-color, #fff);
  display: block;
  font-size: var(--queue-current-size, 88px);
  line-height: 1.15;
  margin-top: 1vh;
  opacity: 1;
  transition: opacity 350ms ease;
}
.sqx-tv__counter {
  color: var(--queue-counter-color, #b7ccc6);
  font-size: var(--queue-counter-size, 36px);
  opacity: 1;
  transition: opacity 350ms ease;
}
.sqx-tv__current.is-changing,
.sqx-tv__counter.is-changing {
  opacity: 0;
}
.sqx-tv__upcoming {
  display: grid;
  gap: var(--upcoming-item-gap, 16px);
  list-style: none;
  margin: 2vh 0 0;
  padding: 0;
}
.sqx-tv__upcoming li {
  color: var(--queue-upcoming-color, #fff);
  display: grid;
  font-size: var(--queue-upcoming-size, 46px);
  font-weight: 700;
  grid-template-columns: 42% minmax(0, 1fr) auto;
  align-items: baseline;
}
.sqx-tv__upcoming-name,
.sqx-tv__upcoming-staff,
.sqx-tv__upcoming-time {
  white-space: nowrap;
}
.sqx-tv__upcoming-staff {
  color: var(--queue-counter-color, #b7ccc6);
  font-size: var(--upcoming-staff-size, 28px);
  font-weight: 400;
  line-height: 1.15;
  margin-left: var(--upcoming-staff-gap, 4px);
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
}
.sqx-tv__upcoming-time {
  grid-column: 3;
}
.sqx-tv__slides {
  background: #000;
  border-radius: var(--slide-radius-tl, 18px) var(--slide-radius-tr, 18px)
    var(--slide-radius-br, 18px) var(--slide-radius-bl, 18px);
  overflow: hidden;
  position: relative;
  min-height: 0;
}
.sqx-tv__slide-stage {
  inset: 0;
  position: absolute;
}
.sqx-tv__slide {
  height: 100%;
  inset: 0;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  position: absolute;
  transition: opacity 0.7s ease;
  width: 100%;
}
.sqx-tv__slide.is-active {
  opacity: 1;
}
.sqx-tv__empty {
  align-items: center;
  color: #81918d;
  display: flex;
  height: 100%;
  justify-content: center;
}
.sqx-tv__ticker {
  align-items: center;
  background: var(--queue-background, #0a2822);
  display: grid;
  grid-column: 1/-1;
  grid-template-columns: minmax(0, 1fr) auto;
  overflow: hidden;
  position: relative;
  z-index: 5;
}
.sqx-tv__ticker-track {
  font-family: var(--queue-font, "SquareX ElementX", Arial, sans-serif);
  font-size: var(--ticker-font-size, 30px);
  font-weight: 600;
  justify-self: start;
  min-width: 100%;
  white-space: nowrap;
  width: max-content;
  will-change: transform;
}
.sqx-tv__ticker-track.is-running {
  animation: sqx-tv-ticker var(--ticker-duration, 60s) linear 1;
}
.sqx-tv__time {
  background: var(--queue-background, #0a2822);
  display: flex;
  flex-direction: column;
  font-family: var(--queue-font, "SquareX ElementX", Arial, sans-serif);
  gap: 3px;
  height: 100%;
  justify-content: center;
  min-width: 300px;
  padding: 10px 2vw 8px;
  text-align: right;
  position: relative;
  z-index: 2;
}
.sqx-tv__time span {
  color: var(--queue-label-color, #75d9bc);
  font-size: clamp(14px, 1vw, 18px);
  letter-spacing: 0.02em;
  line-height: 1.1;
}
.sqx-tv__time strong {
  color: var(--queue-current-color, #fff);
  font-size: clamp(30px, 2.2vw, 42px);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
}
@keyframes sqx-tv-ticker {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .sqx-tv__queue {
    padding: min(var(--queue-padding-top, 20px), 16px)
      min(var(--queue-padding-right, 20px), 16px)
      min(var(--queue-padding-bottom, 20px), 16px)
      min(var(--queue-padding-left, 20px), 16px);
  }
  .sqx-tv__queue-card {
    padding: min(var(--queue-card-padding, 18px), 16px);
  }
  .sqx-tv__current {
    font-size: clamp(42px, 7vw, var(--queue-current-size, 88px));
  }
  .sqx-tv__upcoming li {
    font-size: clamp(26px, 3.4vw, var(--queue-upcoming-size, 46px));
    grid-template-columns: minmax(0, 44%) minmax(0, 24%) minmax(0, 32%);
  }
  .sqx-tv__upcoming-name,
  .sqx-tv__upcoming-time {
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .sqx-tv__upcoming-staff {
    font-size: clamp(16px, 2.2vw, var(--upcoming-staff-size, 28px));
  }
  .sqx-tv__upcoming-time {
    text-align: right;
  }
  .sqx-tv__time {
    min-width: 210px;
  }
}
@media (max-width: 767px) {
  .sqx-tv {
    display: block;
  }
  .sqx-tv__queue {
    height: 100vh;
    width: 100vw;
  }
  .sqx-tv__slides,
  .sqx-tv__ticker {
    display: none;
  }
}