/* Step 45: Figma 2900:26144 / 2900:27199. Desktop and other H5 pages retain their layouts. */
.xl-h5-home-content{display:none}
@media(max-width:640px){
 body.xl-home[data-page_key="home"] .xl-home-desktop,body.xl-home[data-page_key="home"] #app-footer{display:none}
 .xl-home .xl-h5-home-content{display:flex;flex-direction:column;gap:calc(24 * var(--xl-h5-unit));min-width:0;margin:0 calc(16 * var(--xl-h5-unit));padding-bottom:calc(32 * var(--xl-h5-unit))}
 .xl-h5-home-content .xl-h5-home-section{margin:0;min-width:0}
 .xl-h5-home-title{display:flex;align-items:center;justify-content:space-between;gap:calc(12 * var(--xl-h5-unit));height:calc(28 * var(--xl-h5-unit));margin-bottom:calc(12 * var(--xl-h5-unit))}
 .xl-h5-home-title h2{font-size:calc(20 * var(--xl-h5-unit));line-height:calc(28 * var(--xl-h5-unit));font-weight:600}
 .xl-home .xl-h5-home-more{display:flex;align-items:center;gap:calc(4 * var(--xl-h5-unit));height:calc(28 * var(--xl-h5-unit));color:var(--text-tertiary);font-size:calc(12 * var(--xl-h5-unit));font-weight:400;white-space:nowrap}
 .xl-h5-home-more img{flex:none;width:calc(14 * var(--xl-h5-unit));height:calc(14 * var(--xl-h5-unit))}
 .xl-h5-home-scroll{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;scroll-snap-type:x proximity;touch-action:pan-x pan-y;margin-right:calc(-16 * var(--xl-h5-unit));padding-right:calc(16 * var(--xl-h5-unit))}
 .xl-h5-home-scroll::-webkit-scrollbar,.xl-h5-home-content .xl-category-tabs::-webkit-scrollbar{display:none}
 .xl-h5-home-actors{display:flex;gap:calc(8 * var(--xl-h5-unit));align-items:flex-start}
 .xl-h5-home-actors .xl-actor{position:relative;gap:0;flex:0 0 calc(110 * var(--xl-h5-unit));min-width:0;height:calc(148 * var(--xl-h5-unit));border-radius:calc(12 * var(--xl-h5-unit));padding:calc(8 * var(--xl-h5-unit)) 0;background:var(--bg-surface);scroll-snap-align:start}
 .xl-h5-home-actors .xl-actor-top{display:flex;align-items:center;flex-direction:column;gap:calc(4 * var(--xl-h5-unit));padding:0;margin:0;height:calc(98 * var(--xl-h5-unit))}
 .xl-h5-home-actors .xl-actor-top img{flex:none;width:calc(56 * var(--xl-h5-unit));height:calc(56 * var(--xl-h5-unit));border-radius:50%;object-fit:cover;background:var(--bg-media-placeholder-strong)}
 .xl-h5-home-actors .xl-actor h3{font-size:calc(12 * var(--xl-h5-unit));line-height:calc(17 * var(--xl-h5-unit));font-weight:400;max-width:100%;padding:0 calc(4 * var(--xl-h5-unit));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .xl-h5-home-actors .xl-actor p{font-size:calc(11 * var(--xl-h5-unit));line-height:calc(15 * var(--xl-h5-unit));color:var(--text-tertiary);margin:0;font-family:var(--font-number,var(--font-ui))}
 .xl-h5-home-actors .xl-follow{display:flex;flex-shrink:0;width:calc(64 * var(--xl-h5-unit));height:calc(28 * var(--xl-h5-unit));padding:0;margin:calc(6 * var(--xl-h5-unit)) auto 0;font-size:calc(12 * var(--xl-h5-unit));line-height:calc(17 * var(--xl-h5-unit));font-weight:400}
 .xl-h5-home-actors .xl-follow[aria-pressed="true"]{background:var(--bg-emphasis)!important;color:var(--text-muted)!important;box-shadow:none}
 .xl-h5-home-actors .xl-actor-follow-error:not([hidden]){position:absolute;inset:100% 0 auto;background:var(--bg-surface);padding:calc(4 * var(--xl-h5-unit));z-index:1}
 .xl-h5-home-content .xl-video-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(12 * var(--xl-h5-unit));padding:0;margin:0;list-style:none}
 .xl-h5-home-content .xl-video-item{min-width:0;margin:0;padding:0;list-style:none}
 .xl-h5-home-content .xl-video{display:flex;flex-direction:column;gap:calc(8 * var(--xl-h5-unit));min-width:0;min-height:calc(154 * var(--xl-h5-unit));background:transparent;padding:0;border-radius:0}
 .xl-h5-home-content .xl-video-cover{position:relative;display:block;width:100%;height:auto;aspect-ratio:173/98;border-radius:calc(8 * var(--xl-h5-unit));overflow:hidden;flex:none}
 .xl-h5-home-content .xl-video-cover>img{width:100%;height:100%;object-fit:cover}
 .xl-h5-home-content .xl-video-meta{inset:auto 0 0;display:flex;justify-content:space-between;align-items:flex-end;min-height:calc(36 * var(--xl-h5-unit));padding:calc(12 * var(--xl-h5-unit)) calc(8 * var(--xl-h5-unit)) calc(4 * var(--xl-h5-unit));gap:calc(4 * var(--xl-h5-unit));background:linear-gradient(180deg,transparent,rgba(0,0,0,.75));color:#fff;font-size:calc(10 * var(--xl-h5-unit));line-height:calc(14 * var(--xl-h5-unit));font-family:var(--font-number,var(--font-ui))}
 .xl-h5-home-content .xl-video-meta>span{display:flex;align-items:center;gap:calc(4 * var(--xl-h5-unit));white-space:nowrap}
 .xl-h5-home-content .xl-video-meta img{display:none}
 .xl-h5-home-content .xl-video-title{display:block;height:calc(20 * var(--xl-h5-unit));padding:0;margin:0;font-size:calc(14 * var(--xl-h5-unit));line-height:calc(20 * var(--xl-h5-unit));font-weight:400;color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;-webkit-line-clamp:unset}
 .xl-h5-home-content .xl-content-badge,.xl-h5-home-content .xl-video-date{display:none}
 .xl-h5-home-content .xl-vip-badge{top:calc(6 * var(--xl-h5-unit));right:calc(6 * var(--xl-h5-unit));left:auto;padding:calc(3 * var(--xl-h5-unit)) calc(6 * var(--xl-h5-unit));font-size:calc(10 * var(--xl-h5-unit));line-height:calc(14 * var(--xl-h5-unit));height:calc(20 * var(--xl-h5-unit));min-height:0;border-radius:calc(4 * var(--xl-h5-unit));font-weight:400;background:var(--membership-accent);color:var(--membership-on-accent)}
 .xl-h5-home-content .video-unlock-badge--free{background:#116149;color:#fff}
 .xl-h5-home-content .xl-tags{display:flex;flex-wrap:nowrap;gap:calc(4 * var(--xl-h5-unit));margin:0;min-height:calc(20 * var(--xl-h5-unit));overflow:hidden}
 .xl-h5-home-content .xl-tags a{display:block;flex:none;height:calc(20 * var(--xl-h5-unit));max-width:none;padding:calc(2 * var(--xl-h5-unit)) calc(9 * var(--xl-h5-unit));border-radius:calc(100 * var(--xl-h5-unit));background:var(--bg-surface);color:var(--text-secondary);font-size:calc(11 * var(--xl-h5-unit));font-weight:400;line-height:calc(16 * var(--xl-h5-unit));overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
 .xl-home .xl-h5-home-ranking{display:flex;gap:calc(12 * var(--xl-h5-unit));padding-top:0;padding-bottom:0;margin-top:0;margin-bottom:0;list-style:none}
 .xl-h5-home-rank-item{position:relative;flex:0 0 calc(160 * var(--xl-h5-unit));min-width:0;scroll-snap-align:start}
 .xl-h5-home-ranking .xl-video{min-height:calc(146 * var(--xl-h5-unit))}
 .xl-h5-home-ranking .xl-video-cover{aspect-ratio:160/90}
 .xl-h5-home-ranking .xl-video-meta{min-height:calc(30 * var(--xl-h5-unit));padding:calc(10 * var(--xl-h5-unit)) calc(6 * var(--xl-h5-unit)) calc(6 * var(--xl-h5-unit))}
 .xl-h5-home-content .xl-video-meta>span:first-child:before{content:'';width:calc(10 * var(--xl-h5-unit));height:calc(10 * var(--xl-h5-unit));background:url('/static/web/images/redesign/h5-home/play.svg') center/calc(10 * var(--xl-h5-unit)) calc(10 * var(--xl-h5-unit)) no-repeat}
 .xl-h5-home-rank-number{position:absolute;top:0;left:0;width:calc(76 * var(--xl-h5-unit));height:calc(76 * var(--xl-h5-unit));border-radius:calc(8 * var(--xl-h5-unit)) 0 0;z-index:2;pointer-events:none;padding:calc(4 * var(--xl-h5-unit)) calc(6 * var(--xl-h5-unit));color:#fff;font:700 calc(16 * var(--xl-h5-unit))/calc(22 * var(--xl-h5-unit)) var(--font-number,var(--font-ui));background:linear-gradient(135deg,#5c7bff 10.577%,rgba(255,83,141,.3) 35.096%,rgba(255,83,141,0) 49.519%)}
 .xl-h5-home-articles{display:flex;flex-direction:column;gap:calc(12 * var(--xl-h5-unit))}
 .xl-h5-home-article{display:flex;align-items:center;gap:calc(12 * var(--xl-h5-unit));height:calc(108 * var(--xl-h5-unit));border-radius:calc(12 * var(--xl-h5-unit));padding:calc(12 * var(--xl-h5-unit));background:var(--bg-surface);min-width:0}
 .xl-h5-home-article-cover{flex:0 0 calc(112 * var(--xl-h5-unit));height:calc(84 * var(--xl-h5-unit));overflow:hidden;border-radius:calc(8 * var(--xl-h5-unit));background:var(--bg-media-placeholder-strong)}
 .xl-h5-home-article-cover img{width:calc(112 * var(--xl-h5-unit));height:calc(84 * var(--xl-h5-unit));object-fit:cover}
 .xl-h5-home-article-copy{display:flex;flex-direction:column;gap:calc(8 * var(--xl-h5-unit));min-width:0}
 .xl-h5-home-article-copy h3{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:calc(14 * var(--xl-h5-unit));font-weight:400;line-height:calc(20 * var(--xl-h5-unit))}
 .xl-h5-home-article-copy p{font-size:calc(12 * var(--xl-h5-unit));font-weight:400;line-height:calc(17 * var(--xl-h5-unit));color:var(--text-tertiary)}
 .xl-h5-home-content .xl-category-tabs{display:flex;overflow-x:auto;overscroll-behavior-x:contain;gap:calc(8 * var(--xl-h5-unit));margin:0 0 calc(12 * var(--xl-h5-unit));padding:0;scrollbar-width:none;border:0}
 .xl-h5-home-content .xl-category-tabs button{height:calc(32 * var(--xl-h5-unit));flex:none;padding:calc(6 * var(--xl-h5-unit)) calc(12 * var(--xl-h5-unit));margin:0;border:0;border-radius:calc(100 * var(--xl-h5-unit));background:var(--bg-surface);color:var(--text-tertiary);font-size:calc(14 * var(--xl-h5-unit));font-weight:400;line-height:calc(20 * var(--xl-h5-unit))}
 .xl-h5-home-content .xl-category-tabs button.is-active{background:var(--brand-blue-default);color:var(--text-on-brand)}
 .xl-h5-home-content .xl-wish{display:flex;flex-direction:column;align-items:stretch;gap:calc(12 * var(--xl-h5-unit));padding:calc(16 * var(--xl-h5-unit));margin:0;border:0;border-radius:calc(12 * var(--xl-h5-unit));background:var(--bg-surface)}
 .xl-h5-home-content .xl-wish h2{font-size:calc(16 * var(--xl-h5-unit));font-weight:600;line-height:calc(22 * var(--xl-h5-unit))}
 .xl-h5-home-content .xl-wish p{font-size:calc(12 * var(--xl-h5-unit));line-height:calc(17 * var(--xl-h5-unit));color:var(--text-tertiary);margin:calc(12 * var(--xl-h5-unit)) 0 0}
 .xl-h5-home-content .xl-wish>.xl-gradient{height:calc(44 * var(--xl-h5-unit));padding:0;font-size:calc(14 * var(--xl-h5-unit));font-weight:600}
 .xl-h5-home-content .xl-wish .xl-icon{display:none}
 .xl-h5-home-empty{font-size:calc(14 * var(--xl-h5-unit));color:var(--text-tertiary);padding:calc(16 * var(--xl-h5-unit)) 0}
 .xl-h5-home-content a:focus-visible,.xl-h5-home-content button:focus-visible,.xl-h5-home-scroll:focus-visible{outline:calc(2 * var(--xl-h5-unit)) solid var(--brand-blue-default);outline-offset:calc(2 * var(--xl-h5-unit))}
}