.ys2-empty-state {
    grid-column: 1/-1;
    background: var(--ys2-surface);
    border: 1px dashed var(--ys2-line);
    border-radius: var(--ys2-radius);
    color: var(--ys2-muted);
    padding: 48px 20px;
    text-align: center
}

.ys2-section-head {
    align-items: flex-end;
    display: flex;
    justify-content: space-between;
    margin: 0 0 18px
}

.ys2-section-head h2 {
    font-size: 25px;
    line-height: 1.2;
    margin: 4px 0 0
}

.ys2-section-head>a {
    color: var(--ys2-muted);
    font-size: 14px
}

.ys2-section-kicker {
    color: var(--ys2-accent);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em
}

.ys2-grid,
.ys-grid {
    display: grid !important;
    gap: 28px 18px !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important
}

.ys2-card {
    min-width: 0;
    cursor: pointer;
}

.ys2-card-media {
    aspect-ratio: 16/9;
    background: #e7e8eb;
    border-radius: 10px;
    display: block;
    overflow: hidden;
    position: relative
}

.ys2-card-media img {
    height: 100%;
    object-fit: cover;
    transition: filter .2s ease, transform .2s ease;
    width: 100%
}

.ys2-card:hover .ys2-card-media img {
    filter: brightness(1.1);
    transform: scale(1.2)
}

.ys2-card:hover h3 {
    color: #c83f2d;
}

ys2-card

.ys2-card-badge,
.ys2-card-duration {
    background: rgba(20, 23, 29, .78);
    border-radius: 5px;
    bottom: 9px;
    color: #fff;
    font-size: 11px;
    padding: 4px 7px;
    position: absolute
}

.ys2-card-badge {
    left: 9px
}

.ys2-card-duration {
    right: 9px
}

.ys2-card-play {
    align-items: center;
    background: rgba(255, 255, 255, .9);
    border-radius: 50%;
    color: #0e2027;
    display: flex;
    height: 44px;
    justify-content: center;
    left: 50%;
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -45%);
    transition: .2s;
    width: 44px
}

.ys2-card:hover .ys2-card-play {
    opacity: 1;
    transform: translate(-50%, -50%)
}

.ys2-card-body h3 {
    display: -webkit-box;
    font-size: 15px;
    line-height: 1.45;
    margin: 10px 0 5px;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2
}

.ys2-card-body p {
    color: var(--ys2-muted);
    font-size: 12px;
    line-height: 1.5;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.ys2-card-body p span {
    margin: 0 5px
}

.ys2-home-intro {
    align-items: flex-end;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    margin: 0 0 26px
}

.ys2-home-intro h1 {
    font-size: 36px;
    font-weight: 400;
    letter-spacing: -1.3px;
    line-height: 1.3;
    margin: 0
}

.ys2-home-intro-actions {
    display: flex;
    gap: 12px
}

.ys2-home-intro-actions a {
    align-items: center;
    background: var(--ys2-surface);
    border: 1px solid var(--ys2-line);
    border-radius: 10px;
    display: flex;
    font-size: 14px;
    font-weight: 650;
    gap: 8px;
    height: 44px;
    justify-content: center;
    padding: 0 18px;
    white-space: nowrap
}

.ys2-home-intro-actions svg {
    height: 20px;
    width: 20px
}

.ys2-home-promos {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 16px 0
}

.ys2-home-promos--categories {
    grid-template-columns: repeat(8, minmax(0, 1fr))
}

.ys2-home-promos a {
    align-items: center;
    background: var(--ys2-surface);
    border: 1px solid var(--ys2-line);
    border-radius: 6px;
    color: var(--ys2-accent);
    display: flex;
    font-size: 12px;
    height: 32px;
    justify-content: center;
    overflow: hidden;
    padding: 0 12px;
    text-overflow: ellipsis;
    white-space: nowrap
}

.ys2-home-promos a:hover {
    text-decoration: underline; 
}

.ys2-home-ad-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 22px 0 10px
}

.ys2-home-ad-grid a {
    aspect-ratio: 16/3;
    background: var(--ys2-surface);
    display: block;
    overflow: hidden
}

.ys2-home-ad-grid img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%
}

.ys2-home-mid-square-ads {
    align-items: center;
    background: var(--ys2-surface);
    display: grid;
    gap: 32px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 26px 0;
    padding: 48px 6%
}

.ys2-home-mid-square-ads a {
    display: flex;
    justify-content: center;
    min-width: 0
}

.ys2-home-mid-square-ads img {
    display: block;
    height: 250px;
    max-width: 100%;
    object-fit: contain;
    width: 300px
}

.ys2-home-feature {
    display: grid;
    gap: 20px;
    grid-template-columns: minmax(0, 1fr) 282px;
    margin: 0 0 30px
}

.ys2-feature-stage {
    min-height: 350px;
    min-width: 0;
    position: relative
}

.ys2-feature-card {
    align-items: flex-end;
    background: #17343e;
    border-radius: 14px;
    color: #fff;
    display: none;
    min-height: 100%;
    overflow: hidden;
    position: relative
}

.ys2-feature-card.is-active {
    display: flex
}

.ys2-feature-bg {
    height: 100%;
    inset: 0;
    object-fit: cover;
    position: absolute;
    width: 100%
}

.ys2-feature-shade {
    background: linear-gradient(90deg, rgba(8, 22, 27, .96) 0%, rgba(8, 22, 27, .72) 48%, rgba(8, 22, 27, .2) 100%), linear-gradient(0deg, rgba(8, 22, 27, .45), transparent 55%);
    inset: 0;
    position: absolute
}

.ys2-feature-empty {
    align-items: flex-start;
    background: linear-gradient(135deg, #17343e, #0e2027);
    border-radius: 14px;
    color: #fff;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: flex-end;
    padding: 32px
}

.ys2-feature-empty strong {
    font-size: 32px;
    font-weight: 400
}

.ys2-feature-empty span {
    font-size: 14px;
    margin-top: 8px;
    opacity: .72
}

.ys2-feature-copy {
    max-width: 540px;
    padding: 32px;
    position: relative;
    z-index: 1
}

.ys2-feature-kicker {
    color: #ffb49f;
    font-size: 13px;
    font-weight: 650;
    letter-spacing: .08em
}

.ys2-feature-copy h2 {
    display: -webkit-box;
    font-size: 46px;
    font-weight: 400;
    letter-spacing: 5px;
    line-height: 1.15;
    margin: 12px 0;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2
}

.ys2-feature-meta {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    font-size: 13px;
    gap: 8px;
    line-height: 30px;
}

.ys2-feature-meta i {
    font-style: normal;
    opacity: .75
}

.ys2-feature-copy p {
    display: -webkit-box;
    font-size: 15px;
    line-height: 1.65;
    margin: 14px 0 22px;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2
}

.ys2-feature-actions {
    display: flex;
    gap: 14px
}

.ys2-feature-actions a {
    align-items: center;
    border: 1px solid rgba(255, 255, 255, .38);
    border-radius: 10px;
    display: inline-flex;
    font-size: 15px;
    font-weight: 700;
    gap: 9px;
    height: 48px;
    justify-content: center;
    padding: 0 22px
}

.ys2-feature-actions a.ys2-feature-play {
    background: #fa7452;
    border-color: #fa7452;
    color: #171b22
}

.ys2-feature-actions svg {
    height: 22px;
    width: 22px
}

.ys2-now-panel {
    align-self: stretch;
    background: var(--ys2-surface);
    border: 1px solid var(--ys2-line);
    border-radius: 14px;
    min-width: 0;
    padding: 22px
}

.ys2-now-kicker {
    color: var(--ys2-accent);
    font-size: 12px;
    font-weight: 750;
    letter-spacing: 2px
}

.ys2-now-panel h2 {
    font-size: 23px;
    font-weight: 400;
    letter-spacing: -.6px;
    line-height: 1.4;
    margin: 0 0 4px
}

.ys2-now-list {
    display: flex;
    flex-direction: column
}

.ys2-now-item {
    align-items: center;
    border-bottom: 1px solid var(--ys2-line);
    display: grid;
    gap: 13px;
    grid-template-columns: 36px minmax(0, 1fr);
    min-height: 76px;
    padding: 17px 0
}

.ys2-now-item:hover .ys2-now-number, .ys2-now-item:hover strong{
    color: #c83f2d;
}

.ys2-now-item:last-child {
    border-bottom: 0;
    padding-bottom: 0
}

.ys2-now-item:last-child .ys2-now-number, .ys2-now-item:last-child strong {
    color: #c83f2d;
}

.ys2-now-number {
    color: #52677a;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 38px;
    font-style: italic;
    line-height: 1
}

.ys2-now-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 4px
}

.ys2-now-copy strong {
    font-size: 15px;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.ys2-now-copy em {
    color: var(--ys2-muted);
    font-size: 12px;
    font-style: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.ys2-series-section,
.ys2-home-video-section {
    margin: 30px 0
}

.ys2-target-section-head {
    align-items: center;
    display: flex;
    gap: 15px;
    justify-content: space-between;
    margin-bottom: 17px
}

.ys2-target-section-head h2 {
    font-size: 23px;
    font-weight: 400;
    letter-spacing: -.6px;
    line-height: 1.6;
    margin: 0
}

.ys2-target-section-head a {
    color: var(--ys2-muted);
    font-size: 14px
}

.ys2-target-section-head a:hover {
    color: #000;
}


.ys2-series-grid {
    display: grid;
    gap: 24px 18px;
    grid-template-columns: repeat(5, minmax(0, 1fr))
}

.ys2-series-card {
    display: block;
    min-width: 0;
    cursor: pointer;
}

.ys2-series-media {
    aspect-ratio: 3.4/4;
    background: #18333d;
    border-radius: 10px;
    display: block;
    overflow: hidden;
    position: relative;
    transition: filter .2s ease, transform .2s ease
}



.ys2-series-card:hover .ys2-series-media {
    filter: brightness(1.14);
    transform: translateY(-3px)
}

.ys2-series-media img {
    height: 100%;
    inset: 0;
    object-fit: cover;
    position: absolute;
    width: 100%
}

.ys2-series-card:hover h3{
    color: #c83f2d;
}

.ys2-series-update,
.ys2-series-episodes {
    background: #fa7452;
    border-radius: 6px;
    color: #171b22;
    font-size: 12px;
    line-height: 1;
    padding: 7px 9px;
    position: absolute;
    top: 12px
}

.ys2-series-media .ys2-series-episodes {
    margin: 0;
}

.ys2-series-update {
    left: 12px
}

.ys2-series-episodes {
    background: rgba(14, 22, 27, .82);
    bottom: 10px;
    color: #fff;
    right: 12px;
    top: auto
}

.ys2-series-card h3 {
    display: -webkit-box;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.45;
    margin: 10px 0 4px;
    /* min-height: 49px; */
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2
}

.ys2-series-card p {
    align-items: center;
    color: var(--ys2-muted);
    display: flex;
    flex-wrap: wrap;
    font-size: 12px;
    gap: 8px;
    line-height: 1.5;
    margin: 0
}

.ys2-series-card p i {
    font-style: normal
}

.ys2-home-video-grid {
    display: grid;
    gap: 24px 18px;
    grid-template-columns: repeat(5, minmax(0, 1fr))
}

.ys2-home-video-grid .ys2-card-body h3 {
    font-size: 17px;
    font-weight: 400;
    line-height: 1.45;
    margin-top: 10px;
}

@media(max-width:1180px) {

    .ys2-grid,
    .ys-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important
    }

    .ys2-series-grid,
    .ys2-home-video-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr))
    }
}

@media(max-width:1100px) {
    .ys2-home-feature {
        grid-template-columns: minmax(0, 1fr) 230px
    }

    .ys2-feature-copy {
        padding: 26px
    }

    .ys2-feature-copy h2 {
        font-size: 38px
    }

    .ys2-now-panel {
        padding: 18px
    }
}

@media(max-width:980px) {
    .ys2-home-feature {
        grid-template-columns: 1fr
    }

    .ys2-now-panel {
        display: none
    }

    .ys2-series-grid,
    .ys2-home-video-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }
}

@media(max-width:820px) {

    .ys2-grid,
    .ys-grid {
        gap: 20px 10px !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important
    }

    .ys2-home-intro {
        align-items: stretch;
        flex-direction: column;
        gap: 18px;
        margin-bottom: 20px
    }

    .ys2-home-intro h1 {
        font-size: 28px;
        letter-spacing: -.7px
    }

    .ys2-home-intro-actions a:first-child {
        display: none
    }

    .ys2-home-intro-actions a {
        height: 44px
    }

    .ys2-home-promos {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .ys2-home-ad-grid,
    .ys2-home-mid-square-ads {
        grid-template-columns: 1fr
    }

    .ys2-home-mid-square-ads {
        padding: 24px 12px
    }

    .ys2-feature-stage {
        min-height: 340px
    }

    .ys2-feature-copy {
        padding: 25px 22px
    }

    .ys2-feature-copy h2 {
        font-size: 37px
    }

    .ys2-feature-copy p {
        display: none
    }

    .ys2-series-grid,
    .ys2-home-video-grid {
        gap: 22px 12px;
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .ys2-series-card h3,
    .ys2-home-video-grid .ys2-card-body h3 {
        font-size: 15px
    }
}
.ys2-feature-track{border-radius:14px;display:flex;height:100%;min-height:inherit;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}.ys2-feature-track::-webkit-scrollbar{display:none}.ys2-feature-track>.ys2-feature-card{display:flex;flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always}.ys2-feature-track>.ys2-feature-empty{flex:0 0 100%}
.ys2-feature-dots{align-items:center;background:rgba(8,22,27,.42);border-radius:999px;display:flex;gap:6px;padding:6px 10px;position:absolute;right:14px;top:14px;z-index:2;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.ys2-feature-dots>button:not(.ys2-feature-arrow){background:rgba(255,255,255,.45);border:0;border-radius:3px;cursor:pointer;height:6px;padding:0;transition:background .25s,width .25s;width:6px}.ys2-feature-dots>button.is-active{background:#fff;width:18px}.ys2-feature-arrow{align-items:center;background:none;border:0;color:#fff;cursor:pointer;display:none;height:20px;justify-content:center;padding:0;width:20px}.ys2-feature-arrow svg{height:16px;width:16px}.ys2-feature-arrow:hover{color:#ffb49f}
@media(hover:hover) and (pointer:fine){.ys2-feature-arrow{display:inline-flex}}
.ys2-feature-track{cursor:grab}.ys2-feature-track.is-dragging{cursor:grabbing;scroll-snap-type:none;-webkit-user-select:none;user-select:none}


html.ys-dark .ys2-home-promos a{
    color: #ffffff;
}


html.ys-dark .ys2-series-card h3 {
    color: #ccc;
}

html.ys-dark .ys2-series-card:hover h3 {
    color: #fff;
}


html.ys-dark .ys2-target-section-head a:hover {
    color: #fff;
}