/* The phone's TV tab (static/js/mobile-tv.js).
 *
 * A fun front: a dark set around the picture, the app's primary colour for
 * everything live, big thumb targets. Every colour is a --mtv-* variable the
 * script sets inline on #mtv for light, dark or the owner's page colour
 * (mobile-page-colors.js), so there is no literal page surface here for the
 * page-colour twins to fight. The set itself is always dark: it is a TV.
 *
 * Three ids on every rule: the page's light-theme sweeps ([data-theme] * * *,
 * [class*="bytes"] :not(...)) sit far below (3,1,x). Text also carries
 * -webkit-text-fill-color, which is what paints. No grey fills: surfaces are
 * the page, the dark set, the app colour or a picture.
 */
html body #mtv#mtv#mtv {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1000 !important;
  display: block !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  margin: 0 !important;
  padding: 0 0 calc(env(safe-area-inset-bottom, 0px) + 112px) !important;
  background: var(--mtv-bg, #fff) !important;
  color: var(--mtv-ink, #0a0a0a) !important;
  -webkit-text-fill-color: var(--mtv-ink, #0a0a0a) !important;
  font-family: var(--font-family, -apple-system), -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', sans-serif !important;
  text-align: left !important;
  -webkit-tap-highlight-color: transparent;
}
html body #mtv#mtv#mtv[hidden] { display: none !important; }
html body #mtv#mtv#mtv :where(*) {
  box-sizing: border-box !important;
  font-family: inherit !important;
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
  text-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  letter-spacing: normal;
}
html body #mtv#mtv#mtv :where([hidden]) { display: none !important; }
html body #mtv#mtv#mtv :where(.fas, .fa) {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
}
html body #mtv#mtv#mtv :where(button, a, input) {
  -webkit-appearance: none !important;
  appearance: none !important;
  box-shadow: none !important;
  outline: none;
  margin: 0 !important;
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
}
html body #mtv#mtv#mtv :where(.mtv-live, .mtv-rocker__num, .mtv-chname, .mtv-next, .mtv-osd, .mtv-chip__num, .mtv-soon__head, .mtv-soon__time,
  .mtv-pane__title, .mtv-pane__sub, .mtv-grow__num, .mtv-show__time, .mtv-badge, .mtv-grow__watch) {
  font-family: 'SF Mono', ui-monospace, Menlo, 'JetBrains Mono', monospace !important;
}

/* ------------------------------------------------------- full screen */
/* On TV the app's header and nav step away; they come back with Moments. */
html body:has(#mtv:not([hidden], .is-leaving)) #bottom-nav,
html body:has(#mtv:not([hidden], .is-leaving)) #mobile-app-header,
html body:has(#mtv:not([hidden], .is-leaving)) #pwa-install-banner {
  display: none !important;
}
html body #mtv#mtv#mtv {
  background: #000 !important;
  overflow: hidden !important;
  padding: 0 !important;
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
html body #mtv#mtv#mtv.is-leaving { transform: translateY(100%) !important; pointer-events: none; }
html body #mtv#mtv#mtv .mtv-stage {
  position: absolute !important;
  inset: 0 !important;
  overflow: hidden !important;
  background: #000 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  isolation: isolate;
}
/* No full screen on this browser: the picture turned to fill the phone sideways. */
html body #mtv#mtv#mtv.is-rotated .mtv-stage {
  inset: auto !important;
  top: 50% !important;
  left: 50% !important;
  width: 100vh !important;
  height: 100vw !important;
  width: 100dvh !important;
  transform: translate(-50%, -50%) rotate(90deg) !important;
}
html body #mtv#mtv#mtv .mtv-screen {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  background: #000 !important;
}
html body #mtv#mtv#mtv .mtv-screen video,
html body #mtv#mtv#mtv .mtv-screen iframe {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  object-fit: contain !important;
  background: #000 !important;
  display: block !important;
}
html body #mtv#mtv#mtv .mtv-screen video.is-audio { opacity: 0 !important; pointer-events: none !important; }
html body #mtv#mtv#mtv .mtv-slide,
html body #mtv#mtv#mtv .mtv-audio,
html body #mtv#mtv#mtv .mtv-link {
  position: absolute !important;
  inset: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #000 !important;
}
html body #mtv#mtv#mtv .mtv-slide img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}
html body #mtv#mtv#mtv .mtv-audio__cover {
  width: min(70vw, 70vh) !important;
  aspect-ratio: 1;
  object-fit: cover !important;
  border-radius: 18px !important;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.6) !important;
}
html body #mtv#mtv#mtv .mtv-link__bg,
html body #mtv#mtv#mtv .mtv-link__bg img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
html body #mtv#mtv#mtv .mtv-link__bg::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.8)) !important;
}
html body #mtv#mtv#mtv .mtv-link__body {
  position: absolute !important;
  left: 20px !important;
  right: 84px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}
html body #mtv#mtv#mtv .mtv-link__site { font-size: 12px !important; font-weight: 700 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; opacity: 0.8 !important; }
html body #mtv#mtv#mtv .mtv-link__title {
  font-size: 30px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 4 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
html body #mtv#mtv#mtv .mtv-link.has-embed .mtv-link__body { display: none !important; }
html body #mtv#mtv#mtv .mtv-stage:has(.mtv-link__frame) .mtv-touch { pointer-events: none !important; }
html body #mtv#mtv#mtv .mtv-link__frame { position: absolute !important; inset: 12% 0 !important; width: 100% !important; height: 76% !important; background: #fff !important; }
html body #mtv#mtv#mtv .mtv-gone {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  font-size: 16px !important;
}
html body #mtv#mtv#mtv .mtv-gone span { font-size: 13px !important; opacity: 0.7 !important; }
html body #mtv#mtv#mtv .mtv-flip {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.10) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.35) 0 2px, rgba(255, 255, 255, 0.06) 2px 5px),
    #111 !important;
  animation: mtv-static 0.5s steps(4) both;
}
@keyframes mtv-static {
  0% { opacity: 1; background-position: 0 0, 0 0; }
  50% { opacity: 1; background-position: 0 7px, 11px 0; }
  100% { opacity: 0; background-position: 0 3px, 4px 0; }
}
html body #mtv#mtv#mtv .mtv-touch {
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  touch-action: none !important;
  background: transparent !important;
}
html body #mtv#mtv#mtv .mtv-empty {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: rgba(255, 255, 255, 0.7) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.7) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.2em !important;
}
html body #mtv#mtv#mtv .mtv-osd {
  position: absolute !important;
  top: calc(env(safe-area-inset-top, 0px) + 72px) !important;
  right: max(14px, env(safe-area-inset-right, 0px)) !important;
  z-index: 6 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  max-width: 62vw !important;
  min-height: 36px !important;
  padding: 0 14px 0 6px !important;
  border-radius: 999px !important;
  background: rgba(0, 0, 0, 0.62) !important;
  pointer-events: none !important;
  opacity: 1;
  transition: opacity 0.4s ease !important;
  animation: mtv-osd-in 0.22s ease both;
}
html body #mtv#mtv#mtv .mtv-osd.is-out { opacity: 0 !important; }
@keyframes mtv-osd-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
html body #mtv#mtv#mtv .mtv-osd b {
  flex: none !important;
  padding: 4px 9px !important;
  border-radius: 999px !important;
  background: var(--mtv-hot) !important;
  color: var(--mtv-on-hot) !important;
  -webkit-text-fill-color: var(--mtv-on-hot) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  font-family: 'SF Mono', ui-monospace, Menlo, monospace !important;
}
html body #mtv#mtv#mtv .mtv-osd span { font-size: 14px !important; font-weight: 800 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }

/* ------------------------------------------------ the controls, over it */
html body #mtv#mtv#mtv .mtv-chrome {
  position: absolute !important;
  inset: 0 !important;
  z-index: 4 !important;
  pointer-events: none !important;
  transition: opacity 0.25s ease !important;
}
html body #mtv#mtv#mtv .mtv-chrome > * { pointer-events: auto !important; }
html body #mtv#mtv#mtv.is-idle .mtv-chrome { opacity: 0 !important; }
html body #mtv#mtv#mtv.is-idle .mtv-chrome,
html body #mtv#mtv#mtv.is-idle .mtv-chrome * { pointer-events: none !important; }
html body #mtv#mtv#mtv .mtv-btn {
  position: relative !important;
  flex: none !important;
  width: 48px !important;
  height: 48px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgba(0, 0, 0, 0.42) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 19px !important;
}
html body #mtv#mtv#mtv .mtv-btn[hidden] { display: none !important; }
html body #mtv#mtv#mtv .mtv-btn:active { transform: scale(0.92); }
html body #mtv#mtv#mtv .mtv-top {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: calc(env(safe-area-inset-top, 0px) + 12px) max(14px, env(safe-area-inset-right, 0px)) 40px max(16px, env(safe-area-inset-left, 0px)) !important;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0)) !important;
}
html body #mtv#mtv#mtv .mtv-top__words { display: flex !important; flex-direction: column !important; gap: 5px !important; min-width: 0 !important; padding-top: 4px !important; }
html body #mtv#mtv#mtv .mtv-live {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
}
html body #mtv#mtv#mtv .mtv-live #mtv-mode { color: var(--mtv-hot) !important; -webkit-text-fill-color: var(--mtv-hot) !important; }
html body #mtv#mtv#mtv .mtv-live.is-behind #mtv-mode { color: #fff !important; -webkit-text-fill-color: #fff !important; }
html body #mtv#mtv#mtv .mtv-live #mtv-time { opacity: 0.8 !important; font-weight: 700 !important; }
html body #mtv#mtv#mtv .mtv-dot {
  width: 9px !important;
  height: 9px !important;
  border-radius: 50% !important;
  background: var(--mtv-hot) !important;
  animation: mtv-pulse 1.6s ease-in-out infinite;
}
html body #mtv#mtv#mtv .mtv-live.is-behind .mtv-dot { background: rgba(255, 255, 255, 0.5) !important; animation: none !important; }
@keyframes mtv-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
html body #mtv#mtv#mtv .mtv-chname {
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  opacity: 0.8 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
html body #mtv#mtv#mtv .mtv-close { background: rgba(0, 0, 0, 0.5) !important; font-size: 20px !important; }

html body #mtv#mtv#mtv .mtv-center {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 14px !important;
}
html body #mtv#mtv#mtv .mtv-play {
  width: 76px !important;
  height: 76px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgba(0, 0, 0, 0.5) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 28px !important;
}
html body #mtv#mtv#mtv .mtv-play.is-paused { background: var(--mtv-hot) !important; color: var(--mtv-on-hot) !important; -webkit-text-fill-color: var(--mtv-on-hot) !important; }
html body #mtv#mtv#mtv .mtv-play.is-paused i { margin-left: 5px !important; }
html body #mtv#mtv#mtv .mtv-backlive {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 48px !important;
  padding: 0 18px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #0a0a0a !important;
  -webkit-text-fill-color: #0a0a0a !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  font-family: 'SF Mono', ui-monospace, Menlo, monospace !important;
}
html body #mtv#mtv#mtv .mtv-backlive[hidden] { display: none !important; }

html body #mtv#mtv#mtv .mtv-rail {
  position: absolute !important;
  right: max(10px, env(safe-area-inset-right, 0px)) !important;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 200px) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 10px !important;
}
html body #mtv#mtv#mtv .mtv-rocker {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 2px !important;
  margin-bottom: 8px !important;
}
html body #mtv#mtv#mtv .mtv-rocker__num { display: flex !important; flex-direction: column !important; align-items: center !important; line-height: 1 !important; padding: 2px 0 !important; }
html body #mtv#mtv#mtv .mtv-rocker__num small { font-size: 9px !important; font-weight: 700 !important; letter-spacing: 0.16em !important; opacity: 0.75 !important; }
html body #mtv#mtv#mtv .mtv-rocker__num b { font-size: 24px !important; font-weight: 800 !important; color: var(--mtv-hot) !important; -webkit-text-fill-color: var(--mtv-hot) !important; filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.8)); }
html body #mtv#mtv#mtv .mtv-act.is-on { background: var(--mtv-hot) !important; color: var(--mtv-on-hot) !important; -webkit-text-fill-color: var(--mtv-on-hot) !important; }
html body #mtv#mtv#mtv .mtv-act.is-pop i { animation: mtv-pop 0.4s ease; }
@keyframes mtv-pop { 0% { transform: scale(1); } 40% { transform: scale(1.35) rotate(-8deg); } 100% { transform: scale(1); } }
html body #mtv#mtv#mtv .mtv-badge {
  position: absolute !important;
  top: -5px !important;
  right: -6px !important;
  min-width: 20px !important;
  padding: 2px 5px !important;
  border-radius: 999px !important;
  background: var(--mtv-hot) !important;
  color: var(--mtv-on-hot) !important;
  -webkit-text-fill-color: var(--mtv-on-hot) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  text-align: center !important;
}
html body #mtv#mtv#mtv .mtv-badge[hidden] { display: none !important; }
html body #mtv#mtv#mtv .mtv-act.is-on .mtv-badge { background: #fff !important; color: #0a0a0a !important; -webkit-text-fill-color: #0a0a0a !important; }

html body #mtv#mtv#mtv .mtv-foot {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  padding: 70px max(14px, env(safe-area-inset-right, 0px)) calc(env(safe-area-inset-bottom, 0px) + 14px) max(16px, env(safe-area-inset-left, 0px)) !important;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.55) 55%, rgba(0, 0, 0, 0)) !important;
}
html body #mtv#mtv#mtv .mtv-foot__words { padding-right: 64px !important; }
html body #mtv#mtv#mtv .mtv-title {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  line-height: 1.14 !important;
  letter-spacing: -0.01em !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  overflow-wrap: anywhere !important;
}
html body #mtv#mtv#mtv .mtv-by { margin-top: 4px !important; font-size: 14px !important; font-weight: 800 !important; color: var(--mtv-hot) !important; -webkit-text-fill-color: var(--mtv-hot) !important; }
html body #mtv#mtv#mtv .mtv-next {
  margin-top: 8px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  opacity: 0.72 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
html body #mtv#mtv#mtv .mtv-openlink {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 44px !important;
  margin-top: 10px !important;
  padding: 0 16px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.16) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}
html body #mtv#mtv#mtv .mtv-openlink[hidden] { display: none !important; }
html body #mtv#mtv#mtv .mtv-prog {
  height: 4px !important;
  margin: 14px 0 10px !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  background: rgba(255, 255, 255, 0.24) !important;
}
html body #mtv#mtv#mtv .mtv-prog span {
  display: block !important;
  height: 100% !important;
  width: 0;
  background: var(--mtv-hot) !important;
  border-radius: 4px !important;
  transition: width 0.25s linear;
}
html body #mtv#mtv#mtv .mtv-bar { display: flex !important; align-items: center !important; gap: 10px !important; }
html body #mtv#mtv#mtv .mtv-bar #mtv-full { margin-left: auto !important; }
html body #mtv#mtv#mtv .mtv-skip { display: inline-flex !important; gap: 10px !important; margin-left: auto !important; }
html body #mtv#mtv#mtv .mtv-pill.mtv-pill--round { width: 48px !important; padding: 0 !important; justify-content: center !important; font-size: 16px !important; }
html body #mtv#mtv#mtv .mtv-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 48px !important;
  padding: 0 16px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.16) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}
/* Tap for sound: the app colour, until it is tapped; it stays when the rest fades. */
html body #mtv#mtv#mtv .mtv-soundpill {
  position: absolute !important;
  left: 50% !important;
  top: calc(env(safe-area-inset-top, 0px) + 124px) !important;
  transform: translateX(-50%);
  z-index: 5 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 48px !important;
  padding: 0 20px 0 18px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--mtv-hot) !important;
  color: var(--mtv-on-hot) !important;
  -webkit-text-fill-color: var(--mtv-on-hot) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
  white-space: nowrap !important;
}
html body #mtv#mtv#mtv .mtv-soundpill[hidden] { display: none !important; }
html body #mtv#mtv#mtv .mtv-soundpill { transition: opacity 400ms ease !important; }
html body #mtv#mtv#mtv .mtv-soundpill.is-going { opacity: 0 !important; pointer-events: none !important; }
html body #mtv#mtv#mtv .mtv-soundpill i { font-size: 16px !important; }

/* Sideways: the rail runs shorter and the words sit lower. */
@media (orientation: landscape) and (max-height: 540px) {
  html body #mtv#mtv#mtv .mtv-rail { bottom: auto !important; top: 50% !important; transform: translateY(-50%) !important; gap: 6px !important; }
  html body #mtv#mtv#mtv .mtv-rocker { flex-direction: row !important; gap: 4px !important; margin: 0 0 4px !important; }
  html body #mtv#mtv#mtv .mtv-foot { padding-top: 40px !important; }
  html body #mtv#mtv#mtv .mtv-title { font-size: 19px !important; -webkit-line-clamp: 1 !important; }
  html body #mtv#mtv#mtv .mtv-soundpill { top: 16px !important; }
  html body #mtv#mtv#mtv .mtv-osd { top: 68px !important; }
}

/* ---------------------------------------------------- the channels sheet */
html body #mtv#mtv#mtv .mtv-chips {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  padding: 2px 12px 4px !important;
}
html body #mtv#mtv#mtv .mtv-chip {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
  min-height: 60px !important;
  padding: 7px 10px 7px 7px !important;
  border: 1.5px solid var(--mtv-line) !important;
  border-radius: 18px !important;
  background: transparent !important;
  color: var(--mtv-ink) !important;
  -webkit-text-fill-color: var(--mtv-ink) !important;
  text-align: left !important;
}
html body #mtv#mtv#mtv .mtv-chip.is-on {
  background: var(--mtv-brand) !important;
  border-color: var(--mtv-brand) !important;
  color: var(--mtv-on-brand) !important;
  -webkit-text-fill-color: var(--mtv-on-brand) !important;
}
html body #mtv#mtv#mtv .mtv-chip__num {
  flex: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 44px !important;
  height: 44px !important;
  padding: 0 6px !important;
  border-radius: 13px !important;
  background: var(--mtv-set) !important;
  color: var(--mtv-hot) !important;
  -webkit-text-fill-color: var(--mtv-hot) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
}
html body #mtv#mtv#mtv .mtv-chip__words { display: flex !important; flex-direction: column !important; min-width: 0 !important; gap: 2px !important; }
html body #mtv#mtv#mtv .mtv-chip__name { font-size: 14px !important; font-weight: 800 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
html body #mtv#mtv#mtv .mtv-chip__n { font-size: 11px !important; font-weight: 600 !important; opacity: 0.66 !important; white-space: nowrap !important; }
html body #mtv#mtv#mtv .mtv-chip__n.is-live { opacity: 1 !important; font-weight: 800 !important; }
html body #mtv#mtv#mtv .mtv-drop {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: calc(100% - 24px) !important;
  min-height: 54px !important;
  margin: 12px 12px 0 !important;
  padding: 0 18px !important;
  border: 0 !important;
  border-radius: 18px !important;
  background: var(--mtv-brand) !important;
  color: var(--mtv-on-brand) !important;
  -webkit-text-fill-color: var(--mtv-on-brand) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
}
html body #mtv#mtv#mtv .mtv-drop[hidden] { display: none !important; }
html body #mtv#mtv#mtv .mtv-drop span { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
html body #mtv#mtv#mtv .mtv-soon { padding: 20px 12px 0 !important; }
html body #mtv#mtv#mtv .mtv-soon__head {
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  color: var(--mtv-mute) !important;
  -webkit-text-fill-color: var(--mtv-mute) !important;
  padding: 0 4px 6px !important;
}
html body #mtv#mtv#mtv .mtv-soon__row {
  display: grid !important;
  grid-template-columns: 70px 72px 1fr !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  min-height: 60px !important;
  padding: 6px 4px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--mtv-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  text-align: left !important;
}
html body #mtv#mtv#mtv .mtv-soon__time { font-size: 13px !important; font-weight: 800 !important; }
html body #mtv#mtv#mtv .mtv-soon__thumb { width: 72px !important; height: 42px !important; }
html body #mtv#mtv#mtv .mtv-soon__title { font-size: 14px !important; font-weight: 700 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }

html body #mtv#mtv#mtv .mtv-hint {
  position: fixed !important;
  left: 50% !important;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 170px) !important;
  z-index: 20 !important;
  transform: translate(-50%, 12px) !important;
  max-width: calc(100% - 48px) !important;
  padding: 11px 18px !important;
  border-radius: 999px !important;
  background: var(--mtv-set) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.2s ease, transform 0.2s ease !important;
}
html body #mtv#mtv#mtv .mtv-hint.is-up { opacity: 1 !important; transform: translate(-50%, 0) !important; }

/* ---------------------------------------------------------------- sheets */
html body #mtv#mtv#mtv .mtv-scrim {
  position: fixed !important;
  inset: 0 !important;
  z-index: 30 !important;
  background: rgba(0, 0, 0, 0.5) !important;
  animation: mtv-fade 0.2s ease both;
}
html body #mtv#mtv#mtv .mtv-scrim[hidden] { display: none !important; }
@keyframes mtv-fade { from { opacity: 0; } to { opacity: 1; } }
html body #mtv#mtv#mtv .mtv-pane {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 31 !important;
  display: flex !important;
  flex-direction: column !important;
  max-height: 80vh !important;
  max-height: 80dvh !important;
  padding: 0 0 env(safe-area-inset-bottom, 0px) !important;
  border-radius: 26px 26px 0 0 !important;
  background: var(--mtv-bg) !important;
  color: var(--mtv-ink) !important;
  -webkit-text-fill-color: var(--mtv-ink) !important;
  box-shadow: 0 -16px 50px rgba(0, 0, 0, 0.35) !important;
  animation: mtv-rise 0.26s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
html body #mtv#mtv#mtv .mtv-pane[hidden] { display: none !important; }
@keyframes mtv-rise { from { transform: translateY(40%); opacity: 0; } to { transform: none; opacity: 1; } }
html body #mtv#mtv#mtv .mtv-pane__grip {
  flex: none !important;
  width: 44px !important;
  height: 5px !important;
  margin: 10px auto 2px !important;
  border-radius: 5px !important;
  background: var(--mtv-line) !important;
}
html body #mtv#mtv#mtv .mtv-pane__head {
  flex: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 6px 12px 10px 18px !important;
}
html body #mtv#mtv#mtv .mtv-pane__title {
  margin: 0 !important; font-family: inherit !important; font-size: 18px !important; font-weight: 750 !important; letter-spacing: normal !important;
}
html body #mtv#mtv#mtv .mtv-pane__sub {
  margin-top: 3px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  color: var(--mtv-mute) !important;
  -webkit-text-fill-color: var(--mtv-mute) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 70vw !important;
}
html body #mtv#mtv#mtv .mtv-pane__x {
  flex: none !important;
  width: 48px !important;
  height: 48px !important;
  padding: 0 !important;
  border: 1.5px solid var(--mtv-line) !important;
  border-radius: 50% !important;
  background: transparent !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
}
html body #mtv#mtv#mtv .mtv-pane__body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 0 0 16px !important;
}

/* The guide: a row per channel, its lineup across. */
html body #mtv#mtv#mtv .mtv-grow { padding: 8px 0 12px !important; border-top: 1px solid var(--mtv-line) !important; }
html body #mtv#mtv#mtv .mtv-grow__head {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  min-height: 52px !important;
  padding: 4px 16px !important;
  border: 0 !important;
  background: transparent !important;
  text-align: left !important;
}
html body #mtv#mtv#mtv .mtv-grow__num {
  min-width: 44px !important;
  height: 36px !important;
  padding: 0 6px !important;
  border-radius: 11px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--mtv-set) !important;
  color: var(--mtv-hot) !important;
  -webkit-text-fill-color: var(--mtv-hot) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}
html body #mtv#mtv#mtv .mtv-grow.is-on .mtv-grow__num { background: var(--mtv-brand) !important; color: var(--mtv-on-brand) !important; -webkit-text-fill-color: var(--mtv-on-brand) !important; }
html body #mtv#mtv#mtv .mtv-grow__name { flex: 1 1 auto !important; min-width: 0 !important; font-size: 17px !important; font-weight: 800 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
html body #mtv#mtv#mtv .mtv-grow__watch { font-size: 12px !important; font-weight: 800 !important; }
html body #mtv#mtv#mtv .mtv-grow__strip {
  display: flex !important;
  gap: 8px !important;
  overflow-x: auto !important;
  padding: 4px 16px 2px !important;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
html body #mtv#mtv#mtv .mtv-grow__strip::-webkit-scrollbar { display: none !important; }
html body #mtv#mtv#mtv .mtv-show {
  flex: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  width: 150px !important;
  min-height: 150px !important;
  padding: 6px !important;
  border: 1.5px solid var(--mtv-line) !important;
  border-radius: 16px !important;
  background: transparent !important;
  text-align: left !important;
}
html body #mtv#mtv#mtv .mtv-show__thumb {
  display: block !important;
  width: 100% !important;
  aspect-ratio: 16 / 9;
  border-radius: 11px !important;
  overflow: hidden !important;
  background: var(--mtv-set) !important;
}
html body #mtv#mtv#mtv .mtv-show__thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; }
html body #mtv#mtv#mtv .mtv-show__time { font-size: 11px !important; font-weight: 800 !important; letter-spacing: 0.04em !important; padding: 0 2px !important; }
html body #mtv#mtv#mtv .mtv-show__title {
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  padding: 0 2px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  overflow-wrap: anywhere !important;
}
html body #mtv#mtv#mtv .mtv-show__from { font-size: 11px !important; opacity: 0.6 !important; padding: 0 2px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
html body #mtv#mtv#mtv .mtv-show.is-now { border-color: var(--mtv-brand) !important; border-width: 2px !important; }
html body #mtv#mtv#mtv .mtv-show.is-tuned {
  background: var(--mtv-brand) !important;
  color: var(--mtv-on-brand) !important;
  -webkit-text-fill-color: var(--mtv-on-brand) !important;
}

/* Comments. */
html body #mtv#mtv#mtv .mtv-talk__list { padding: 4px 16px 12px !important; }
html body #mtv#mtv#mtv .mtv-talk__none {
  margin: 18px 0 !important;
  font-size: 14px !important;
  color: var(--mtv-mute) !important;
  -webkit-text-fill-color: var(--mtv-mute) !important;
}
html body #mtv#mtv#mtv .mtv-msg { display: flex !important; gap: 10px !important; padding: 9px 0 !important; }
html body #mtv#mtv#mtv .mtv-msg img { flex: none !important; width: 34px !important; height: 34px !important; border-radius: 50% !important; object-fit: cover !important; }
html body #mtv#mtv#mtv .mtv-msg__main { min-width: 0 !important; }
html body #mtv#mtv#mtv .mtv-msg__who { font-size: 13px !important; font-weight: 800 !important; }
html body #mtv#mtv#mtv .mtv-msg__text { margin: 2px 0 0 !important; font-size: 15px !important; line-height: 1.35 !important; overflow-wrap: anywhere !important; }
html body #mtv#mtv#mtv .mtv-talk__form {
  flex: none !important;
  display: flex !important;
  gap: 8px !important;
  padding: 10px 12px 12px !important;
  border-top: 1px solid var(--mtv-line) !important;
}
html body #mtv#mtv#mtv .mtv-talk__form[hidden] { display: none !important; }
html body #mtv#mtv#mtv .mtv-talk__form input {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  min-height: 48px !important;
  padding: 0 16px !important;
  border: 1.5px solid var(--mtv-line) !important;
  border-radius: 999px !important;
  background: transparent !important;
  font-size: 16px !important;
  outline: none !important;
}
html body #mtv#mtv#mtv .mtv-talk__form input:focus { border-color: var(--mtv-brand) !important; }
html body #mtv#mtv#mtv .mtv-talk__send,
html body #mtv#mtv#mtv .mtv-talk__login {
  flex: none !important;
  min-height: 48px !important;
  padding: 0 20px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--mtv-brand) !important;
  color: var(--mtv-on-brand) !important;
  -webkit-text-fill-color: var(--mtv-on-brand) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
}
html body #mtv#mtv#mtv .mtv-talk__closed {
  flex: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 12px 16px 14px !important;
  border-top: 1px solid var(--mtv-line) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}
html body #mtv#mtv#mtv .mtv-talk__closed[hidden] { display: none !important; }

/* The owner's ⋯ on the byte on air. */
html body #mtv#mtv#mtv .mtv-pane--menu .mtv-pane__body { padding: 6px 12px 14px !important; }
html body #mtv#mtv#mtv .mtv-menu__item {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 54px !important;
  padding: 0 16px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--mtv-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  text-align: left !important;
}
html body #mtv#mtv#mtv .mtv-menu__item:last-child { border-bottom: 0 !important; }
html body #mtv#mtv#mtv .mtv-menu__item.is-danger { color: #e5484d !important; -webkit-text-fill-color: #e5484d !important; }
html body #mtv#mtv#mtv .mtv-menu__note { margin: 8px 16px 10px !important; font-size: 15px !important; font-weight: 600 !important; line-height: 1.35 !important; }

@media (prefers-reduced-motion: reduce) {
  html body #mtv#mtv#mtv * { animation: none !important; transition: none !important; }
}

/* [hidden] wins over every display rule above. */
html body #mtv#mtv#mtv .mtv-osd[hidden],
html body #mtv#mtv#mtv .mtv-empty[hidden],
html body #mtv#mtv#mtv .mtv-flip[hidden],
html body #mtv#mtv#mtv .mtv-pane[hidden],
html body #mtv#mtv#mtv .mtv-scrim[hidden],
html body #mtv#mtv#mtv .mtv-by[hidden] { display: none !important; }
/* Pills on the picture: outlined, no grey fill. */
html body #mtv#mtv#mtv .mtv-pill,
html body #mtv#mtv#mtv .mtv-openlink {
  background: rgba(0, 0, 0, 0.28) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.5) !important;
}

/* A wide YouTube player on an upright phone: a 16:9 box in the middle, so
   YouTube's own title and logo stay on the picture, clear of our bars. */
@media (orientation: portrait) {
  html body #mtv#mtv#mtv:not(.is-rotated) .mtv-screen iframe.is-yt {
    top: 50% !important;
    bottom: auto !important;
    height: 56.25vw !important;
    transform: translateY(-50%) !important;
  }
}

/* Third-party players stay inside the safe area and under our top bar: their
   own titles and logos must never sit on the clock or the home indicator.
   Files and photos may run edge to edge; embeds may not. */
html body #mtv#mtv#mtv .mtv-screen iframe {
  top: calc(env(safe-area-inset-top, 0px) + 76px) !important;
  bottom: env(safe-area-inset-bottom, 0px) !important;
  left: env(safe-area-inset-left, 0px) !important;
  right: env(safe-area-inset-right, 0px) !important;
  /* An iframe is a replaced element: top and bottom alone do not stretch it. */
  width: calc(100% - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)) !important;
  height: calc(100% - env(safe-area-inset-top, 0px) - 76px - env(safe-area-inset-bottom, 0px)) !important;
}
@media (orientation: portrait) {
  html body #mtv#mtv#mtv:not(.is-rotated) .mtv-screen iframe.is-yt {
    top: 50% !important;
    bottom: auto !important;
    height: 56.25vw !important;
    transform: translateY(-50%) !important;
  }
}
html body #mtv#mtv#mtv .mtv-screen .mtv-link iframe.mtv-link__frame {
  top: calc(env(safe-area-inset-top, 0px) + 76px) !important;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 170px) !important;
  left: env(safe-area-inset-left, 0px) !important;
  right: env(safe-area-inset-right, 0px) !important;
  width: calc(100% - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)) !important;
  height: calc(100% - env(safe-area-inset-top, 0px) - 246px - env(safe-area-inset-bottom, 0px)) !important;
}
html body #mtv#mtv#mtv.is-rotated .mtv-screen iframe { top: 60px !important; bottom: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; height: calc(100% - 60px) !important; }

/* Delete on your own comment: a quiet bin, tap twice to confirm. */
.mtv-msg { position: relative; }
.mtv-msg__options { position: relative; flex: none; margin-inline-start: auto; }
.mtv-msg__options > summary {
    display: grid; place-items: center; width: 44px; height: 44px;
    list-style: none; cursor: pointer; font-size: 20px; line-height: 1;
}
.mtv-msg__options > summary::-webkit-details-marker { display: none; }
.mtv-msg__actions {
    position: absolute; z-index: 4; inset-inline-end: 0; top: 100%;
    min-width: 128px; padding: 4px; border: 1px solid var(--mtv-line, #8885);
    border-radius: 12px; background: var(--mtv-bg, Canvas); color: var(--mtv-ink, CanvasText);
    box-shadow: 0 6px 20px #0002;
}
.mtv-msg__actions button {
    display: block; width: 100%; min-height: 44px; padding: 0 12px;
    text-align: start; border: 0; background: transparent; color: inherit; font: inherit;
}

/* ------------------------------------------------ the channel list */
html body #mtv#mtv#mtv .mtv-clist { display: flex !important; flex-direction: column !important; padding: 10px 0 8px !important; }
html body #mtv#mtv#mtv .mtv-crow {
  display: grid !important;
  grid-template-columns: 24px clamp(104px, 34vw, 148px) minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  min-height: 76px !important;
  padding: 8px 16px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--mtv-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  text-align: left !important;
  position: relative !important;
}
html body #mtv#mtv#mtv .mtv-crow.is-on {
  background: var(--mtv-soft) !important;
  box-shadow: inset 3px 0 0 var(--mtv-brand) !important;
}
html body #mtv#mtv#mtv .mtv-crow__num {
  text-align: center !important;
  color: var(--mtv-mute) !important; -webkit-text-fill-color: currentColor !important;
  font-size: 14px !important; font-weight: 700 !important; font-variant-numeric: tabular-nums;
}
html body #mtv#mtv#mtv .mtv-crow.is-on .mtv-crow__num { color: var(--mtv-ink) !important; }
html body #mtv#mtv#mtv .mtv-crow__still { aspect-ratio: 16 / 9; }
html body #mtv#mtv#mtv .mtv-preview-thumb {
  position: relative !important; display: grid !important; place-items: center !important;
  border-radius: 8px !important; overflow: hidden !important; background: var(--mtv-soft) !important;
  color: var(--mtv-mute) !important;
}
html body #mtv#mtv#mtv .mtv-preview-thumb i { font-size: 18px !important; }
html body #mtv#mtv#mtv .mtv-preview-thumb img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; }
html body #mtv#mtv#mtv .mtv-crow__words { display: flex !important; flex-direction: column !important; gap: 3px !important; min-width: 0 !important; }
html body #mtv#mtv#mtv .mtv-crow__name {
  display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important;
  font-size: 17px !important; line-height: 1.3 !important; font-weight: 700 !important;
  overflow: hidden !important; overflow-wrap: anywhere;
}
html body #mtv#mtv#mtv .mtv-crow__meta {
  color: var(--mtv-mute) !important; -webkit-text-fill-color: var(--mtv-mute) !important;
  font-size: 14px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important;
}

/* ------------------------------------------------ the guide grid */
html body #mtv#mtv#mtv .mtv-pane--full {
  top: 0 !important;
  max-height: none !important;
  height: 100% !important;
  border-radius: 0 !important;
  padding-top: env(safe-area-inset-top, 0px) !important;
}
html body #mtv#mtv#mtv .mtv-pane--full .mtv-pane__grip { display: none !important; }
html body #mtv#mtv#mtv .mtv-gg {
  --guide-columns: minmax(64px, 22%) repeat(2, minmax(0, 1fr));
  min-width: 0;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-x: none;
  padding: 0 !important;
}
html body #mtv#mtv#mtv .mtv-gg__head,
html body #mtv#mtv#mtv .mtv-gg__row {
  display: grid !important;
  grid-template-columns: var(--guide-columns);
  gap: 6px;
  padding: 6px 0;
  border-bottom: 1px solid var(--mtv-line);
}
html body #mtv#mtv#mtv .mtv-gg__head {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--mtv-bg);
  color: var(--mtv-mute);
  font-size: 12px;
  font-weight: 650;
  padding-block: 10px;
}
html body #mtv#mtv#mtv .mtv-gg__head > span { padding-inline: 8px; }
html body #mtv#mtv#mtv .mtv-gg__name,
html body #mtv#mtv#mtv .mtv-gb,
html body #mtv#mtv#mtv .mtv-gg__empty {
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 4px;
  min-width: 0 !important;
  min-height: 64px;
  padding: 8px !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: transparent !important;
  text-align: left !important;
}
html body #mtv#mtv#mtv .mtv-gb { background: var(--mtv-soft) !important; }
html body #mtv#mtv#mtv .mtv-gb.is-now { box-shadow: inset 2px 0 var(--mtv-brand) !important; }
html body #mtv#mtv#mtv .mtv-gg__row.is-on .mtv-gg__name b {
  color: var(--mtv-brand) !important;
  -webkit-text-fill-color: var(--mtv-brand) !important;
}
html body #mtv#mtv#mtv .mtv-gb.is-picked,
html body #mtv#mtv#mtv .mtv-gb:focus-visible,
html body #mtv#mtv#mtv .mtv-gg__name:focus-visible {
  outline: 2px solid var(--mtv-brand) !important;
  outline-offset: -2px !important;
}
html body #mtv#mtv#mtv .mtv-gg__name b,
html body #mtv#mtv#mtv .mtv-gb__time,
html body #mtv#mtv#mtv .mtv-gg__empty {
  font-size: 11px !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums;
  color: var(--mtv-mute) !important;
  -webkit-text-fill-color: var(--mtv-mute) !important;
}
html body #mtv#mtv#mtv .mtv-gg__name span,
html body #mtv#mtv#mtv .mtv-gb__title {
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
  font-size: 13px !important;
  font-weight: 650 !important;
  line-height: 1.2 !important;
}
html body #mtv#mtv#mtv .mtv-gg__detail {
  flex: none !important; display: flex !important; flex-wrap: wrap; align-items: center !important; gap: 8px !important;
  padding: 8px !important;
  border: 0 !important; background: var(--mtv-soft) !important; border-radius: 8px !important;
}
html body #mtv#mtv#mtv .mtv-gg__upcoming {
  flex: 0 0 100%;
  min-width: 0;
  max-height: min(24dvh, 170px);
  overflow: auto;
  margin: 0;
  padding: 0;
  list-style: none;
}
html body #mtv#mtv#mtv .mtv-gg__upcoming li {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 8px;
  padding: 8px;
  border-top: 1px solid var(--mtv-line);
  font-size: 12px;
  overflow-wrap: anywhere;
}
html body #mtv#mtv#mtv .mtv-gg__upcoming li span { color: var(--mtv-mute); }
html body #mtv#mtv#mtv .mtv-gg__detail[hidden] { display: none !important; }
html body #mtv#mtv#mtv .mtv-gg__dthumb { flex: none !important; width: 80px !important; height: 45px !important; border-radius: 8px !important; overflow: hidden !important; background: var(--mtv-set) !important; }
html body #mtv#mtv#mtv .mtv-gg__dthumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; }
html body #mtv#mtv#mtv .mtv-gg__dwords { flex: 1 1 auto !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; gap: 2px !important; }
html body #mtv#mtv#mtv .mtv-gg__dwords b { font-size: 15px !important; font-weight: 800 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
html body #mtv#mtv#mtv .mtv-gg__dwords span { font-size: 12px !important; color: var(--mtv-mute) !important; -webkit-text-fill-color: var(--mtv-mute) !important; }
html body #mtv#mtv#mtv .mtv-gg__dwords em { font-style: normal !important; font-size: 13px !important; font-weight: 800 !important; color: var(--mtv-brand) !important; -webkit-text-fill-color: var(--mtv-brand) !important; }
html body #mtv#mtv#mtv .mtv-gg__dx { flex: none !important; width: 48px !important; height: 48px !important; border: 1.5px solid var(--mtv-line) !important; border-radius: 50% !important; background: transparent !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; }
/* Engagement counts off in Settings used to take the +1 and its bubble
   away. The owner wants the +1 with its bubble always (2026-09-28), so the
   setting no longer hides either; see keep-plus-ones. */

/* The bottom bar with the sound button up (every video and embed) is ~407px
   of controls: on a 390/375 phone ‹ › ran off the right edge and › could not
   be tapped. Tighter spacing, and on a phone-width screen with the sound
   button up Channels and Guide show as icons (their names stay as aria-labels). */
html body #mtv#mtv#mtv .mtv-bar { gap: 8px !important; min-width: 0 !important; }
html body #mtv#mtv#mtv .mtv-bar .mtv-skip { gap: 8px !important; flex: none !important; }
html body #mtv#mtv#mtv .mtv-bar .mtv-pill:not(.mtv-pill--round) { padding: 0 14px !important; flex: 0 1 auto !important; min-width: 0 !important; }
@media (max-width: 419px) {
  html body #mtv#mtv#mtv.has-sound .mtv-bar .mtv-pill:not(.mtv-pill--round) { width: 48px !important; padding: 0 !important; justify-content: center !important; gap: 0 !important; flex: none !important; }
  html body #mtv#mtv#mtv.has-sound .mtv-bar .mtv-pill:not(.mtv-pill--round) > span { display: none !important; }
}

/* The foot (title, next, progress, bar) comes later in the markup and its
   top padding reaches up over the rail: with a two-line title it sat on the
   ⋯ button and took its taps. The rail stays on top; the words keep their
   64px clear of it. */
html body #mtv#mtv#mtv .mtv-rail { z-index: 3 !important; }

/* Engagement off hides the +1 key too (mobile-tv.js sets mtv-no-stats). */
html.mtv-no-stats #mtv-like { display: none !important; }

/* Nothing on this TV yet: the shared empty guide (empty-state.js) sits over
   the touch layer, in place of the centre play and the bottom title. */
html body #mtv#mtv#mtv.is-void .mtv-empty {
  z-index: 5 !important;
  pointer-events: auto !important;
  padding: 0 20px 60px !important;
  letter-spacing: 0 !important;
  font-weight: 400 !important;
  font-size: 15px !important;
}
html body #mtv#mtv#mtv.is-void .mtv-center,
html body #mtv#mtv#mtv.is-void .mtv-title { visibility: hidden !important; }
html body #mtv#mtv#mtv .mtv-empty .nst-es.nst-es {
  --es-ink: #ffffff; --es-dim: rgba(255, 255, 255, 0.7); --es-soft: rgba(255, 255, 255, 0.08);
  --es-line: rgba(255, 255, 255, 0.16); --es-btn: #ffffff; --es-on-btn: #111114; --es-glow: rgba(0, 0, 0, 0.3);
}
/* The page's own sweeps reach in here at id strength: hand the guide its
   colours back from the same height. */
html body #mtv#mtv#mtv .mtv-empty .nst-es__title { color: var(--es-ink) !important; -webkit-text-fill-color: var(--es-ink) !important; }
html body #mtv#mtv#mtv .mtv-empty .nst-es__body { color: var(--es-dim) !important; -webkit-text-fill-color: var(--es-dim) !important; }
html body #mtv#mtv#mtv .mtv-empty .nst-es__icon { color: var(--es-ink) !important; }
html body #mtv#mtv#mtv .mtv-empty .nst-es__btn--primary,
html body #mtv#mtv#mtv .mtv-empty .nst-es__btn--primary * { color: var(--es-on-btn) !important; -webkit-text-fill-color: var(--es-on-btn) !important; }
html body #mtv#mtv#mtv .mtv-empty .nst-es__btn--link,
html body #mtv#mtv#mtv .mtv-empty .nst-es__btn--link * { color: var(--es-dim) !important; -webkit-text-fill-color: var(--es-dim) !important; }
html body #mtv#mtv#mtv .mtv-empty .nst-es__btn--notify,
html body #mtv#mtv#mtv .mtv-empty .nst-es__btn--notify * { color: var(--es-ink) !important; -webkit-text-fill-color: var(--es-ink) !important; }

/* Contained watch page: the picture stays a TV set, while its remote and
   schedule live below it. This is shared by every mobile app. */
html body #mtv#mtv#mtv:not(.is-expanded) {
  overflow-y: auto !important;
  background: var(--mtv-bg, #fff) !important;
  padding: 0 0 calc(env(safe-area-inset-bottom, 0px) + 32px) !important;
}
html body #mtv#mtv#mtv:not(.is-expanded) .mtv-watch-head {
  position: relative !important;
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 18px 14px !important;
  background: var(--mtv-bg, #fff) !important;
}
html body #mtv#mtv#mtv:not(.is-expanded) .mtv-top {
  position: static !important;
  padding: 0 !important;
  align-items: center !important;
  background: none !important;
  color: var(--mtv-ink) !important;
  -webkit-text-fill-color: var(--mtv-ink) !important;
}
html body #mtv#mtv#mtv:not(.is-expanded) .mtv-top__words { padding: 0 !important; }
html body #mtv#mtv#mtv .mtv-watch-heading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 !important;
  padding: 4px 4px 4px 11px;
  border-radius: 10px;
  background: var(--mtv-soft);
  color: var(--mtv-ink);
  font-size: 12px !important;
  line-height: 1.2 !important;
  font-weight: 650 !important;
}
html body #mtv#mtv#mtv .mtv-watch-heading b {
  min-width: 2ch;
  padding: 4px 7px;
  border-radius: 6px;
  background: var(--mtv-bg);
  font-size: 18px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
html body #mtv#mtv#mtv:not(.is-expanded) .mtv-close {
  flex: none !important;
  background: var(--mtv-soft) !important;
  color: var(--mtv-ink) !important;
  -webkit-text-fill-color: var(--mtv-ink) !important;
}
html body #mtv#mtv#mtv:not(.is-expanded) .mtv-stage {
  position: relative !important;
  inset: auto !important;
  width: calc(100% - 16px) !important;
  height: auto !important;
  aspect-ratio: 4 / 3 !important;
  margin: 0 8px !important;
  border-radius: 16px !important;
  transform: none !important;
}
html body #mtv#mtv#mtv:not(.is-expanded) .mtv-watch-body {
  padding: 4px 16px 0 !important;
  color: var(--mtv-ink) !important;
  -webkit-text-fill-color: var(--mtv-ink) !important;
}
html body #mtv#mtv#mtv:not(.is-expanded) .mtv-foot {
  position: static !important;
  padding: 0 !important;
  background: none !important;
}
html body #mtv#mtv#mtv:not(.is-expanded) .mtv-foot__words {
  padding: 0 !important;
  margin-top: 6px !important;
}
html body #mtv#mtv#mtv:not(.is-expanded) .mtv-title { font-size: 22px !important; line-height: 1.2 !important; }
html body #mtv#mtv#mtv:not(.is-expanded) .mtv-by { font-size: 13px !important; font-weight: 500 !important; color: var(--mtv-mute) !important; -webkit-text-fill-color: var(--mtv-mute) !important; }
html body #mtv#mtv#mtv .mtv-next {
  position: absolute !important; z-index: 6 !important; right: 10px !important; bottom: 10px !important;
  max-width: calc(100% - 20px) !important; padding: 8px 10px !important; border-radius: 8px !important;
  background: rgb(0 0 0 / 80%) !important; color: #fff !important; -webkit-text-fill-color: #fff !important;
  font-family: inherit !important; font-size: 12px !important; letter-spacing: 0 !important; opacity: 1 !important; pointer-events: none;
}
html body #mtv#mtv#mtv .mtv-next:empty { display: none !important; }
html body #mtv#mtv#mtv .mtv-status {
  display: flex !important; align-items: center !important; gap: 4px !important;
  min-height: 44px !important; margin: 0 !important;
}
html body #mtv#mtv#mtv .mtv-status .mtv-live {
  flex: none !important; font-family: inherit !important; font-size: 11px !important;
  white-space: nowrap !important; gap: 4px !important; font-variant-numeric: tabular-nums;
}
html body #mtv#mtv#mtv .mtv-status .mtv-live.is-behind #mtv-mode,
html body #mtv#mtv#mtv .mtv-status #mtv-time {
  color: var(--mtv-ink) !important; -webkit-text-fill-color: var(--mtv-ink) !important;
}
html body #mtv#mtv#mtv .mtv-status .mtv-dot { width: 5px !important; height: 5px !important; animation: none; }
html body #mtv#mtv#mtv .mtv-status .mtv-live.is-behind .mtv-dot { background: var(--mtv-mute) !important; }
html body #mtv#mtv#mtv .mtv-back-row .mtv-backlive {
  position: static !important; transform: none !important; min-height: 36px !important; padding: 0 10px !important;
  font: 650 12px system-ui, sans-serif !important; letter-spacing: 0 !important;
  background: var(--mtv-soft) !important; color: var(--mtv-ink) !important; -webkit-text-fill-color: var(--mtv-ink) !important;
}
html body #mtv#mtv#mtv:not(.is-expanded) .mtv-prog {
  flex: 1 !important; min-width: 0 !important; margin: 0 2px !important; background: var(--mtv-line) !important;
}
html body #mtv#mtv#mtv .mtv-status .mtv-btn,
html body #mtv#mtv#mtv .mtv-status .mtv-play,
html body #mtv#mtv#mtv .mtv-watch-body .mtv-rail .mtv-btn:not([hidden]) {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  flex: none !important; width: 44px !important; height: 44px !important; min-height: 44px !important;
  position: relative !important; transform: none !important; padding: 0 !important; border: 0 !important;
  border-radius: 8px !important; background: transparent !important; font-size: 16px !important;
  color: var(--mtv-ink) !important; -webkit-text-fill-color: var(--mtv-ink) !important;
}
html body #mtv#mtv#mtv .mtv-status button:disabled { opacity: .35 !important; }
html body #mtv#mtv#mtv:not(.is-expanded) .mtv-status .mtv-play {
  justify-content: flex-start !important;
}
html body #mtv#mtv#mtv:not(.is-expanded) .mtv-status .mtv-play.is-paused i {
  margin-left: 0 !important;
}
html body #mtv#mtv#mtv .mtv-stage:not(.has-program) + .mtv-watch-body .mtv-foot { display: none !important; }
html body #mtv#mtv#mtv .mtv-watch-body .mtv-rail {
  position: static !important; display: flex !important; flex-direction: row !important;
  justify-content: flex-start !important; align-items: center !important; gap: 4px !important;
  margin: 8px 0 0 !important; transform: none !important;
}
html body #mtv#mtv#mtv .mtv-watch-body .mtv-rail :is(#mtv-like, #mtv-share):not([hidden]) {
  width: auto !important; min-width: 44px !important;
  padding-inline: 12px !important; gap: 6px !important;
  border-radius: 999px !important; background: var(--mtv-soft) !important;
}
html body #mtv#mtv#mtv .mtv-watch-body .mtv-rail :is(#mtv-like, #mtv-share):focus-visible {
  outline: 2px solid var(--mtv-brand);
  outline-offset: 2px;
}
html body #mtv#mtv#mtv .mtv-watch-body .mtv-rocker { display: none !important; }
html body #mtv#mtv#mtv .mtv-watch-body .mtv-rail .mtv-btn.is-on {
  color: var(--mtv-brand) !important; -webkit-text-fill-color: var(--mtv-brand) !important;
}
html body #mtv#mtv#mtv .mtv-watch-body .mtv-badge {
  position: static !important; min-width: 0 !important; padding: 0 !important; margin-left: 4px !important;
  background: none !important; color: inherit !important; -webkit-text-fill-color: currentColor !important;
  font: inherit !important; font-size: 11px !important;
}
html body #mtv#mtv#mtv .mtv-browse {
  display: flex !important; gap: 4px !important; margin-top: 8px !important;
}
html body #mtv#mtv#mtv .mtv-view {
  flex: 1 1 0 !important; min-width: 0 !important; min-height: 44px !important; padding: 0 4px !important;
  border: 0 !important; border-radius: 0 !important;
  background: transparent !important; color: var(--mtv-mute) !important; -webkit-text-fill-color: var(--mtv-mute) !important;
  font: 650 13px system-ui, sans-serif !important; white-space: nowrap !important;
}
html body #mtv#mtv#mtv .mtv-browse .mtv-view[aria-pressed="true"] {
  position: relative; color: var(--mtv-ink) !important; -webkit-text-fill-color: var(--mtv-ink) !important;
}
html body #mtv#mtv#mtv .mtv-browse .mtv-view[aria-pressed="true"]::after {
  content: ""; position: absolute; inset: auto 0 0; margin-inline: auto;
  width: 28px; height: 2px; border-radius: 1px; background: var(--mtv-brand); pointer-events: none;
}
html body #mtv#mtv#mtv .mtv-browse #mtv-talk-btn {
  justify-content: flex-start !important;
  text-align: start !important;
  padding-inline-start: 0 !important;
}
html body #mtv#mtv#mtv .mtv-browse #mtv-talk-btn[aria-pressed="true"]::after {
  inset-inline-end: auto;
  margin-inline: 0;
}
html body #mtv#mtv#mtv .mtv-watch-panel .mtv-pane {
  position: static !important; height: auto !important; max-height: none !important; padding: 0 !important;
  border-radius: 0 !important; box-shadow: none !important; animation: none !important; background: transparent !important;
}
html body #mtv#mtv#mtv .mtv-watch-panel .mtv-pane__head { padding: 14px 0 6px !important; }
html body #mtv#mtv#mtv .mtv-watch-panel .mtv-pane__grip,
html body #mtv#mtv#mtv .mtv-watch-panel .mtv-pane__x,
html body #mtv#mtv#mtv .mtv-watch-body [hidden] { display: none !important; }
html body #mtv#mtv#mtv .mtv-watch-panel .mtv-talk__list,
html body #mtv#mtv#mtv .mtv-watch-panel .mtv-talk__form,
html body #mtv#mtv#mtv .mtv-watch-panel .mtv-talk__closed { padding-inline: 0 !important; }
html body #mtv#mtv#mtv .mtv-watch-panel .mtv-talk__list { padding-top: 12px !important; }
html body #mtv#mtv#mtv .mtv-library { padding-top: 6px !important; }
html body #mtv#mtv#mtv .mtv-watch-panel .mtv-clist { padding-inline: 0 !important; }
html body #mtv#mtv#mtv .mtv-watch-panel .mtv-crow { border-bottom: 0 !important; }
html body #mtv#mtv#mtv .mtv-library .mtv-clist { gap: 4px !important; }
html body #mtv#mtv#mtv .mtv-library .mtv-crow {
  grid-template-columns: 72px minmax(0, 1fr) 24px !important;
  min-height: 80px !important; padding: 4px 0 !important; border-radius: 8px !important;
}
html body #mtv#mtv#mtv .mtv-library .mtv-crow.is-on { box-shadow: none !important; }
html body #mtv#mtv#mtv .mtv-library .mtv-crow__still { aspect-ratio: 1; border-radius: 6px !important; }
html body #mtv#mtv#mtv .mtv-library .mtv-crow__words { gap: 2px !important; }
html body #mtv#mtv#mtv .mtv-library-stats { font-variant-numeric: tabular-nums; }
html body #mtv#mtv#mtv .mtv-library-badge:not([hidden]) {
  display: block;
  color: var(--mtv-ink) !important;
  -webkit-text-fill-color: var(--mtv-ink) !important;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
}
html body #mtv#mtv#mtv .mtv-library-play {
  display: grid !important; place-items: center !important;
  font-size: 14px !important; color: var(--mtv-mute) !important; -webkit-text-fill-color: var(--mtv-mute) !important;
}
html body #mtv#mtv#mtv .mtv-library-more { width: 100% !important; }
html body #mtv#mtv#mtv:not(.is-expanded) .mtv-soundpill { display: none !important; }
html body #mtv#mtv#mtv:not(.is-expanded) .mtv-osd { top: 10px !important; }
html body #mtv#mtv#mtv:not(.is-expanded) .mtv-screen iframe { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; transform: none !important; }
html body #mtv#mtv#mtv:not(.is-expanded) .mtv-screen .mtv-link iframe.mtv-link__frame { inset: 0 !important; width: 100% !important; height: 100% !important; }
html body #mtv#mtv#mtv.is-expanded { background: #000 !important; overflow: hidden !important; padding: 0 !important; }
html body #mtv#mtv#mtv.is-expanded .mtv-stage { position: absolute !important; inset: 0 !important; }
html body #mtv#mtv#mtv.is-expanded .mtv-watch-head {
  position: absolute !important; z-index: 8 !important;
  top: calc(env(safe-area-inset-top, 0px) + 12px) !important;
  right: calc(env(safe-area-inset-right, 0px) + 12px) !important;
}
html body #mtv#mtv#mtv.is-expanded .mtv-top {
  position: static !important; padding: 0 !important; background: none !important;
}
html body #mtv#mtv#mtv.is-expanded .mtv-close {
  width: 44px !important; height: 44px !important; background: rgb(0 0 0 / 72%) !important;
  border: 1px solid rgb(255 255 255 / 30%) !important;
}
html body #mtv#mtv#mtv .mtv-watch-body .mtv-rail #mtv-full-talk,
html body #mtv#mtv#mtv.is-expanded .mtv-top__words,
html body #mtv#mtv#mtv.is-expanded .mtv-watch-body,
html body #mtv#mtv#mtv.is-expanded .mtv-next,
html body #mtv#mtv#mtv.is-expanded .mtv-rocker,
html body #mtv#mtv#mtv.is-expanded #mtv-full,
html body #mtv#mtv#mtv.is-expanded .mtv-stage:not(.has-program) .mtv-foot { display: none !important; }
html body #mtv#mtv#mtv.is-expanded.is-idle .mtv-foot { visibility: hidden !important; }
html body #mtv#mtv#mtv.is-expanded .mtv-foot {
  padding: 24px max(16px, env(safe-area-inset-right, 0px)) calc(env(safe-area-inset-bottom, 0px) + 12px) max(16px, env(safe-area-inset-left, 0px)) !important;
  --mtv-ink: #fff;
  background: linear-gradient(transparent, rgb(0 0 0 / 88%) 55%) !important;
}
html body #mtv#mtv#mtv.is-expanded .mtv-prog { flex: 1 !important; min-width: 0 !important; margin: 0 4px !important; }
html body #mtv#mtv#mtv.is-expanded .mtv-foot__words { padding: 0 !important; margin: 4px 0 !important; }
html body #mtv#mtv#mtv.is-expanded .mtv-title { font-size: 18px !important; font-weight: 650 !important; }
html body #mtv#mtv#mtv.is-expanded .mtv-by { color: #ddd !important; -webkit-text-fill-color: #ddd !important; font-size: 12px !important; }
html body #mtv#mtv#mtv.is-expanded .mtv-rail {
  position: static !important; transform: none !important; margin: 0 !important;
  flex-direction: row !important; gap: 8px !important;
}
html body #mtv#mtv#mtv.is-expanded .mtv-rail .mtv-btn {
  width: 44px !important; height: 44px !important; font-size: 16px !important;
}

html body #mtv#mtv#mtv .mtv-msg__stamp {
    margin-inline-start: 8px;
    padding: 3px 7px;
    border: 1px solid currentColor;
    border-radius: 999px;
    color: inherit;
    background: transparent;
    font: inherit;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}