.sx-video {
  --sx-video-max-width: min(100%, 520px);
  --sx-video-max-height: min(72vh, 640px);
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  max-width: var(--sx-video-max-width);
  margin: 0.55rem auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  box-sizing: border-box;
  overflow-anchor: none;
}

@media (hover: hover) and (pointer: fine) {
  .sx-video {
    --sx-video-max-width: min(560px, 100%);
    --sx-video-max-height: min(80vh, 720px);
  }
}

.journal-list .journal-body .sx-video {
  width: min(100%, 420px);
  max-width: 100%;
  min-width: 0;
  margin-inline: auto;
  --sx-video-max-width: min(100%, 420px);
  --sx-video-max-height: none;
  overflow: hidden;
  box-sizing: border-box;
}

.journal-list .journal-body .sx-video .sx-video__media {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  max-height: none;
  height: auto;
  overflow: hidden;
  box-sizing: border-box;
  background: #0a0c0e;
}

.journal-list .journal-body .sx-video .sx-video__poster,
.journal-list .journal-body .sx-video .sx-video__video {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: auto;
  max-height: none;
  object-fit: contain;
  object-position: center center;
  box-sizing: border-box;
}

/* PC feed: same fixed shell width for every video card */
@media (hover: hover) and (pointer: fine) {
  .journal-list .journal-body .sx-video {
    width: min(100%, 420px);
    max-width: 100%;
    margin-inline: auto;
    --sx-video-max-width: min(100%, 420px);
  }

  .journal-list .journal-body .sx-video .sx-video__media {
    width: 100%;
    min-height: 0;
    max-height: none;
  }

  .journal-list .journal-body .sx-video .sx-video__poster,
  .journal-list .journal-body .sx-video .sx-video__video {
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: none;
    object-fit: contain;
    object-position: center center;
  }
}

.journal-body .sx-video {
  z-index: 2;
}

.journal-body .sx-video .sx-video__media {
  width: 100%;
  min-height: 12rem;
  max-height: none;
  overflow: hidden;
  background: #0a0c0e;
}

.journal-body .sx-video .sx-video__poster,
.journal-body .sx-video .sx-video__video {
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: none;
  object-fit: contain;
  object-position: center center;
  align-self: start;
  justify-self: stretch;
  box-sizing: border-box;
}

.journal-body .sx-video.is-playing {
  z-index: 5;
  position: relative;
}

.sx-video__media {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  max-height: var(--sx-video-max-height);
  min-height: 12rem;
  border: none;
  border-radius: 0;
  background: #0a0c0e;
  overflow: hidden;
  box-sizing: border-box;
}

.sx-video.has-preview .sx-video__media {
  background: transparent;
}

.sx-video__poster,
.sx-video__video {
  grid-area: 1 / 1;
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: var(--sx-video-max-height);
  object-fit: contain;
  margin: 0 auto;
  align-self: center;
  justify-self: center;
  vertical-align: top;
  background: transparent;
}

.sx-video:not(.is-playing) .sx-video__video:not(.use-video-thumb) {
  display: none !important;
  visibility: hidden;
  pointer-events: none;
}

.sx-video:not(.is-playing) .sx-video__poster:not([hidden]) {
  position: relative;
  z-index: 2;
  display: block !important;
  visibility: visible !important;
  opacity: 1;
  min-height: 3rem;
}

.sx-video.is-preview-loading:not(.is-playing) .sx-video__media {
  background: #0a0c0e;
}

.sx-video:not(.is-playing).use-video-thumb .sx-video__video {
  display: block !important;
  visibility: visible;
  pointer-events: none;
}

.sx-video.use-video-thumb:not(.is-playing) .sx-video__poster {
  display: none;
}

.sx-video:not(.is-playing) .sx-video__poster[hidden] {
  display: none;
}

.sx-video.is-playing:not(.is-video-ready) .sx-video__poster {
  display: block !important;
  visibility: visible !important;
  opacity: 1;
  pointer-events: none;
  z-index: 2;
}

.sx-video.is-playing:not(.is-video-ready) .sx-video__video {
  visibility: visible;
  opacity: 1;
  pointer-events: none;
}

.sx-video.is-playing.is-loading:not(.is-video-ready) .sx-video__video {
  visibility: visible;
  opacity: 1;
  pointer-events: none;
}

.sx-video.is-playing.is-loading:not(.is-video-ready) .sx-video__poster {
  display: block !important;
  visibility: visible !important;
  opacity: 1;
  pointer-events: none;
  z-index: 2;
}

.sx-video.is-playing.is-video-ready .sx-video__poster {
  visibility: hidden;
  pointer-events: none;
}

.sx-video.is-playing .sx-video__video {
  display: block !important;
}

.sx-video.is-playing.is-video-ready .sx-video__video {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.journal-list .sx-video.is-playing.is-video-ready .sx-video__video,
.journal-body .sx-video.is-playing.is-video-ready .sx-video__video {
  pointer-events: none;
}

.sx-video__touch-shield {
  display: none;
}

.journal-list .sx-video.is-playing.is-video-ready .sx-video__touch-shield,
.journal-body .sx-video.is-playing.is-video-ready .sx-video__touch-shield {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: auto;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
  background: transparent;
}

.sx-video--pending {
  pointer-events: none;
}

.sx-video--pending .sx-video__play {
  pointer-events: none;
  display: flex;
}

.sx-video.is-playing .sx-video__play {
  display: none !important;
}

.journal-body .sx-video .sx-video__play {
  display: none !important;
}

.journal-body-editor .sx-video .sx-video__play {
  display: flex;
}

.sx-video__controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.45rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.35));
  pointer-events: auto;
}

.sx-video__controls[hidden] {
  display: none !important;
}

.sx-video__toggle {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(238, 250, 255, 0.14);
  cursor: pointer;
}

.sx-video__toggle::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  margin: 0 auto;
  border-style: solid;
  border-width: 0.42rem 0 0.42rem 0.72rem;
  border-color: transparent transparent transparent #eefaff;
}

.sx-video__toggle.is-paused::before {
  margin-left: 0.58rem;
}

.sx-video__toggle:not(.is-paused)::before {
  width: 0.55rem;
  height: 0.72rem;
  margin: 0 auto;
  border: 0;
  background:
    linear-gradient(#eefaff, #eefaff) left center / 0.2rem 100% no-repeat,
    linear-gradient(#eefaff, #eefaff) right center / 0.2rem 100% no-repeat;
}

.sx-video__progress {
  flex: 1 1 auto;
  min-width: 0;
  height: 0.35rem;
  margin: 0;
  accent-color: #7fdcff;
  cursor: pointer;
}

.sx-video__close {
  flex: 0 0 auto;
  width: 1.85rem;
  height: 1.85rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(238, 250, 255, 0.14);
  color: #eefaff;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}

.sx-video__unmute {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: rgba(238, 250, 255, 0.14);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1.15rem 1.15rem;
  cursor: pointer;
}

.sx-video__unmute.is-muted {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23eefaff'%3E%3Cpath d='M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3 3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4 9.91 6.09 12 8.18V4z'/%3E%3C/svg%3E");
}

.sx-video__unmute:not(.is-muted) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23eefaff'%3E%3Cpath d='M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z'/%3E%3C/svg%3E");
  opacity: 0.92;
}

.sx-video__play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.4rem;
  height: 3.4rem;
  padding: 0;
  margin: 0;
  border: 2px solid rgba(238, 250, 255, 0.9);
  border-radius: 50%;
  background: rgba(8, 10, 12, 0.68);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.5);
  transform: translate(-50%, -50%);
  cursor: pointer;
}

.sx-video__play-icon {
  display: block;
  width: 0;
  height: 0;
  margin-left: 0.3rem;
  border-style: solid;
  border-width: 0.6rem 0 0.6rem 1rem;
  border-color: transparent transparent transparent #eefaff;
}

.sx-video.has-error .sx-video__play {
  opacity: 0.75;
}

.sx-video__status {
  position: absolute;
  left: 0.45rem;
  right: 0.45rem;
  bottom: 0.4rem;
  z-index: 5;
  padding: 0.2rem 0.45rem;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.72);
  color: #eefaff;
  font-size: 0.72rem;
  text-align: center;
  pointer-events: none;
}

.journal-list .sx-video.is-playing.is-loading:not(.is-video-ready) .sx-video__media::after,
.journal-body .sx-video.is-playing.is-loading:not(.is-video-ready) .sx-video__media::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 6;
  width: 2.1rem;
  height: 2.1rem;
  margin: -1.05rem 0 0 -1.05rem;
  border: 3px solid rgba(238, 250, 255, 0.22);
  border-top-color: #eefaff;
  border-radius: 50%;
  animation: sx-feed-video-spin 0.75s linear infinite;
  pointer-events: none;
}

@keyframes sx-feed-video-spin {
  to {
    transform: rotate(360deg);
  }
}

.sx-video:not(.has-error):not(.is-loading) .sx-video__status {
  display: none;
}

.journal-list .sx-video,
.journal-body .sx-video {
  touch-action: pan-y;
  -webkit-touch-callout: none;
}

.journal-list .sx-video .sx-video__poster,
.journal-list .sx-video .sx-video__video,
.journal-body .sx-video .sx-video__poster,
.journal-body .sx-video .sx-video__video {
  pointer-events: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.journal-list .sx-video .sx-video__controls,
.journal-body .sx-video .sx-video__controls {
  pointer-events: auto;
  touch-action: manipulation;
}

@media (hover: none), (pointer: coarse) {
  .sx-video {
    -webkit-tap-highlight-color: transparent;
    touch-action: pan-y;
    width: min(100%, 420px);
    max-width: 100%;
    margin-inline: auto;
    box-sizing: border-box;
  }

  .journal-list .journal-body .sx-video,
  .journal-body .sx-video {
    width: min(100%, 420px);
    max-width: 100%;
    margin-inline: auto;
    --sx-video-max-width: min(100%, 420px);
    --sx-video-max-height: none;
  }

  .journal-list .journal-body .sx-video .sx-video__media,
  .journal-body .sx-video .sx-video__media {
    width: 100%;
    max-width: 100%;
    max-height: none;
    background: #0a0c0e;
  }

  .journal-list .journal-body .sx-video .sx-video__poster,
  .journal-list .journal-body .sx-video .sx-video__video,
  .journal-body .sx-video .sx-video__poster,
  .journal-body .sx-video .sx-video__video {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
    object-position: center center;
  }
}