/* V5 approved composition: custom dark discovery aesthetic, native CSS.
   Variance 4 / motion 4 / density 3. Video motion supplies visual interest;
   static text and familiar image shelves keep the page easy to scan. */
:root { --bg:#0b0b0d; --surface:#171719; --radius:8px; font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Helvetica Neue','Microsoft YaHei',sans-serif; }
html { scroll-padding-top:100px; }
body { background:var(--bg); }
button,a { -webkit-tap-highlight-color:transparent; }
[hidden] { display:none!important; }
.button { border-radius:8px; }
.button.primary { background:#e6002e; border-color:#e6002e; box-shadow:none; }
.button.primary:hover { background:#cc0029; border-color:#cc0029; box-shadow:none; }
.site-header { height:72px; background:#0b0b0df5; border-bottom-color:#ffffff08; }
.header-inner { display:grid; grid-template-columns:1fr auto 1fr; max-width:1512px; padding:0 60px; gap:36px; }
.site-brand { width:fit-content; gap:7px; }
.youshen-mark { width:36px; height:36px; }
.site-brand strong { font-size:29px; font-style:italic; font-weight:900; letter-spacing:-1.6px; line-height:1.2; padding-right:3px; }
.site-nav { display:flex; width:auto; margin:0; flex:none; justify-content:center; gap:56px; }
.site-nav>a { font-size:14px; color:#c5c5c8; padding:0; min-height:44px; }
.header-actions { justify-self:end; margin:0; gap:20px; }
.header-login { background:transparent; border:0; padding:0 4px; min-width:40px; min-height:44px; font-size:13px; }
.header-login:hover { background:transparent; color:#fff; }
.header-cta { min-width:110px; min-height:40px; border:1px solid #e6002e; background:transparent; border-radius:7px; padding:9px 17px; color:#fff; font-size:13px; }
.header-cta:hover { background:#261117; border-color:#ff0033; }
.site-menu { display:none; }
.discovery-home { overflow:clip; background:#0b0b0d; }
.discovery-hero { position:relative; isolation:isolate; display:grid; place-items:center; min-height:600px; height:clamp(600px,43vw,680px); text-align:center; }
.discovery-backdrop { position:absolute; z-index:-2; inset:0; overflow:hidden; background:#16171a; }
.discovery-backdrop img,.discovery-backdrop video { position:absolute; width:100%; height:100%; inset:0; object-fit:cover; object-position:center 52%; }
.discovery-backdrop video { opacity:0; transition:opacity .4s; }
.discovery-backdrop video.ready { opacity:1; }
.discovery-hero:after { content:''; position:absolute; z-index:-1; inset:0; background:linear-gradient(180deg,#0b0b0d38 0%,#0b0b0d60 40%,#0b0b0db8 78%,#0b0b0d 100%),linear-gradient(90deg,#0b0b0d30,#0b0b0d55 50%,#0b0b0d30); pointer-events:none; }
.discovery-hero-copy { width:100%; padding:60px 24px 72px; }
.discovery-eyebrow { font-size:16px; color:#e3e0dd; margin-bottom:18px; letter-spacing:1px; }
.discovery-hero h1 { font-size:clamp(48px,5.45vw,80px); font-weight:850; letter-spacing:-2px; line-height:1.2; color:#fff; margin:0; text-shadow:0 2px 25px #0004; }
.discovery-subtitle { font-size:19px; line-height:1.75; color:#f2efec; margin-top:22px; }
.discovery-cta { margin-top:30px; min-height:54px; padding:14px 27px; font-size:16px; gap:15px; }
.discovery-cta svg { width:20px; height:20px; }
.hero-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); width:min(100%,600px); margin:38px auto 0; padding-top:25px; border-top:1px solid #ffffff26; }
.hero-stat { display:flex; flex-direction:column; gap:8px; min-width:0; }
.hero-stat+.hero-stat { border-left:1px solid #ffffff26; }
.hero-stat dt { order:1; font-size:13px; line-height:1.5; color:#d1d1d6; }
.hero-stat dd { margin:0; font-size:36px; line-height:1.15; font-weight:650; letter-spacing:-.8px; color:#fff; font-variant-numeric:tabular-nums; }
.hero-video-controls { position:absolute; bottom:34px; right:max(40px,calc((100% - 1296px) / 2)); display:flex; align-items:center; gap:10px; }
.hero-video-controls>button,.hero-video-controls>span { width:42px; height:42px; border:1px solid #ffffff50; border-radius:50%; background:#10101070; color:#fff; display:grid; place-items:center; }
.hero-video-controls>span { border-color:transparent; background:transparent; }
.hero-video-controls>button:hover { background:#ffffff25; }
.hero-video-controls svg { width:17px; height:17px; }
.discovery-container { max-width:1416px; padding:0 60px 90px; margin:0 auto; }
.discovery-section { margin-top:64px; scroll-margin-top:100px; }
.niche-section { margin-top:24px; }
.discovery-heading { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:24px; }
.discovery-heading h2 { font-size:34px; line-height:1.25; font-weight:750; letter-spacing:-.7px; margin:0; }
.discovery-heading h2:focus { outline:none; }
.discovery-heading p { margin-top:10px; color:#a9a9ae; font-size:14px; line-height:1.6; }
.discovery-more { display:inline-flex; align-items:center; gap:10px; flex-shrink:0; background:none; border:0; color:#bfbfc4; font-size:13px; min-height:44px; padding:6px 0 6px 12px; }
.discovery-more:hover { color:#fff; }
.discovery-more svg { width:18px; height:18px; }
.niche-categories { display:flex; width:fit-content; max-width:100%; gap:34px; overflow-x:auto; border-bottom:1px solid #ffffff0c; scrollbar-width:thin; scrollbar-color:#45454a transparent; }
.niche-categories button { position:relative; flex-shrink:0; min-height:49px; padding:8px 4px 17px; background:none; border:0; color:#aaaab1; font-size:14px; }
.niche-categories button:hover { color:#fff; }
.niche-categories button.active { color:#fff; font-weight:600; }
.niche-categories button.active:after { content:''; position:absolute; left:0; right:0; bottom:0; height:3px; background:#ff0033; }
.niche-intro { color:#9c9ca5; font-size:14px; margin:18px 0 16px; }
.niche-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.niche-card { position:relative; display:block; aspect-ratio:1.43; text-align:left; overflow:hidden; isolation:isolate; background:#1b1b1e; padding:0; border:1px solid #ffffff12; border-radius:8px; color:#fff; }
.niche-card>img { width:100%; height:100%; object-fit:cover; }
.niche-card:after { content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,transparent 35%,#0004 60%,#08080bdd 100%); pointer-events:none; }
.niche-card:hover { border-color:#ffffff4a; }
.niche-card>img,.niche-card>.discovery-photo { transition:scale .3s ease; }
.niche-card:hover>img,.niche-card:hover>.discovery-photo { scale:1.035; }
.niche-caption { position:absolute; z-index:2; bottom:23px; left:23px; right:45px; }
.niche-caption strong { font-size:23px; font-weight:650; display:block; margin-bottom:6px; }
.niche-caption>span { color:#d1d0d2; font-size:13px; }
.niche-arrow { position:absolute; z-index:2; right:21px; bottom:29px; }
.niche-arrow svg { width:20px; height:20px; }
.discovery-photo { position:absolute; inset:0; display:block; overflow:hidden; }
.discovery-photo>span { display:block; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:100%; aspect-ratio:1; background-image:url('assets/discovery/content-sheet.png'); background-size:300% 300%; background-repeat:no-repeat; }
.portrait .discovery-photo>span { width:177.7778%; }
.discovery-video-grid { display:grid; gap:24px; }
.discovery-video-grid.shorts { grid-template-columns:repeat(5,minmax(0,1fr)); }
.discovery-video-grid.long { grid-template-columns:repeat(3,minmax(0,1fr)); }
.discovery-video { display:block; align-self:start; text-align:left; background:none; padding:0; border:0; min-width:0; color:#f1f1f3; }
.discovery-cover { display:block; position:relative; overflow:hidden; background:#1b1b1e; border:1px solid #ffffff19; border-radius:8px; }
.discovery-cover.portrait { aspect-ratio:9/16; }
.discovery-cover.landscape { aspect-ratio:16/9; }
.discovery-video>strong { display:block; font-size:16px; line-height:1.5; font-weight:500; margin-top:13px; }
.discovery-video:hover>strong { color:#fff; }
.discovery-video .discovery-photo { transition:scale .3s ease; }
.discovery-video:hover .discovery-photo { scale:1.035; }
.discovery-duration { position:absolute; bottom:9px; right:9px; padding:3px 5px; background:#070709d9; color:#fff; border-radius:4px; font-size:12px; line-height:1.2; font-variant-numeric:tabular-nums; }
.discovery-play { position:absolute; z-index:1; top:50%; left:50%; transform:translate(-50%,-50%); width:48px; height:48px; border-radius:50%; display:grid; place-items:center; background:#0b0b0dc9; border:1px solid #ffffff70; opacity:0; transition:opacity .2s; }
.discovery-play svg { width:20px; height:20px; fill:#fff; }
.discovery-video:hover .discovery-play,.discovery-video:focus-visible .discovery-play { opacity:1; }
.discovery-image-fallback { position:absolute; inset:0; display:grid; place-items:center; color:#9999a3; font-size:14px; }
.niche-card>img { position:absolute; inset:0; }
.discovery-cover>img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:scale .25s; }
.discovery-video:hover .discovery-cover>img { scale:1.025; }
.discovery-video>strong { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.discovery-video-metrics { display:block; margin-top:9px; font-size:13px; color:#c4c4cc; line-height:1.6; }
.discovery-video-metrics>span { color:#9696a1; }
.discovery-data-note { color:#93939f; font-size:12px; line-height:1.85; margin-top:30px; }
.real-niche-intro { color:#aaaab5; margin:0 0 22px; font-size:14px; }
.real-niche-channel { display:flex; align-items:center; gap:18px; padding:24px 0; border-bottom:1px solid #ffffff12; }
.real-niche-channel:first-child { padding-top:5px; }
.real-niche-channel>img { width:50px; height:50px; object-fit:cover; border-radius:50%; flex-shrink:0; }
.real-niche-channel>span:not(.real-niche-open) { flex:1; min-width:0; }
.real-niche-channel strong { font-size:17px; color:#f5f5f8; display:block; overflow-wrap:anywhere; }
.real-niche-channel small { display:block; color:#aaaab5; font-size:12px; margin-top:7px; }
.real-niche-open { display:flex; align-items:center; gap:8px; color:#ff365b; font-size:13px; white-space:nowrap; }
.real-niche-open svg { width:18px; height:18px; }
.real-niche-channel:hover strong { color:#ff728c; }
.real-video-link { display:block; }
.real-video-info { display:flex; justify-content:space-between; gap:20px; font-size:15px; }
.real-video-info>span { color:#aaaab5; font-size:13px; }
.real-video-channel { color:#c4c4cc; margin-top:15px; font-size:14px; }
@media(max-width:767px) {
  .real-niche-channel { gap:13px; flex-wrap:wrap; }
  .real-niche-channel>img { width:44px; height:44px; }
  .real-niche-channel strong { font-size:15px; }
  .real-niche-open { flex-basis:100%; margin-left:57px; padding-top:4px; }
  .real-video-info { flex-direction:column; gap:5px; }
  .discovery-video-metrics { font-size:12px; }
}
.discovery-footer { border-top:1px solid #303034; max-width:none; margin:0; padding:32px max(40px,calc((100% - 1296px) / 2)); background:#0b0b0d; }
.discovery-footer-main,.discovery-footer-bottom { display:flex; align-items:center; justify-content:space-between; gap:24px; }
.discovery-footer-brand { display:flex; align-items:center; gap:16px; color:#9b9ba3; font-size:12px; }
.discovery-footer .youshen-mark { width:27px; height:27px; }
.discovery-footer .site-brand strong { font-size:22px; }
.discovery-footer nav { display:flex; flex-wrap:wrap; gap:24px; }
.discovery-footer nav a { color:#aaaab2; font-size:12px; padding:10px 0; }
.discovery-footer nav a:hover { color:#fff; }
.discovery-footer-bottom { margin-top:20px; color:#808088; font-size:11px; }
.discovery-footer-legal { display:flex; align-items:center; flex-wrap:wrap; gap:8px 20px; }
.discovery-icp { color:#aaaab2; padding:6px 0; }
.discovery-icp:hover { color:#fff; }
.discovery-icp:focus-visible { outline:2px solid currentColor; outline-offset:4px; border-radius:2px; }
.discovery-source-note { color:#a2a2ad; border:0; background:none; padding:8px 0; min-height:44px; font-size:11px; cursor:pointer; }
.discovery-source-note:hover { color:#fff; }
.discovery-detail-cover { position:relative; overflow:hidden; border-radius:8px; background:#111; width:100%; margin-bottom:15px; }
.discovery-detail-cover.landscape { aspect-ratio:16/9; }
.discovery-detail-cover.portrait { aspect-ratio:9/16; width:180px; margin:0 auto 18px; }
.discovery-detail-cover>img { width:100%; height:100%; object-fit:cover; }
.modal-body .discovery-example-note { font-size:12px; color:#aaa; margin-bottom:18px; }
.discovery-detail-heading { font-size:17px; margin:23px 0 12px; }
.discovery-steps { list-style:decimal; padding-left:21px; color:#c7c7ce; font-size:14px; line-height:1.85; }
.discovery-steps li { padding-left:4px; margin:8px 0; }
.discovery-detail-niche { margin-top:15px; }
@media(min-width:1600px) { .header-inner { padding:0 40px; } }
@media(max-width:1150px) {
  .header-inner { display:grid; grid-template-columns:1fr auto 1fr; padding:0 32px; gap:24px; }
  .site-nav { display:flex; width:auto; gap:36px; }
  .site-nav>a { font-size:14px; }
  .site-menu { display:none; }
  .header-actions { margin:0; }
  .discovery-container { padding:0 32px 72px; }
  .discovery-hero { min-height:600px; }
  .niche-grid,.discovery-video-grid { gap:20px; }
  .niche-caption { left:18px; bottom:20px; }
  .niche-caption strong { font-size:20px; }
  .niche-arrow { right:16px; bottom:27px; }
  .niche-categories { gap:28px; }
  .discovery-heading h2 { font-size:30px; }
  .discovery-footer { padding:30px 32px; }
}
@media(max-width:767px) {
  html { scroll-padding-top:85px; }
  .site-header { height:64px; }
  .header-inner { display:flex; padding:0 20px; gap:14px; }
  .site-brand strong { font-size:25px; }
  .youshen-mark { width:30px; height:30px; }
  .header-actions { margin-left:auto; gap:13px; }
  .header-login { font-size:12px; min-width:28px; }
  .header-cta { min-width:0; min-height:36px; padding:7px 12px; font-size:12px; }
  .site-menu { display:grid; width:36px; height:36px; background:transparent; border:0; }
  .site-nav { display:none; }
  .menu-open .site-nav { display:flex; position:absolute; top:63px; left:0; right:0; width:auto; height:auto; max-height:calc(100dvh - 64px); margin:0; padding:12px 20px 20px; gap:0; background:#131316; flex-direction:column; align-items:stretch; }
  .menu-open .site-nav>a { padding:15px 5px; border-bottom:1px solid #ffffff0c; font-size:15px; }
  .discovery-hero { height:auto; min-height:560px; }
  .discovery-backdrop img,.discovery-backdrop video { object-position:51% center; }
  .discovery-hero:after { background:linear-gradient(180deg,#0b0b0d65,#0b0b0d85 45%,#0b0b0dd9 82%,#0b0b0d); }
  .discovery-hero-copy { padding:48px 20px 86px; }
  .discovery-eyebrow { font-size:13px; margin-bottom:16px; letter-spacing:.5px; }
  .discovery-hero h1 { font-size:clamp(32px,7.4vw,48px); letter-spacing:-1px; line-height:1.3; white-space:nowrap; }
  .discovery-subtitle { max-width:290px; font-size:15px; line-height:1.9; margin:18px auto 0; }
  .discovery-subtitle>span { display:block; }
  .discovery-cta { margin-top:26px; font-size:14px; min-height:50px; padding:12px 23px; }
  .hero-stats { margin-top:32px; padding-top:22px; max-width:420px; }
  .hero-stat { gap:7px; }
  .hero-stat dt { font-size:12px; }
  .hero-stat dd { font-size:29px; letter-spacing:-.5px; }
  .hero-video-controls { bottom:24px; right:20px; gap:5px; }
  .hero-video-controls>button,.hero-video-controls>span { width:44px; height:44px; }
  .discovery-container { padding:0 20px 55px; }
  .discovery-section { margin-top:42px; scroll-margin-top:85px; }
  .niche-section { margin-top:12px; }
  .discovery-heading { gap:12px; margin-bottom:17px; align-items:center; }
  .discovery-heading h2 { font-size:25px; letter-spacing:-.5px; }
  .discovery-heading p { font-size:12px; margin-top:7px; }
  .discovery-more { font-size:11px; gap:5px; padding-left:3px; min-height:44px; }
  .discovery-more svg { width:15px; height:15px; }
  .niche-categories { gap:24px; width:calc(100% + 20px); max-width:none; padding-right:20px; }
  .niche-categories button { font-size:13px; min-height:46px; }
  .niche-intro { font-size:12px; margin:15px 0 14px; }
  .niche-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
  .niche-card { aspect-ratio:1; }
  .niche-grid>.niche-card:first-child { grid-column:1/-1; aspect-ratio:1.7; }
  .niche-caption { left:13px; right:24px; bottom:16px; }
  .niche-caption strong { font-size:17px; margin-bottom:5px; }
  .niche-caption>span { font-size:11px; }
  .niche-arrow { bottom:18px; right:9px; }
  .niche-arrow svg { width:15px; height:15px; }
  .discovery-video-grid.shorts { display:grid; grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:43%; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:12px; margin-right:-20px; padding-right:20px; scrollbar-width:thin; scrollbar-color:#404046 transparent; }
  .discovery-video-grid.shorts>.discovery-video { scroll-snap-align:start; }
  .discovery-video-grid.long { grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 14px; }
  .discovery-video-grid.long>.discovery-video:first-child { grid-column:1/-1; }
  .discovery-video>strong { font-size:13px; margin-top:10px; }
  .discovery-duration { font-size:10px; right:6px; bottom:6px; }
  .discovery-footer { padding:25px 20px; }
  .discovery-footer-main { align-items:flex-start; flex-direction:column; gap:13px; }
  .discovery-footer-brand { font-size:11px; }
  .discovery-footer nav { gap:22px; }
  .discovery-footer nav a { font-size:11px; }
  .discovery-footer-bottom { gap:12px; font-size:10px; margin-top:12px; flex-wrap:wrap; }
}
@media(max-width:360px) {
  .header-inner { padding:0 14px; gap:10px; }
  .header-actions { gap:8px; }
  .header-login { display:none; }
  .discovery-container { padding-left:16px; padding-right:16px; }
  .discovery-hero h1 { font-size:29px; }
  .discovery-heading h2 { font-size:23px; }
  .niche-caption strong { font-size:15px; }
}
@media(prefers-reduced-motion:reduce) {
  .discovery-backdrop video,.niche-card>img,.niche-card>.discovery-photo,.discovery-video .discovery-photo,.discovery-play { transition:none; }
  .niche-card:hover>img,.niche-card:hover>.discovery-photo,.discovery-video:hover .discovery-photo { scale:1; }
}

/* A single, quiet entry to the complete channel index. */
.discovery-ranking-entry {display:flex; align-items:center; justify-content:space-between; gap:18px; border-top:1px solid #ffffff14; padding:25px 0 0; margin-top:36px; color:#a8a8b2; font-size:14px;}
.discovery-ranking-entry a {display:inline-flex; align-items:center; gap:10px; color:#ff6482; min-height:44px; font-size:13px;}
.discovery-ranking-entry svg {width:17px; height:17px;}
@media(max-width:600px){.discovery-ranking-entry {display:block; font-size:13px; padding-top:20px; margin-top:28px;}.discovery-ranking-entry a {margin-top:8px; font-size:12px;}}