:root{
  --mx-feed-red:#ff3d5e;
  --mx-feed-orange:#ff9800;
  --mx-feed-deep:#e50914;
  --mx-feed-bg:#0b0c0f;
  --mx-feed-card:#16161a;
  --mx-feed-text:#e1e3e5;
  --mx-feed-muted:rgba(225,227,229,.72);
  --mx-feed-top-inset:0px;
  --mx-feed-bottom-inset:0px;
  --mx-feed-visible-height:100dvh;
}
.mx-feed-html,
.mx-feed-body{
  height:100%;
  overflow:hidden;
}
.mx-feed-page{
  height:100vh;
  height:100dvh;
  overflow:hidden;
  background:#0b0c0f;
  color:var(--mx-feed-text);
}
.mx-feed-page .main{
  margin:0!important;
  padding:0!important;
  height:100vh;
  height:100dvh;
  overflow:hidden;
}
.mx-feed-page .main>.content{
  width:100%!important;
  max-width:none!important;
  padding:0!important;
}
.mx-feed-page .fixedGroup,
.mx-feed-page .shortcuts-mobile-overlay{
  display:none!important;
}
.mx-feed-wrap{
  position:relative;
  height:100vh;
  height:var(--mx-feed-visible-height);
  margin-top:var(--mx-feed-top-inset);
  overflow:hidden;
  background:
    radial-gradient(circle at 18% 12%, rgba(255,61,94,.18), transparent 28%),
    radial-gradient(circle at 82% 10%, rgba(255,152,0,.12), transparent 24%),
    #0b0c0f;
}
.mx-feed-wrap::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:url("../images/app-bg.png") center/cover no-repeat;
  opacity:.07;
}
.mx-feed-stage{
  position:relative;
  z-index:1;
  width:min(100vw,430px);
  height:100%;
  margin:0 auto;
  overflow:hidden;
  background:var(--mx-feed-card);
  box-shadow:0 28px 90px rgba(0,0,0,.62);
  isolation:isolate;
}
.mx-feed-list{
  height:100%;
  overflow-x:hidden;
  overflow-y:auto;
  scroll-behavior:smooth;
  scroll-snap-type:y mandatory;
  scrollbar-width:none;
}
.mx-feed-list::-webkit-scrollbar{display:none;}
.mx-feed-scene{
  position:relative;
  height:100%;
  min-height:100%;
  overflow:hidden;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  background:#0b0c0f;
}
.mx-feed-media{
  position:absolute;
  inset:-2%;
  z-index:0;
  height:auto!important;
  background-image:var(--poster);
  background-position:center;
  background-size:cover;
  filter:saturate(1.08) contrast(1.02) brightness(1);
  transform:scale(1.055);
  transition:transform .8s ease,filter .45s ease;
}
.mx-feed-artplayer-frame{
  position:absolute;
  inset:0;
  z-index:2;
  width:100%;
  height:100%!important;
  border:0;
  opacity:0;
  pointer-events:none;
  background:#0b0c0f;
  transition:opacity .28s ease;
}
.mx-feed-scene.is-preview-ready .mx-feed-artplayer-frame{
  opacity:1;
}
.mx-feed-scene.is-preview-loading .mx-feed-artplayer-frame{
  opacity:0;
}
.mx-feed-state{
  position:absolute;
  left:50%;
  top:50%;
  z-index:5;
  display:none;
  min-width:132px;
  max-width:72%;
  padding:9px 13px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  color:#fff;
  background:rgba(0,0,0,.42);
  box-shadow:0 10px 28px rgba(0,0,0,.28);
  font-size:13px;
  font-weight:700;
  line-height:1.35;
  text-align:center;
  transform:translate(-50%,-50%);
  backdrop-filter:blur(12px);
}
.mx-feed-scene.is-preview-loading .mx-feed-state,
.mx-feed-scene.is-preview-error .mx-feed-state{
  display:block;
}
.mx-feed-scene.is-source-loading-soft .mx-feed-state{
  min-width:0;
  padding:7px 11px;
  border-color:rgba(255,255,255,.12);
  background:rgba(0,0,0,.26);
  box-shadow:none;
  font-size:12px;
  opacity:.76;
}
.mx-feed-scene.is-source-loading-strong .mx-feed-state{
  opacity:1;
}
.mx-feed-scene.is-preview-error .mx-feed-state{
  border-color:rgba(255,196,87,.38);
  color:#ffe2a8;
  background:rgba(42,24,5,.52);
}
.mx-feed-scene.is-active .mx-feed-media{
  animation:mxFeedDrift 15s ease-in-out infinite alternate;
  filter:saturate(1.12) contrast(1.04) brightness(1);
}
.mx-feed-scene.is-paused .mx-feed-media{
  animation-play-state:paused;
  filter:saturate(.86) contrast(1.02) brightness(.82);
}
.mx-feed-sound-prompt{
  position:absolute;
  right:18px;
  top:calc(70px + env(safe-area-inset-top));
  z-index:3600;
  display:none;
  align-items:center;
  justify-content:center;
  gap:7px;
  height:38px;
  min-width:38px;
  padding:0 12px;
  border:1px solid rgba(255,255,255,.28);
  border-radius:999px;
  color:#fff;
  background:rgba(0,0,0,.54);
  box-shadow:0 12px 34px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.18);
  cursor:pointer;
  font-size:13px;
  font-weight:800;
  line-height:1;
  text-shadow:0 2px 9px rgba(0,0,0,.7);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.mx-feed-sound-prompt[hidden]{
  display:none!important;
}
.mx-feed-scene.is-active.is-autoplay-blocked .mx-feed-sound-prompt,
.mx-feed-scene.is-active.is-muted-autoplay .mx-feed-sound-prompt{
  display:inline-flex;
}
.mx-feed-scene.is-active.is-muted-autoplay .mx-feed-sound-prompt{
  border-color:rgba(132,255,222,.36);
  background:rgba(6,82,74,.68);
}
.mx-feed-sound-prompt__icon{
  display:inline-flex;
  width:18px;
  height:18px;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}
.mx-feed-sound-prompt__icon svg{
  width:18px;
  height:18px;
  fill:currentColor;
}
.mx-feed-sound-prompt__text{
  white-space:nowrap;
}
.mx-feed-swipe-hint{
  position:absolute;
  left:50%;
  bottom:205px;
  z-index:3400;
  display:grid;
  width:44px;
  height:44px;
  place-items:center;
  border:1px solid rgba(255,255,255,.2);
  border-radius:999px;
  color:rgba(255,255,255,.9);
  background:rgba(4,7,12,.34);
  box-shadow:0 14px 34px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.14);
  opacity:0;
  pointer-events:none;
  transform:translate3d(-50%,16px,0) scale(.96);
  visibility:hidden;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  transition:opacity .28s ease,transform .28s ease,visibility .28s ease;
}
.mx-feed-swipe-hint.is-visible{
  opacity:.78;
  transform:translate3d(-50%,0,0) scale(1);
  visibility:visible;
}
.mx-feed-swipe-hint__icon{
  display:grid;
  width:100%;
  height:100%;
  place-items:center;
  animation:mxFeedSwipeHintIcon 1.2s ease-in-out infinite;
}
.mx-feed-swipe-hint__icon svg{
  width:22px;
  height:22px;
  fill:currentColor;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.55));
}
.mx-feed-glow{
  position:absolute;
  inset:34% auto auto -18%;
  z-index:1;
  width:72%;
  aspect-ratio:1;
  border-radius:999px;
  background:radial-gradient(circle,rgba(255,61,94,.42),transparent 64%);
  filter:blur(12px);
  opacity:.52;
  pointer-events:none;
  animation:mxFeedGlow 7s ease-in-out infinite;
}
.mx-feed-rail{
  position:absolute;
  right:20px;
  bottom:98px;
  z-index:3500;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
  width:auto;
  pointer-events:auto;
}
.mx-feed-action{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:0;
  border:0;
  color:#fff;
  background:none;
  cursor:pointer;
  font-size:13px;
  font-weight:600;
  letter-spacing:.3px;
  text-shadow:0 2px 10px rgba(0,0,0,.7);
  transition:transform .2s ease,color .2s ease;
}
.mx-feed-action:hover{
  color:#5bd9ff;
  transform:translateY(-2px);
}
.mx-feed-action[aria-pressed="true"]{
  color:#f8d57e;
}
.mx-feed-action-icon{
  display:inline-flex;
  width:34px;
  height:34px;
  align-items:center;
  justify-content:center;
  border:0;
  background:transparent;
  box-shadow:none;
  transition:transform .2s ease;
}
.mx-feed-action:hover .mx-feed-action-icon{
  transform:translateY(-2px);
}
.mx-feed-action svg{
  width:30px;
  height:30px;
  fill:currentColor;
  stroke:none;
}
.mx-feed-action-count{
  min-width:42px;
  color:inherit;
  text-align:center;
  font-size:13px;
  font-weight:600;
}
.mx-feed-copy{
  position:absolute;
  left:17px;
  right:86px;
  bottom:28px;
  z-index:3;
  display:grid;
  gap:12px;
  text-shadow:0 2px 14px rgba(0,0,0,.62);
}
.mx-feed-title{
  max-width:100%;
  margin:0;
  overflow:hidden;
  color:#fff;
  font-size:clamp(25px,7vw,34px);
  line-height:1.06;
  letter-spacing:0;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.mx-feed-title a{
  display:block;
  overflow:hidden;
  color:inherit;
  text-decoration:none;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.mx-feed-desc{
  display:-webkit-box;
  max-width:100%;
  margin:0;
  overflow:hidden;
  color:var(--mx-feed-muted);
  font-size:14px;
  line-height:1.58;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}
.mx-feed-ctas{
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
}
.mx-feed-watch{
  position:relative;
  display:inline-flex;
  width:126px;
  height:43px;
  align-items:center;
  justify-content:center;
  gap:7px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.34);
  border-radius:999px;
  color:#fff;
  background:linear-gradient(135deg,var(--mx-feed-orange),var(--mx-feed-deep) 55%,var(--mx-feed-red));
  box-shadow:0 13px 34px rgba(229,9,20,.34),inset 0 1px 0 rgba(255,255,255,.72);
  font-size:14px;
  font-weight:900;
  text-decoration:none;
  white-space:nowrap;
}
.mx-feed-watch::before{
  content:"";
  position:absolute;
  inset:-40% auto -40% -74%;
  width:56%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.74),transparent);
  transform:skewX(-18deg);
  animation:mxFeedShine 2.8s ease-in-out infinite;
}
.mx-feed-watch span,
.mx-feed-watch svg{position:relative;z-index:1;}
.mx-feed-watch svg{
  width:15px;
  height:15px;
  fill:currentColor;
}
.mx-feed-playmark{
  position:absolute;
  left:50%;
  top:50%;
  z-index:4;
  display:none;
  width:78px;
  height:78px;
  place-items:center;
  border:1px solid rgba(255,255,255,.2);
  border-radius:999px;
  color:#fff;
  background:rgba(3,7,12,.34);
  opacity:0;
  pointer-events:none;
  transform:translate(-50%,-50%) scale(.78);
  transition:opacity .22s ease,transform .22s ease;
  backdrop-filter:blur(18px);
}
.mx-feed-playmark svg{
  width:31px;
  height:31px;
  fill:currentColor;
}
.mx-feed-scene.is-paused .mx-feed-playmark{
  opacity:0;
  transform:translate(-50%,-50%) scale(1);
}
.mx-feed-progress{
  position:absolute;
  left:12px;
  right:12px;
  bottom:8px;
  z-index:6;
  height:2px;
  overflow:hidden;
  border-radius:99px;
  background:rgba(255,255,255,.17);
}
.mx-feed-progress span{
  display:block;
  width:0;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--mx-feed-orange),var(--mx-feed-deep));
  transition:width .16s linear;
}
.mx-feed-index{
  position:absolute;
  left:13px;
  top:50%;
  z-index:4;
  display:none;
  gap:7px;
  transform:translateY(-50%);
}
.mx-feed-dot{
  width:3px;
  height:18px;
  border-radius:99px;
  background:rgba(255,255,255,.22);
  transition:height .25s ease,background .25s ease;
}
.mx-feed-dot.active{
  height:34px;
  background:linear-gradient(180deg,var(--mx-feed-orange),var(--mx-feed-deep));
  box-shadow:0 0 14px rgba(255,61,94,.72);
}
.mx-feed-index.is-compact{
  gap:4px;
}
.mx-feed-index.is-compact .mx-feed-dot{
  height:9px;
}
.mx-feed-index.is-compact .mx-feed-dot.active{
  height:18px;
}
body.mx-feed-player-modal-open{
  overflow:hidden;
}
.mx-feed-player-modal{
  position:fixed;
  inset:0;
  z-index:10090;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(4,6,10,.72);
  backdrop-filter:blur(16px) saturate(115%);
  -webkit-backdrop-filter:blur(16px) saturate(115%);
}
.mx-feed-player-modal.is-active{
  display:flex;
}
.mx-feed-player-modal__panel{
  position:relative;
  width:min(430px,calc(100vw - 32px));
  height:min(78vh,680px);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  border-radius:16px;
  background:#08090c;
  box-shadow:0 28px 90px rgba(0,0,0,.6);
}
.mx-feed-player-modal__frame{
  display:block;
  width:100%;
  height:100%;
  border:0;
  background:#08090c;
}
.mx-feed-player-modal__close{
  position:absolute;
  right:12px;
  top:12px;
  z-index:2;
  display:grid;
  width:34px;
  height:34px;
  place-items:center;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  color:#fff;
  background:rgba(0,0,0,.52);
  cursor:pointer;
  font-size:22px;
  line-height:1;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
@media(max-width:767px){
  .mx-feed-player-modal{
    padding:0;
    align-items:flex-end;
    justify-content:stretch;
  }
  .mx-feed-player-modal__panel{
    width:100vw;
    height:86dvh;
    min-height:520px;
    border:0;
    border-radius:18px 18px 0 0;
  }
  .mx-feed-player-modal__close{
    right:10px;
    top:calc(10px + env(safe-area-inset-top));
  }
}
@media(min-width:560px){
  :root{
    --mx-feed-top-inset:0px!important;
    --mx-feed-bottom-inset:0px!important;
    --mx-feed-visible-height:100dvh!important;
  }
  .mx-feed-page .mxprofoot{display:none!important;}
  .mx-feed-progress{bottom:10px;}
  .mx-feed-copy{bottom:24px;}
  .mx-feed-rail{right:24px;bottom:116px;gap:18px;}
}
@media(max-width:360px){
  .mx-feed-copy{left:14px;right:72px;}
  .mx-feed-rail{right:14px;}
  .mx-feed-watch{width:116px;}
}
@media(max-height:640px){
  .mx-feed-swipe-hint{bottom:180px;}
  .mx-feed-copy{bottom:24px;gap:10px;}
  .mx-feed-rail{bottom:88px;gap:15px;}
}
@media(prefers-reduced-motion:reduce){
  .mx-feed-swipe-hint,
  .mx-feed-swipe-hint__icon{
    animation:none;
    transition:none;
  }
}
@keyframes mxFeedDrift{
  0%{transform:scale(1.055) translate3d(-1.2%,-.8%,0);}
  100%{transform:scale(1.105) translate3d(1.4%,.9%,0);}
}
@keyframes mxFeedGlow{
  50%{transform:translate3d(12%,-9%,0) scale(1.08);opacity:.72;}
}
@keyframes mxFeedShine{
  0%,58%{transform:translateX(0) skewX(-18deg);}
  100%{transform:translateX(360%) skewX(-18deg);}
}
@keyframes mxFeedSwipeHintIcon{
  0%,100%{transform:translate3d(0,5px,0);}
  45%{transform:translate3d(0,-5px,0);}
}