:root {
    --ink:#eaf0ff;
    --muted:#9baac6;
    --paper:#08111f;
    --surface:#101d31;
    --surface-2:#152842;
    --line:rgba(181,208,255,.15);
    --aqua:#4fe0d1;
    --violet:#818cf8;
    --gold:#f7c65f;
    --max:1200px
}
* {
    box-sizing:border-box
}
html {
    scroll-behavior:smooth
}
body {
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:"Microsoft YaHei",system-ui,sans-serif;
    font-size:16px;
    line-height:1.65
}
a {
    color:inherit;
    text-decoration:none
}
.wrap {
    max-width:var(--max);
    margin:0 auto;
    padding-left:24px;
    padding-right:24px
}
.site-header {
    position:sticky;
    top:0;
    z-index:20;
    background:rgba(8,17,31,.92);
    backdrop-filter:blur(16px);
    border-bottom:1px solid var(--line)
}
.nav-shell {
    max-width:1280px;
    margin:auto;
    padding:12px 24px;
    display:flex;
    align-items:center;
    gap:22px
}
.brand {
    font-weight:800;
    letter-spacing:.04em;
    display:inline-flex;
    align-items:center;
    gap:9px;
    white-space:nowrap
}
.brand-mark {
    display:grid;
    place-items:center;
    width:30px;
    height:30px;
    border-radius:9px;
    background:linear-gradient(135deg,var(--aqua),var(--violet));
    color:#06111e
}
.main-nav {
    display:flex;
    gap:5px;
    align-items:center;
    overflow:auto;
    scrollbar-width:none
}
.main-nav a {
    white-space:nowrap;
    padding:8px 10px;
    border-radius:8px;
    color:#b7c5df;
    font-size:14px
}
.main-nav a span {
    margin-right:4px;
    color:var(--aqua)
}
.main-nav a:hover,.main-nav a.active {
    background:rgba(79,224,209,.12);
    color:#fff
}
.menu-toggle {
    display:none;
    margin-left:auto;
    background:none;
    border:0;
    color:#fff;
    font-size:24px
}
.hero {
    margin-top:34px;
    display:grid;
    grid-template-columns:1fr 1.15fr;
    gap:30px;
    align-items:stretch
}
.hero-copy {
    padding:42px 0
}
.eyebrow {
    color:var(--aqua);
    font-size:13px;
    font-weight:bold;
    letter-spacing:.12em;
    text-transform:uppercase;
    margin:0 0 8px
}
.hero h1 {
    font-size:clamp(2.7rem,6vw,4.8rem);
    line-height:1;
    margin:0
}
.hero h1 a {
    text-decoration:underline;
    text-decoration-color:var(--aqua);
    text-decoration-thickness:5px;
    text-underline-offset:9px
}
.hero h2 {
    font-size:clamp(1.4rem,3vw,2.25rem);
    margin:28px 0 12px;
    line-height:1.25
}
.hero p,.channel-head p,.article-copy p {
    color:#c5d0e6
}
.hero-actions {
    display:flex;
    align-items:center;
    gap:20px;
    margin:26px 0
}
.button {
    display:inline-block;
    padding:11px 20px;
    border-radius:10px;
    background:var(--aqua);
    color:#052020;
    font-weight:800
}
.button:hover {
    filter:brightness(1.08)
}
.text-link {
    color:var(--aqua);
    font-weight:bold
}
.hero-meta,.video-info {
    color:var(--muted);
    font-size:14px
}
.hero-media,.cover,.spotlight-image {
    position:relative;
    display:block;
    overflow:hidden;
    background:#152842;
    border-radius:17px
}
.hero-media {
    min-height:390px
}
.hero-image,.cover img,.spotlight-image img {
    width:100%;
    height:100%;
    object-fit:cover;
    display:block
}
.hero-image {
    position:absolute;
    inset:0
}
.hero-media:after,.cover:after,.spotlight-image:after {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(transparent 45%,rgba(2,8,15,.85))
}
.hero-play,.play-icon {
    position:absolute;
    z-index:2;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:rgba(79,224,209,.93);
    color:#06202c
}
.hero-play {
    width:58px;
    height:58px;
    top:42%;
    left:45%
}
.hero-caption {
    position:absolute;
    z-index:3;
    bottom:25px;
    left:25px;
    right:25px;
    display:grid
}
.hero-caption strong {
    font-size:20px
}
.hero-caption span {
    color:#d5deef
}
.section {
    margin-top:76px
}
.section-heading {
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:18px;
    margin-bottom:22px
}
.section h2 {
    font-size:28px;
    line-height:1.25;
    margin:0
}
.split-feature {
    display:grid;
    grid-template-columns:.8fr 1.2fr;
    gap:36px;
    padding:34px;
    background:linear-gradient(120deg,#112747,#172041);
    border-radius:20px
}
.feature-list {
    display:grid;
    gap:8px
}
.feature-list a {
    display:grid;
    grid-template-columns:42px 1fr;
    align-items:center;
    gap:9px;
    padding:12px;
    border-bottom:1px solid var(--line)
}
.feature-list b {
    color:var(--gold);
    font-size:20px
}
.feature-list small {
    grid-column:2;
    color:var(--muted)
}
.video-grid {
    display:grid;
    gap:18px
}
.four {
    grid-template-columns:repeat(4,1fr)
}
.three {
    grid-template-columns:repeat(3,1fr)
}
.five {
    grid-template-columns:repeat(5,1fr);
    gap:14px
}
.cover {
    aspect-ratio:16/9;
    border-radius:12px
}
.cover img {
    position:absolute;
    inset:0
}
.cover:hover img,.hero-media:hover img {
    transform:scale(1.04)
}
.cover img,.hero-media img {
    transition:transform .35s
}
.play-icon {
    width:35px;
    height:35px;
    left:calc(50% - 17px);
    top:calc(50% - 17px);
    font-size:13px
}
.cover em {
    position:absolute;
    z-index:3;
    right:8px;
    bottom:8px;
    background:rgba(0,0,0,.75);
    padding:2px 6px;
    border-radius:5px;
    font-style:normal;
    font-size:12px
}
.card-copy {
    padding:10px 2px
}
.pill {
    display:inline-block;
    border-radius:99px;
    padding:2px 8px;
    background:rgba(129,140,248,.18);
    color:#cdd2ff;
    font-size:12px
}
.card-copy h3 {
    font-size:16px;
    line-height:1.4;
    margin:7px 0;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden
}
.card-copy p {
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    color:var(--muted);
    font-size:12px;
    margin:0
}
.wide-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px
}
.popular-strip {
    padding:32px 28px;
    border:1px solid var(--line);
    border-radius:20px;
    background:radial-gradient(circle at 85% 15%,rgba(129,140,248,.19),transparent 32%)
}
.category-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px
}
.category-tile {
    padding:20px;
    border-radius:14px;
    background:var(--surface);
    border:1px solid transparent
}
.category-tile:nth-child(3n+2) {
    background:#14273a
}
.category-tile:nth-child(3n) {
    background:#222044
}
.category-tile:hover {
    border-color:var(--aqua);
    transform:translateY(-2px)
}
.category-tile>span {
    font-size:24px;
    color:var(--gold)
}
.category-tile h3 {
    margin:6px 0;
    font-size:17px
}
.category-tile p {
    font-size:13px;
    color:var(--muted);
    margin:0
}
.timeline {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:2px;
    background:var(--line)
}
.timeline a {
    background:var(--paper);
    padding:20px;
    display:grid;
    gap:4px
}
.timeline b {
    color:var(--aqua)
}
.timeline small {
    color:var(--muted)
}
.classic-banner {
    padding:42px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    border-radius:22px;
    background:linear-gradient(135deg,#553046,#1a3151)
}
.classic-banner h2 {
    max-width:600px
}
.classic-stats {
    display:grid;
    grid-template-columns:auto auto;
    gap:5px 18px;
    align-items:center
}
.classic-stats b {
    font-size:32px;
    color:var(--gold)
}
.classic-stats span {
    font-size:13px;
    color:#e0d5e4
}
.upcoming-list {
    border-top:1px solid var(--line)
}
.upcoming-list a {
    display:grid;
    grid-template-columns:100px 1fr auto;
    gap:16px;
    padding:16px 0;
    border-bottom:1px solid var(--line)
}
.upcoming-list span {
    color:var(--aqua);
    font-weight:bold
}
.upcoming-list small {
    color:var(--muted)
}
.rank-section {
    padding:34px;
    background:#0d1a2c;
    border-radius:20px
}
.rank-list {
    list-style:none;
    margin:0;
    padding:0
}
.rank-list li {
    display:grid;
    grid-template-columns:48px 1fr 130px 160px;
    gap:16px;
    align-items:center;
    padding:14px 0;
    border-top:1px solid var(--line)
}
.rank-list b {
    font-size:22px;
    color:var(--gold)
}
.rank-list span,.rank-list small {
    color:var(--muted);
    font-size:13px
}
.topic-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px
}
.topic-grid a {
    min-height:220px;
    padding:25px;
    display:flex;
    flex-direction:column;
    justify-content:end;
    border-radius:16px;
    background:linear-gradient(160deg,#2b3b6d,#101d31)
}
.topic-grid a:nth-child(2) {
    background:linear-gradient(160deg,#215562,#17253a)
}
.topic-grid a:nth-child(3) {
    background:linear-gradient(160deg,#6a3c51,#25182b)
}
.topic-grid h3 {
    font-size:24px;
    margin:5px 0
}
.topic-grid p {
    margin:0;
    color:#dae1ef
}
.editorials {
    display:grid;
    grid-template-columns:.7fr 1.3fr;
    gap:26px
}
.editor-picks {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px
}
.editor-picks>a {
    display:block
}
.editor-picks .video-card {
    pointer-events:none
}
.tags {
    padding:32px;
    border-left:4px solid var(--aqua);
    background:var(--surface)
}
.tags>div {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:18px
}
.tags a {
    padding:6px 11px;
    border:1px solid var(--line);
    border-radius:99px;
    color:#d3def5;
    font-size:14px
}
.about {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:30px;
    padding:38px;
    border-radius:18px;
    border:1px solid var(--line)
}
.subscribe-band {
    max-width:1200px;
    margin:75px auto 0;
    padding:35px 40px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    background:linear-gradient(125deg,var(--aqua),#7695f8);
    color:#062032;
    border-radius:22px
}
.subscribe-band .eyebrow {
    color:#19535a
}
.subscribe-band h2 {
    margin:0;
    line-height:1.25
}
.subscribe-band p {
    margin:6px 0 18px
}
.button.light {
    background:#092239;
    color:#eaffff
}
.qr-mark {
    width:112px;
    height:112px;
    border-radius:16px;
    background:#f4fffd;
    display:grid;
    place-items:center;
    align-content:center;
    color:#0c5261;
    box-shadow:inset 0 0 0 10px #183e62;
    font-size:22px
}
.qr-mark small {
    font-size:12px
}
.site-footer {
    margin-top:55px;
    padding:45px 24px;
    background:#050b14;
    color:#aebbd0
}
.footer-grid {
    max-width:1200px;
    margin:auto;
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1.25fr;
    gap:32px
}
.footer-grid h3 {
    color:#fff;
    font-size:15px
}
.footer-grid p {
    font-size:13px
}
.footer-grid a:not(.brand) {
    display:block;
    margin:8px 0;
    font-size:14px
}
.inner-page {
    padding:30px 0 0
}
.crumb {
    font-size:14px;
    color:var(--muted);
    display:flex;
    gap:9px;
    flex-wrap:wrap;
    margin-bottom:24px
}
.crumb a {
    color:var(--aqua)
}
.channel-head {
    max-width:760px;
    margin-bottom:30px
}
.channel-head h1,.watch-page>header h1 {
    font-size:38px;
    margin:0;
    line-height:1.25
}
.channel-spotlight {
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:26px;
    background:var(--surface);
    padding:25px;
    border-radius:18px;
    align-items:center
}
.channel-spotlight h2 {
    font-size:27px;
    margin:8px 0
}
.channel-spotlight p {
    color:var(--muted)
}
.spotlight-image {
    aspect-ratio:16/9
}
.no-pad {
    padding:0
}
.channel-hot {
    padding:30px;
    background:linear-gradient(120deg,#171e3d,#11263e);
    border-radius:18px;
    display:grid;
    grid-template-columns:.65fr 1.35fr;
    gap:30px
}
.mini-list {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:9px
}
.mini-list a {
    display:flex;
    align-items:center;
    gap:10px;
    padding:11px;
    background:rgba(255,255,255,.04);
    border-radius:9px
}
.mini-list> a>span {
    color:var(--gold)
}
.mini-list div {
    display:grid;
    gap:2px;
    flex:1
}
.mini-list b {
    font-size:14px;
    line-height:1.3
}
.mini-list small {
    font-size:12px;
    color:var(--muted)
}
.mini-list em {
    font-style:normal;
    color:var(--aqua)
}
.back-home {
    display:inline-block;
    color:var(--aqua);
    margin-top:32px
}
.watch-page>header {
    margin-bottom:20px
}
.player {
    position:relative;
    aspect-ratio:16/9;
    background:#000;
    overflow:hidden;
    border-radius:18px
}
.player-poster {
    width:100%;
    height:100%;
    object-fit:cover;
    display:block
}
.player-shade {
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    background:rgba(0,0,0,.1)
}
.player-button {
    border:0;
    width:72px;
    height:72px;
    border-radius:50%;
    background:var(--aqua);
    font-size:22px;
    color:#06202c;
    padding-left:6px
}
.controls {
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    display:flex;
    gap:14px;
    align-items:center;
    padding:12px 18px;
    background:linear-gradient(transparent,rgba(0,0,0,.88));
    font-size:13px
}
.progress {
    height:5px;
    background:#667285;
    flex:1;
    border-radius:99px;
    overflow:hidden
}
.progress i {
    display:block;
    width:30%;
    height:100%;
    background:var(--aqua)
}
.watch-tip {
    padding:12px 16px;
    margin:16px 0;
    background:#11273a;
    color:#c8e5e6;
    border-radius:8px;
    font-size:14px
}
.article-copy {
    max-width:860px;
    margin:36px auto
}
.article-copy h2 {
    margin-top:34px;
    font-size:24px
}
.article-copy li {
    margin-bottom:8px;
    color:#ccd7e8
}
.scene-gallery {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:14px;
    margin:26px 0
}
.scene-gallery figure {
    margin:0;
    background:var(--surface);
    border-radius:10px;
    overflow:hidden
}
.scene-gallery img {
    width:100%;
    aspect-ratio:16/10;
    object-fit:cover;
    display:block
}
.scene-gallery figcaption {
    font-size:13px;
    padding:8px 10px;
    color:var(--muted)
}
.pager {
    display:flex;
    justify-content:space-between;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    padding:15px 0
}
.pager a {
    color:var(--aqua)
}
@media(max-width:900px) {
    .main-nav {
        position:absolute;
        top:55px;
        left:0;
        right:0;
        display:none;
        flex-direction:column;
        align-items:stretch;
        padding:10px 20px 20px;
        background:#0a1526;
        border-bottom:1px solid var(--line)
    }
    .main-nav.open {
        display:flex
    }
    .menu-toggle {
        display:block
    }
    .hero,.split-feature,.editorials,.about,.channel-spotlight,.channel-hot {
        grid-template-columns:1fr
    }
    .hero-copy {
        padding:15px 0
    }
    .hero-media {
        min-height:300px
    }
    .four {
        grid-template-columns:repeat(2,1fr)
    }
    .five {
        grid-template-columns:repeat(3,1fr)
    }
    .wide-grid {
        grid-template-columns:repeat(3,1fr)
    }
    .category-grid {
        grid-template-columns:repeat(3,1fr)
    }
    .footer-grid {
        grid-template-columns:repeat(2,1fr)
    }
    .subscribe-band {
        margin-left:24px;
        margin-right:24px
    }
    .rank-list li {
        grid-template-columns:42px 1fr 100px
    }
    .rank-list small {
        display:none
    }
}
@media(max-width:560px) {
    .wrap {
        padding-left:16px;
        padding-right:16px
    }
    .nav-shell {
        padding:11px 16px
    }
    .hero {
        margin-top:16px
    }
    .hero-media {
        min-height:230px
    }
    .section {
        margin-top:52px
    }
    .section h2 {
        font-size:23px
    }
    .hero-caption {
        left:16px;
        bottom:16px
    }
    .hero-caption strong {
        font-size:16px
    }
    .three,.four,.five,.wide-grid,.category-grid,.topic-grid,.editor-picks {
        grid-template-columns:repeat(2,1fr)
    }
    .video-grid {
        gap:12px
    }
    .card-copy h3 {
        font-size:14px
    }
    .split-feature,.popular-strip,.rank-section,.classic-banner,.about {
        padding:22px
    }
    .timeline {
        grid-template-columns:repeat(2,1fr)
    }
    .classic-banner {
        display:block
    }
    .classic-stats {
        margin-top:20px
    }
    .upcoming-list a {
        grid-template-columns:62px 1fr
    }
    .upcoming-list small {
        grid-column:2
    }
    .rank-list li {
        grid-template-columns:35px 1fr
    }
    .rank-list span {
        display:none
    }
    .topic-grid a {
        min-height:175px;
        padding:16px
    }
    .topic-grid h3 {
        font-size:20px
    }
    .subscribe-band {
        margin:50px 16px 0;
        padding:26px;
        align-items:flex-start
    }
    .qr-mark {
        width:86px;
        height:86px;
        font-size:16px;
        flex:none
    }
    .footer-grid {
        grid-template-columns:1fr 1fr;
        gap:20px
    }
    .channel-head h1,.watch-page>header h1 {
        font-size:28px
    }
    .mini-list {
        grid-template-columns:1fr
    }
    .scene-gallery {
        gap:9px
    }
    .controls {
        gap:8px;
        padding:9px;
        font-size:11px
    }
    .player-button {
        width:54px;
        height:54px
    }
    .article-copy {
        margin-top:25px
    }
    .channel-spotlight {
        padding:16px
    }
}