*, *::before, *::after {box-sizing:border-box;margin:0;padding:0}
:root {
--bg:#05070b;
--bg-2:#080c13;
--panel:rgba(12,18,27,.72);
--panel-2:rgba(16,24,35,.55);
--line:rgba(90,180,190,.16);
--line-2:rgba(120,220,225,.28);
--ink:#c8d6dd;
--ink-dim:#7c8f9b;
--ink-faint:#556672;
--cyan:#39f0d0;
--cyan-dim:#1aa88f;
--cyan-glow:rgba(57,240,208,.35);
--danger:#ff5a6a;
--mono:"Helvetica Neue",Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
--narrow:"Arial Narrow","Helvetica Neue Condensed",Arial,"PingFang SC","Microsoft YaHei",sans-serif;
--gap:10px;
--radius:2px;
}
html {-webkit-text-size-adjust:100%}
body {
background:
radial-gradient(1200px 700px at 78% -10%,rgba(24,90,110,.28),transparent 62%),
radial-gradient(900px 600px at 8% 4%,rgba(12,40,70,.30),transparent 60%),
linear-gradient(180deg,#05070b 0%,#060a10 40%,#04060a 100%);
background-color:var(--bg);
color:var(--ink);
font-family:var(--narrow);
font-size:13px;
line-height:1.38;
letter-spacing:.015em;
min-height:100vh;
overflow-x:hidden;
position:relative;
}
body::before {
content:"";
position:fixed;
inset:0;
pointer-events:none;
z-index:9999;
opacity:.05;
mix-blend-mode:screen;
utf8,<svg xmlns="[bad string]

}
body::after {
content:"";
position:fixed;
inset:0;
pointer-events:none;
z-index:9998;
background:repeating-linear-gradient(0deg,rgba(255,255,255,.012) 0 1px,transparent 1px 3px);
}
img {display:block;max-width:100%;height:auto}
a {color:var(--cyan);text-decoration:none}
ol, ul {list-style:none}
button {font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h2, h3 {font-weight:600;letter-spacing:.06em;line-height:1.2}
.site-header {
position:sticky;
top:0;
z-index:60;
background:linear-gradient(180deg,rgba(5,8,13,.96),rgba(6,10,16,.82));
backdrop-filter:blur(9px);
-webkit-backdrop-filter:blur(9px);
border-bottom:1px solid var(--line);
}
.header-inner {
max-width:1440px;
margin:0 auto;
padding:9px 18px;
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
flex-wrap:wrap;
}
.site-brand {
font-family:var(--narrow);
font-size:15px;
font-weight:700;
letter-spacing:.34em;
text-transform:uppercase;
color:#eafcfa;
text-shadow:0 0 12px var(--cyan-glow);
}
a[data-contract="site-name"] {color:#eafcfa;text-decoration:none}
a[data-contract="site-name"]:hover {color:var(--cyan);text-decoration:none}
.category-bar {
display:flex;
align-items:center;
gap:6px;
flex-wrap:wrap;
justify-content:flex-end;
max-width:100%;
}
a.runtime-category {
white-space:nowrap;
font-size:12px;
letter-spacing:.14em;
color:var(--ink-dim);
text-decoration:none;
padding:4px 10px;
border:1px solid var(--line);
border-radius:var(--radius);
background:rgba(255,255,255,.015);
transition:color .18s,border-color .18s,background .18s;
}
a.runtime-category:hover {
color:var(--cyan);
border-color:var(--line-2);
background:rgba(57,240,208,.06);
text-decoration:none;
}
.page-main {
max-width:1440px;
margin:0 auto;
padding:14px 18px 30px;
display:flex;
flex-direction:column;
gap:22px;
}
.overview-section {
position:relative;
display:grid;
grid-template-columns:minmax(0,220px) minmax(0,1fr);
gap:22px;
align-items:start;
padding:20px;
background:
linear-gradient(135deg,rgba(14,26,38,.82),rgba(6,10,16,.7)),
var(--panel);
border:1px solid var(--line);
border-radius:var(--radius);
overflow:hidden;
}
.overview-section::before {
content:"";
position:absolute;
top:0;left:0;right:0;height:1px;
background:linear-gradient(90deg,transparent,var(--cyan),transparent);
opacity:.55;
}
.overview-section::after {
content:"";
position:absolute;
right:-70px;top:-70px;
width:280px;height:280px;
background:radial-gradient(circle,rgba(57,240,208,.14),transparent 68%);
pointer-events:none;
}
.overview-media {
display:flex;
justify-content:flex-start;
align-items:flex-start;
position:relative;
}
.overview-poster {
position:relative;
width:100%;
max-width:220px;
border:1px solid rgba(120,220,225,.22);
background:#03060a;
box-shadow:0 0 0 1px rgba(0,0,0,.6),0 18px 40px -18px rgba(0,0,0,.95);
}
.overview-poster img {
width:100%;
height:auto;
display:block;
aspect-ratio:9 / 16;
object-fit:cover;
filter:saturate(.62) contrast(1.14) brightness(.9) hue-rotate(-6deg);
}
.overview-poster::after {
content:"";
position:absolute;
inset:0;
pointer-events:none;
background:
linear-gradient(180deg,transparent 55%,rgba(5,8,13,.75) 100%),
repeating-linear-gradient(90deg,rgba(57,240,208,.09) 0 1px,transparent 1px 9px);
mix-blend-mode:screen;
opacity:.85;
}
.overview-info {
min-width:0;
display:flex;
flex-direction:column;
gap:14px;
}
.overview-title {
font-size:30px;
font-weight:700;
letter-spacing:.2em;
color:#f2fffd;
text-shadow:0 0 22px rgba(57,240,208,.3);
}
.overview-tagline {
font-size:12px;
letter-spacing:.28em;
color:var(--cyan);
opacity:.9;
border-left:2px solid var(--cyan-dim);
padding-left:10px;
}
.overview-seo {
font-size:12px;
line-height:1.5;
color:var(--ink-dim);
max-width:78ch;
}
.synopsis-block, .cast-block, .status-block, .details-block {
border-top:1px solid var(--line);
padding-top:12px;
}
.block-title {
font-size:11px;
letter-spacing:.34em;
color:var(--cyan);
text-transform:uppercase;
margin-bottom:9px;
position:relative;
padding-left:14px;
}
.block-title::before {
content:"";
position:absolute;
left:0;top:50%;
width:7px;height:7px;
transform:translateY(-50%) rotate(45deg);
background:var(--cyan);
box-shadow:0 0 9px var(--cyan-glow);
}
.synopsis-block {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:6px 20px;
align-items:start;
}
.synopsis-block .block-title {
grid-column:1 / -1;
}
.synopsis-para {
font-size:12px;
line-height:1.5;
color:var(--ink);
opacity:.86;
}
.synopsis-para+.synopsis-para {margin-top:0}
.cast-list {
display:grid;
grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
gap:8px;
align-items:start;
}
.cast-card {
display:grid;
grid-template-columns:auto minmax(0,1fr);
grid-template-rows:auto auto;
column-gap:10px;
align-items:center;
padding:7px 9px;
border:1px solid var(--line);
background:rgba(255,255,255,.014);
transition:border-color .18s,background .18s;
}
.cast-card:hover {
border-color:var(--line-2);
background:rgba(57,240,208,.05);
}
.cast-avatar {
grid-row:1 / span 2;
width:38px;height:38px;
border-radius:50%;
background:
radial-gradient(circle at 34% 30%,#9ef7e6 0%,#3ad0b6 26%,#0d4b52 62%,#05090d 100%);
filter:invert(1) hue-rotate(150deg) saturate(.8) contrast(1.1);
box-shadow:0 0 0 1px rgba(120,220,225,.3),0 0 14px -4px rgba(57,240,208,.5);
}
.cast-name {
font-size:13px;
letter-spacing:.1em;
color:#e6fbf8;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.cast-code {
font-size:10px;
letter-spacing:.16em;
color:var(--ink-faint);
font-variant-numeric:tabular-nums;
}
.status-line {
font-size:12px;
letter-spacing:.16em;
color:var(--cyan);
}
.status-line::before {
content:"●";
font-size:8px;
margin-right:8px;
color:var(--danger);
animation:pulse 1.8s infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.details-list {
display:grid;
grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
gap:5px 16px;
align-items:start;
}
.detail-key {
font-size:10px;
letter-spacing:.22em;
color:var(--ink-faint);
text-transform:uppercase;
}
.detail-value {
font-size:12px;
color:var(--ink);
letter-spacing:.04em;
margin-bottom:4px;
border-bottom:1px dotted rgba(120,220,225,.12);
padding-bottom:4px;
}
.player-shell {
position:relative;
display:flex;
flex-direction:column;
gap:8px;
padding:10px;
background:var(--panel);
border:1px solid var(--line);
border-radius:var(--radius);
}
.player-shell video {
display:block;
width:100%;
background:#000;
border:1px solid rgba(120,220,225,.14);
}
.player-controls {
display:flex;
flex-wrap:wrap;
gap:6px;
}
.player-controls button {
font-size:11px;
letter-spacing:.14em;
color:var(--ink-dim);
padding:5px 11px;
border:1px solid var(--line);
background:rgba(255,255,255,.015);
border-radius:var(--radius);
white-space:nowrap;
transition:color .16s,border-color .16s,background .16s,box-shadow .16s;
}
.player-controls button:hover, .player-controls button:focus-visible {
color:var(--cyan);
border-color:var(--line-2);
background:rgba(57,240,208,.07);
box-shadow:0 0 12px -4px var(--cyan-glow);
outline:none;
}
.player-shell.theater-mode {
background:rgba(3,5,9,.94);
border-color:rgba(120,220,225,.3);
box-shadow:0 0 60px -20px rgba(57,240,208,.35);
}
.player-shell.theater-mode video {
border-color:rgba(120,220,225,.4);
}
.player-shell.lights-off {
background:#010205;
}
.player-shell.lights-off video {
filter:brightness(1.06) contrast(1.06);
box-shadow:0 0 80px -24px rgba(57,240,208,.42);
}
.player-shell.theater-mode.lights-off {
border-color:var(--cyan-dim);
}
.section-head {
display:flex;
align-items:baseline;
justify-content:space-between;
gap:14px;
flex-wrap:wrap;
padding-bottom:8px;
margin-bottom:12px;
border-bottom:1px solid var(--line);
position:relative;
}
.section-head::after {
content:"";
position:absolute;
left:0;bottom:-1px;
width:64px;height:1px;
background:var(--cyan);
box-shadow:0 0 10px var(--cyan-glow);
}
.section-title {
font-size:15px;
letter-spacing:.32em;
color:#eefcfb;
text-transform:uppercase;
}
.section-note {
font-size:10px;
letter-spacing:.2em;
color:var(--ink-faint);
}
.timeline-section {
padding:14px;
background:var(--panel-2);
border:1px solid var(--line);
border-radius:var(--radius);
}
.timeline-track {
overflow-x:auto;
overflow-y:hidden;
padding-bottom:10px;
scrollbar-width:thin;
scrollbar-color:var(--cyan-dim) rgba(255,255,255,.04);
}
.timeline-track::-webkit-scrollbar {height:5px}
.timeline-track::-webkit-scrollbar-track {background:rgba(255,255,255,.04)}
.timeline-track::-webkit-scrollbar-thumb {background:var(--cyan-dim)}
.timeline-list {
display:flex;
align-items:flex-start;
gap:0;
min-width:max-content;
padding:14px 6px 4px;
position:relative;
}
.timeline-list::before {
content:"";
position:absolute;
left:0;right:0;
top:26px;
height:1px;
background:linear-gradient(90deg,transparent,rgba(57,240,208,.5) 6%,rgba(57,240,208,.5) 94%,transparent);
}
.timeline-node {
position:relative;
flex:0 0 auto;
width:172px;
padding:0 12px 0 0;
display:flex;
flex-direction:column;
gap:6px;
align-items:flex-start;
}
.timeline-node::before {
content:"";
position:absolute;
left:0;
top:20px;
width:9px;height:9px;
border-radius:50%;
background:var(--cyan);
box-shadow:0 0 0 3px rgba(57,240,208,.14),0 0 16px 3px var(--cyan-glow);
}
.timeline-node::after {
content:"";
position:absolute;
left:3px;
top:14px;
width:3px;height:3px;
background:#fff;
border-radius:50%;
opacity:.9;
}
.node-timecode {
font-size:11px;
letter-spacing:.2em;
color:var(--cyan);
font-variant-numeric:tabular-nums;
padding-left:18px;
}
.node-label {
font-size:11px;
line-height:1.4;
color:var(--ink);
opacity:.82;
padding-left:18px;
}
.node-shard {
max-height:0;
opacity:0;
overflow:hidden;
transform:translateY(-4px);
transition:max-height .32s ease,opacity .28s ease,transform .28s ease;
padding-left:18px;
}
.timeline-node:hover .node-shard, .timeline-node:focus-within .node-shard {
max-height:96px;
opacity:1;
transform:translateY(0);
}
.shard-thumb {
display:block;
width:100%;
height:70px;
background:
linear-gradient(135deg,rgba(57,240,208,.35),rgba(10,20,30,.9) 60%),
repeating-linear-gradient(90deg,rgba(57,240,208,.22) 0 1px,transparent 1px 7px);
border:1px solid rgba(120,220,225,.3);
filter:contrast(1.2) saturate(.8);
}
.episodes-section {
padding:14px;
background:var(--panel-2);
border:1px solid var(--line);
border-radius:var(--radius);
}
.episodes-body {
display:grid;
grid-template-columns:minmax(0,150px) minmax(0,1fr);
gap:18px;
align-items:start;
}
.episode-progress-shell {
position:sticky;
top:64px;
display:flex;
flex-direction:column;
align-items:center;
gap:8px;
padding:14px 8px;
border:1px solid var(--line);
background:rgba(6,12,18,.6);
}
.progress-ring {
position:relative;
width:104px;height:104px;
border-radius:50%;
display:grid;
place-items:center;
background:
conic-gradient(var(--cyan) 0 33.33%,rgba(120,220,225,.1) 33.33% 100%);
box-shadow:0 0 26px -10px var(--cyan-glow),inset 0 0 0 1px rgba(120,220,225,.2);
}
.progress-ring::before {
content:"";
position:absolute;
inset:8px;
border-radius:50%;
background:radial-gradient(circle at 50% 40%,#0b141d,#04070b 75%);
border:1px solid rgba(120,220,225,.16);
}
.ring-label {
position:relative;
font-size:27px;
font-weight:700;
letter-spacing:.04em;
color:var(--cyan);
text-shadow:0 0 16px var(--cyan-glow);
line-height:1;
transform:translateY(-4px);
}
.ring-total {
position:relative;
font-size:11px;
letter-spacing:.2em;
color:var(--ink-faint);
transform:translateY(-12px);
}
.progress-caption {
font-size:10px;
letter-spacing:.24em;
color:var(--ink-dim);
}
.episode-list {
display:grid;
grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
gap:8px;
align-items:start;
}
.episode-item {
display:flex;
flex-direction:column;
gap:4px;
padding:9px 11px;
border:1px solid var(--line);
border-left:2px solid rgba(120,220,225,.2);
background:rgba(255,255,255,.012);
transition:border-color .18s,background .18s,transform .18s;
}
.episode-item:hover {
border-color:var(--line-2);
border-left-color:var(--cyan);
background:rgba(57,240,208,.05);
transform:translateX(2px);
}
.episode-number {
font-size:10px;
letter-spacing:.22em;
color:var(--ink-faint);
}
.episode-title {
font-size:13px;
letter-spacing:.1em;
color:#e6fbf8;
}
.episode-summary {
font-size:11.5px;
line-height:1.45;
color:var(--ink-dim);
}
.episode-duration {
font-size:10px;
letter-spacing:.18em;
color:var(--ink-faint);
font-variant-numeric:tabular-nums;
}
.episode-item--active {
border-color:var(--line-2);
border-left:2px solid var(--cyan);
background:linear-gradient(90deg,rgba(57,240,208,.12),rgba(57,240,208,.02));
box-shadow:0 0 22px -10px var(--cyan-glow);
}
.episode-item--active .episode-number, .episode-item--active .episode-title, .episode-item--active .episode-duration {
color:var(--cyan);
}
.episode-item--active .episode-summary {color:var(--ink)}
.comments-section {
padding:14px;
background:var(--panel-2);
border:1px solid var(--line);
border-radius:var(--radius);
}
.comments-grid {
columns:2;
column-gap:12px;
}
.comment-card {
break-inside:avoid;
display:block;
margin:0 0 12px;
padding:10px 12px;
border:1px solid var(--line);
background:rgba(255,255,255,.014);
position:relative;
}
.comment-card:nth-child(odd) {
border-left:2px solid rgba(57,240,208,.4);
}
.comment-card:nth-child(even) {
border-right:2px solid rgba(255,90,106,.35);
}
.comment-card:nth-child(3n) {
transform:translateX(6px);
}
.comment-card:nth-child(4n) {
transform:translateX(-5px);
}
.comment-nickname {
font-size:10px;
letter-spacing:.2em;
color:var(--cyan);
margin-bottom:5px;
}
.comment-text {
font-size:12px;
line-height:1.5;
color:var(--ink);
opacity:.88;
}
.recommend-section {
padding:14px;
background:var(--panel-2);
border:1px solid var(--line);
border-radius:var(--radius);
}
.recommend-title {
font-size:12px;
letter-spacing:.28em;
color:#e6fbf8;
text-align:left;
padding-bottom:8px;
margin-bottom:11px;
border-bottom:1px solid var(--line);
position:relative;
padding-left:14px;
}
.recommend-title::before {
content:"";
position:absolute;
left:0;top:2px;
width:7px;height:7px;
transform:rotate(45deg);
background:var(--cyan);
box-shadow:0 0 9px var(--cyan-glow);
}
.recommend-grid {
display:grid;
grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
gap:9px;
align-items:start;
}
a.recommend-card {
display:flex;
flex-direction:column;
gap:5px;
padding:7px;
border:1px solid var(--line);
background:rgba(255,255,255,.012);
color:var(--ink);
text-decoration:none;
transition:border-color .18s,background .18s,transform .18s,box-shadow .18s;
}
a.recommend-card:hover, a.recommend-card:focus-visible {
border-color:var(--line-2);
background:rgba(57,240,208,.06);
transform:translateY(-2px);
box-shadow:0 10px 26px -16px rgba(57,240,208,.55);
text-decoration:none;
outline:none;
}
[data-runtime="recommendation"] img {
display:block;
width:100%;
height:auto;
aspect-ratio:16 / 10;
object-fit:cover;
filter:saturate(.55) contrast(1.16) brightness(.86) hue-rotate(-8deg);
border:1px solid rgba(120,220,225,.16);
transition:filter .2s;
}
a.recommend-card:hover img {
filter:saturate(.95) contrast(1.1) brightness(1);
}
.rec-name {
font-size:12px;
letter-spacing:.08em;
color:#e6fbf8;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.rec-blurb {
font-size:10.5px;
line-height:1.4;
color:var(--ink-faint);
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}
.site-footer {
margin-top:8px;
border-top:1px solid var(--line);
background:linear-gradient(180deg,rgba(6,10,16,.6),rgba(3,5,9,.95));
}
.footer-inner {
max-width:1440px;
margin:0 auto;
padding:18px;
display:flex;
flex-direction:column;
gap:12px;
}
.footer-nav {
display:flex;
flex-wrap:wrap;
gap:8px 18px;
align-items:center;
}
a[data-contract="footer-home"], a[data-contract="footer-sitemap"] {
font-size:11px;
letter-spacing:.22em;
color:var(--ink-dim);
text-decoration:none;
border-bottom:1px solid transparent;
transition:color .18s,border-color .18s;
}
a[data-contract="footer-home"]:hover, a[data-contract="footer-sitemap"]:hover {
color:var(--cyan);
border-bottom-color:var(--cyan-dim);
text-decoration:none;
}
.friend-links {
display:flex;
flex-wrap:wrap;
align-items:center;
gap:6px 10px;
}
.friend-links-label {
font-size:10px;
letter-spacing:.24em;
color:var(--ink-faint);
text-transform:uppercase;
}
a.runtime-friend-link {
font-size:11px;
letter-spacing:.06em;
color:var(--ink-dim);
text-decoration:none;
padding:2px 8px;
border:1px solid rgba(120,220,225,.1);
border-radius:var(--radius);
white-space:nowrap;
transition:color .18s,border-color .18s,background .18s;
}
a.runtime-friend-link:hover {
color:var(--cyan);
border-color:var(--line-2);
background:rgba(57,240,208,.06);
text-decoration:none;
}
.footer-inner p[data-contract="disclaimer"] {
font-size:10.5px;
line-height:1.5;
color:var(--ink-faint);
max-width:92ch;
}
@media (max-width:900px){.overview-section {
grid-template-columns:minmax(0,180px) minmax(0,1fr);
gap:16px;
padding:16px;
}
.overview-title {font-size:25px}
.episodes-body {
grid-template-columns:minmax(0,120px) minmax(0,1fr);
gap:14px;
}
.progress-ring {width:88px;height:88px}
.ring-label {font-size:22px}}
@media (max-width:720px){.page-main {padding:12px 12px 24px;gap:16px}
.header-inner {padding:8px 12px}
.overview-section {
grid-template-columns:minmax(0,1fr);
gap:14px;
}
.overview-media {justify-content:flex-start}
.overview-poster {max-width:190px}
.overview-title {font-size:22px;letter-spacing:.14em}
.synopsis-block {grid-template-columns:minmax(0,1fr)}
.comments-grid {columns:1}
.episodes-body {
grid-template-columns:minmax(0,1fr);
gap:14px;
}
.episode-progress-shell {
position:static;
flex-direction:row;
justify-content:flex-start;
gap:14px;
padding:10px 12px;
}
.progress-ring {width:76px;height:76px;flex:0 0 auto}
.ring-label {font-size:19px;transform:translateY(-3px)}
.ring-total {transform:translateY(-9px)}
.timeline-node {width:156px}
.recommend-grid {grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}}
@media (max-width:520px){body {font-size:12.5px}
.overview-section {padding:12px}
.overview-title {font-size:19px}
.overview-poster {max-width:150px}
.cast-list {grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
.details-list {grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
.episode-list {grid-template-columns:minmax(0,1fr)}
.recommend-grid {grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
.player-controls button {font-size:10px;padding:4px 8px}
.section-title {font-size:13px;letter-spacing:.24em}
.timeline-node {width:146px}}
@media (min-width:1180px){.episode-list {grid-template-columns:repeat(3,minmax(0,1fr))}
.cast-list {grid-template-columns:repeat(3,minmax(0,1fr))}
.comments-grid {columns:2}
.recommend-grid {grid-template-columns:repeat(auto-fill,minmax(128px,1fr))}}
@media (min-width:1440px){.episode-list {grid-template-columns:repeat(4,minmax(0,1fr))}
.cast-list {grid-template-columns:repeat(6,minmax(0,1fr))}
.recommend-grid {grid-template-columns:repeat(5,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){*, *::before, *::after {animation-duration:.001ms!important;transition-duration:.001ms!important}}

footer{text-align:center!important}
footer *{justify-content:center!important}
footer :is(div,nav,ul,ol,p,section,address){margin-left:auto!important;margin-right:auto!important}