html body.cruise-tv-mode #cruise-progress {
  --cp-track: rgba(32, 93, 111, .18);
  --cp-track-border: rgba(51, 105, 117, .36);
  --cp-upcoming: #ffb951;
  --cp-passed: var(--ce-success, #43b978);
  --cp-current: var(--ce-accent, #159bd3);
  isolation: isolate;
  overflow: visible !important;
  padding: 8px 16px 10px !important;
  backdrop-filter: blur(14px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.08) !important;
}

html body.cruise-tv-mode #cruise-progress .cp-meta {
  position: relative !important;
  z-index: 8 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  min-height: 21px !important;
  margin: 0 0 6px !important;
  gap: 12px !important;
  color: var(--ce-widget-muted, var(--ce-muted, #708078)) !important;
}

html body.cruise-tv-mode #cruise-progress .cp-title {
  position: static !important;
  display: block !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  transform: none !important;
  color: var(--ce-widget-text, var(--ce-text, #244f59)) !important;
  font-family: var(--ce-display-font, Georgia, serif) !important;
  font-size: clamp(12px, .82vw, 16px) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: .045em !important;
  text-align: left !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  opacity: 1 !important;
}

html body.cruise-tv-mode #cruise-progress .cp-pct {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 52px !important;
  height: 25px !important;
  padding: 0 9px !important;
  border: 1px solid color-mix(in srgb, var(--ce-widget-accent, #159bd3) 38%, transparent) !important;
  border-radius: 999px !important;
  color: var(--ce-widget-text, var(--ce-text, #244f59)) !important;
  background: color-mix(in srgb, var(--ce-widget-accent, #159bd3) 13%, transparent) !important;
  font-size: clamp(11px, .72vw, 14px) !important;
  font-weight: 900 !important;
  font-variant-numeric: tabular-nums !important;
  line-height: 1 !important;
  opacity: 1 !important;
}

html body.cruise-tv-mode #cruise-progress .cp-wrap {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 12px !important;
  min-height: 12px !important;
  margin: 0 !important;
  overflow: visible !important;
  border: 1px solid var(--cp-track-border) !important;
  border-radius: 999px !important;
  background: var(--cp-track) !important;
  box-shadow: inset 0 2px 5px rgba(25, 72, 83, .14), 0 1px 0 rgba(255, 255, 255, .6) !important;
}

html body.cruise-tv-mode #cruise-progress .cp-bar {
  position: absolute !important;
  z-index: 2 !important;
  inset: 0 auto 0 0 !important;
  height: 100% !important;
  min-width: 0 !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, var(--ce-widget-accent, #159bd3), var(--ce-accent-2, #20bfae)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), 0 0 14px color-mix(in srgb, var(--ce-widget-accent, #159bd3) 36%, transparent) !important;
  transition: width .72s cubic-bezier(.22, 1, .36, 1) !important;
}

html body.cruise-tv-mode #cruise-progress .cp-track,
html body.cruise-tv-mode #cruise-progress .cp-dots {
  position: absolute !important;
  inset: 0 !important;
  overflow: visible !important;
  pointer-events: none !important;
}

html body.cruise-tv-mode #cruise-progress .cp-track { z-index: 1 !important; }
html body.cruise-tv-mode #cruise-progress .cp-dots { z-index: 4 !important; }

html body.cruise-tv-mode #cruise-progress .cp-dot {
  position: absolute !important;
  top: 50% !important;
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translate(-50%, -50%) !important;
  border: 3px solid rgba(255, 255, 255, .98) !important;
  border-radius: 50% !important;
  outline: 1px solid rgba(44, 79, 82, .18) !important;
  background: linear-gradient(180deg, #ffd078, var(--cp-upcoming)) !important;
  box-shadow: 0 3px 9px rgba(39, 71, 75, .26), 0 0 0 3px rgba(255, 185, 81, .18) !important;
  transition: transform .25s ease, background .25s ease, box-shadow .25s ease !important;
}

html body.cruise-tv-mode #cruise-progress .cp-dot::after {
  content: "" !important;
  position: absolute !important;
  inset: 50% auto auto 50% !important;
  width: 4px !important;
  height: 4px !important;
  transform: translate(-50%, -50%) !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgba(90, 70, 37, .56) !important;
}

html body.cruise-tv-mode #cruise-progress .cp-dot.passed {
  background: linear-gradient(180deg, #67d49a, var(--cp-passed)) !important;
  box-shadow: 0 3px 9px rgba(39, 71, 75, .24), 0 0 0 3px rgba(67, 185, 120, .18) !important;
}

html body.cruise-tv-mode #cruise-progress .cp-dot.passed::after {
  content: "✓" !important;
  inset: 50% auto auto 50% !important;
  width: auto !important;
  height: auto !important;
  color: #fff !important;
  background: transparent !important;
  font: 900 10px/1 Inter, system-ui, sans-serif !important;
  text-shadow: 0 1px 2px rgba(26, 82, 54, .45) !important;
}

html body.cruise-tv-mode #cruise-progress .cp-dot.current {
  z-index: 7 !important;
  transform: translate(-50%, -50%) scale(1.13) !important;
  background: linear-gradient(180deg, #52bceb, var(--cp-current)) !important;
  box-shadow: 0 4px 13px rgba(19, 99, 132, .34), 0 0 0 5px rgba(21, 155, 211, .18) !important;
}

html body.cruise-tv-mode #cruise-progress .cp-dot.current::after {
  content: "" !important;
  width: 5px !important;
  height: 5px !important;
  background: #fff !important;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .28) !important;
}

html body.cruise-tv-mode #cruise-progress .cp-stop-label {
  position: absolute !important;
  left: 50% !important;
  bottom: 22px !important;
  top: auto !important;
  display: block !important;
  max-width: min(160px, 14vw) !important;
  padding: 3px 7px !important;
  overflow: hidden !important;
  transform: translateX(-50%) !important;
  border: 1px solid color-mix(in srgb, var(--ce-widget-border, #557568) 68%, transparent) !important;
  border-radius: 999px !important;
  color: var(--ce-widget-text, var(--ce-text, #244f59)) !important;
  background: color-mix(in srgb, var(--ce-widget-bg, #fff9e9) 96%, transparent) !important;
  box-shadow: 0 4px 12px rgba(35, 62, 55, .13) !important;
  font-family: var(--ce-body-font, Inter, system-ui, sans-serif) !important;
  font-size: clamp(8px, .52vw, 10px) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: .04em !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  opacity: 1 !important;
}

html body.cruise-tv-mode #cruise-progress .cp-dot.cp-edge-start .cp-stop-label {
  left: -7px !important;
  transform: none !important;
  text-align: left !important;
}

html body.cruise-tv-mode #cruise-progress .cp-dot.cp-edge-end .cp-stop-label {
  right: -7px !important;
  left: auto !important;
  transform: none !important;
  text-align: right !important;
}

html body.cruise-tv-mode #cruise-progress .cp-cursor {
  position: absolute !important;
  z-index: 6 !important;
  top: 50% !important;
  display: flex !important;
  align-items: center !important;
  width: 34px !important;
  height: 34px !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
  pointer-events: none !important;
  transition: left .72s cubic-bezier(.22, 1, .36, 1) !important;
}

html body.cruise-tv-mode #cruise-progress .cp-vessel {
  position: relative !important;
  z-index: 2 !important;
  display: grid !important;
  place-items: center !important;
  width: 31px !important;
  height: 31px !important;
  border: 3px solid #fff !important;
  border-radius: 50% !important;
  color: #fff !important;
  background: linear-gradient(145deg, var(--ce-cheerful, #ffad5d), var(--ce-widget-accent, #159bd3)) !important;
  box-shadow: 0 4px 14px rgba(28, 83, 96, .34), 0 0 0 4px rgba(255, 255, 255, .25) !important;
  animation: ce-progress-boat 2.4s ease-in-out infinite !important;
}

html body.cruise-tv-mode #cruise-progress .cp-vessel svg {
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  overflow: visible !important;
  fill: currentColor !important;
}

html body.cruise-tv-mode #cruise-progress .cp-wake {
  position: absolute !important;
  z-index: 1 !important;
  right: 22px !important;
  top: 50% !important;
  width: 28px !important;
  height: 7px !important;
  transform: translateY(-50%) !important;
  border-top: 2px solid rgba(21, 155, 211, .42) !important;
  border-bottom: 2px solid rgba(32, 191, 174, .28) !important;
  border-radius: 50% !important;
  animation: ce-progress-wake 1.7s ease-in-out infinite !important;
}

html body.cruise-tv-mode #cruise-progress[data-progress-demo="1"]::after {
  content: "DEMO" !important;
  position: absolute !important;
  z-index: 9 !important;
  top: 7px !important;
  right: 77px !important;
  padding: 2px 6px !important;
  border-radius: 999px !important;
  color: #fff !important;
  background: var(--ce-cheerful, #ffad5d) !important;
  font: 900 8px/1 Inter, system-ui, sans-serif !important;
  letter-spacing: .08em !important;
}

html body.cruise-tv-mode #cruise-progress[data-progress-state="empty"] .cp-dots,
html body.cruise-tv-mode #cruise-progress[data-progress-state="empty"] .cp-cursor {
  display: none !important;
}

html body.cruise-tv-mode #cruise-progress.cp-stale .cp-wrap::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 8 !important;
  border-radius: inherit !important;
  background: repeating-linear-gradient(135deg, transparent 0 9px, rgba(255, 173, 93, .14) 9px 18px) !important;
  pointer-events: none !important;
}

@keyframes ce-progress-boat {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-2px) rotate(1deg); }
}

@keyframes ce-progress-wake {
  0%, 100% { opacity: .28; transform: translateY(-50%) scaleX(.75); }
  50% { opacity: .78; transform: translateY(-50%) scaleX(1); }
}

@media (max-width: 1000px) {
  html body.cruise-tv-mode #cruise-progress { padding-inline: 12px !important; }
  html body.cruise-tv-mode #cruise-progress .cp-title { font-size: 11px !important; }
  html body.cruise-tv-mode #cruise-progress .cp-pct { min-width: 42px !important; height: 22px !important; }
  html body.cruise-tv-mode #cruise-progress .cp-stop-label { max-width: 110px !important; font-size: 8px !important; }
}

@media (prefers-reduced-motion: reduce) {
  html body.cruise-tv-mode #cruise-progress .cp-vessel,
  html body.cruise-tv-mode #cruise-progress .cp-wake {
    animation: none !important;
  }
}