:root {
    color-scheme: dark;
    --bg: #071014;
    --panel: #0d1a20;
    --panel-2: #12252b;
    --text: #f4f7f5;
    --muted: #9cb0b2;
    --cyan: #62e7d6;
    --orange: #ff7a66;
    --line: rgba(255, 255, 255, .1);
    --radius: 22px;
    --shadow: 0 24px 70px rgba(0, 0, 0, .34);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; overflow-x: hidden; background: var(--bg); color: var(--text); font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif; font-size: 16px; line-height: 1.7; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { color: inherit; }
img { display: block; max-width: 100%; }
.container { width: min(1200px, calc(100% - 40px)); margin-inline: auto; }
.icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(7, 16, 20, .88); border-bottom: 1px solid var(--line); backdrop-filter: blur(18px); }
.header-inner { min-height: 76px; display: flex; align-items: center; gap: 22px; }
.brand { display: inline-flex; align-items: center; flex: 0 0 auto; gap: 11px; }
.brand-mark { width: 42px; aspect-ratio: 1; display: grid; place-items: center; border: 1px solid rgba(98,231,214,.4); border-radius: 13px; background: linear-gradient(145deg, rgba(98,231,214,.2), rgba(255,122,102,.08)); transform: rotate(-8deg); }
.brand-mark span { width: 12px; height: 16px; border-radius: 3px; background: var(--cyan); box-shadow: 8px 0 0 var(--orange); transform: skew(-10deg); }
.brand-copy { display: grid; line-height: 1.1; }
.brand-copy strong { font-size: 1.08rem; letter-spacing: .05em; }
.brand-copy small { margin-top: 5px; color: var(--muted); font-size: .64rem; letter-spacing: .22em; }
.main-nav { flex: 1; display: flex; align-items: center; justify-content: center; gap: 2px; }
.nav-link { position: relative; display: flex; align-items: center; gap: 5px; padding: 10px 8px; border-radius: 10px; color: #b7c6c7; font-size: .86rem; white-space: nowrap; transition: .25s ease; }
.nav-link .icon { width: 16px; height: 16px; }
.nav-link:hover, .nav-link.active { color: var(--text); background: rgba(255,255,255,.06); }
.nav-link.active::after { content: ""; position: absolute; left: 11px; right: 11px; bottom: 3px; height: 2px; background: var(--cyan); border-radius: 2px; }
.search-button, .nav-toggle { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: rgba(255,255,255,.04); cursor: pointer; }
.nav-toggle { display: none; margin-left: auto; }
.hero { position: relative; display: grid; grid-template-columns: .82fr 1.18fr; min-height: 570px; margin-top: 28px; overflow: hidden; border: 1px solid var(--line); border-radius: 30px; background: radial-gradient(circle at 8% 15%, rgba(98,231,214,.16), transparent 36%), var(--panel); box-shadow: var(--shadow); }
.hero-copy { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; padding: 62px 22px 62px 54px; }
.eyebrow { margin: 0 0 9px; color: var(--cyan); font-size: .75rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.hero h1 { margin: 0; font-size: clamp(3rem, 6vw, 5.6rem); line-height: .96; letter-spacing: -.06em; }
.hero h1 a { background: linear-gradient(115deg, #fff 18%, var(--cyan) 85%); -webkit-background-clip: text; color: transparent; }
.hero h2 { max-width: 450px; margin: 18px 0 14px; font-size: clamp(1.6rem, 3vw, 2.7rem); line-height: 1.18; letter-spacing: -.03em; }
.hero-copy > p:not(.eyebrow) { max-width: 520px; margin: 0; color: #b6c8c9; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 23px 0; }
.hero-meta span { padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; color: #d8e3e2; font-size: .78rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.button { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 18px; border: 1px solid var(--line); border-radius: 12px; background: transparent; color: var(--text); cursor: pointer; }
.button--primary { border-color: var(--cyan); background: var(--cyan); color: #061313; font-weight: 800; }
.button--glass { background: rgba(255,255,255,.05); }
.button--light { background: #f4f7f5; color: #071014; font-weight: 800; }
.hero-visual { position: relative; min-width: 0; overflow: hidden; }
.hero-visual::before { content: ""; position: absolute; z-index: 2; inset: 0 auto 0 0; width: 35%; background: linear-gradient(90deg, var(--panel), transparent); }
.hero-visual img { width: 100%; height: 100%; object-fit: cover; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(3,9,11,.86), transparent 55%); }
.hero-play, .play-orb { position: absolute; z-index: 3; display: grid; place-items: center; border-radius: 50%; color: #061313; background: var(--cyan); box-shadow: 0 10px 35px rgba(98,231,214,.3); }
.hero-play { width: 74px; height: 74px; top: 50%; left: 55%; transform: translate(-50%,-50%); }
.hero-play .icon { width: 30px; height: 30px; fill: currentColor; }
.hero-caption { position: absolute; z-index: 3; left: 42px; right: 30px; bottom: 34px; display: grid; }
.hero-caption small { color: var(--cyan); }
.hero-caption strong { font-size: 1.5rem; }
.quick-strip { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 18px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.025); }
.quick-strip div { display: flex; align-items: baseline; justify-content: center; gap: 9px; padding: 18px; border-right: 1px solid var(--line); }
.quick-strip div:last-child { border: 0; }
.quick-strip strong { color: var(--cyan); font-size: 1.35rem; }
.quick-strip span { color: var(--muted); font-size: .86rem; }
.section { margin-top: 90px; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 28px; }
.section-heading h2 { margin: 0; font-size: clamp(1.7rem, 3vw, 2.5rem); line-height: 1.2; letter-spacing: -.04em; }
.section-heading p:not(.eyebrow) { margin: 9px 0 0; color: var(--muted); }
.text-link { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; color: var(--cyan); font-weight: 700; }
.text-link .icon { width: 16px; transition: transform .2s; }
.text-link:hover .icon { transform: translateX(4px); }
.editorial-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.video-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); transition: transform .25s, border-color .25s; }
.video-card:hover { transform: translateY(-5px); border-color: rgba(98,231,214,.38); }
.cover { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #102027; }
.cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s; }
.video-card:hover .cover img { transform: scale(1.045); }
.play-orb { width: 44px; height: 44px; top: 50%; left: 50%; opacity: .9; transform: translate(-50%,-50%); }
.play-orb .icon { fill: currentColor; }
.duration, .card-category { position: absolute; bottom: 10px; padding: 3px 8px; border-radius: 7px; background: rgba(3,9,11,.82); font-size: .72rem; }
.duration { right: 10px; }
.card-category { left: 10px; color: var(--cyan); }
.card-body { padding: 16px; }
.card-body h3 { min-height: 3em; margin: 0; font-size: 1rem; line-height: 1.5; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.card-body p { height: 3.2em; margin: 8px 0 12px; overflow: hidden; color: var(--muted); font-size: .82rem; line-height: 1.6; }
.meta { display: flex; justify-content: space-between; gap: 10px; color: #7f9799; font-size: .72rem; }
.meta span { display: inline-flex; align-items: center; gap: 5px; }
.meta .icon { width: 14px; }
.ticker-section { padding: 70px 0; background: #09171c; border-block: 1px solid var(--line); }
.horizontal-rail { display: grid; grid-template-columns: repeat(6, minmax(220px, 1fr)); gap: 16px; overflow-x: auto; padding-bottom: 10px; scrollbar-color: var(--cyan) transparent; }
.horizontal-rail .video-card { width: 240px; }
.feature-split { display: grid; grid-template-columns: 1.35fr .65fr; gap: 22px; }
.feature-story { position: relative; min-height: 500px; overflow: hidden; border-radius: 25px; }
.feature-story img { width: 100%; height: 100%; object-fit: cover; }
.feature-overlay { position: absolute; inset: auto 0 0; padding: 80px 40px 38px; background: linear-gradient(0deg,#071014,transparent); }
.feature-overlay h2 { margin: 0; font-size: 2.3rem; }
.feature-overlay p:not(.eyebrow) { color: #c2d1d1; }
.feature-list { padding: 34px; border-radius: 25px; background: var(--panel-2); }
.feature-list h2 { margin: 0 0 22px; font-size: 1.65rem; }
.feature-list > a { display: grid; grid-template-columns: 36px 1fr 20px; align-items: center; gap: 12px; padding: 18px 0; border-top: 1px solid var(--line); }
.feature-list > a > span { color: var(--orange); font-size: 1.2rem; font-weight: 900; }
.feature-list > a div { display: grid; }
.feature-list small { color: var(--muted); }
.category-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.category-tile { position: relative; min-height: 205px; padding: 24px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius: 20px; background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 13%, #0d1a20), #0d1a20 58%); }
.category-tile::after { content: ""; position: absolute; width: 130px; aspect-ratio: 1; top: -60px; right: -45px; border: 24px solid color-mix(in srgb, var(--accent) 12%, transparent); border-radius: 50%; }
.category-icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; color: #071014; background: var(--accent); }
.category-tile strong { display: block; margin-top: 18px; font-size: 1.15rem; }
.category-tile p { margin: 6px 0 0; color: var(--muted); font-size: .82rem; }
.category-count { position: absolute; right: 18px; bottom: 17px; color: var(--accent); font-size: .73rem; }
.short-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.short-grid a { position: relative; aspect-ratio: 3/4; overflow: hidden; border-radius: 20px; background: var(--panel); }
.short-grid a::after { content:""; position:absolute; inset: 30% 0 0; background:linear-gradient(transparent,rgba(7,16,20,.95)); }
.short-grid img { width:100%; height:100%; object-fit:cover; }
.episode, .short-title, .short-time { position:absolute; z-index:2; }
.episode { top:14px; left:14px; padding:4px 9px; border-radius:8px; background:var(--orange); color:#130805; font-size:.72rem; font-weight:800; }
.short-title { left:17px; right:17px; bottom:43px; font-weight:800; font-size:1.05rem; }
.short-time { left:17px; bottom:16px; color:#b8c7c8; font-size:.76rem; }
.anime-zone { padding:80px 0; background:radial-gradient(circle at 75% 50%,rgba(255,143,199,.12),transparent 35%),#111426; border-block:1px solid rgba(156,140,255,.18); }
.anime-layout { display:grid; grid-template-columns:.7fr 1.3fr; gap:55px; align-items:center; }
.anime-intro h2 { margin:0; font-size:clamp(2.2rem,4vw,4rem); line-height:1.05; }
.anime-intro > p:not(.eyebrow) { color:#adb2c8; }
.anime-stack { display:grid; gap:12px; }
.anime-stack a { display:grid; grid-template-columns:150px 1fr; min-height:110px; overflow:hidden; border:1px solid rgba(156,140,255,.18); border-radius:18px; background:rgba(255,255,255,.035); }
.anime-stack img { width:100%; height:100%; object-fit:cover; }
.anime-stack div { display:grid; align-content:center; padding:16px 20px; }
.anime-stack small { color:#ff8fc7; }
.anime-stack strong { margin:3px 0; }
.anime-stack span { color:#8e94aa; font-size:.78rem; }
.classic-collage { display:grid; grid-template-columns:1.5fr 1fr; gap:18px; }
.classic-main .video-card, .classic-main .cover { height:100%; }
.classic-main .cover { aspect-ratio:auto; min-height:480px; }
.video-card--wide .card-body { position:absolute; left:25px; right:25px; bottom:20px; z-index:2; border-radius:15px; background:rgba(7,16,20,.86); backdrop-filter:blur(12px); }
.classic-main { position:relative; }
.classic-side { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.timeline { display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.timeline a { position:relative; padding:0 22px 24px; border-top:1px solid var(--line); }
.timeline time { display:block; margin-top:-15px; color:var(--cyan); font-weight:800; }
.timeline-dot { width:10px; height:10px; display:block; margin:11px 0; border-radius:50%; background:var(--cyan); box-shadow:0 0 0 5px rgba(98,231,214,.12); }
.timeline strong { display:block; margin:4px 0; }
.timeline p { color:var(--muted); font-size:.82rem; }
.ranking-wrap { padding:75px 0; background:#0b171b; }
.ranking-layout { display:grid; grid-template-columns:1.25fr .55fr; gap:55px; }
.ranking-list a { display:grid; grid-template-columns:58px 1fr auto; align-items:center; gap:15px; padding:17px 0; border-top:1px solid var(--line); }
.rank-num { color:var(--cyan); font-size:1.5rem; font-weight:900; font-variant-numeric:tabular-nums; }
.ranking-list div { display:grid; }
.ranking-list small { color:var(--muted); }
.ranking-list b { color:var(--orange); }
.rank-poster { position:relative; min-height:500px; overflow:hidden; border-radius:25px; }
.rank-poster::after { content:""; position:absolute; inset:0; background:linear-gradient(transparent 40%,#071014); }
.rank-poster img { width:100%; height:100%; object-fit:cover; }
.rank-poster span,.rank-poster strong { position:absolute; z-index:2; left:25px; right:25px; }
.rank-poster span { bottom:68px; color:var(--cyan); font-size:.78rem; }
.rank-poster strong { bottom:28px; font-size:1.25rem; }
.topic-grid { display:grid; grid-template-columns:1.25fr .75fr .75fr; gap:16px; }
.topic-card { position:relative; min-height:420px; overflow:hidden; border-radius:22px; }
.topic-card::after { content:""; position:absolute; inset:20% 0 0; background:linear-gradient(transparent,rgba(7,16,20,.98)); }
.topic-card img { width:100%; height:100%; object-fit:cover; }
.topic-index { position:absolute; z-index:2; top:16px; left:16px; padding:5px 9px; border-radius:8px; background:var(--cyan); color:#071014; font-size:.72rem; font-weight:900; }
.topic-card div { position:absolute; z-index:2; left:22px; right:22px; bottom:22px; }
.topic-card h3 { margin:0; font-size:1.25rem; }
.topic-card p { color:#b9c7c8; font-size:.82rem; }
.topic-card div span { color:var(--cyan); font-size:.75rem; }
.editor-picks { display:grid; grid-template-columns:.65fr 1.35fr; gap:35px; }
.editor-note { position:relative; padding:35px; border-left:3px solid var(--orange); background:linear-gradient(120deg,rgba(255,122,102,.1),transparent); }
.editor-note h2 { margin:0; font-size:2.3rem; }
.editor-note p:not(.eyebrow) { color:#c0cccc; }
.quote-mark { position:absolute; right:20px; top:-20px; color:rgba(255,122,102,.15); font:900 9rem Georgia; }
.editor-list { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.tag-cloud { display:flex; flex-wrap:wrap; gap:12px; }
.tag-cloud a { padding:12px 18px; border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,calc(.025 + var(--i) * .002)); color:#c7d4d4; transition:.2s; }
.tag-cloud a:hover { border-color:var(--cyan); color:var(--cyan); }
.about { display:grid; grid-template-columns:.8fr 1.2fr; align-items:center; gap:70px; padding:60px; border:1px solid var(--line); border-radius:28px; background:var(--panel); }
.about-art { position:relative; display:grid; place-items:center; min-height:320px; overflow:hidden; border-radius:22px; background:radial-gradient(circle,rgba(98,231,214,.16),transparent 65%); }
.about-art > span { font-size:6rem; font-weight:900; letter-spacing:-.1em; color:var(--cyan); }
.orbit { position:absolute; border:1px solid rgba(98,231,214,.25); border-radius:50%; transform:rotate(-18deg); }
.orbit-one { width:260px; height:105px; }
.orbit-two { width:180px; height:290px; border-color:rgba(255,122,102,.25); }
.about h2 { margin:0; font-size:2.5rem; }
.about p:not(.eyebrow) { color:var(--muted); }
.app-banner { display:grid; grid-template-columns:1fr 210px; gap:50px; align-items:center; margin-bottom:90px; padding:50px 60px; border-radius:28px; color:#06201d; background:linear-gradient(125deg,#62e7d6,#a9f1d7); }
.app-banner .eyebrow { color:#135d55; }
.app-banner h2 { margin:0; font-size:2.4rem; line-height:1.15; }
.app-copy > p:not(.eyebrow) { max-width:730px; }
.app-copy > div { display:flex; align-items:center; gap:15px; }
.subscribe-status { font-size:.82rem; color:#28665f; }
.qr-mark { position:relative; width:170px; height:170px; display:grid; place-content:center; justify-items:center; border:10px solid #082521; border-radius:18px; background:repeating-linear-gradient(45deg,rgba(8,37,33,.12) 0 6px,transparent 6px 12px); }
.qr-mark strong { font-size:3rem; line-height:1; }
.qr-mark small { font-weight:800; }
.qr-corners::before,.qr-corners::after { content:""; position:absolute; width:24px; height:24px; border:7px solid #082521; }
.qr-corners::before { top:10px; left:10px; }
.qr-corners::after { right:10px; bottom:10px; }
.site-footer { padding:65px 0 25px; border-top:1px solid var(--line); background:#050b0e; }
.footer-grid { display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:45px; }
.footer-grid h2 { margin:0 0 15px; font-size:.95rem; }
.footer-grid > div:not(.footer-brand) { display:flex; flex-direction:column; gap:9px; }
.footer-grid p,.footer-grid a { margin:0; color:#829698; font-size:.82rem; }
.footer-brand p { max-width:350px; margin-top:18px; }
.footer-bottom { display:flex; justify-content:space-between; margin-top:45px; padding-top:20px; border-top:1px solid var(--line); color:#6d8284; font-size:.78rem; }
.back-top { position:fixed; right:20px; bottom:20px; z-index:40; width:44px; height:44px; display:none; border:1px solid var(--line); border-radius:50%; background:var(--panel-2); cursor:pointer; }
.back-top.visible { display:block; }
.search-drawer { position:fixed; z-index:100; inset:0; padding:20px; background:rgba(2,7,9,.78); backdrop-filter:blur(10px); }
.search-drawer:not([hidden]) { display:grid; place-items:center; }
.search-panel { position:relative; width:min(620px,100%); padding:40px; border:1px solid var(--line); border-radius:24px; background:var(--panel); box-shadow:var(--shadow); }
.search-panel h2 { margin:0 0 22px; }
.search-panel label { display:grid; gap:7px; }
.search-panel input { width:100%; padding:14px 16px; border:1px solid var(--line); border-radius:12px; outline:0; color:var(--text); background:#071014; }
.search-panel input:focus { border-color:var(--cyan); }
.search-close { position:absolute; top:14px; right:16px; border:0; background:none; font-size:1.8rem; cursor:pointer; }
.search-results { margin-top:15px; color:var(--muted); }
.breadcrumb { display:flex; align-items:center; gap:7px; padding-top:28px; color:var(--muted); font-size:.82rem; }
.breadcrumb .icon { width:14px; }
.channel-hero { display:grid; grid-template-columns:.75fr 1.25fr; gap:50px; align-items:center; min-height:440px; margin-top:22px; padding:50px; border:1px solid color-mix(in srgb,var(--accent) 25%,transparent); border-radius:28px; background:radial-gradient(circle at 10% 20%,color-mix(in srgb,var(--accent) 17%,transparent),transparent 40%),var(--panel); }
.channel-icon { width:58px; height:58px; display:grid; place-items:center; margin-bottom:25px; border-radius:17px; color:#071014; background:var(--accent); }
.channel-hero h1 { margin:0; font-size:clamp(2.8rem,5vw,5rem); line-height:1; }
.channel-hero p:not(.eyebrow) { color:var(--muted); }
.channel-stats { display:flex; gap:22px; margin-top:24px; }
.channel-stats span { display:grid; color:var(--muted); font-size:.75rem; }
.channel-stats strong { color:var(--accent); font-size:1.1rem; }
.channel-feature { position:relative; min-height:340px; overflow:hidden; border-radius:22px; }
.channel-feature img { width:100%; height:100%; object-fit:cover; }
.channel-feature > div { position:absolute; z-index:2; left:25px; right:25px; bottom:23px; display:grid; }
.channel-feature small { color:var(--accent); }
.channel-feature strong { font-size:1.3rem; }
.channel-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.channel-grid .video-card:first-child { grid-column:span 2; }
.channel-grid .video-card:first-child .cover { aspect-ratio:16/7.6; }
.channel-editorial { display:grid; grid-template-columns:1fr 1fr; gap:55px; padding:45px; border-radius:25px; background:var(--panel-2); }
.channel-editorial h2 { margin:0; font-size:2rem; }
.channel-editorial p:not(.eyebrow) { color:var(--muted); }
.channel-editorial ol { margin:0; padding:0; list-style:none; }
.channel-editorial li { border-top:1px solid var(--line); }
.channel-editorial li a { display:grid; grid-template-columns:45px 1fr; gap:15px; align-items:center; padding:17px 0; }
.channel-editorial li span { color:var(--orange); font-weight:900; }
.channel-editorial li div { display:grid; }
.channel-editorial li small { color:var(--muted); }
.related-channels > div:last-child { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.related-channels > div:last-child a { display:grid; gap:10px; min-height:155px; padding:22px; border:1px solid color-mix(in srgb,var(--accent) 25%,transparent); border-radius:18px; background:color-mix(in srgb,var(--accent) 7%,var(--panel)); }
.related-channels > div:last-child svg { color:var(--accent); }
.related-channels > div:last-child span { color:var(--muted); font-size:.8rem; }
.watch-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:30px; margin:26px 0 24px; }
.watch-heading h1 { margin:0; font-size:clamp(2rem,4vw,3.5rem); line-height:1.15; letter-spacing:-.04em; }
.watch-meta { display:flex; flex-wrap:wrap; gap:15px; margin-top:14px; color:var(--muted); font-size:.8rem; }
.watch-meta span { display:inline-flex; align-items:center; gap:6px; }
.watch-meta .icon { width:15px; }
.favorite-button { flex:0 0 auto; padding:10px 15px; border:1px solid var(--line); border-radius:11px; background:var(--panel); cursor:pointer; }
.favorite-button.active { border-color:var(--orange); color:var(--orange); }
.player { position:relative; aspect-ratio:16/8.7; overflow:hidden; border:1px solid var(--line); border-radius:25px; background:#020608; box-shadow:var(--shadow); }
.player > img { width:100%; height:100%; object-fit:cover; }
.player-vignette { position:absolute; inset:0; background:radial-gradient(circle,transparent 25%,rgba(0,0,0,.48)); }
.player-main { position:absolute; top:50%; left:50%; width:84px; height:84px; display:grid; place-items:center; transform:translate(-50%,-50%); border:0; border-radius:50%; color:#071014; background:var(--cyan); cursor:pointer; box-shadow:0 0 0 14px rgba(98,231,214,.14); }
.player-main .icon { width:34px; height:34px; fill:currentColor; }
.player.playing .player-main { opacity:.12; }
.player-controls { position:absolute; left:0; right:0; bottom:0; display:grid; grid-template-columns:36px 1fr auto 36px 36px; gap:12px; align-items:center; padding:30px 20px 16px; background:linear-gradient(transparent,rgba(0,0,0,.9)); }
.player-controls button { display:grid; place-items:center; border:0; background:none; cursor:pointer; }
.progress { height:4px; overflow:hidden; border-radius:4px; background:rgba(255,255,255,.25); }
.progress i { display:block; width:22%; height:100%; background:var(--cyan); }
.player-controls time { font-size:.75rem; }
.watch-layout { display:grid; grid-template-columns:1.4fr .6fr; gap:55px; margin-top:55px; }
.prose-block h2,.watch-aside h2 { margin:0; font-size:2rem; }
.prose-block p:not(.eyebrow) { color:#bdcbcc; }
.highlight-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:30px; }
.highlight-grid div { padding:20px; border:1px solid var(--line); border-radius:16px; background:var(--panel); }
.highlight-grid span { color:var(--orange); font-weight:900; }
.highlight-grid h3 { margin:8px 0 4px; font-size:1rem; }
.highlight-grid p { margin:0; color:var(--muted); font-size:.8rem; }
.watch-aside { padding:28px; border-radius:20px; background:var(--panel-2); }
.watch-aside dl { margin:15px 0 0; }
.watch-aside dl div { display:grid; grid-template-columns:70px 1fr; gap:15px; padding:12px 0; border-top:1px solid var(--line); }
.watch-aside dt { color:var(--muted); }
.watch-aside dd { margin:0; }
.watch-aside a { color:var(--cyan); }
.scene-gallery { margin-top:75px; }
.scene-gallery > div:last-child { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.scene-gallery figure { position:relative; margin:0; overflow:hidden; border-radius:16px; }
.scene-gallery img { width:100%; aspect-ratio:4/3; object-fit:cover; }
.scene-gallery figcaption { position:absolute; left:0; right:0; bottom:0; padding:35px 13px 10px; background:linear-gradient(transparent,rgba(0,0,0,.8)); font-size:.78rem; }
.scene-gallery figcaption span { margin-right:8px; color:var(--cyan); }
.ending-note { display:grid; grid-template-columns:60px 1fr auto; gap:22px; align-items:center; margin-top:70px; padding:35px; border:1px solid rgba(98,231,214,.2); border-radius:22px; background:linear-gradient(120deg,rgba(98,231,214,.08),transparent); }
.ending-note > .icon { width:45px; height:45px; color:var(--cyan); }
.ending-note h2 { margin:0; }
.ending-note p:not(.eyebrow) { margin:5px 0 0; color:var(--muted); }
.episode-nav { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:25px; }
.episode-nav a,.episode-edge { display:grid; padding:20px; border:1px solid var(--line); border-radius:16px; background:var(--panel); }
.episode-nav small { color:var(--muted); }
.episode-nav .next { text-align:right; }
.related-videos { margin-bottom:90px; }