:root {
    --ink: #eef6ff;
    --muted: #91a3b8;
    --bg: #07111f;
    --panel: #0d1a2b;
    --panel-2: #122238;
    --line: rgba(255, 255, 255, 0.1);
    --cyan: #42e8dd;
    --lime: #c6ff5d;
    --orange: #ff8d57;
    --violet: #9d85ff;
    --radius: 22px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif; font-size: 16px; line-height: 1.7; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
img { display: block; width: 100%; }
.shell { width: min(1200px, calc(100% - 40px)); margin-inline: auto; }
.icon { width: 20px; height: 20px; flex: 0 0 auto; }
.site-header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--line); background: rgba(7, 17, 31, 0.92); backdrop-filter: blur(18px); }
.header-inner { min-height: 76px; display: flex; align-items: center; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 11px; flex: 0 0 auto; }
.brand-mark { position: relative; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: linear-gradient(145deg, var(--cyan), #1c75ff); box-shadow: 0 10px 30px rgba(66, 232, 221, .2); }
.brand-mark span { position: absolute; width: 5px; border-radius: 5px; background: #07111f; }
.brand-mark span:nth-child(1) { height: 13px; transform: translateX(-8px); }
.brand-mark span:nth-child(2) { height: 22px; }
.brand-mark span:nth-child(3) { height: 16px; transform: translateX(8px); }
.brand-copy { display: grid; line-height: 1.1; }
.brand-copy strong { font-size: 18px; letter-spacing: .08em; }
.brand-copy small { margin-top: 5px; color: var(--cyan); font-size: 10px; letter-spacing: .2em; }
.main-nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.nav-link { min-height: 46px; padding: 0 10px; display: inline-flex; align-items: center; gap: 6px; border-radius: 12px; color: #9fb0c4; font-size: 14px; white-space: nowrap; transition: .2s ease; }
.nav-link .icon { width: 17px; }
.nav-link:hover, .nav-link.is-active { color: #07111f; background: var(--cyan); }
.nav-toggle { display: none; margin-left: auto; width: 44px; height: 44px; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.hero { margin-top: 28px; }
.hero-media { position: relative; min-height: 610px; overflow: hidden; border-radius: 30px; border: 1px solid var(--line); background: var(--panel); }
.hero-media > img { position: absolute; inset: 0; height: 100%; object-fit: cover; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5, 12, 23, .98) 0%, rgba(5, 12, 23, .65) 48%, rgba(5, 12, 23, .12) 100%), linear-gradient(0deg, rgba(5,12,23,.9), transparent 50%); }
.hero-badge { position: absolute; top: 34px; left: 38px; padding: 7px 13px; border-radius: 999px; color: #07111f; background: var(--lime); font-size: 13px; font-weight: 800; letter-spacing: .04em; }
.hero-content { position: relative; z-index: 2; width: min(620px, 70%); padding: 145px 38px 135px; }
.hero-content h1 { margin: 0 0 18px; font-size: clamp(40px, 6vw, 78px); line-height: 1; letter-spacing: -.05em; }
.hero-title { margin: 0 0 12px; color: var(--cyan); font-size: clamp(22px, 3vw, 34px); font-weight: 800; line-height: 1.3; }
.hero-content > p:last-of-type { max-width: 590px; color: #c2cfdd; font-size: 17px; }
.hero-actions { margin-top: 30px; display: flex; gap: 12px; flex-wrap: wrap; }
.button { min-height: 46px; padding: 0 20px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 13px; cursor: pointer; font-weight: 800; }
.button.primary { color: #06101c; background: var(--cyan); }
.button.ghost { border: 1px solid rgba(255,255,255,.28); background: rgba(7,17,31,.35); }
.button.ghost.dark { background: var(--panel); }
.button.light { color: #0b1727; background: #fff; }
.hero-stats { position: absolute; z-index: 2; left: 38px; right: 38px; bottom: 30px; display: flex; gap: 10px; }
.hero-stats span { padding: 11px 16px; border: 1px solid var(--line); border-radius: 12px; background: rgba(7,17,31,.65); color: var(--muted); font-size: 13px; backdrop-filter: blur(12px); }
.hero-stats b { margin-right: 7px; color: var(--ink); }
.content-section { margin-top: 104px; }
.section-head { margin-bottom: 28px; display: flex; align-items: end; justify-content: space-between; gap: 30px; }
.section-kicker { color: var(--cyan); font-size: 12px; font-weight: 900; letter-spacing: .18em; }
.section-head h2, .about-panel h2, .subscribe-panel h2 { margin: 5px 0 4px; font-size: clamp(27px, 4vw, 40px); line-height: 1.2; letter-spacing: -.03em; }
.section-head p { margin: 0; color: var(--muted); }
.text-link { display: inline-flex; align-items: center; gap: 7px; color: var(--cyan); white-space: nowrap; font-weight: 800; }
.feature-mosaic { display: grid; grid-template-columns: 1.45fr 1fr; grid-template-rows: repeat(2, 1fr); gap: 18px; }
.video-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); transition: transform .25s ease, border-color .25s ease; }
.video-card:hover { transform: translateY(-5px); border-color: rgba(66,232,221,.5); }
.video-cover { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #101c2d; }
.video-cover img { height: 100%; object-fit: cover; transition: transform .45s ease; }
.video-card:hover .video-cover img { transform: scale(1.04); }
.play-orb { position: absolute; inset: 50% auto auto 50%; width: 54px; height: 54px; transform: translate(-50%, -50%); display: grid; place-items: center; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; color: #07111f; background: rgba(255,255,255,.88); backdrop-filter: blur(8px); }
.play-orb.large { width: 72px; height: 72px; }
.duration, .quality { position: absolute; bottom: 10px; padding: 3px 8px; border-radius: 7px; background: rgba(4,9,18,.82); font-size: 12px; }
.duration { right: 10px; }
.quality { left: 10px; color: #07111f; background: var(--lime); font-weight: 900; }
.video-copy { padding: 18px; }
.eyebrow { color: var(--cyan); font-size: 12px; font-weight: 900; letter-spacing: .08em; }
.video-copy h3 { margin: 6px 0 8px; font-size: 19px; line-height: 1.42; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.video-copy p { margin: 0; color: var(--muted); font-size: 14px; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.meta { margin-top: 15px; display: flex; gap: 16px; flex-wrap: wrap; color: #8192a7; font-size: 12px; }
.meta span { display: inline-flex; align-items: center; gap: 5px; }
.meta .icon { width: 15px; height: 15px; }
.mosaic-main { grid-row: 1 / 3; }
.mosaic-main .video-cover { aspect-ratio: 16 / 10; }
.mosaic-main .video-copy { padding: 24px; }
.mosaic-main .video-copy h3 { font-size: 26px; }
.mosaic-side { display: grid; grid-template-columns: 43% 1fr; }
.mosaic-side .video-cover { height: 100%; aspect-ratio: auto; }
.mosaic-side .video-copy p { display: none; }
.poster-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.dark-band { padding: 82px 0; background: linear-gradient(135deg, #0d2030, #0b1627 60%, #172031); }
.cinema-row { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; }
.cinema-card { background: rgba(255,255,255,.04); }
.category-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
.category-tile { min-height: 260px; padding: 24px; display: flex; flex-direction: column; border-radius: 22px; border: 1px solid var(--line); background: var(--panel); }
.category-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 15px; background: rgba(255,255,255,.08); }
.category-tile strong { margin-top: 20px; font-size: 21px; }
.category-tile p { margin: 8px 0 18px; color: var(--muted); font-size: 14px; }
.category-more { margin-top: auto; display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 800; }
.category-more .icon { width: 16px; }
.tone-cyan { --tone: #42e8dd; }.tone-orange { --tone: #ff8d57; }.tone-violet { --tone: #9d85ff; }.tone-blue { --tone: #62a8ff; }.tone-pink { --tone: #ff77bc; }.tone-yellow { --tone: #f8da59; }.tone-green { --tone: #78e38f; }.tone-red { --tone: #ff6e6e; }
.category-tile[class*="tone-"] { border-top: 3px solid var(--tone); }
.category-tile[class*="tone-"] .category-icon, .channel-hero[class*="tone-"] .channel-icon { color: #07111f; background: var(--tone); }
.split-showcase { display: grid; grid-template-columns: 1.45fr .72fr; gap: 24px; }
.short-stack { display: grid; gap: 14px; }
.short-card { display: grid; grid-template-columns: 230px 1fr; }
.short-card .video-cover { height: 100%; }
.spotlight-panel { padding: 36px; display: flex; flex-direction: column; justify-content: end; border-radius: 28px; background: radial-gradient(circle at 80% 10%, rgba(198,255,93,.28), transparent 34%), linear-gradient(150deg,#163444,#0f1c2d); }
.spotlight-panel h2 { margin: 10px 0; font-size: 32px; line-height: 1.25; }
.spotlight-panel p { color: #b6c6d7; }
.spotlight-panel .button { margin-top: 20px; align-self: start; }
.anime-zone { padding: 48px; border-radius: 30px; background: linear-gradient(120deg, rgba(157,133,255,.15), rgba(66,232,221,.06)); }
.anime-rail { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
.anime-card { border-radius: 60px 60px 22px 22px; }
.classic-layout { display: grid; grid-template-columns: 1.45fr 1fr; gap: 20px; }
.classic-lead .video-copy h3 { font-size: 27px; }
.classic-list { display: grid; gap: 12px; }
.classic-list a { padding: 20px; display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 14px; border: 1px solid var(--line); border-radius: 17px; background: var(--panel); }
.classic-list a > span { color: var(--cyan); font-size: 22px; font-weight: 900; }
.classic-list strong, .classic-list small { display: block; }
.classic-list small { color: var(--muted); }
.release-timeline { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; }
.release-timeline article { position: relative; padding-right: 20px; }
.release-timeline time { color: var(--cyan); font-weight: 900; }
.release-timeline article > span { margin: 14px 0 20px; display: block; height: 3px; background: var(--line); }
.release-timeline article > span::before { content: ''; display: block; width: 13px; height: 13px; transform: translateY(-5px); border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 6px rgba(66,232,221,.1); }
.release-timeline strong { font-size: 18px; }
.release-timeline p { margin: 3px 0; color: var(--muted); font-size: 14px; }
.ranking-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ranking-list a { padding: 12px 18px; display: grid; grid-template-columns: 44px 96px 1fr auto; align-items: center; gap: 16px; border-radius: 18px; background: var(--panel); }
.ranking-list b { color: #526278; font-size: 25px; }
.ranking-list a:nth-child(-n+3) b { color: var(--orange); }
.ranking-list img { height: 60px; object-fit: cover; border-radius: 11px; }
.ranking-list strong, .ranking-list span { display: block; }
.ranking-list span { color: var(--muted); font-size: 13px; }
.ranking-list em { color: var(--cyan); font-size: 13px; font-style: normal; }
.topic-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 18px; }
.topic-card { position: relative; min-height: 390px; overflow: hidden; border-radius: 25px; }
.topic-card img { height: 100%; object-fit: cover; }
.topic-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg,rgba(5,11,20,.94),transparent 75%); }
.topic-card div { position: absolute; z-index: 2; left: 24px; right: 24px; bottom: 22px; }
.topic-card span { color: var(--lime); font-size: 12px; font-weight: 900; }
.topic-card h3 { margin: 4px 0; font-size: 24px; }
.topic-card p { margin: 0; color: #c2cddd; font-size: 14px; }
.pick-chips { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.pick-chips a { min-height: 150px; padding: 23px; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid var(--line); border-radius: 70px 20px 20px 20px; background: var(--panel-2); }
.pick-chips span { color: var(--orange); font-size: 13px; }.pick-chips strong { font-size: 18px; }
.tags { display: flex; flex-wrap: wrap; gap: 12px; }
.tags a { padding: 12px 18px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); }
.about-panel { padding: 56px; display: grid; grid-template-columns: 210px 1fr; gap: 45px; align-items: center; border-radius: 30px; background: #d7ff66; color: #0a1624; }
.about-number { font-size: 90px; font-weight: 1000; letter-spacing: -.08em; opacity: .15; }
.about-panel .section-kicker { color: #183626; }.about-panel p { margin: 0; font-size: 17px; }
.subscribe-panel { margin-bottom: 104px; padding: 42px 48px; display: grid; grid-template-columns: 130px 1fr auto; align-items: center; gap: 32px; border-radius: 30px; background: linear-gradient(135deg,#6949dd,#2636a3); }
.subscribe-panel p { margin: 8px 0 0; color: #d9dcff; }
.qr-art { position: relative; width: 124px; height: 124px; display: grid; place-items: center; border: 10px solid white; background: #fff; }
.qr-art span { position: absolute; width: 28px; height: 28px; border: 6px solid #101a6e; }.qr-art span:nth-child(1){left:3px;top:3px}.qr-art span:nth-child(2){right:3px;top:3px}.qr-art span:nth-child(3){left:3px;bottom:3px}.qr-art span:nth-child(4){right:10px;bottom:10px;width:17px;height:17px;background:#101a6e}.qr-art b{color:#101a6e;font-size:18px}
.site-footer { padding: 64px 0 26px; border-top: 1px solid var(--line); background: #040b15; }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3,1fr); gap: 48px; }
.footer-grid h2 { margin: 0 0 14px; font-size: 15px; }.footer-grid > div > a:not(.brand) { margin: 8px 0; display: block; color: var(--muted); font-size: 14px; }.footer-brand p,.contact { max-width: 390px; color: var(--muted); font-size: 14px; }
.footer-bottom { margin-top: 48px; padding-top: 22px; display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid var(--line); color: #68798f; font-size: 12px; }
.back-top { position: fixed; right: 24px; bottom: 24px; z-index: 40; width: 46px; height: 46px; opacity: 0; pointer-events: none; border: 1px solid var(--line); border-radius: 50%; background: var(--cyan); color: #07111f; cursor: pointer; transition: .2s; }.back-top.visible { opacity: 1; pointer-events: auto; }
.breadcrumb { padding-top: 28px; display: flex; gap: 9px; color: var(--muted); font-size: 14px; }.breadcrumb strong { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.channel-hero { margin-top: 24px; padding: 45px; display: grid; grid-template-columns: 90px 1fr auto; align-items: center; gap: 30px; border: 1px solid var(--line); border-radius: 28px; background: radial-gradient(circle at 90% 20%, color-mix(in srgb, var(--tone) 22%, transparent), transparent 35%), var(--panel); }
.channel-icon { width: 78px; height: 78px; display: grid; place-items: center; border-radius: 24px; }.channel-icon .icon { width: 36px; height: 36px; }.channel-hero h1 { margin: 4px 0; font-size: 46px; }.channel-hero p { max-width: 720px; margin: 0; color: #b2c0d0; }.channel-count { text-align: center; }.channel-count b,.channel-count span { display: block; }.channel-count b { color: var(--tone); font-size: 48px; line-height: 1; }.channel-count span { color: var(--muted); font-size: 13px; }
.channel-lead { display: grid; grid-template-columns: 1.25fr 1fr; overflow: hidden; border: 1px solid var(--line); border-radius: 28px; background: var(--panel); }.lead-image { position: relative; min-height: 420px; }.lead-image img { height: 100%; object-fit: cover; }.lead-copy { padding: 44px; display: flex; flex-direction: column; justify-content: center; }.lead-copy h2 { margin: 7px 0 13px; font-size: 34px; line-height: 1.3; }.lead-copy p { color: var(--muted); }.lead-copy .button { margin-top: 24px; align-self: start; }
.channel-grid { grid-template-columns: repeat(5,1fr); }.channel-grid .video-copy p { -webkit-line-clamp: 3; }.channel-grid .video-copy h3 { font-size: 17px; }
.hot-list { display: grid; gap: 12px; }.hot-list > a { padding: 14px; display: grid; grid-template-columns: 190px 1fr auto; gap: 22px; align-items: center; border-radius: 18px; background: var(--panel); }.hot-thumb { position: relative; height: 104px; overflow: hidden; border-radius: 13px; }.hot-thumb img { height: 100%; object-fit: cover; }.hot-thumb i { position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.18)}.hot-thumb .icon{padding:9px;width:40px;height:40px;border-radius:50%;background:#fff;color:#07111f}.hot-list strong,.hot-list small { display:block}.hot-list small{color:var(--cyan)}.hot-list p{margin:5px 0;color:var(--muted);font-size:14px}.hot-list em{color:var(--cyan);font-style:normal}.return-row{margin-top:40px;margin-bottom:90px}
.watch-page { margin-top: 25px; }.watch-heading { margin-bottom: 26px; display: flex; align-items: end; justify-content: space-between; gap: 30px; }.watch-heading h1 { max-width: 850px; margin: 7px 0 10px; font-size: clamp(34px,5vw,56px); line-height:1.18; }.watch-heading p { max-width: 880px; margin:0;color:var(--muted) }.watch-actions{display:flex;gap:8px}.watch-actions button{padding:10px 13px;display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:12px;background:var(--panel);cursor:pointer}.watch-actions button.active{color:#07111f;background:var(--lime)}
.player-shell { position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:28px;background:#02050a;box-shadow:0 30px 80px rgba(0,0,0,.35) }.player-shell>img{height:100%;object-fit:cover;opacity:.72}.center-play{position:absolute;inset:50% auto auto 50%;width:86px;height:86px;transform:translate(-50%,-50%);display:grid;place-items:center;border:0;border-radius:50%;background:var(--cyan);color:#07111f;cursor:pointer}.center-play .icon{width:36px;height:36px}.player-overlay{position:absolute;left:0;right:0;bottom:0;padding:50px 24px 20px;display:flex;align-items:center;gap:12px;background:linear-gradient(0deg,rgba(0,0,0,.92),transparent);font-size:13px}.player-overlay button{border:0;background:transparent;cursor:pointer}.control-play{display:grid;place-items:center}.progress{height:5px;flex:1;overflow:hidden;border-radius:5px;background:rgba(255,255,255,.25)}.progress span{display:block;width:0;height:100%;background:var(--cyan);transition:width .3s}.player-shell.is-playing .center-play{opacity:0}.player-shell.is-playing .progress span{width:38%}
.watch-meta{padding:18px 4px;display:flex;gap:10px;flex-wrap:wrap;border-bottom:1px solid var(--line)}.watch-meta span{padding:5px 10px;border-radius:7px;background:var(--panel);color:var(--muted);font-size:13px}.watch-note{margin-top:34px;padding:24px 28px;border-left:3px solid var(--cyan);background:var(--panel)}.watch-note h2{margin:0 0 6px;font-size:21px}.watch-note p{margin:0;color:var(--muted)}
.story-section{margin-top:70px;display:grid;grid-template-columns:1.5fr .6fr;gap:45px}.story-section h2{margin:5px 0;font-size:36px}.story-section h3{margin:30px 0 8px}.story-section p,.story-section li{color:#aebdce}.story-section aside{align-self:start;padding:28px;border:1px solid var(--line);border-radius:20px;background:var(--panel)}.story-section aside strong{color:var(--lime)}
.scene-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.scene-grid figure{margin:0;overflow:hidden;border-radius:20px;background:var(--panel)}.scene-grid img{aspect-ratio:16/9;object-fit:cover}.scene-grid figcaption{padding:14px 18px;color:var(--muted);font-size:14px}.ending-note{margin-top:60px;padding:32px;display:flex;gap:22px;align-items:center;border-radius:22px;background:linear-gradient(100deg,rgba(66,232,221,.15),rgba(157,133,255,.12))}.ending-note>span{width:58px;height:58px;display:grid;place-items:center;border-radius:18px;background:var(--cyan);color:#07111f}.ending-note>span .icon{width:29px;height:29px}.ending-note h2{margin:0}.ending-note p{margin:4px 0 0;color:var(--muted)}
.episode-nav{margin-top:28px;display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;gap:12px}.episode-nav>a:not(.back-channel){padding:17px;border:1px solid var(--line);border-radius:15px;background:var(--panel)}.episode-nav small,.episode-nav strong{display:block}.episode-nav small{color:var(--cyan)}.episode-nav strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.episode-nav .next{text-align:right}.back-channel{padding:17px;display:grid;place-items:center;border-radius:15px;background:var(--cyan);color:#07111f;font-weight:900}.related-section{margin-bottom:100px}