.s-features-b {
  --epg-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='592' height='495'%3E%3Crect width='592' height='495' rx='40' fill='%23000'/%3E%3C/svg%3E");
  --flat: linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0));
  background: var(--surface);
  padding-block: 7px 8px;
}

.s-features-b__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 592px;
  height: 701px;
  border-radius: var(--r-xl);
}

.s-features-b__card--manga {
  margin-top: 4px;
  margin-left: 110px;
  background: var(--surface-page);
}

.s-features-b__card--live {
  margin-left: 42px;
  background: var(--surface-page);
}

.s-features-b__card--live::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r-xl);
  background: rgb(0, 0, 0);
}

.s-features-b__title {
  position: relative;
  font-family: var(--serif);
  font-size: 48px;
  font-weight: 600;
  line-height: 44.288px;
  letter-spacing: normal;
  white-space: nowrap;
}

.s-features-b__body {
  position: relative;
  margin-top: 24.71875px;
  font-family: var(--sans);
  font-weight: 400;
}

.s-features-b__card--manga .s-features-b__title {
  margin: 21px 0 0 61px;
  color: var(--ink-strong);
}

.s-features-b__card--manga .s-features-b__body {
  margin-left: 61px;
  width: 420px;
  font-size: 15px;
  line-height: 24.5px;
  color: var(--ink-muted);
}

.s-features-b__card--live .s-features-b__title {
  margin: 496px 0 0 65.9375px;
  color: var(--ink-invert);
}

.s-features-b__card--live .s-features-b__body {
  margin-left: 65.9375px;
  width: 465px;
  font-size: 18px;
  line-height: 27px;
  color: rgb(165, 165, 165);
}

.s-features-b__art {
  position: relative;
  display: grid;
  place-items: center;
  margin: 0 0 0 23px;
  width: 546px;
  height: 482px;
  overflow: hidden;
}

.s-features-b__art-inner {
  width: 545px;
  height: 545px;
}

.s-features-b__art-still {
  width: 100%;
  height: 100%;
}

.s-features-b__art-inner[data-anim="on"] .s-features-b__art-still {
  display: none;
}









.s-features-b__epg {
  position: absolute;
  left: 0;
  top: 0;
  width: 592px;
  height: 495px;
  overflow: hidden;
  border-radius: var(--r-xl);
  mask-image: var(--flat);
}

.s-features-b__epg-line {
  position: absolute;
  left: 296px;
  top: 12px;
  width: 1px;
  height: 472px;
  max-width: none;
}

.s-features-b__row {
  position: absolute;
  left: 0;
  right: 0;
  height: 99.4375px;
}

.s-features-b__row--a { top: 95.125px; }
.s-features-b__row--b { top: 206.5625px; }
.s-features-b__row--c { top: 318px; }

.s-features-b__slot {
  position: absolute;
  top: 0;
  width: 254.015625px;
  height: 99.4375px;
  border-radius: 12px;
  background: var(--surface-panel-soft);
}

.s-features-b__slot--now {
  background: var(--surface-panel);
}

.s-features-b__slot--a1 { left: -57.125px; }
.s-features-b__slot--a2 { left: 208.875px; }
.s-features-b__slot--a3 { left: 474.796875px; }
.s-features-b__slot--b1 { left: -165.0625px; }
.s-features-b__slot--b2 { left: 100.9375px; }
.s-features-b__slot--b3 { left: 367px; width: 529.609375px; }
.s-features-b__slot--c1 { left: -90.671875px; }
.s-features-b__slot--c2 { left: 175.328125px; }
.s-features-b__slot--c3 { left: 441.25px; width: 529.609375px; }

.s-features-b__prog {
  position: absolute;
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 23.92px;
  white-space: nowrap;
  color: var(--ink-invert);
  mask-image: var(--epg-shape);
  mask-position: -225.619px -109.516px;
  mask-size: 592px 495px;
  mask-repeat: no-repeat;
  mask-clip: no-clip;
}

.s-features-b__when {
  position: absolute;
  transform: translateX(-50%);
  font-family: var(--sans);
  font-size: 9.5px;
  font-weight: 400;
  line-height: 29.356px;
  text-align: center;
  white-space: pre;
  color: var(--ink-dim);
}

.s-features-b__pill {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50.3125px;
  height: 20.359375px;
  border-radius: var(--r-pill);
  background: rgb(15, 15, 15);
}

.s-features-b__pill-text {
  width: 21.5625px;
  height: 13.171875px;
  font-family: var(--sans);
  font-size: 9.5px;
  font-weight: 500;
  line-height: normal;
  text-align: center;
  color: rgba(153, 152, 151, 0.5);
  mask-image: var(--flat);
}

.s-features-b__slot--a2 .s-features-b__prog { left: 99.78125px; top: 14.390625px; transform: translateX(-50%); text-align: center; }
.s-features-b__slot--a2 .s-features-b__when { left: 57.78125px; top: 55.125px; }
.s-features-b__slot--a2 .s-features-b__pill { left: 182.046875px; top: 59.921875px; }

.s-features-b__slot--b2 .s-features-b__prog { left: 17.984375px; top: 14.375px; }
.s-features-b__slot--b2 .s-features-b__when { left: 58.984375px; top: 55.125px; }
.s-features-b__slot--b2 .s-features-b__pill { left: 175px; top: 59.90625px; }

.s-features-b__slot--c2 .s-features-b__prog { left: 21.578125px; top: 15.578125px; }
.s-features-b__slot--c2 .s-features-b__when { left: 62.578125px; top: 56.3125px; }
.s-features-b__slot--c2 .s-features-b__pill { left: 183.28125px; top: 61.109375px; }

.s-features-b__playhead {
  position: absolute;
  left: 293px;
  top: 38px;
  width: 5px;
  height: 435px;
  border-radius: 4px;
  background: linear-gradient(to bottom, #ff9537, #d080a6, #7c7ef8, #4977f4);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 7%, #000 93%, transparent 100%);
}

.s-features-b__fade {
  position: absolute;
  width: 86px;
  height: 56px;
}

.s-features-b__fade--top {
  left: 245px;
  top: 36px;
  background: linear-gradient(to bottom, rgb(0, 0, 0), rgba(0, 0, 0, 0));
}

.s-features-b__fade--bottom {
  left: 256px;
  top: 417px;
  background: linear-gradient(to top, rgb(0, 0, 0), rgba(0, 0, 0, 0));
}

@media (max-width: 1439px) {

  .s-features-b__card--manga {
    margin-left: max(calc((100% - 1226px) / 2), 0px);
  }
  .s-features-b__epg-line {
    left: 50%;
  }

  .s-features-b__slot--a1 { left: 0; width: 33.2586%; }
  .s-features-b__slot--a2 { left: 35.2829%; width: 42.908%; }
  .s-features-b__slot--a3 { left: 80.2022%; width: 19.7978%; }
  .s-features-b__slot--b1 { left: 0; width: 15.0232%; }
  .s-features-b__slot--b2 { left: 17.0503%; width: 42.908%; }
  .s-features-b__slot--b3 { left: 61.9932%; width: 38.0068%; }
  .s-features-b__slot--c1 { left: 0; width: 27.5919%; }
  .s-features-b__slot--c2 { left: 29.6162%; width: 42.908%; }
  .s-features-b__slot--c3 { left: 74.5355%; width: 25.4645%; }

  .s-features-b__slot--a1,
  .s-features-b__slot--b1,
  .s-features-b__slot--c1 {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  .s-features-b__slot--a3,
  .s-features-b__slot--b3,
  .s-features-b__slot--c3 {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .s-features-b__when,
  .s-features-b__pill-text {
    font-size: 12px;
  }

  .s-features-b__pill-text {
    width: auto;
    height: auto;
  }

  .s-features-b__playhead {
    left: 50%;
    margin-left: -3px;
  }

  .s-features-b__fade--top {
    left: 50%;
    margin-left: -51px;
  }

  .s-features-b__fade--bottom {
    left: 50%;
    margin-left: -40px;
  }
}

@media (max-width: 1360px) {
  .s-features-b__band {
    display: block;
    padding-inline: var(--gutter);
  }

  .s-features-b__card {
    width: auto;
    max-width: 592px;
    height: auto;
    margin-inline: auto;
  }

  .s-features-b .s-features-b__card {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .s-features-b__card--manga {
    margin-top: 0;
    margin-bottom: 32px;
    padding-bottom: 31px;
  }

  .s-features-b__card--live {
    padding-bottom: 55px;
  }

  .s-features-b__art {
    align-self: stretch;
    margin-inline: 23px;
    width: auto;
    height: auto;
    aspect-ratio: 546 / 432;
    grid-template-columns: minmax(0, 1fr);
  }

  .s-features-b__art-inner {
    width: 100%;
    max-width: 545px;
    height: auto;
    aspect-ratio: 1 / 1;
  }

  .s-features-b__art-still {
    height: auto;
  }



  .s-features-b__epg {
    width: auto;
    right: 0;
  }

  .s-features-b__card--manga .s-features-b__title,
  .s-features-b__card--manga .s-features-b__body {
    margin-inline: 61px;
  }

  .s-features-b__card--live .s-features-b__title,
  .s-features-b__card--live .s-features-b__body {
    margin-inline: 65.9375px;
  }

  .s-features-b__card--manga .s-features-b__body {
    align-self: stretch;
    width: auto;
    max-width: 420px;
  }

  .s-features-b__card--live .s-features-b__body {
    align-self: stretch;
    width: auto;
    max-width: 465px;
  }
}

@media (max-width: 671px) {
  .s-features-b__slot--a1 { width: 18%; }
  .s-features-b__slot--a2 { left: 20.02%; width: 62%; }
  .s-features-b__slot--a3 { left: 84.04%; width: 15.96%; }
  .s-features-b__slot--b1 { width: 12%; }
  .s-features-b__slot--b2 { left: 14.02%; width: 62%; }
  .s-features-b__slot--b3 { left: 78.04%; width: 21.96%; }
  .s-features-b__slot--c1 { width: 10%; }
  .s-features-b__slot--c2 { left: 12.02%; width: 62%; }
  .s-features-b__slot--c3 { left: 76.04%; width: 23.96%; }

  .s-features-b__slot--now .s-features-b__prog {
    left: 14px;
    right: 14px;
    top: 14px;
    transform: none;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    mask-image: none;
  }

  .s-features-b__slot--now .s-features-b__when {
    left: 14px;
    top: 55px;
    transform: none;
    text-align: left;
    white-space: pre;
  }

  .s-features-b__slot--now .s-features-b__pill {
    left: auto;
    right: 14px;
    top: 60px;
  }
}

@media (max-width: 620px) {
  .s-features-b__art {
    margin-inline: 14px;
  }


  .s-features-b__card--manga .s-features-b__title,
  .s-features-b__card--manga .s-features-b__body,
  .s-features-b__card--live .s-features-b__title,
  .s-features-b__card--live .s-features-b__body {
    margin-inline: 28px;
  }

  .s-features-b__card--live .s-features-b__body {
    font-size: 16px;
    line-height: 24px;
  }
}