body.tvd-index {
  background: #0b0b0b;
  color: #fff;
  --primary-color: #4a4a4a;
  --primary-hover-color: #666;
  --secondary-color: #fff;
  --tertiary-color: #9a9a9a;
  --background-color: #000;
}

body.tvd-index .background-overlay {
  display: none !important;
}

body.tvd-index .index-page {
  min-height: 100vh;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 6vh 6vw 4vh;
  box-sizing: border-box;
  gap: 3vh;
  position: relative;
  overflow: visible;
}

body.tvd-index .index-main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 3vh;
  text-align: center;
  overflow: visible;
  padding-bottom: 8vh;
}

body.tvd-index .index-main--compact {
  gap: 2vh;
  padding-bottom: 6vh;
  --class-button-padding-y: 18px;
  --class-button-padding-x: 18px;
  --class-button-font-size: 18px;
  --class-button-landscape-width: 200px;
  --class-button-landscape-height: 84px;
  --class-button-portrait-width: 120px;
  --class-button-portrait-height: 150px;
}

body.tvd-index .index-main--compact .display-heading {
  font-size: clamp(22px, 3.6vw, 54px);
}

body.tvd-index .index-main--compact .button-group {
  gap: 2vh 2vw;
}

body.tvd-index .index-main--compact .button-group-divider {
  height: 1.5vh;
}

body.tvd-index .display-heading {
  font-size: clamp(28px, 4.5vw, 72px);
  color: #fff;
  margin: 0;
}

body.tvd-index a,
body.tvd-index h1,
body.tvd-index h2,
body.tvd-index h3,
body.tvd-index h4,
body.tvd-index h5,
body.tvd-index h6 {
  color: #fff;
}

body.tvd-index .button-group {
  flex-wrap: wrap;
  gap: 3vh 3vw;
  margin: 0;
  max-width: 90vw;
}

body.tvd-index .button {
  background-color: #4a4a4a;
  color: #fff;
  box-shadow: none;
}

body.tvd-index .button:hover {
  background-color: #666;
  transform: scale(1.04);
}

body.tvd-index .display-group-button.is-empty {
  background-color: #2f2f2f;
  color: #c2c2c2;
}

body.tvd-index .display-group-button.is-empty:hover {
  background-color: #3a3a3a;
  transform: scale(1.02);
}

body.tvd-index .display-group-count {
  display: block;
  margin-top: 0.8vh;
  font-size: clamp(12px, 1.6vw, 20px);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #b8b8b8;
}

body.tvd-index .button-group-divider {
  height: 3vh;
}

body.tvd-index .admin-button-wrapper {
  top: 3vh;
  right: 3vw;
}

body.tv-like .js-admin-link {
  display: none !important;
}

body.tvd-index .button.admin-button {
  background-color: transparent;
  border-color: #999;
  color: #fff;
}

body.tvd-index .index-empty-state {
  max-width: 70vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2vh;
}

body.tvd-index .index-back-row {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 1vh;
}

body.tvd-index .index-empty-copy {
  margin: 0;
  font-size: clamp(16px, 2.2vw, 28px);
  color: #cfcfcf;
}

body.tvd-index .index-back-button {
  min-width: 220px;
}

body.tvd-index .index-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2vw;
  width: 100%;
  color: #fff;
  font-size: clamp(12px, 1.6vw, 20px);
}

body.tvd-index .index-privacy-link {
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid #666;
  padding-bottom: 2px;
}

body.tvd-index .index-privacy-link:hover {
  border-bottom-color: #fff;
}

body.tvd-index .index-footer-logo img {
  max-height: 12vh;
  max-width: 40vw;
  width: auto;
  height: auto;
  filter: drop-shadow(0 0 10px rgb(255 255 255 / 20%));
}

body.tvd-index .index-footer-logo {
  background: transparent;
  border: 1px solid rgb(255 255 255 / 22%);
  border-radius: 999px;
  padding: 0.1vh 0.3vw;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 10%),
    0 6px 24px rgb(0 0 0 / 35%);
}

body.tvd-index .index-footer-brand {
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}