/* H5 surface only. Visual authority: h5.yingshidao.com, 390×844, 2026-11-03. Keep PC rendering isolated; real catalogue and identity remain shared. */ html:has(>body[data-surface=H5]){background:#08080a linear-gradient(160deg,#0c0c1a 0%,#0f0e2a 30%,#160e35 55%,#0a0a18 100%) fixed} body[data-surface=H5]{--accent:#03dac6;--bg:#090d12;--text:#f5f5f6;--muted:#8a8b91;--h5-width:500px;max-width:var(--h5-width);min-height:100dvh;margin-inline:auto;background:linear-gradient(180deg,#101620 0%,#0c1018 40%,#080b10 100%) fixed;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;line-height:1.5;overflow-wrap:break-word} /* Keep the last content row above the floating menu, including device safe areas. */ body[data-surface=H5]{--h5-nav-height:76px;--h5-nav-bottom:max(24px,env(safe-area-inset-bottom,0px))} body[data-surface=H5]:has(.bottom-nav){padding-bottom:calc(var(--h5-nav-height) + var(--h5-nav-bottom) + 16px)} body[data-surface=H5] :is(button,a,input,textarea){-webkit-tap-highlight-color:transparent} body[data-surface=H5] button{font-family:inherit} body[data-surface=H5] input,body[data-surface=H5] textarea{caret-color:var(--accent)} body[data-surface=H5] ::selection{background:#00cbd344;color:#fff} body[data-surface=H5] .h5-header{height:54px;gap:12px;padding:8px 16px;left:50%;right:auto;width:min(100%,var(--h5-width));transform:translateX(-50%);background:linear-gradient(180deg,#6200ee33,#6200ee18),#10162033;backdrop-filter:blur(24px)} body[data-surface=H5] .h5-header .brand{margin-right:4px;width:72px;flex:0 0 72px} body[data-surface=H5] .h5-header .brand-logo{width:72px;height:auto} body[data-surface=H5] .search-entry{height:38px;padding:0 16px;gap:8px;background:#6200ee1f;border:1px solid #6200ee40;color:#ffffff4d;font-size:13px;font-weight:400;min-width:0} body[data-surface=H5] .search-entry svg{width:18px;height:18px;color:#ffffff80} body[data-surface=H5] .h5-header .circle-link{width:36px;height:36px;flex-basis:36px;border:1px solid #6200ee33;background:#6200ee1a;color:#ffffffb3;padding:7px} body[data-surface=H5] .circle-link svg{width:22px;height:22px} body[data-surface=H5] .h5-tabs{height:48px;top:54px;left:50%;right:auto;width:min(100%,var(--h5-width));transform:translateX(-50%);gap:24px;padding:0 20px;background:linear-gradient(180deg,#6200ee18,transparent),#10162033;backdrop-filter:blur(24px);font-size:15px;color:#9e9e9e;scrollbar-width:none} body[data-surface=H5] .h5-tabs a{height:48px;display:flex;align-items:center;flex:none;font-weight:500;letter-spacing:-.025em} body[data-surface=H5] .h5-tabs a[aria-current=page]{font-size:17px;font-weight:700} body[data-surface=H5] .h5-tabs a[aria-current=page]:after{left:50%;bottom:4px;width:16px;height:2px;border-radius:2px;transform:translateX(-50%);box-shadow:0 0 10px #00e5ff55} body[data-surface=H5] .home-page{padding-top:118px;min-height:100dvh} body[data-surface=H5] .hero{height:220px;background:#090a0c;touch-action:pan-y} body[data-surface=H5] .hero-slide{transition:transform .4s ease,opacity .4s ease;transform:translateX(var(--slide-offset,100%));pointer-events:none} body[data-surface=H5] .hero-slide.is-active{transform:translateX(0);pointer-events:auto} body[data-surface=H5] .hero-image{aspect-ratio:auto;height:100%;width:100%;object-fit:cover} body[data-surface=H5] .hero-shade{background:linear-gradient(180deg,transparent,#00000019 45%,#000c)} body[data-surface=H5] .hero-copy{bottom:28px;left:16px;right:16px} body[data-surface=H5] .hero-copy h1{font-size:20px;font-weight:900;margin:0 0 6px;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block} body[data-surface=H5] .hero-tags{align-items:center;gap:4px;flex-wrap:wrap} body[data-surface=H5] .hero-tags span{font-size:10.5px;padding:3px 8px;border-radius:4px;border-color:#ffffff1a;background:#181818eb;color:#ffffffa6;font-weight:500} body[data-surface=H5] .hero-tags span:not(.h5-quality):first-of-type{border-color:#2d5c3e;background:#0e2016;color:#86efac} body[data-surface=H5] .h5-hero-update{position:absolute;top:12px;left:12px;z-index:2;padding:3px 10px 3px 6px;background:linear-gradient(135deg,#00e5ff,#00bcd4,#ffffff33,#00e5ff);color:#fff;font-size:10px;font-weight:900;font-style:italic;clip-path:polygon(0 0,100% 0,calc(100% - 8px) 100%,0 100%)} body[data-surface=H5] .hero-dots{bottom:12px;gap:6px} body[data-surface=H5] .hero-dots button{width:6px;height:4px;background:#fff6;border-radius:5px;position:relative} body[data-surface=H5] .hero-dots button:before{content:"";position:absolute;inset:-10px -3px} body[data-surface=H5] .hero-dots button[aria-current=true]{width:20px;background:var(--accent)} body[data-surface=H5] .home-content{padding:40px 12px 24px} body[data-surface=H5] .channel-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 0;margin:0 4px 56px} body[data-surface=H5] .channel-grid>a{gap:8px;min-width:0} body[data-surface=H5] .channel-icon{width:60px;height:60px;border-radius:19px;overflow:hidden;background:linear-gradient(145deg,#73e9ff2b,#121728e8 52%,#397cff1f);border:1px solid #73e9ff42;box-shadow:inset 0 1px 0 #73e9ff38,0 8px 18px #397cff14} body[data-surface=H5] .channel-icon img{width:46px;height:46px;filter:drop-shadow(0 5px 8px #0005)} body[data-surface=H5] .channel-icon svg{width:36px;height:36px} body[data-surface=H5] .channel-grid>a:nth-child(2) .channel-icon{background:linear-gradient(145deg,#b191ff2b,#121728e8 52%,#b191ff1f);border-color:#b191ff42} body[data-surface=H5] .channel-grid>a:nth-child(3) .channel-icon{background:linear-gradient(145deg,#ffe8782b,#121728e8 52%,#ffe8781f);border-color:#ffe87842} body[data-surface=H5] .channel-grid>a:nth-child(4) .channel-icon{background:linear-gradient(145deg,#73f7d62b,#121728e8 52%,#73f7d61f);border-color:#73f7d642} body[data-surface=H5] .channel-grid>a:nth-child(7) .channel-icon{background:linear-gradient(145deg,#ffe8782b,#121728e8 52%,#ffb7e31f);border-color:#ffe87842} body[data-surface=H5] .channel-grid>a:nth-child(8) .channel-icon{background:linear-gradient(145deg,#ff8aa52b,#121728e8 52%,#ff8aa51f);border-color:#ff8aa542} body[data-surface=H5] .channel-copy strong{font-size:11.5px;font-weight:600;letter-spacing:-.025em;color:#ffffffb3} body[data-surface=H5] .content-section{margin-bottom:32px} body[data-surface=H5] .section-heading{margin:0 4px 12px;gap:12px;min-height:26px} body[data-surface=H5] .section-heading h2{font-size:17px;font-weight:700;padding-left:13.5px;line-height:1.5;color:#f5f5f6} body[data-surface=H5] .section-heading h2:before{width:3px;top:4px;bottom:4px} body[data-surface=H5] .section-heading a{color:var(--accent);font-size:11px} body[data-surface=H5] .module-refresh{font-size:11px;color:#8b8d92} body[data-surface=H5] .shelf-controls{display:none!important} body[data-surface=H5] .card-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px} body[data-surface=H5] .cover-link{border-radius:9px} body[data-surface=H5] .cover-link>img{aspect-ratio:16/9;object-fit:cover} body[data-surface=H5] .cover-play{display:none} body[data-surface=H5] .video-card h3{font-size:14px;font-weight:600;margin:8px 0 4px;line-height:1.35;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} body[data-surface=H5] .card-tags{font-size:9px;line-height:1.4;gap:4px;flex-wrap:nowrap;overflow:hidden;min-height:0} body[data-surface=H5] .card-tags span{white-space:nowrap;padding:2px 5px;border:1px solid #ffffff14;background:#ffffff05;border-radius:3px;color:#b8b9bd;max-width:100%;overflow:hidden;text-overflow:ellipsis} body[data-surface=H5] .card-tags span:first-child{background:#0e2016;border-color:#2d5c3e;color:#86efac} body[data-surface=H5] .card-tags span+span:before{content:none} body[data-surface=H5] .card-shelf{gap:12px;padding-bottom:6px} body[data-surface=H5] .card-shelf .video-card{flex-basis:46%} body[data-surface=H5] .portrait-shelf .cover-link>img{aspect-ratio:2/3} /* H5 category shelves use compact cards for each cover orientation. */ body[data-surface=H5] .home-page[data-discovery-page] .home-module[data-template="portrait_slider"] .card-shelf{gap:10px} body[data-surface=H5] .home-page[data-discovery-page] .home-module[data-template="portrait_slider"] .card-shelf>.video-card{flex:0 0 110px;width:110px;min-width:0} body[data-surface=H5] .home-page[data-discovery-page] .home-module[data-template="portrait_slider"] .cover-link{aspect-ratio:3/4} body[data-surface=H5] .home-page[data-discovery-page] .home-module[data-template="portrait_slider"] .cover-link>img{aspect-ratio:3/4;width:100%;height:100%;object-fit:cover} body[data-surface=H5] .home-page[data-discovery-page] .home-module[data-template="portrait_slider"] .video-card h3{font-size:13px;font-weight:500;margin:6px 2px 4px} body[data-surface=H5] .home-page[data-discovery-page] .home-module[data-template="landscape_slider"] .card-shelf{gap:10px} body[data-surface=H5] .home-page[data-discovery-page] .home-module[data-template="landscape_slider"] .card-shelf>.video-card{flex:0 0 200px;width:200px;min-width:0} body[data-surface=H5] .home-page[data-discovery-page] .home-module[data-template="landscape_slider"] .cover-link{aspect-ratio:16/9} body[data-surface=H5] .home-page[data-discovery-page] .home-module[data-template="landscape_slider"] .cover-link>img{aspect-ratio:16/9;width:100%;height:100%;object-fit:cover} body[data-surface=H5] .home-page[data-discovery-page] .home-module[data-template="landscape_slider"] .video-card h3{font-size:13px;font-weight:500;margin:6px 2px 4px} body[data-surface=H5] .new-badge{font-size:10px;padding:4px 8px;line-height:1.3;background:linear-gradient(135deg,#00e5ff,#00bcd4);border-radius:0 0 7px 0;top:0;left:0;clip-path:none;transform:none;box-shadow:none} body[data-surface=H5] .new-badge small{display:none} body[data-surface=H5] .card-quality{top:0;right:0;min-width:44px;padding:4px 8px;border-radius:0 0 0 7px;font-size:12px;background:linear-gradient(135deg,#fff8e1,#ffd54f,#ff9800);color:#3d2800} body[data-surface=H5] .card-cover-meta{padding:0 7px 6px} body[data-surface=H5] .card-update{font-size:10px;line-height:1.5;padding:2px 5px;border-radius:4px;background:#0009;color:#fff;font-weight:400} body[data-surface=H5] .card-rating{font-size:17px;right:7px;bottom:5px;color:#ffdf40;font-weight:900;text-shadow:0 2px 4px #000;-webkit-text-stroke:.5px #392400} /* Reference glass capsule, adapted to the four existing destinations. */ body[data-surface=H5] .h5-bottom-shade{position:fixed;z-index:49;left:50%;bottom:0;transform:translateX(-50%);width:min(100%,var(--h5-width));height:140px;pointer-events:none;background:linear-gradient(to top,#00000073 0%,#0000002e 55%,transparent 100%)} body[data-surface=H5] .bottom-nav{z-index:50;left:50%;right:auto;transform:translateX(-50%);width:min(calc(100% - 48px),448px);height:var(--h5-nav-height);bottom:var(--h5-nav-bottom);padding:0;border-radius:38px;border:1px solid #ffffff33;background:#ffffff0d;backdrop-filter:blur(20px);box-shadow:0 -2px 24px #00000059,0 8px 32px #0000008c;overflow:hidden} body[data-surface=H5] .bottom-nav a{position:relative;isolation:isolate;height:74px;flex:1;gap:4px;font-size:10px;font-weight:400;color:#ffffff66;line-height:1;border-radius:0;max-width:none;margin:0} body[data-surface=H5] .bottom-nav svg{width:24px;height:24px;stroke-width:2} body[data-surface=H5] .bottom-nav a.is-current{width:auto;max-width:none;background:none;box-shadow:none;border:0;color:#fff;font-weight:700} body[data-surface=H5] .bottom-nav a.is-current:before{content:"";position:absolute;z-index:-1;inset:8px 6px;border-radius:30px;border:1.5px solid #34495ecc;background:linear-gradient(#ffffff26 0%,#ffffff0d 40%,transparent 80%),linear-gradient(135deg,#2c3e50,#1a252f 50%,#121a21);box-shadow:0 0 12px -1px #2c3e5066,0 4px 10px #0006} body[data-surface=H5] .bottom-nav a.is-current svg{transform:translateY(-2px)} body[data-surface=H5] .bottom-nav a:focus-visible{outline:2px solid var(--accent);outline-offset:-5px;border-radius:30px} body[data-surface=H5] .page-footer{margin:32px 16px 130px;padding-top:18px;line-height:1.7;color:#6b707a} body[data-surface=H5] .h5-inner-header{height:70px;display:flex;align-items:center;gap:12px;padding:32px 16px 8px;position:sticky;top:0;z-index:40;background:#101010ed;backdrop-filter:blur(16px)} body[data-surface=H5] .h5-inner-header .icon-button{padding:0;width:24px;height:32px;color:#fff} body[data-surface=H5] .h5-inner-header .icon-button svg{width:20px;height:20px} body[data-surface=H5] .h5-inner-header h1{font-size:20px;font-weight:900;font-style:italic;margin:0;line-height:1.5} body[data-surface=H5]:has(.list-page){background:#101010} body[data-surface=H5] .list-page{padding:8px 12px 30px;min-height:80dvh} body[data-surface=H5] .h5-catalog-filters{padding:0 4px 14px;position:sticky;top:70px;background:#101010f5;z-index:30;backdrop-filter:blur(16px);scroll-margin-top:72px} body[data-surface=H5] .catalog-filter-row{margin:0 0 10px;display:block;min-height:28px} body[data-surface=H5] .catalog-filter-options{display:flex;gap:8px;overflow-x:auto;flex-wrap:nowrap;padding:0;scrollbar-width:none} body[data-surface=H5] .catalog-filter-options a{font-size:13px;font-weight:500;line-height:16.25px;padding:6px 14px;min-height:28.25px;white-space:nowrap;color:#ffffff66;flex:none;border-radius:6px;background:transparent;border:0} body[data-surface=H5] .catalog-filter-options a[aria-current=true]{color:var(--accent);background:#03dac61a} body[data-surface=H5] #catalog-items{scroll-margin-top:244px} body[data-surface=H5] .list-grid .cover-link>img{aspect-ratio:2/3} body[data-surface=H5] .list-grid{gap:16px 12px} body[data-surface=H5] .list-page[data-category-id="7"] .list-grid{grid-template-columns:repeat(3,minmax(0,1fr))} body[data-surface=H5] .category-list-content{padding:0} body[data-surface=H5] .search-page-header{position:sticky;top:0;z-index:50;height:64px;display:flex;align-items:center;gap:12px;padding:8px 16px;background:#101620f5;backdrop-filter:blur(16px)} body[data-surface=H5] .search-page-header>.icon-button{width:36px;flex:none;padding:0;color:#fff} body[data-surface=H5] .search-page-header>.icon-button svg{width:30px;height:30px} body[data-surface=H5] .search-page-header .search-form{width:100%;gap:0;height:46px;border-radius:15px;border:0;background:#ffffff14;position:relative;overflow:visible;margin-right:38px} body[data-surface=H5] .search-form .h5-search-icon{width:20px;height:20px;margin-left:12px;color:#ffffff66;flex:none} body[data-surface=H5] .search-page-header input{font-size:14px;padding:10px 8px;line-height:24px;color:#fff;width:100%;min-width:0} body[data-surface=H5] .search-page-header .search-form>button[type=submit]{position:absolute;left:calc(100% + 10px);height:44px;width:38px;padding:0;background:transparent;color:var(--accent);font-size:14px;font-weight:700;align-items:center;justify-content:center;white-space:nowrap} body[data-surface=H5] .search-page-header .h5-search-clear{font-size:19px;color:#9a9ca4;width:30px;height:34px;flex:none;padding:0;background:transparent;align-items:center;justify-content:center} body[data-surface=H5] .search-page{padding:12px 16px 40px;min-height:calc(100dvh - 64px)} body[data-surface=H5] .search-page>.page-heading{display:none} body[data-surface=H5] .search-discovery>section{margin:8px 0 24px} body[data-surface=H5] .search-discovery .section-heading{margin:0 0 16px} body[data-surface=H5] .search-discovery h2{font-size:15px;padding:0;font-weight:600} body[data-surface=H5] .search-discovery h2:before,body[data-surface=H5] .search-group h2:before{display:none} body[data-surface=H5] .keyword-list{gap:10px} body[data-surface=H5] .keyword-list>a,body[data-surface=H5] .history-keyword{font-size:13px;border-radius:14px;padding:7px 15px;background:#ffffff0d;color:#ffffffa6} body[data-surface=H5] .search-discovery section:has(>.keyword-list:not([data-search-history-items])) .keyword-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 22px} body[data-surface=H5] .search-discovery section:has(>.keyword-list:not([data-search-history-items])) .keyword-list>a{padding:2px 0;background:transparent;border-radius:0} body[data-surface=H5] .hot-keywords{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 24px;padding-left:22px;font-size:13px;color:#ffffffa6} body[data-surface=H5] .search-group{margin:12px 0 30px} body[data-surface=H5] .search-group .section-heading{margin:0 0 14px} body[data-surface=H5] .search-group h2{font-size:14px;padding:0;color:#9a9ba2;font-weight:400} body[data-surface=H5] .search-card-grid,body[data-surface=H5] .search-group-short .search-card-grid{grid-template-columns:1fr;gap:0} body[data-surface=H5] .search-card{display:grid;grid-template-columns:132px minmax(0,1fr);gap:16px;padding:0 0 16px;margin:0 0 32px;border:0;border-bottom:1px solid #ffffff0d;border-radius:0;background:transparent;min-width:0;overflow:visible} body[data-surface=H5] .search-cover{border-radius:8px;align-self:start} body[data-surface=H5] .search-card-long .search-cover img,body[data-surface=H5] .search-card-short .search-cover img{aspect-ratio:3/4;width:132px;height:176px;object-fit:cover} body[data-surface=H5] .search-card-info{min-width:0} body[data-surface=H5] .search-card h3{font-size:16px;line-height:1.5;margin:0 0 6px;font-weight:700;-webkit-line-clamp:2} body[data-surface=H5] .search-card-description{font-size:13px;line-height:18px;color:#ffffff66;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;margin:0 0 7px} body[data-surface=H5] .search-card .card-tags{flex-wrap:wrap;max-height:44px;overflow:hidden} body[data-surface=H5] .search-card .card-tags span{color:#03dac6;background:#ffffff0d;border:0;font-size:11px;padding:2px 5px} body[data-surface=H5] .card-category{top:0;left:auto;right:0;background:#00c7d4;color:white;font-size:10px;padding:3px 8px;border-radius:0} body[data-surface=H5] .search-card .update-label{font-size:10px;color:#a0a2aa} body[data-surface=H5] .h5-editorial-page{padding-top:126px} body[data-surface=H5] .h5-editorial-page .home-content{padding:0 16px 24px} body[data-surface=H5] .h5-editorial-page .hero{margin-bottom:36px} body[data-surface=H5] .h5-feature-heading{margin:0 16px 18px} body[data-surface=H5] .h5-editorial-module>.section-heading{margin:0 0 28px} body[data-surface=H5] .h5-editorial-card{display:grid;grid-template-columns:138px minmax(0,1fr);gap:16px;margin-bottom:20px;min-height:190px;position:relative} body[data-surface=H5] .h5-editorial-card .cover-link>img{aspect-ratio:138/190} body[data-surface=H5] .h5-editorial-rank{position:absolute;top:4px;left:8px;color:#fff;font-size:32px;font-style:italic;font-weight:900;z-index:3;text-shadow:0 2px 6px #000} body[data-surface=H5] .h5-editorial-card .new-badge{display:none} body[data-surface=H5] .h5-editorial-copy{padding:8px 0;min-width:0} body[data-surface=H5] .h5-editorial-copy h3{font-size:17px;line-height:1.5;margin:4px 0 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} body[data-surface=H5] .h5-editorial-meta{font-size:10px;color:#a5a5ad;line-height:1.8;max-height:36px;overflow:hidden;margin-bottom:9px} body[data-surface=H5] .h5-editorial-description{font-size:12px;color:#6e717c;line-height:1.8;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} /* Discovery / topics */ body[data-surface=H5] .discovery-page{padding:0 16px 32px;min-height:80dvh} body[data-surface=H5] .discovery-root{padding-top:126px} body[data-surface=H5] .topic-grid{grid-template-columns:1fr;gap:16px} body[data-surface=H5] .topic-card{border:0;border-radius:0;overflow:hidden;background:#141a22} body[data-surface=H5] .topic-card>a{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;border:1px solid #ffffff1a;border-radius:0;box-shadow:0 25px 50px -12px #00000040} body[data-surface=H5] .topic-card>a>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} body[data-surface=H5] .topic-card-copy{position:absolute;inset:0;display:flex;justify-content:flex-end;flex-direction:column;padding:14px 96px 14px 14px;background:linear-gradient(to top,#000000f2,#0006,transparent);color:#fff} body[data-surface=H5] .topic-card-copy>span{position:absolute;right:14px;bottom:14px;background:#0009;border:1px solid #ffffff26;color:#67e8f9;border-radius:999px;padding:2px 10px;font-size:11px;font-weight:700;line-height:16.5px;backdrop-filter:blur(12px);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a} body[data-surface=H5] .topic-card-copy h2{font-size:17px;line-height:25.5px;margin:0 0 4px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 2px 8px #000c} body[data-surface=H5] .topic-card-copy p{font-size:12px;font-weight:500;margin:0;color:#ffffffb3;line-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* Compact homepage topic shelf; topic listing and detail pages keep their layout. */ body[data-surface=H5] .home-page[data-discovery-page=""] [data-template="topic_slider"] .card-shelf{gap:12px} body[data-surface=H5] .home-page[data-discovery-page=""] [data-template="topic_slider"] .topic-card{flex:0 0 220px;width:220px;min-width:0;border-radius:12px 12px 0 0} body[data-surface=H5] .home-page[data-discovery-page=""] [data-template="topic_slider"] .topic-card>a{aspect-ratio:7/5;border:0;border-radius:12px 12px 0 0} body[data-surface=H5] .home-page[data-discovery-page=""] [data-template="topic_slider"] .topic-card-copy{padding:8px;background:linear-gradient(transparent 55%,#000e)} body[data-surface=H5] .home-page[data-discovery-page=""] [data-template="topic_slider"] .topic-card-copy h2{font-size:12px;line-height:18px;font-weight:600;margin:0} body[data-surface=H5] .home-page[data-discovery-page=""] [data-template="topic_slider"] .topic-card-copy>span,body[data-surface=H5] .home-page[data-discovery-page=""] [data-template="topic_slider"] .topic-card-copy p{display:none} body[data-surface=H5] .topic-detail-heading{position:relative;display:block;margin:-0px -16px 0;height:460px;min-height:460px;padding:310px 20px 20px;overflow:hidden;background:#151822} body[data-surface=H5] .topic-detail-heading>img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;margin:0;opacity:1;filter:none} body[data-surface=H5] .topic-detail-heading:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 30%,#0007 55%,#080c10 100%);pointer-events:none}body[data-surface=H5] .topic-detail-heading>div{position:relative;z-index:1} body[data-surface=H5] .topic-detail-heading h1{font-size:28px;line-height:42px;margin:0 0 8px;font-weight:900} body[data-surface=H5] .topic-detail-heading p{font-size:13px;line-height:1.7;margin:0 0 10px;color:#c5c5cc} body[data-surface=H5] .topic-detail-heading span{font-size:11px;color:#9c9ca6} body[data-surface=H5] .h5-topic-list-heading{margin:16px 0 8px;min-height:27px} body[data-surface=H5] .h5-topic-list-heading>span{font-size:12px;color:var(--accent)} body[data-surface=H5] .topic-videos{grid-template-columns:1fr;gap:12px} body[data-surface=H5] .h5-topic-video{display:grid;grid-template-columns:110px minmax(0,1fr);gap:12px;padding:10px;border:1px solid #ffffff14;background:#ffffff0a;border-radius:10px;align-items:center} body[data-surface=H5] .h5-topic-video .cover-link{aspect-ratio:2/3}.h5-topic-video .cover-link>img{display:block;height:100%;aspect-ratio:2/3;object-fit:cover}body[data-surface=H5] .h5-topic-video .cover-link>img.is-fallback{object-fit:contain} body[data-surface=H5] .h5-topic-copy{min-width:0} body[data-surface=H5] .h5-topic-copy h2{font-size:15px;line-height:20.625px;margin:0 0 4px;font-weight:800} body[data-surface=H5] .h5-topic-copy>p:not(.video-meta){font-size:12px;color:#ffffff99;line-height:19.5px;margin:4px 0 0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} /* Mobile trending has its own cards, independent of the desktop ranking tree. */ body[data-surface=H5] .ranking-page{padding:0 0 32px;background:transparent} body[data-surface=H5] .ranking-hero{text-align:left;height:auto;min-height:0;padding:calc(40px + env(safe-area-inset-top,0px)) 20px 8px;position:relative;overflow:hidden;display:block;background:none;border:0;margin:0} body[data-surface=H5] .h5-trending{position:absolute;right:-20px;top:-4px;font-size:70px;font-weight:900;font-style:italic;letter-spacing:-.04em;line-height:1.5;color:#67e8f91a;user-select:none;white-space:nowrap} body[data-surface=H5] .h5-trending{pointer-events:none} body[data-surface=H5] .h5-trending:after{content:"TRENDING";position:absolute;inset:0;color:transparent;-webkit-text-stroke:.8px #ffffff0d} @media(min-width:768px){body[data-surface=H5] .h5-trending{font-size:88px}} body[data-surface=H5] .ranking-hero h1{-webkit-text-fill-color:currentColor;background:none;position:relative;display:flex;align-items:baseline;gap:12px;font-size:34px;font-weight:900;letter-spacing:.02em;line-height:1.5;margin:0 0 6px;color:#ffffffe6} body[data-surface=H5] .h5-hot{display:inline-flex;align-items:center;gap:5px;border-radius:8px;padding:2px 8px;background:linear-gradient(90deg,#00e5ff,#8e22ff);font-size:13px;font-weight:700;line-height:1.5;color:#fff;box-shadow:0 3px 10px #00e5ff33} body[data-surface=H5] .h5-hot svg{width:14px;height:14px;fill:currentColor} body[data-surface=H5] .ranking-hero p{font-weight:400;position:relative;font-size:13px;color:#ffffff66;letter-spacing:.04em;margin:0;line-height:1.5} body[data-surface=H5] .ranking-body{max-width:none;padding:0;margin:0} body[data-surface=H5] .h5-ranking-filters{position:sticky;top:0;z-index:35;padding:0 0 4px;background:transparent;backdrop-filter:blur(10px)} body[data-surface=H5] .ranking-categories{height:52px;display:flex;overflow:auto;gap:0;padding:0;margin:0;border:0;scrollbar-width:none;background:linear-gradient(to bottom,transparent,#0000001a,#0003)} body[data-surface=H5] .ranking-categories a{flex:0 0 25%;display:flex;justify-content:center;align-items:center;padding:0;position:relative;color:#ffffff66;font-size:17px;font-weight:400;background:none;white-space:nowrap;border:0;border-radius:0} body[data-surface=H5] .ranking-categories a[aria-current=page]{color:var(--accent);font-size:21px;font-weight:700;background:none} body[data-surface=H5] .ranking-categories a[aria-current=page]:after{content:"";position:absolute;width:28px;height:3.5px;bottom:0;left:50%;transform:translateX(-50%);border-radius:4px;background:#03dac6;box-shadow:0 0 8px #00e5ff99} body[data-surface=H5] .ranking-periods{width:calc(100% - 40px);height:42px;margin:4px 20px 0;display:flex;gap:0;padding:4px;border-radius:28px;background:#ffffff0d;border:0;overflow:auto;scrollbar-width:none} body[data-surface=H5] .ranking-periods a{flex:1 0 33.333%;min-width:0;padding:5px 0;color:#ffffff66;font-size:14px;font-weight:400;line-height:24px;text-align:center;border-radius:24px;border:0;background:transparent;white-space:nowrap} body[data-surface=H5] .ranking-periods a[aria-current=page]{font-weight:700;color:#fff;background:linear-gradient(#ffffff1f,#ffffff0d);box-shadow:inset 0 0 0 1px #ffffff0d} body[data-surface=H5] .ranking-list{display:grid;grid-template-columns:1fr;gap:12px;padding:20px 16px 0} body[data-surface=H5] .ranking-card{aspect-ratio:16/9;--rank-color:#8a7de1;margin:0;border:1.2px solid var(--rank-color);border-radius:12px;overflow:hidden;box-shadow:none;background:#14161a} body[data-surface=H5] .ranking-card[data-rank="1"]{--rank-color:#ed405c} body[data-surface=H5] .ranking-card[data-rank="2"]{--rank-color:#ef7c27} body[data-surface=H5] .ranking-card[data-rank="3"]{--rank-color:#e3b51e} body[data-surface=H5] .ranking-card-link{height:100%;display:block;position:relative;aspect-ratio:auto;padding:0;overflow:hidden;color:#fff} body[data-surface=H5] .h5-ranking-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} body[data-surface=H5] .ranking-position{letter-spacing:normal;position:absolute;top:12px;left:12px;min-width:0;font-size:14px;font-weight:800;font-style:normal;line-height:20px;background:var(--rank-color);color:#fff;padding:8px 14px;border-radius:5px;transform:none;text-shadow:none;z-index:2} body[data-surface=H5] .ranking-card[data-rank="3"] .ranking-position{color:#674900} body[data-surface=H5] .ranking-quality{position:absolute;top:12px;right:12px;border-radius:6px;padding:6px 12px;font-size:14px;font-weight:800;background:linear-gradient(135deg,#fff8e1,#ffd54f,#ff9800);color:#3d2800} body[data-surface=H5] .ranking-info{position:absolute;bottom:0;left:0;right:0;height:82px;display:flex;flex-direction:column;justify-content:center;padding:8px 16px;background:linear-gradient(#0002,#0007,#000b);backdrop-filter:blur(6px);gap:5px} body[data-surface=H5] .ranking-title{flex-wrap:nowrap;display:flex;align-items:center;gap:7px;min-width:0;margin:0} body[data-surface=H5] .ranking-title h2{font-size:19px;font-weight:900;line-height:1.25;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;margin:0;min-width:0} body[data-surface=H5] .h5-ranking-rating{font-size:22px;font-weight:900;color:#ffdf40;line-height:1;-webkit-text-stroke:1px #000;paint-order:stroke;flex:none} body[data-surface=H5] .ranking-heat{background:none;padding:0;border-radius:0;display:flex;align-items:center;gap:4px;margin-left:auto;flex:none;color:var(--rank-color);font-size:20px;font-weight:900;line-height:1.2} body[data-surface=H5] .ranking-heat svg{height:16px;width:16px;fill:currentColor} body[data-surface=H5] .ranking-description{font-size:12px;color:#ffffffa6;line-height:1.4;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin:0;display:block;max-width:none} body[data-surface=H5] .ranking-source-note{margin:24px 16px 12px;font-size:10px;color:#777b85} /* Player */ body[data-surface=H5] .h5-player{padding:0;min-height:100dvh} body[data-surface=H5] .h5-player-top{position:sticky;top:0;z-index:45;background:#000} body[data-surface=H5] .h5-player .video-stage{height:clamp(208px,61.538vw,300px);aspect-ratio:auto;background:#000} body[data-surface=H5] .h5-player-top>.playback-toolbar{display:none} body[data-surface=H5] .h5-player .video-stage video{object-fit:contain} body[data-surface=H5] .floating-back{top:16px;left:16px;width:28px;height:28px;padding:4px;background:#0005;border-radius:50%} body[data-surface=H5] .floating-back svg{width:20px;height:20px;stroke-width:3} body[data-surface=H5] .h5-player .video-start{font-size:12px;gap:8px} body[data-surface=H5] .h5-player .video-start .player-brand-mark{width:54px} body[data-surface=H5] .h5-player .catalog-source-notice{font-size:11px;max-width:90%;line-height:1.5} body[data-surface=H5] .h5-player .player-status{font-size:12px;padding:8px;left:4%;right:4%} body[data-surface=H5] .h5-player .h5-player-info{padding:0} body[data-surface=H5] .h5-player .player-detail-tabs{height:48px;display:flex;gap:0;margin:0 0 22px;padding:0;border-bottom:1px solid #ffffff0d;background:#101620} body[data-surface=H5] .h5-player .player-detail-tab{flex:1;font-size:15px;line-height:22px;padding:12px 0;min-height:48px;min-width:0;font-weight:700;border-bottom-width:2px;color:#ffffff66} body[data-surface=H5] .h5-player .player-detail-tab[aria-selected=true]{color:#fff;border-color:var(--accent)} body[data-surface=H5] .h5-player [data-detail-panel]{padding:0 16px 24px} body[data-surface=H5] .player-title-row{align-items:center;gap:9px;margin:0 0 12px} body[data-surface=H5] .player-title-row h1{flex:0 1 auto;min-width:0;margin:0;line-height:1.5;font-size:21px;font-weight:800} body[data-surface=H5] .h5-episode-total{font-size:10px;line-height:1.5;color:var(--accent);border:1px solid #03dac655;background:#03dac614;border-radius:10px;padding:2px 10px;white-space:nowrap;flex:none} body[data-surface=H5] .h5-player .favorite-button{padding:4px 0;border:0;border-radius:0;flex:none;background:none;color:#babdc4} body[data-surface=H5] .h5-player .favorite-button.is-active{color:var(--accent)} body[data-surface=H5] .h5-player-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 12px} body[data-surface=H5] .h5-player-meta>span{font-size:10px;line-height:16px;letter-spacing:.04em;padding:3px 9px;border:1px solid #ffffff1a;border-radius:4px;background:#181818eb;color:#b0b2ba} body[data-surface=H5] .h5-quality,body[data-surface=H5] .hero-tags span.h5-quality,body[data-surface=H5] .h5-player-meta>span.h5-quality{background:linear-gradient(135deg,#fff8e1,#ffd54f,#ff9800);font-weight:800;color:#3d2800;border:0;letter-spacing:.04em} body[data-surface=H5] .h5-player-meta>span.h5-rating{color:#ffdf40;background:transparent;border:0;font-size:17px;font-weight:900;padding-inline:0} body[data-surface=H5] .player-description{padding:0;border:0;margin:0 0 24px} body[data-surface=H5] .player-synopsis{font-size:13px;line-height:21px;color:#ffffff80;margin:0 0 10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} body[data-surface=H5] .player-synopsis.is-expanded{display:block;-webkit-line-clamp:unset} body[data-surface=H5] .player-description-toggle{padding:0;background:transparent;color:#ffffff66;font-size:12px;line-height:20px;min-height:24px} body[data-surface=H5] .h5-more-facts{margin-top:16px;color:#9c9ea8} body[data-surface=H5] .h5-episode-bar{margin-bottom:18px} body[data-surface=H5] .h5-episode-bar>button{display:flex;justify-content:space-between;align-items:center;background:transparent;padding:6px 0;width:100%;text-align:left;color:#fff;font-size:16px;font-weight:600;gap:10px} body[data-surface=H5] .h5-episode-bar>button>span{display:flex;align-items:center;gap:8px;min-width:0} body[data-surface=H5] .h5-episode-bar>button>span:last-child{font-size:12px;color:#a5a6af;flex:none} body[data-surface=H5] .h5-episode-bar small{font-size:12px;font-weight:400;color:#777c86;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:130px} body[data-surface=H5] .h5-episode-bar svg{height:16px;width:16px} body[data-surface=H5] .h5-inline-episodes{padding:0;margin-bottom:28px} body[data-surface=H5] .h5-inline-episodes .episodes{padding:0;margin:0;border:0;max-height:none;background:transparent} body[data-surface=H5] .h5-inline-episodes .episodes>header{display:none} body[data-surface=H5] .h5-inline-episodes .episodes:not(.is-open) .episode-group-tabs{display:none} body[data-surface=H5] .h5-inline-episodes .episode-grid{display:flex;gap:8px;max-height:none;padding:0;overflow-x:auto;scrollbar-width:none} body[data-surface=H5] .h5-inline-episodes .episode-grid::-webkit-scrollbar{display:none} body[data-surface=H5] .h5-inline-episodes .episode-grid a{display:flex;align-items:center;justify-content:center;gap:4px;flex:0 0 calc((100% - 40px)/6);height:auto;aspect-ratio:1;min-width:0;border-radius:10px;background:#21262d;border:1px solid transparent;color:#f5f5f6;font-size:20px;font-weight:700} body[data-surface=H5] .h5-inline-episodes .episode-grid a[aria-current=true]{background:#03dac614;border-color:#03dac699;color:var(--accent)} body[data-surface=H5] .h5-inline-episodes .episode-grid a[aria-disabled=true]{color:#8b8f9c} body[data-surface=H5] .h5-inline-episodes .episodes.is-open{position:fixed;bottom:0;left:50%;right:auto;width:min(100%,var(--h5-width));transform:translateX(-50%);z-index:101;max-height:75dvh;overflow:auto;margin:0;padding:20px 16px max(28px,env(safe-area-inset-bottom));border-radius:20px 20px 0 0;background:#111620;box-shadow:0 -12px 40px #0006} body[data-surface=H5] .h5-inline-episodes .episodes.is-open>header{display:flex;margin-bottom:18px} body[data-surface=H5] .h5-inline-episodes .episodes.is-open .episode-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));max-height:50dvh;overflow:auto} body[data-surface=H5] .h5-inline-episodes .episodes.is-open .h5-close-episodes{display:flex} body[data-surface=H5] .h5-cast-section{padding:0;margin:0 0 24px} body[data-surface=H5] .h5-cast-section .cast-strip{margin:0} body[data-surface=H5] .h5-cast-section h2{font-size:16px;font-weight:700;margin:0 0 12px;padding:0;border:0;color:#fff} body[data-surface=H5] .cast-cards{gap:22px;padding:0 2px 6px;margin:0;scrollbar-width:none} body[data-surface=H5] .h5-player .cast-card{flex:0 0 74px;gap:8px} body[data-surface=H5] .h5-player .cast-avatar{height:72px;width:72px;font-size:23px;font-weight:700;border:1px solid #397cff55;background:linear-gradient(135deg,#18334c,#101623);color:#529bff} body[data-surface=H5] .h5-player .cast-card:nth-child(4n+2) .cast-avatar{background:linear-gradient(135deg,#005d73,#101623);border-color:#03dac655;color:#00c9eb} body[data-surface=H5] .h5-player .cast-card:nth-child(4n+3) .cast-avatar{background:linear-gradient(135deg,#4b242a,#101623);border-color:#ee5c6355;color:#ee5c63} body[data-surface=H5] .h5-player .cast-card:nth-child(4n+4) .cast-avatar{background:linear-gradient(135deg,#4b4624,#101623);border-color:#ffdd5555;color:#ffe266} body[data-surface=H5] .h5-player .cast-name{font-size:12px;line-height:1.5;white-space:nowrap;max-width:74px;overflow:hidden;text-overflow:ellipsis} body[data-surface=H5] .h5-player .cast-role{font-size:10px;color:#777d88} body[data-surface=H5] .h5-player .h5-related{padding:0;margin-top:20px} body[data-surface=H5] .h5-related .section-heading{margin:0 0 16px} body[data-surface=H5] .h5-related h2{font-size:17px;padding-left:0;font-weight:700} body[data-surface=H5] .h5-related h2:before{display:none} body[data-surface=H5] .h5-player .comment-form{position:fixed;bottom:max(12px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:min(calc(100% - 32px),468px);z-index:55;display:flex;align-items:center;padding:5px 12px;border:1px solid #ffffff1a;border-radius:32px;background:#22252bd9;backdrop-filter:blur(16px);margin:0} body[data-surface=H5] .h5-player .comment-editor{border:0;flex:1;min-width:0;background:none;padding:0} body[data-surface=H5] .h5-player .comment-avatar{display:none} body[data-surface=H5] .h5-player #comment-body{font-size:13px;min-height:36px;height:36px;max-height:90px;padding:8px 0;background:transparent;border:0;resize:vertical} body[data-surface=H5] .h5-player .comment-send-row{margin:0;padding:0} body[data-surface=H5] .h5-player .comment-send{font-size:12px;min-width:50px;height:42px;padding:0 12px;border-radius:24px;color:var(--accent);background:#03dac614;border:1px solid #03dac666} body[data-surface=H5] .h5-player .comments-empty{padding:36px 0;text-align:center} body[data-surface=H5] .h5-player [data-comments]{padding-bottom:80px} /* Account and library */ body[data-surface=H5] .h5-profile{padding:20px;min-height:calc(100dvh - 160px)} body[data-surface=H5] .h5-profile-header{margin-bottom:28px} body[data-surface=H5] .h5-profile-identity{display:flex;align-items:center;gap:20px;min-width:0} body[data-surface=H5] .h5-profile-avatar{display:grid;place-items:center;height:76px;width:76px;flex:none;border-radius:50%;background:#03dac614;color:#7cecf0;border:1px solid #03dac633} body[data-surface=H5] .h5-profile-avatar svg{height:36px;width:36px} body[data-surface=H5] .h5-profile-identity>span:nth-child(2){min-width:0} body[data-surface=H5] .h5-profile-identity h1{font-size:20px;line-height:1.5;font-weight:900;margin:0 0 5px} body[data-surface=H5] .h5-profile-identity small{font-size:12px;color:#8c94a2;overflow-wrap:anywhere} body[data-surface=H5] .h5-profile-chevron{width:18px;height:18px;margin-left:auto;color:#7d8491;flex:none} body[data-surface=H5] .h5-profile-shortcuts{display:flex;padding:24px 0;margin-bottom:26px;gap:12px;border-block:1px solid #ffffff0d} body[data-surface=H5] .h5-profile-shortcuts a{display:flex;align-items:center;flex-direction:column;gap:12px;flex:1;color:#b8c1d1;font-size:12px} body[data-surface=H5] .h5-profile-shortcuts svg{width:28px;height:28px;color:#d4dfef} body[data-surface=H5] .h5-profile-services h2{font-size:16px;margin-bottom:20px} body[data-surface=H5] .h5-profile-services>a{display:flex;align-items:center;gap:16px;padding:16px 0;border-bottom:1px solid #ffffff0d;font-size:14px} body[data-surface=H5] .h5-profile-services small{display:block;color:#737e90;font-size:11px;margin-top:6px;line-height:1.6} body[data-surface=H5] .h5-profile-services>a>svg:last-child{margin-left:auto;width:16px;color:#737e90} body[data-surface=H5] .h5-profile-note{font-size:11px;color:#788294;margin-top:24px;line-height:1.8} body[data-surface=H5] .account-page{padding:24px 16px 40px} body[data-surface=H5] .account-page .eyebrow{display:none} body[data-surface=H5] .account-page .page-heading h1{font-size:22px} body[data-surface=H5] .account-page .page-heading>p{font-size:12px;line-height:1.8} body[data-surface=H5] .credential-panel{padding:22px 0;background:transparent;border:0} body[data-surface=H5] .credential-image{max-width:260px} body[data-surface=H5] .account-actions{gap:16px} body[data-surface=H5] .recovery-panel .secondary-button{margin:0 5px 12px 0} body[data-surface=H5] .debug-recovery{display:none} body[data-surface=H5]:has(.history-page){background:linear-gradient(140deg,#060d19,#050613);min-height:100dvh} body[data-surface=H5] .h5-library-header{height:64px;display:flex;align-items:center;gap:16px;padding:12px 16px;position:sticky;top:0;z-index:45;background:#060b18ee;backdrop-filter:blur(12px)} body[data-surface=H5] .h5-library-header>.icon-button{padding:0;width:24px;height:36px;color:#fff} body[data-surface=H5] .h5-library-header .record-tabs{border:0;margin:0;display:flex;gap:22px;flex:1;justify-content:center} body[data-surface=H5] .h5-library-header .record-tabs a{font-size:18px;font-weight:700;line-height:28px;padding:0;color:#aaaab2;border:0} body[data-surface=H5] .h5-library-header .record-tabs a.is-current{color:var(--accent)} body[data-surface=H5] .h5-library-header>.text-button{font-size:14px;color:#fff;padding:4px 0} body[data-surface=H5] .history-page{padding:8px 16px 40px} body[data-surface=H5] .h5-library-filters{display:flex;gap:10px;overflow:auto;scrollbar-width:none;padding:0 0 12px;position:sticky;top:64px;z-index:30;background:#060b18ee} body[data-surface=H5] .h5-library-filters button{flex:none;padding:9px 16px;background:#ffffff0d;border:1px solid #ffffff1a;border-radius:8px;color:#b1b2bd;font-size:13px} body[data-surface=H5] .h5-library-filters button[aria-pressed=true]{color:var(--accent);border-color:#03dac688;background:#03dac61a} body[data-surface=H5] .h5-library-filter-note{font-size:10px;color:#8c91a2;margin:4px 0} body[data-surface=H5] .library-toolbar{margin:14px 0 24px;align-items:center;gap:12px} body[data-surface=H5] .library-toolbar .result-total{font-size:12px;color:#a3a8b6;margin:0} body[data-surface=H5] .library-toolbar [data-library-clear]{display:none;font-size:12px} body[data-surface=H5] .history-page.is-editing [data-library-clear]{display:block} body[data-surface=H5] .private-list{grid-template-columns:1fr;gap:24px} body[data-surface=H5] .history-card>a,body[data-surface=H5] .history-card>div{display:grid;grid-template-columns:140px minmax(0,1fr);gap:5px 14px;align-content:center;min-height:82px} body[data-surface=H5] .history-card img{grid-row:1/4;width:140px;height:82px;aspect-ratio:140/82;object-fit:cover;border-radius:8px} body[data-surface=H5] .history-card h3{font-size:14px;margin:2px 0;font-weight:600;line-height:1.5} body[data-surface=H5] .history-card p{font-size:11px;line-height:1.5;color:#8b91a1;margin:0} body[data-surface=H5] .history-card>[data-library-remove]{display:none} body[data-surface=H5] .is-editing .history-card>[data-library-remove]{display:block;margin:10px 0 0 auto;background:#ffffff0d;color:#c8cbd5} body[data-surface=H5] .history-page .empty-state{min-height:260px;color:#777f93} body[data-surface=H5] .history-page .empty-state h2{font-size:16px;color:#9da7b8} body[data-surface=H5] .h5-player~.page-footer{margin-bottom:100px} body[data-surface=H5] .toast{max-width:calc(100% - 32px);width:max-content} @media(max-width:359px){body[data-surface=H5] .h5-header{gap:8px;padding-inline:12px}body[data-surface=H5] .h5-header .brand{width:60px;flex-basis:60px}body[data-surface=H5] .h5-header .brand-logo{width:60px}body[data-surface=H5] .search-entry{padding-inline:10px;font-size:11px}body[data-surface=H5] .h5-header .circle-link{width:32px;height:32px;flex-basis:32px}body[data-surface=H5] .h5-tabs{gap:20px;padding-inline:16px;font-size:13px}body[data-surface=H5] .h5-tabs a[aria-current=page]{font-size:15px}body[data-surface=H5] .search-card{grid-template-columns:104px minmax(0,1fr);gap:12px}body[data-surface=H5] .search-cover img{width:104px;height:148px}body[data-surface=H5] .h5-editorial-card{grid-template-columns:114px minmax(0,1fr)}body[data-surface=H5] .history-card>a,body[data-surface=H5] .history-card>div{grid-template-columns:114px minmax(0,1fr)}body[data-surface=H5] .history-card img{width:114px;height:72px}body[data-surface=H5] .h5-player .cast-card{flex-basis:64px}body[data-surface=H5] .h5-player .cast-avatar{width:60px;height:60px}} @media(orientation:landscape) and (max-height:500px){body[data-surface=H5] .h5-player-top{position:relative}body[data-surface=H5] .h5-player .video-stage{height:240px}body[data-surface=H5] .h5-inline-episodes .episodes.is-open{max-height:90dvh}body[data-surface=H5] .h5-inline-episodes .episodes.is-open .episode-grid{max-height:60dvh}} @media(prefers-reduced-motion:reduce){body[data-surface=H5] .hero-slide{transition:none}} body[data-surface=H5] .ranking-hero:before,body[data-surface=H5] .ranking-hero:after{display:none} body[data-surface=H5] .ranking-card:hover{transform:none;background:#14161a;border-color:var(--rank-color);box-shadow:none} body[data-surface=H5] .ranking-card:hover h2{color:#fff} /* Source scroll state: retain the 54px search bar and fold away the tab row. */ body[data-surface=H5] .h5-tabs{transition:transform .2s ease,opacity .2s ease} body[data-surface=H5].h5-chrome-collapsed .h5-tabs{transform:translate(-50%,-100%);opacity:0;pointer-events:none} @media(prefers-reduced-motion:reduce){body[data-surface=H5] .h5-tabs{transition:none}} body[data-surface=H5] .h5-orientation-guard{display:none} @media(orientation:landscape) and (max-height:500px){body[data-surface=H5] .h5-orientation-guard{display:flex;position:fixed;inset:0;z-index:10000;background:#08080a;align-items:center;justify-content:center;flex-direction:column;gap:12px;color:#fff}body[data-surface=H5] .h5-orientation-guard p{font-size:18px;line-height:27px;font-weight:700;margin:0}body[data-surface=H5] .h5-orientation-guard span{font-size:13px;color:#ffffff66;line-height:20px}body[data-surface=H5].h5-native-fullscreen .h5-orientation-guard{display:none}} body[data-surface=H5] .h5-topic-back{position:absolute;left:18px;top:14px;z-index:3;width:30px;height:30px;border-radius:50%;padding:5px;background:#0008;color:#fff} body[data-surface=H5] .h5-topic-hero-meta{display:flex;gap:8px;margin-bottom:12px} body[data-surface=H5] .h5-topic-hero-meta span{padding:4px 10px;border:1px solid #ffffff40;background:#0006;border-radius:8px;color:#fff;font-size:12px;line-height:18px;font-weight:600} body[data-surface=H5] .h5-topic-list-heading h2{font-size:18px;line-height:27px;padding:0} body[data-surface=H5] .h5-topic-list-heading h2:before{display:none} body[data-surface=H5] .h5-topic-copy .video-meta{font-size:11px;line-height:15.125px;color:#ffffff80;margin:4px 0} body[data-surface=H5] .search-page:has([data-search-results]>.empty-state) [data-search-total]{display:none} body[data-surface=H5] .search-page [data-search-results]>.empty-state{min-height:270px;justify-content:center;padding:30px 0} body[data-surface=H5] .search-page [data-search-results]>.empty-state h2{font-size:13px;line-height:21px;font-weight:400;color:#ffffff40;margin:0 0 8px} body[data-surface=H5] .search-page [data-search-results]>.empty-state p{font-size:12px;color:#ffffff33;margin:0} body[data-surface=H5] .h5-topic-title{display:flex;align-items:flex-start;gap:6px} body[data-surface=H5] .h5-topic-title h2{flex:1;min-width:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} body[data-surface=H5] .h5-topic-title>span{flex:none;border-radius:3px;padding:2px 6px;font-size:10px;font-weight:700;background:#2979ffd9;color:#fff;line-height:15px} /* H5 records follow the observed day groups; mutations remain account scoped. */ body[data-surface=H5] .history-page .library-toolbar{height:0;min-height:0;margin:0;overflow:hidden} body[data-surface=H5] .history-page .library-toolbar [data-library-total]{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)} body[data-surface=H5] .history-page.is-editing .library-toolbar{height:auto;margin:10px 0;overflow:visible;justify-content:flex-end} body[data-surface=H5] .history-page .private-list{margin-top:24px;row-gap:20px} body[data-surface=H5] .h5-library-group{margin:0;font-size:18px;font-weight:700;line-height:27px;color:#fff} body[data-surface=H5] .h5-library-group:not(:first-child){margin-top:16px} body[data-surface=H5] .history-page .empty-state{min-height:196px;padding:0} body[data-surface=H5] .history-page .empty-state h2{font-size:16px;line-height:24px;font-weight:400;color:#ffffff80;margin:0} body[data-surface=H5] .history-page .empty-state>a{display:none} body[data-surface=H5] .h5-episode-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap} body[data-surface=H5] .h5-episode-bar>[data-open-episodes]{flex:1;min-width:230px} body[data-surface=H5] .h5-episode-bar>.h5-next-episode{width:auto;flex:none;font-size:12px;line-height:20px;color:var(--accent);padding:5px 10px;background:#03dac60d;border-radius:6px} /* Final rendered source editorial cards use a tinted rank shell and a distinct heat rail. */ body[data-surface=H5] .h5-editorial-page{padding-top:134px} body[data-surface=H5] .h5-editorial-module>.section-heading{margin-bottom:32px} body[data-surface=H5] .h5-editorial-card{--editorial-color:#8c899f;display:flex;align-items:center;gap:0;min-height:198px;padding:12px;border:1px solid #ffffff14;border-radius:12px;background:#ffffff0a;margin:0 0 12px} body[data-surface=H5] .h5-editorial-card[data-rank="1"]{--editorial-color:#ed405c;background:#ed405c1f;border-color:#ed405c66} body[data-surface=H5] .h5-editorial-card[data-rank="2"]{--editorial-color:#ff811f;background:#ff811f1f;border-color:#ff811f66} body[data-surface=H5] .h5-editorial-card[data-rank="3"]{--editorial-color:#ffc400;background:#ffc4001f;border-color:#ffc40066} body[data-surface=H5] .h5-editorial-card .cover-link{flex:0 0 125px;width:125px;height:172px;border-radius:8px} body[data-surface=H5] .h5-editorial-card .cover-link>img{width:125px;height:172px;aspect-ratio:auto;object-fit:cover} body[data-surface=H5] .h5-editorial-card .h5-editorial-rank{top:0;left:0;padding:2px 8px;border-radius:8px 0 8px 0;font-size:13px;line-height:19.5px;font-weight:900;font-style:italic;background:var(--editorial-color);color:#fff} body[data-surface=H5] .h5-editorial-copy{flex:1;min-width:0;margin-left:16px;padding:4px 0;align-self:stretch} body[data-surface=H5] .h5-editorial-copy h3{margin:0;font-size:17px;line-height:25.5px;font-weight:700} body[data-surface=H5] .h5-editorial-meta{font-size:12px;line-height:18px;color:#ffffff80;margin:8px 0 6px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden} body[data-surface=H5] .h5-editorial-description{font-size:12px;line-height:18.6px;color:#ffffff66;margin:0;-webkit-line-clamp:4} body[data-surface=H5] .h5-editorial-heat{margin-left:8px;flex:0 0 auto;min-width:90px;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:4px;color:var(--editorial-color)} body[data-surface=H5] .h5-editorial-heat strong{font-size:17px;font-weight:900;line-height:25.5px;white-space:nowrap;max-width:none;overflow:visible;display:flex;align-items:center;gap:2px} body[data-surface=H5] .h5-editorial-heat svg{width:16px;height:16px;fill:currentColor} body[data-surface=H5] .h5-editorial-heat small{font-size:10px;color:#ffffff66;line-height:15px;white-space:nowrap} body[data-surface=H5] .h5-editorial-card .card-cover-meta .card-rating{font-size:14px;line-height:1} body[data-surface=H5] .topic-card>a:before{content:"专题";position:absolute;top:0;right:0;z-index:2;padding:3.19px 12.44px 3.19px 7.46px;background:linear-gradient(135deg,#03dac6,#00bfa5,#ffffff33,#03dac6);color:#fff;font-size:11.82px;font-weight:900;font-style:italic;letter-spacing:.75px;border-top-left-radius:7.46px;clip-path:polygon(0 0,100% 0,calc(100% - 10px) 100%,0 100%);filter:drop-shadow(0 4px 12px #00000073)} body[data-surface=H5] .discovery-root .topic-card>a:after{content:"";position:absolute;inset:0;pointer-events:none;background:#ffffff0f;opacity:0;transition:opacity .1s ease} body[data-surface=H5] .discovery-root .topic-card>a:active:after{opacity:1} @media(min-width:640px){body[data-surface=H5] .discovery-root .topic-card>a{aspect-ratio:2/1}} body[data-surface=H5] .h5-feature-heading{margin-bottom:31px} body[data-surface=H5] .h5-editorial-page .hero{margin-bottom:40px} /* Discovery and results are separate observed header states (AI search is outside scope). */ body[data-surface=H5] .h5-search-discovery-header{padding-right:12px} body[data-surface=H5] .h5-search-discovery-header .search-form{margin-right:0;border-radius:12px;padding-right:12px} body[data-surface=H5] .h5-search-discovery-header .h5-search-icon{display:none} body[data-surface=H5] .h5-search-discovery-header input{background:transparent;padding-left:12px;border-radius:0} body[data-surface=H5] .h5-search-discovery-header .search-form>button[type=submit]{position:static;flex:0 0 58px;width:58px;height:36px;border-radius:12px;background:linear-gradient(135deg,#00e5ff,var(--accent));color:#fff;font-size:13px;font-weight:700} body[data-surface=H5] .search-discovery-note{font-size:12px;line-height:18px;color:#ffffff4d;margin:0 0 16px} body[data-surface=H5] .search-recommendation-section{min-height:132px} body[data-surface=H5] .search-discovery>section:has(>.hot-keywords){border-top:1px solid #ffffff08;padding-top:20px} body[data-surface=H5] .search-discovery>section:has(>.hot-keywords) h2{color:var(--accent)} body[data-surface=H5] .h5-filter-toggle{display:none;width:100%;height:44px;border:0;background:#050505;color:var(--accent);font-size:13px} body[data-surface=H5].h5-catalog-collapsed .h5-inner-header{transform:translateY(-100%);pointer-events:none} body[data-surface=H5].h5-catalog-collapsed .h5-catalog-filters{top:0;padding-bottom:0} body[data-surface=H5].h5-catalog-collapsed .h5-filter-toggle{display:block} body[data-surface=H5].h5-catalog-collapsed:not(.h5-catalog-expanded) .catalog-filter-row{display:none} body[data-surface=H5].h5-catalog-expanded .h5-filter-toggle span{display:inline-block;transform:rotate(180deg)} body[data-surface=H5] .h5-inline-episodes .episode-grid a[aria-current=true] .episode-number{display:inline} body[data-surface=H5] .h5-inline-episodes .episode-playing{gap:2px;color:var(--accent)} body[data-surface=H5] .h5-inline-episodes .episode-playing i{width:2px;height:5px} body[data-surface=H5] .h5-inline-episodes .episode-playing i:nth-child(2){height:9px} body[data-surface=H5] .h5-inline-episodes .episode-playing i:nth-child(3){height:7px} body[data-surface=H5] .h5-episode-bar>[data-open-episodes]{min-width:0} body[data-surface=H5] .h5-episode-bar>[data-open-episodes]>span{white-space:nowrap} body[data-surface=H5] .short-portrait-grid .cover-link>img{aspect-ratio:2/3;height:100%;width:100%} /* Keep the H5 chart readable in its capped preview container as well. */ body[data-surface=H5] .short-hot-chart{padding:16px;border-radius:12px}body[data-surface=H5] .short-hot-chart .section-heading h2{font-size:22px}body[data-surface=H5] .short-chart-grid{display:flex;flex-direction:column;gap:12px}body[data-surface=H5] .short-chart-card,body[data-surface=H5] .short-chart-card.rank-1,body[data-surface=H5] .short-chart-card:nth-child(n+6){padding:12px;gap:12px;min-height:122px}body[data-surface=H5] .short-chart-card img,body[data-surface=H5] .short-chart-card.rank-1 img,body[data-surface=H5] .short-chart-card:nth-child(n+6) img{width:76px}body[data-surface=H5] .short-chart-card .short-chart-rank{font-size:20px}body[data-surface=H5] .short-chart-card.rank-1 .short-chart-rank,body[data-surface=H5] .short-chart-card:nth-child(n+6) .short-chart-rank{top:8px;left:8px;font-size:14px;padding:4px 7px;border-radius:4px}body[data-surface=H5] .short-chart-copy h3,body[data-surface=H5] .short-chart-card.rank-1 h3,body[data-surface=H5] .short-chart-card:nth-child(n+6) h3{font-size:15px;margin-bottom:6px}body[data-surface=H5] .short-chart-copy p{margin:0 0 8px;font-size:11px}body[data-surface=H5] .short-chart-winner{margin-bottom:6px;font-size:12px}body[data-surface=H5] .short-chart-play{display:none}body[data-surface=H5] .short-chart-heat,body[data-surface=H5] .rank-1 .short-chart-heat,body[data-surface=H5] .short-chart-card:nth-child(n+6) .short-chart-heat{display:flex;gap:8px}body[data-surface=H5] .short-chart-heat strong,body[data-surface=H5] .rank-1 .short-chart-heat strong,body[data-surface=H5] .short-chart-card:nth-child(n+6) strong{font-size:20px;margin:0}body[data-surface=H5] .short-portrait-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 10px}body[data-surface=H5] .short-portrait-grid h3{font-size:13px}body[data-surface=H5] .short-portrait-grid .card-tags{display:none} /* Short-drama H5 categories: vertical chart, horizontal portrait shelves. */ body[data-surface=H5] .h5-category-module{margin-bottom:40px} body[data-surface=H5] .h5-category-module>.section-heading{margin:0 0 32px;min-height:28px} body[data-surface=H5] .h5-category-module>.section-heading a{font-size:12.5px;font-weight:700} body[data-surface=H5] .h5-category-module .h5-editorial-card{--editorial-color:#00b8cf} body[data-surface=H5] .h5-category-module .h5-editorial-card[data-rank="1"]{--editorial-color:#ed405c} body[data-surface=H5] .h5-category-module .h5-editorial-card[data-rank="2"]{--editorial-color:#ff811f} body[data-surface=H5] .h5-category-module .h5-editorial-card[data-rank="3"]{--editorial-color:#ffc400} body[data-surface=H5] .h5-category-module .h5-editorial-card .card-quality{display:none} body[data-surface=H5] .h5-category-module .h5-editorial-copy h3{font-size:17px} body[data-surface=H5] .h5-category-module .h5-editorial-heat{flex-basis:auto} body[data-surface=H5] .h5-category-module .h5-editorial-card:nth-child(n+4) .h5-editorial-heat{color:#fff} body[data-surface=H5] .h5-category-module .h5-editorial-card:nth-child(n+4) .h5-editorial-heat svg{color:#ffdf00} body[data-surface=H5] [data-discovery-page="shorts"] .h5-category-module .h5-category-shelf{margin-inline:-16px;width:calc(100% + 32px);gap:10px;padding:0 16px 6px;scroll-padding-inline:16px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none} body[data-surface=H5] [data-discovery-page="shorts"] .h5-category-module .h5-category-shelf .video-card{flex:0 0 110px;width:110px;min-width:0} body[data-surface=H5] [data-discovery-page="shorts"] .h5-category-module .h5-category-shelf .cover-link{border-radius:12px;aspect-ratio:3/4} body[data-surface=H5] [data-discovery-page="shorts"] .h5-category-module .h5-category-shelf .cover-link>img{aspect-ratio:3/4;width:100%;height:100%;object-fit:cover} body[data-surface=H5] [data-discovery-page="shorts"] .h5-category-module[data-template="landscape_slider"] .h5-category-shelf .video-card{flex:0 0 200px;width:200px} body[data-surface=H5] [data-discovery-page="shorts"] .h5-category-module[data-template="landscape_slider"] .h5-category-shelf .cover-link,body[data-surface=H5] [data-discovery-page="shorts"] .h5-category-module[data-template="landscape_slider"] .h5-category-shelf .cover-link>img{aspect-ratio:16/9} body[data-surface=H5] [data-discovery-page="shorts"] .h5-category-module .h5-category-shelf .new-badge,body[data-surface=H5] [data-discovery-page="shorts"] .h5-category-module .h5-category-shelf .card-quality{display:none} body[data-surface=H5] [data-discovery-page="shorts"] .h5-category-module .h5-category-shelf .video-card h3{font-size:13px;font-weight:500;margin:6px 2px 4px} body[data-surface=H5] [data-discovery-page="shorts"] .h5-category-module .h5-category-shelf .card-tags{gap:4px;margin-inline:2px} body[data-surface=H5] [data-discovery-page="shorts"] .h5-category-module .h5-category-shelf .card-tags span{font-size:10px;padding:2px 6px;border-radius:4px;border-color:#ffffff26;background:#ffffff05;color:#b8b9bd} body[data-surface=H5] [data-discovery-page="shorts"] .h5-category-module .h5-category-shelf .card-tags span:first-child{background:#28271e;border-color:#ffffff40;color:#ddd} body[data-surface=H5] [data-discovery-page="shorts"] .h5-category-module .h5-category-shelf .card-update{font-size:11px;font-weight:700} body[data-surface=H5] [data-discovery-page="shorts"] .h5-category-module .h5-category-shelf .card-rating{font-size:17px} @media(max-width:359px){ body[data-surface=H5] .h5-category-module .h5-editorial-card .cover-link{flex-basis:100px;width:100px;height:138px} body[data-surface=H5] .h5-category-module .h5-editorial-card .cover-link>img{width:100px;height:138px} body[data-surface=H5] .h5-category-module .h5-editorial-copy{margin-left:10px} body[data-surface=H5] .h5-category-module .h5-editorial-heat{flex-basis:auto;min-width:80px;margin-left:4px} body[data-surface=H5] .h5-category-module .h5-editorial-heat strong{font-size:14px} } body[data-surface=H5] .h5-playback-line-picker{padding:10px 16px;background:var(--bg);min-height:60px;width:100%}body[data-surface=H5] .h5-playback-line-picker[hidden]{display:none} /* Direct short-drama viewing: the persistent four-item nav stays below media. */ body[data-surface=H5]:has(.h5-short-player),body[data-surface=H5]:has(.h5-shorts-empty){background:#000} body[data-surface=H5] .h5-short-player{position:relative;min-height:100dvh;padding:0 0 max(120px,calc(env(safe-area-inset-bottom) + 100px));background:#000} body[data-surface=H5] .short-player-heading{position:absolute;inset:0 0 auto;z-index:6;display:flex;align-items:center;justify-content:space-between;padding:16px;background:linear-gradient(#0009,transparent)} body[data-surface=H5] .short-player-heading h1{font-size:18px;margin:0} body[data-surface=H5] .short-player-media .video-stage{height:calc(100dvh - 270px);min-height:260px;max-height:none;aspect-ratio:auto;background:#000} body[data-surface=H5] .short-player-media video{width:100%;height:100%;object-fit:contain} body[data-surface=H5] .short-player-media .playback-toolbar,body[data-surface=H5] .short-player-media .media-note{display:none} body[data-surface=H5] .short-player-media .h5-playback-line-picker{margin:0 16px 8px} body[data-surface=H5] .short-player-copy{position:relative;padding:12px 16px 0} body[data-surface=H5] .short-player-title{display:flex;align-items:center;gap:12px} body[data-surface=H5] .short-player-title h2{flex:1;margin:0;font-size:16px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} body[data-surface=H5] .short-player-tags{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0} body[data-surface=H5] .short-player-tags span{border:1px solid #ffffff4d;border-radius:3px;color:#ffffff99;font-size:10px;padding:0 4px} body[data-surface=H5] .short-player-episodes{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;border:0;border-radius:8px;background:#ffffff26;padding:10px;color:#fff;font-size:12px} body[data-surface=H5] .short-player-episodes>span{display:flex;align-items:center;gap:5px;min-width:0} body[data-surface=H5] .short-player-episodes strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} body[data-surface=H5] .short-player-episodes>span:last-child{flex:none} body[data-surface=H5] .short-player-episodes svg{width:16px;height:16px} body[data-surface=H5] .h5-short-player .episodes:not(.is-open){display:none} body[data-surface=H5] .h5-short-player .episodes.is-open{bottom:max(108px,calc(env(safe-area-inset-bottom) + 84px));max-height:65dvh} body[data-surface=H5]:has(.h5-short-player) .episode-backdrop{bottom:104px} body[data-surface=H5]:has(.h5-short-player)>.page-footer{display:none} body[data-surface=H5] .h5-shorts-empty{min-height:100dvh;padding:120px 24px;text-align:center} body[data-surface=H5] .h5-shorts-empty a{color:var(--accent)} /* Profile reference: its inner scrolling page uses bg-[#0F172A]. */ body[data-surface=H5]:has(.h5-profile){ background:#0f172a; } body[data-surface=H5] .h5-profile{ background:#0f172a; } /* Reuse the account avatar already used by the PC framework header. */ body[data-surface=H5] .h5-profile-avatar{ overflow:hidden; background:#314b42; border:2px solid #9cd9bd; } body[data-surface=H5] .h5-profile-avatar img{ display:block; width:100%; height:100%; object-fit:cover; border-radius:50%; } /* History cards use the archive's fixed 160px landscape cover and in-image progress. */ body[data-surface=H5] .h5-continue{margin-bottom:24px} body[data-surface=H5] .h5-continue .section-heading{margin:0 4px 8px;padding-top:16px} body[data-surface=H5] .h5-continue .section-heading h2{font-weight:900;letter-spacing:.025em} body[data-surface=H5] .h5-continue .section-heading>a{color:var(--accent);font-size:12.5px;font-weight:700} body[data-surface=H5] .h5-continue .card-shelf{gap:12px;padding-bottom:0;scroll-snap-type:x proximity} body[data-surface=H5] .h5-continue .card-shelf .video-card{flex:0 0 160px;width:160px;scroll-snap-align:start} body[data-surface=H5] .h5-continue .cover-link{aspect-ratio:16/9;border-radius:8px;background:#ffffff0d} body[data-surface=H5] .h5-continue .cover-link>img{width:100%;height:100%;aspect-ratio:16/9;object-fit:cover} body[data-surface=H5] .h5-continue .video-card h3{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:6px 0 0;font-size:13px;font-weight:500;line-height:1.25;color:#ffffffe6} body[data-surface=H5] .h5-continue-category{position:absolute;left:6px;top:6px;max-width:calc(50% - 9px);padding:2px 5px;border-radius:4px;background:#0009;color:#fffffff2;font-size:9px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} body[data-surface=H5] .h5-continue-progress{position:absolute;left:0;right:0;bottom:3px;margin:0;padding:10px 6px 3px;background:linear-gradient(to top,#000000bf,transparent);font-size:10px;font-weight:500;line-height:1;color:#ffffffe6} body[data-surface=H5] .h5-continue-latest{color:#03dac6} body[data-surface=H5] .h5-continue-track{position:absolute;left:0;right:0;bottom:0;height:3px;background:#fff3} body[data-surface=H5] .h5-continue-track>span{display:block;height:100%;background:var(--accent)} /* One shared light moves between the existing links; no new menu destinations. */ body[data-surface=H5] .bottom-nav.h5-motion-bottom>a{z-index:1} body[data-surface=H5] .bottom-nav.h5-motion-bottom>a.is-current:before{display:none} body[data-surface=H5] .h5-bottom-indicator{position:absolute;top:8px;bottom:8px;z-index:0;overflow:hidden;pointer-events:none;border-radius:30px;border:1.5px solid #34495ecc;background:linear-gradient(135deg,#2c3e50,#1a252f 50%,#121a21);box-shadow:0 0 12px -1px #2c3e5066,0 4px 10px #0006} body[data-surface=H5] .h5-bottom-indicator:before{content:"";position:absolute;inset:0;background:linear-gradient(#ffffff26 0%,#ffffff0d 40%,transparent 80%)} body[data-surface=H5] .h5-bottom-indicator:after{content:"";position:absolute;top:-30%;bottom:-30%;left:0;width:50%;background:linear-gradient(to right,transparent 20%,#ffffff1a 50%,transparent 80%);animation:h5-menu-light-sweep 5s linear infinite;transform-origin:center} @keyframes h5-menu-light-sweep{from{transform:translateX(-150%) rotate(23deg)}to{transform:translateX(350%) rotate(23deg)}} body[data-surface=H5].h5-motion-paused .h5-bottom-indicator:after{animation-play-state:paused} body[data-surface=H5] .bottom-nav a svg{transition:transform .3s ease,color .2s ease} @media(prefers-reduced-motion:reduce){ body[data-surface=H5] .h5-bottom-indicator:after{animation:none;transform:translateX(100%) rotate(23deg)} body[data-surface=H5] .h5-tabs a,body[data-surface=H5] .bottom-nav a svg{transition:none} } /* Trending positions 4–10 use the reference's compact portrait rows. */ body[data-surface=H5] .ranking-list{row-gap:4px} body[data-surface=H5] .ranking-card:not(.h5-ranking-compact){margin-bottom:8px} body[data-surface=H5] .ranking-card[data-rank="3"]{margin-bottom:4px} body[data-surface=H5] .h5-ranking-compact{aspect-ratio:auto;border:1px solid #ffffff0d;background:#ffffff0d;border-radius:12px} body[data-surface=H5] .h5-ranking-compact .ranking-card-link{display:flex;align-items:center;padding:12px;overflow:hidden} body[data-surface=H5] .h5-ranking-cover{position:relative;flex:none;width:125px;height:172px;border-radius:8px;overflow:hidden;background:#171717} body[data-surface=H5] .h5-ranking-cover>img{width:100%;height:100%;object-fit:cover;object-position:top} body[data-surface=H5] .h5-ranking-number{position:absolute;top:0;left:0;padding:2px 8px;border-radius:8px 0 8px 0;background:#00b8d4;box-shadow:0 8px 8px -2px #00b8d466;color:#fff;font-size:13px;font-weight:900;font-style:italic;line-height:1.5} body[data-surface=H5] .h5-ranking-cover-quality{position:absolute;top:0;right:0;padding:3px 6px;background:linear-gradient(135deg,#fff8e1,#ffd54f,#ff9800);color:#3d2800;font-size:11px;font-weight:800;border-radius:0 8px 0 6px} body[data-surface=H5] .h5-ranking-cover-rating{position:absolute;right:6px;bottom:6px;color:#ffdf40;font-size:14px;font-weight:900;line-height:1;-webkit-text-stroke:1.7px #000;paint-order:stroke;text-shadow:0 1px 3px #000c} body[data-surface=H5] .h5-ranking-copy{min-width:0;flex:1;align-self:stretch;margin-left:16px;padding:4px 0} body[data-surface=H5] .h5-ranking-copy h2{font-size:17px;font-weight:700;line-height:1.5;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} body[data-surface=H5] .h5-ranking-meta{margin:8px 0 0;color:#ffffff80;font-size:12px;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} body[data-surface=H5] .h5-ranking-summary{margin:6px 0 0;color:#ffffff66;font-size:12px;line-height:1.55;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden} body[data-surface=H5] .h5-ranking-side{flex:none;min-width:90px;margin-left:8px;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:4px} body[data-surface=H5] .h5-ranking-side strong{display:flex;align-items:center;gap:2px;font-size:17px;font-weight:900;line-height:1.5;white-space:nowrap;font-variant-numeric:tabular-nums;color:#fff} body[data-surface=H5] .h5-ranking-side svg{width:16px;height:16px;fill:#ffd600;stroke:#ffd600;stroke-width:2} body[data-surface=H5] .h5-ranking-side small{max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;color:#ffffff66} @media(max-width:389px){body[data-surface=H5] .h5-ranking-cover{width:100px;height:138px}body[data-surface=H5] .h5-ranking-copy{margin-left:12px}body[data-surface=H5] .h5-ranking-side{min-width:80px;margin-left:4px}} /* H5 search results form one portrait list, without visible group headings. */ body[data-surface=H5] .search-page [data-search-total],body[data-surface=H5] .search-group>.section-heading{display:none} body[data-surface=H5] .search-page:has([data-search-total]){padding-top:20px} body[data-surface=H5] .search-group{margin:0} body[data-surface=H5] .search-card-info{padding-top:2px} body[data-surface=H5] .search-card h3{font-weight:600} body[data-surface=H5] .search-card-description{line-height:18px;margin-bottom:8px} body[data-surface=H5] .search-card .card-tags{gap:6px;max-height:44px} body[data-surface=H5] .search-card .card-tags span{border-radius:3px;font-weight:600;line-height:16px} body[data-surface=H5] .search-cover-update{position:absolute;bottom:6px;left:6px;max-width:calc(100% - 40px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:4px;padding:2px 6px;background:#0009;color:#fff;font-size:11px;line-height:16px} body[data-surface=H5] .search-page-header:not(.h5-search-discovery-header){background:#050708} body[data-surface=H5] .search-page-header:not(.h5-search-discovery-header) .search-form{background:#ffffff0d;border-radius:12px} body[data-surface=H5] .search-page-header input{background:transparent;border-radius:0} body[data-surface=H5] .search-page-header .h5-search-clear:not([hidden]){display:flex} body[data-surface=H5] .search-page-header .h5-search-clear svg{width:20px;height:20px;stroke-width:1.6} /* Search discovery: heat recommendations and five category leaderboards. */ body[data-surface=H5] .h5-recommend-refresh{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:4px;background:none;color:#ffffff73} body[data-surface=H5] .h5-recommend-refresh svg{width:18px;height:18px;stroke-width:2} body[data-surface=H5] .h5-search-recommendations [data-heat-recommendations]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px} body[data-surface=H5] .h5-search-recommendations [data-heat-recommendations]>a{display:flex;align-items:center;gap:5px;min-width:0;padding:0;background:none;color:#ffffff99;font-size:14px;line-height:20px;border-radius:0} body[data-surface=H5] .h5-search-recommendations [data-heat-recommendations]>a>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} body[data-surface=H5] .h5-search-recommendations [data-heat-recommendations] svg{width:14px;height:14px;color:#ed405c;stroke-width:2} body[data-surface=H5] .h5-search-board-tabs{display:flex;gap:20px;overflow-x:auto;scrollbar-width:none;border-top:1px solid #ffffff0d;padding-top:20px;margin-bottom:18px} body[data-surface=H5] .h5-search-board-tabs>button{position:relative;flex:none;padding:0 0 12px;background:none;color:#ffffff8c;font-size:15px;line-height:24px;white-space:nowrap} body[data-surface=H5] .h5-search-board-tabs>button[aria-selected=true]{color:var(--accent);font-size:17px;font-weight:700} body[data-surface=H5] .h5-search-board-tabs>button[aria-selected=true]:after{content:"";position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:20px;height:3px;background:var(--accent)} body[data-surface=H5] .h5-search-board-card{display:flex;align-items:stretch;gap:16px;padding:16px 0} body[data-surface=H5] .h5-search-board-cover{position:relative;flex:none;width:104px;height:140px;border-radius:8px;overflow:hidden;background:#171717} body[data-surface=H5] .h5-search-board-cover>img{width:100%;height:100%;object-fit:cover} body[data-surface=H5] .h5-search-board-rank{position:absolute;left:0;top:28px;min-width:24px;text-align:center;background:#00b8d4;border-radius:0 6px 6px 0;padding:3px 6px;font-weight:900;font-style:italic;color:#fff} body[data-surface=H5] .h5-search-board-rank[data-rank="1"]{background:#ed405c} body[data-surface=H5] .h5-search-board-rank[data-rank="2"]{background:#f77b27} body[data-surface=H5] .h5-search-board-rank[data-rank="3"]{background:#f9c733;color:#5c4500} body[data-surface=H5] .h5-search-board-quality{position:absolute;top:0;right:0;padding:4px 9px;border-radius:0 8px 0 8px;font-size:12px;font-weight:900;color:#3d2800;background:linear-gradient(135deg,#fff8e1,#ffd54f,#ff9800)} body[data-surface=H5] .h5-search-board-rating{position:absolute;bottom:5px;right:6px;color:#ffdf40;font-size:14px;font-weight:900;-webkit-text-stroke:1px #000;paint-order:stroke} body[data-surface=H5] .h5-search-board-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px;padding:2px 0} body[data-surface=H5] .h5-search-board-copy h3{font-size:17px;line-height:24px;font-weight:600;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} body[data-surface=H5] .h5-search-board-copy>p{font-size:13px;line-height:20px;color:#ffffff66;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} body[data-surface=H5] .h5-search-board-copy .card-tags{display:flex;gap:6px;flex-wrap:wrap;max-height:26px;overflow:hidden} body[data-surface=H5] .h5-search-board-copy .card-tags span{padding:3px 7px;border-radius:3px;background:#ffffff0d;color:var(--accent);font-size:11px;line-height:18px} body[data-surface=H5] .h5-search-board-heat{display:flex;align-items:center;gap:6px;margin-top:auto;color:#ed405c;white-space:nowrap} body[data-surface=H5] .h5-search-board-heat svg{width:14px;height:14px;stroke-width:2} body[data-surface=H5] .h5-search-board-heat small{font-size:12px} body[data-surface=H5] .h5-search-board-heat strong{color:#fff;font-size:20px;line-height:1;font-weight:900;font-style:italic} /* Search aurora spans the full page rather than ending at the first viewport. */ body[data-surface=H5]:has(>.search-page){background:linear-gradient(180deg,#101620 0%,#0c1018 40%,#080b10 100%);background-attachment:scroll} body[data-surface=H5] .h5-clear-search-history{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:4px;background:transparent;color:#ffffff73} body[data-surface=H5] .h5-clear-search-history svg{width:18px;height:18px;stroke-width:1.8} /* Personal library: reference row spacing and selection toolbar. */ body[data-surface=H5]:has(.history-page){background:linear-gradient(90deg,#050d1b 0%,#050a18 45%,#040816 100%)} body[data-surface=H5] .h5-library-header{max-width:448px;width:100%;height:72px;margin-inline:auto;padding:10px 4px 14px;background:transparent;gap:12px} body[data-surface=H5] .h5-library-header>.icon-button{width:40px;height:48px;display:flex;align-items:center;justify-content:center;flex:none} body[data-surface=H5] .h5-library-header>.text-button{color:var(--accent);min-width:36px} body[data-surface=H5] .history-page{max-width:448px;margin-inline:auto;padding:0 16px 96px} body[data-surface=H5] .h5-library-filters{top:72px;background:#050a18;padding-bottom:12px} body[data-surface=H5] .h5-library-filters button{padding:8px 16px;line-height:20px} body[data-surface=H5] .history-page .library-toolbar{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip-path:inset(50%)} body[data-surface=H5] .history-page .private-list{display:flex;flex-direction:column;gap:0} body[data-surface=H5] .h5-library-group,body[data-surface=H5] .h5-library-group:not(:first-child){margin:0;padding:22px 0 12px;font-size:18px;line-height:27px;font-weight:700} body[data-surface=H5] .history-card{display:flex;align-items:flex-start;gap:12px;padding:12px 0;margin:0;min-width:0} body[data-surface=H5] .history-card>.h5-library-card-link{display:flex;align-items:flex-start;gap:14px;flex:1;min-width:0;min-height:80px} body[data-surface=H5] .h5-library-cover{position:relative;width:140px;height:80px;flex:none;overflow:hidden;border-radius:8px;background:#ffffff0d} body[data-surface=H5] .history-card .h5-library-cover img{width:140px;height:80px;border-radius:8px;object-fit:cover} body[data-surface=H5] .h5-library-cover-label{position:absolute;bottom:0;right:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:6px 0 0 0;background:#000a;padding:2px 6px;font-size:10px;line-height:15px;color:#fffffff2} body[data-surface=H5] .h5-library-copy{flex:1;min-width:0;padding-top:4px} body[data-surface=H5] .history-card .h5-library-copy h3{font-size:15px;line-height:22.5px;font-weight:500;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} body[data-surface=H5] .history-card .h5-library-progress{display:flex;align-items:center;gap:4px;min-height:18px;margin:8px 0 0;font-size:12px;line-height:18px;color:#ffffff8c} body[data-surface=H5] .h5-library-progress svg{width:15px;height:15px;flex:none;stroke-width:2} body[data-surface=H5] .history-card .h5-library-meta{margin:6px 0 0;font-size:12px;line-height:18px;color:#ffffff66;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} body[data-surface=H5] .h5-library-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px} body[data-surface=H5] .h5-library-tags span{padding:2px 10px;border-radius:999px;background:#ffffff26;color:#fff;font-size:11px;font-weight:500;line-height:16px} body[data-surface=H5] .history-card>[data-library-select]{display:none} body[data-surface=H5] .is-editing .history-card>[data-library-select]{display:block;flex:none;width:18px;height:18px;margin:31px 0 0;accent-color:var(--accent);cursor:pointer} body[data-surface=H5] .is-editing .history-card>[data-library-remove]{display:none} body[data-surface=H5] .h5-library-editbar{position:fixed;left:50%;bottom:0;transform:translateX(-50%);width:min(100%,500px);height:calc(48px + env(safe-area-inset-bottom,0px));padding:0 16px env(safe-area-inset-bottom,0px);display:flex;align-items:center;justify-content:space-between;gap:12px;z-index:70;background:#181818;border-top:1px solid #ffffff0d;font-size:13px;color:#ffffff80} body[data-surface=H5] .h5-library-editbar button{padding:10px 12px;background:none;color:var(--accent);font-size:14px} body[data-surface=H5] .h5-library-editbar [data-library-delete-selected]{color:#f15a65} body[data-surface=H5] .h5-library-editbar button:disabled{color:#ffffff40;opacity:1} /* Supplied 3:1 brand artwork. */ body[data-surface=H5] .h5-header .brand{width:96px;flex-basis:96px}body[data-surface=H5] .h5-header .brand-logo{width:96px;height:auto}body[data-surface=H5] .video-start .player-brand-mark{width:120px;height:auto}body[data-surface=H5] .video-start.is-retry .player-brand-mark{width:60px;height:auto} @media(max-width:359px){body[data-surface=H5] .h5-header .brand{width:78px;flex-basis:78px}body[data-surface=H5] .h5-header .brand-logo{width:78px}} /* Collected playback lines: inline choices and the full mobile sheet. */ body[data-surface=H5] .h5-lines{margin:0 0 24px} body[data-surface=H5] .h5-lines-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px} body[data-surface=H5] .h5-lines-heading h2{font-size:16px;line-height:24px;margin:0} body[data-surface=H5] .h5-lines-heading>button{display:flex;align-items:center;gap:2px;min-height:44px;margin:-10px -8px -10px 0;padding:8px;background:none;border:0;color:#a5aeb9;font-size:13px} body[data-surface=H5] .h5-lines-heading svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5} body[data-surface=H5] .h5-lines-strip{display:flex;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#34404c transparent;padding:2px 0 6px} body[data-surface=H5] .h5-lines-strip button{flex:none;min-height:44px;padding:9px 16px;border:1px solid var(--line);border-radius:22px;background:var(--panel);color:#c2cad3;white-space:nowrap;font-size:13px} body[data-surface=H5] .h5-lines-strip button[aria-pressed=true],body[data-surface=H5] .h5-lines-list button[aria-pressed=true]{color:var(--accent);border-color:var(--accent);background:#00d6c410} body[data-surface=H5] .h5-lines-dialog{position:fixed;inset:auto 0 0;width:min(100%,500px);max-width:100%;max-height:80vh;max-height:80dvh;margin:0 auto;padding:0;color:var(--text);background:var(--panel);border:1px solid var(--line);border-bottom:0;border-radius:24px 24px 0 0;overflow:hidden} body[data-surface=H5] .h5-lines-dialog[open]{display:flex;flex-direction:column} body[data-surface=H5] .h5-lines-dialog::backdrop{background:#000a} body[data-surface=H5] .h5-lines-handle{flex:none;width:36px;height:4px;margin:10px auto 4px;border-radius:2px;background:#505b67} body[data-surface=H5] .h5-lines-dialog-heading{display:flex;align-items:center;justify-content:space-between;flex:none;padding:8px 16px} body[data-surface=H5] .h5-lines-dialog-heading h2{font-size:20px;line-height:28px;margin:0} body[data-surface=H5] .h5-lines-dialog-heading button{display:grid;place-items:center;width:44px;height:44px;border:0;background:none;color:#b5bec9;border-radius:50%;margin-right:-8px} body[data-surface=H5] .h5-lines-dialog-heading svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8} body[data-surface=H5] .h5-lines-scroll{overflow-y:auto;overscroll-behavior:contain;padding:8px 16px max(24px,env(safe-area-inset-bottom));scrollbar-width:thin;scrollbar-color:#34404c transparent} body[data-surface=H5] .h5-lines-scroll h3{font-size:16px;line-height:24px;margin:0 0 8px} body[data-surface=H5] .h5-lines-scroll h3 span{font-size:14px;font-weight:400;color:#a5aeb9;margin-left:4px;font-variant-numeric:tabular-nums} body[data-surface=H5] .h5-lines-note{color:#a5aeb9;font-size:13px;line-height:21px;margin:0 0 14px} body[data-surface=H5] .h5-lines-list{display:grid;gap:24px} body[data-surface=H5] .h5-line-group{display:grid;gap:10px} body[data-surface=H5] .h5-lines-list button{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:62px;width:100%;padding:14px 16px;text-align:left;border:1px solid var(--line);border-radius:14px;background:var(--soft)} body[data-surface=H5] .h5-line-label{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;min-width:0;overflow-wrap:anywhere} body[data-surface=H5] .h5-line-label strong{font-size:16px;font-weight:600} body[data-surface=H5] .h5-line-label small{font-size:13px;color:#a5aeb9} body[data-surface=H5] .h5-line-state{flex:none;font-size:12px;color:#a5aeb9} body[data-surface=H5] .h5-lines-list [aria-pressed=true] .h5-line-state{color:var(--accent)} @media (hover:hover){body[data-surface=H5] .h5-lines button:not(:disabled):hover,body[data-surface=H5] .h5-lines-list button:not(:disabled):hover{border-color:var(--accent);color:var(--accent)}} /* Discovery tabs keep a stable shell while cached content changes underneath. */ body[data-surface=H5] .h5-tabs a{justify-content:center;width:34px;font-size:15px;font-weight:600;transition:color 150ms ease} body[data-surface=H5] .h5-tabs a:nth-child(even){width:68px} body[data-surface=H5] .h5-tabs a[aria-current=page]{font-size:15px;font-weight:600} body[data-surface=H5] .h5-tabs.h5-tabs-enhanced a::after{display:none} body[data-surface=H5] .h5-tab-indicator{position:absolute;left:0;bottom:4px;width:16px;height:2px;border-radius:2px;background:var(--accent);pointer-events:none;transition:transform 150ms cubic-bezier(.22,1,.36,1)} body[data-surface=H5] .h5-tab-status{position:fixed;top:108px;left:50%;transform:translateX(-50%);z-index:120;max-width:calc(100% - 32px);padding:8px 12px;border:1px solid #39444f;border-radius:10px;background:#101620;color:var(--text);font-size:13px;box-shadow:0 4px 14px #0005} body[data-surface=H5] .h5-tab-status button{margin-left:10px;padding:4px 8px;border:0;background:none;color:var(--accent);font:inherit;min-height:32px} body[data-surface=H5] .h5-tab-status[hidden]{display:none} @media(max-width:359px){body[data-surface=H5] .h5-tabs a,body[data-surface=H5] .h5-tabs a[aria-current=page]{font-size:13px}} @media(prefers-reduced-motion:reduce){body[data-surface=H5] .h5-tab-indicator,body[data-surface=H5] .h5-tabs a{transition:none}} /* Reserve vertical gestures for drama switching; horizontal native seeking remains available. */ body[data-surface=H5] .short-player-media .video-stage{touch-action:pan-x pinch-zoom;overscroll-behavior-y:contain}