* {margin:0;padding:0;box-sizing:border-box}
:root {
--rust:#6e2a24;
--rust-deep:#4d1c18;
--rust-mid:#8c3a2e;
--night:#0d141d;
--night-2:#111c29;
--night-3:#16222f;
--blue:#1d3b52;
--blue-light:#3c6d8c;
--ink:#0a0f16;
--text:#c8d2dc;
--text-dim:#7d8b99;
--text-faint:#54626f;
--warm:#e8b26a;
--line:rgba(120,150,175,.18);
--gap:14px;
font-size:16px;
}
html {-webkit-text-size-adjust:100%;text-size-adjust:100%}
body {
background:var(--ink);
color:var(--text);
font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
font-stretch:condensed;
font-size:.82rem;
line-height:1.5;
letter-spacing:.01em;
overflow-x:hidden;
-webkit-font-smoothing:antialiased;
}
img {display:block;max-width:100%;height:auto}
a {color:inherit;text-decoration:none}
ul, ol {list-style:none}
button, input, select {font:inherit;color:inherit}
button {background:none;border:none;cursor:pointer}
h1, h2, h3 {font-weight:800;letter-spacing:-.02em;line-height:1.2}
.site-header {
position:sticky;top:0;z-index:60;
display:flex;align-items:center;gap:18px;
padding:9px 16px;
background:rgba(10,15,22,.92);
border-bottom:1px solid var(--line);
backdrop-filter:blur(6px);
}
a[data-contract="site-name"] {
color:var(--warm);
text-decoration:none;
font-size:1rem;font-weight:800;letter-spacing:.14em;
white-space:nowrap;
}
a[data-contract="site-name"]:hover {color:#f2c98a}
.category-bar {
display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;
flex:1 1 auto;min-width:0;
}
a.runtime-category {
color:var(--text-dim);
text-decoration:none;
font-size:.78rem;
letter-spacing:.06em;
white-space:nowrap;
padding:2px 0;
border-bottom:1px solid transparent;
transition:color .18s,border-color .18s;
}
a.runtime-category:hover, a.runtime-category:focus {
color:var(--warm);border-bottom-color:var(--rust-mid);
}
.page-main {
display:flex;flex-direction:column;
gap:26px;
padding-bottom:34px;
}
.movie-overview {
display:flex;flex-direction:column;
gap:0;
background:var(--night);
border-bottom:1px solid var(--line);
}
.hero-bleed {
position:relative;
display:flex;flex-direction:column;
}
.hero-media {
position:relative;
width:100%;
min-height:52vh;
aspect-ratio:16 / 7;
overflow:hidden;
background:
radial-gradient(120% 90% at 78% 8%,rgba(60,109,140,.30),transparent 62%),
linear-gradient(178deg,#0b131c 0%,#0f1b28 46%,#1a1210 82%,#3a1713 100%);
border-bottom:1px solid rgba(140,58,46,.35);
}
.hero-media .poster-img {
position:absolute;
right:0;top:0;
height:100%;
width:auto;
aspect-ratio:9 / 16;
object-fit:cover;
opacity:.30;
filter:saturate(.7) contrast(1.1);
mix-blend-mode:screen;
}
.hero-silhouettes {
position:absolute;
left:8%;bottom:0;
width:min(74%,900px);height:46%;
background:
radial-gradient(closest-side at 12% 100%,#05080c 96%,transparent 100%) 0 100%/9% 88% no-repeat,
radial-gradient(closest-side at 28% 100%,#05080c 96%,transparent 100%) 0 100%/10% 100% no-repeat,
radial-gradient(closest-side at 45% 100%,#05080c 96%,transparent 100%) 0 100%/9% 92% no-repeat,
radial-gradient(closest-side at 62% 100%,#05080c 96%,transparent 100%) 0 100%/10% 96% no-repeat,
radial-gradient(closest-side at 79% 100%,#05080c 96%,transparent 100%) 0 100%/9% 84% no-repeat,
linear-gradient(to top,rgba(5,8,12,.96),rgba(5,8,12,0) 26%);
pointer-events:none;
filter:blur(.4px);
}
.hero-slogan {
position:absolute;
left:0;bottom:16px;
max-width:min(56%,560px);
padding:7px 16px 7px 16px;
background:linear-gradient(90deg,rgba(77,28,24,.92),rgba(77,28,24,.30) 78%,transparent);
border-left:3px solid var(--rust-mid);
color:#f0dcc8;
font-size:.82rem;
letter-spacing:.16em;
line-height:1.4;
text-align:left;
}
.player-shell {
position:relative;
width:100%;
margin:0 auto;
background:#000;
border-bottom:1px solid rgba(140,58,46,.30);
transition:box-shadow .25s,background .25s;
}
.player-shell .main-player {
display:block;
width:100%;
aspect-ratio:16 / 9;
background:#000;
object-fit:contain;
}
.player-shell.is-theater {
box-shadow:0 0 0 1px var(--rust-mid),0 18px 44px rgba(0,0,0,.7);
background:#05070a;
}
.player-shell.is-lights-off {
background:#000;
box-shadow:0 0 0 1px rgba(60,109,140,.45) inset;
}
.player-controls {
display:flex;flex-wrap:wrap;align-items:center;
gap:6px 8px;
padding:8px 10px;
background:linear-gradient(180deg,#0c141d,#080d14);
border-top:1px solid var(--line);
}
.ctrl {
appearance:none;
background:rgba(29,59,82,.42);
border:1px solid var(--line);
color:var(--text);
font-size:.72rem;
letter-spacing:.05em;
padding:4px 9px;
border-radius:2px;
cursor:pointer;
transition:background .16s,color .16s,border-color .16s;
}
.ctrl:hover, .ctrl:focus-visible {
background:rgba(110,42,36,.62);
border-color:var(--rust-mid);
color:#f2d9c2;
outline:none;
}
.ctrl-progress {
flex:1 1 160px;
min-width:90px;
height:14px;
padding:0;
background:transparent;
border:none;
}
.ctrl-progress::-webkit-slider-runnable-track {
height:3px;background:rgba(125,139,153,.35);border-radius:2px;
}
.ctrl-progress::-webkit-slider-thumb {
-webkit-appearance:none;appearance:none;
width:11px;height:11px;margin-top:-4px;border-radius:50%;
background:var(--warm);
border:none;cursor:pointer;
}
.ctrl-progress::-moz-range-track {height:3px;background:rgba(125,139,153,.35);border-radius:2px}
.ctrl-progress::-moz-range-thumb {
width:11px;height:11px;border:none;border-radius:50%;background:var(--warm);cursor:pointer;
}
.ctrl-volume {
flex:0 1 96px;
min-width:60px;
height:14px;
padding:0;
background:transparent;
border:none;
}
.ctrl-volume::-webkit-slider-runnable-track {height:3px;background:rgba(60,109,140,.55);border-radius:2px}
.ctrl-volume::-webkit-slider-thumb {
-webkit-appearance:none;appearance:none;
width:10px;height:10px;margin-top:-3.5px;border-radius:50%;
background:#9fc4dc;border:none;cursor:pointer;
}
.ctrl-volume::-moz-range-track {height:3px;background:rgba(60,109,140,.55);border-radius:2px}
.ctrl-volume::-moz-range-thumb {width:10px;height:10px;border:none;border-radius:50%;background:#9fc4dc;cursor:pointer}
.ctrl-speed {
padding:4px 6px;
background:rgba(29,59,82,.42);
}
.ctrl-speed option {background:#0d141d;color:var(--text)}
.overview-info {
display:flex;flex-direction:column;
gap:6px;
padding:16px 18px 14px;
border-bottom:1px solid var(--line);
}
.movie-title {
font-size:1.5rem;
letter-spacing:.02em;
color:#eef3f7;
}
.movie-title::first-letter {color:var(--rust-mid)}
.movie-tagline {
color:var(--rust-mid);
font-size:.78rem;
letter-spacing:.18em;
}
.movie-seo {
max-width:64ch;
color:var(--text-dim);
font-size:.78rem;
line-height:1.72;
}
.section-title {
display:flex;align-items:center;
gap:9px;
font-size:.92rem;
letter-spacing:.06em;
color:#e6edf3;
margin-bottom:11px;
}
.section-title::before {
content:"";
flex:0 0 auto;
width:3px;height:15px;
background:linear-gradient(180deg,var(--rust-mid),var(--blue-light));
}
.section-title::after {
content:"";
flex:1 1 auto;
height:1px;
background:linear-gradient(90deg,var(--line),transparent);
}
.cast-section {padding:16px 18px 18px;border-bottom:1px solid var(--line)}
.cast-list {
display:grid;
grid-template-columns:repeat(auto-fill,minmax(168px,1fr));
gap:8px;
align-items:start;
}
.cast-card {
display:flex;align-items:center;gap:9px;
padding:7px 9px;
background:var(--night-2);
border:1px solid var(--line);
border-left:2px solid var(--rust-deep);
}
.cast-avatar {
width:38px;height:38px;
flex:0 0 auto;
object-fit:cover;
filter:grayscale(.35) contrast(1.08);
border:1px solid rgba(140,58,46,.4);
}
.cast-info {
display:flex;flex-direction:column;gap:1px;
min-width:0;
}
.cast-name {
font-size:.82rem;
font-weight:700;
letter-spacing:.04em;
color:#e8eef3;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cast-role {
font-size:.68rem;
color:var(--text-faint);
letter-spacing:.06em;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.synopsis-section {padding:16px 18px 18px;border-bottom:1px solid var(--line)}
.synopsis-body {
columns:2;
column-gap:26px;
column-rule:1px solid var(--line);
color:var(--text);
font-size:.79rem;
line-height:1.82;
}
.synopsis-body p {margin-bottom:9px;text-indent:1.6em}
.synopsis-body p:first-child::first-letter {
font-size:1.8em;
line-height:1;
float:left;
margin:2px 6px 0 0;
color:var(--rust-mid);
font-weight:800;
}
.episode-status {
display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;
padding:11px 18px;
background:linear-gradient(90deg,var(--rust-deep),rgba(77,28,24,.18) 62%,transparent);
border-bottom:1px solid var(--line);
}
.status-line {
font-size:.78rem;
letter-spacing:.06em;
color:var(--text-dim);
}
.status-current, .status-total {
font-size:1rem;
font-weight:800;
color:var(--warm);
letter-spacing:0;
}
.status-total {color:var(--text)}
.status-chip {
font-size:.68rem;
letter-spacing:.14em;
padding:2px 9px;
color:#f0dcc8;
border:1px solid var(--rust-mid);
background:rgba(110,42,36,.28);
}
.details-section {padding:16px 18px 18px}
.details-table {
display:grid;
grid-template-columns:repeat(auto-fill,minmax(216px,1fr));
gap:0 22px;
}
.detail-row {
display:flex;align-items:baseline;gap:10px;
padding:5px 0;
border-bottom:1px dashed rgba(120,150,175,.14);
font-size:.76rem;
}
.detail-row dt {
flex:0 0 5.6em;
color:var(--text-faint);
letter-spacing:.06em;
white-space:nowrap;
}
.detail-row dd {
flex:1 1 auto;
min-width:0;
color:var(--text);
letter-spacing:.02em;
}
.timeline-section {
padding:16px 18px 26px;
border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
background:linear-gradient(180deg,var(--night) 0%,#0b1017 100%);
}
.timeline-track {
position:relative;
display:flex;
align-items:stretch;
gap:0;
padding:44px 0 44px;
min-height:170px;
}
.timeline-track::before {
content:"";
position:absolute;
left:0;right:0;top:50%;
height:2px;
transform:translateY(-1px);
background:linear-gradient(90deg,var(--warm) 0%,var(--rust-mid) 34%,var(--blue) 72%,var(--blue-light) 100%);
opacity:.85;
}
.timeline-node {
position:relative;
flex:1 1 0;
min-width:0;
display:flex;flex-direction:column;
padding:0 10px;
}
.timeline-node::after {
content:"";
position:absolute;
left:0;top:50%;
width:9px;height:9px;
margin-left:-4px;
transform:translateY(-50%) rotate(45deg);
background:var(--night-3);
border:1px solid var(--warm);
}
.timeline-time {
font-size:.72rem;
font-weight:800;
letter-spacing:.08em;
color:var(--warm);
}
.timeline-label {
font-size:.7rem;
line-height:1.5;
color:var(--text-dim);
}
.timeline-node-up {justify-content:flex-end;padding-bottom:26px}
.timeline-node-up .timeline-time {margin-bottom:3px}
.timeline-node-up .timeline-label {
border-bottom:1px solid rgba(140,58,46,.45);
padding-bottom:6px;
}
.timeline-node-down {justify-content:flex-start;padding-top:26px}
.timeline-node-down .timeline-time {order:2;margin-top:3px}
.timeline-node-down .timeline-label {
order:1;
border-top:1px solid rgba(29,59,82,.75);
padding-top:6px;
color:var(--text);
}
.timeline-node-down::after {border-color:var(--blue-light);background:var(--blue)}
.episodes-section {padding:16px 18px 18px}
.episode-grid {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:0;
border-top:1px solid var(--line);
border-left:1px solid var(--line);
}
.episode-card {
display:flex;flex-direction:column;
gap:4px;
padding:10px 12px 11px;
border-right:1px solid var(--line);
border-bottom:1px solid var(--line);
background:var(--night-2);
transition:background .18s,box-shadow .18s;
}
.episode-card:hover {
background:var(--night-3);
box-shadow:inset 3px 0 0 var(--rust-mid);
}
.episode-head {
display:flex;align-items:baseline;gap:7px;
font-size:.8rem;
font-weight:800;
letter-spacing:.02em;
color:#e9eff4;
}
.episode-number {
flex:0 0 auto;
font-size:.78rem;
font-weight:800;
color:var(--warm);
min-width:1.4em;
}
.episode-title {
min-width:0;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.episode-summary {
font-size:.72rem;
line-height:1.6;
color:var(--text-dim);
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}
.episode-duration {
font-size:.66rem;
letter-spacing:.08em;
color:var(--text-faint);
}
.comments-section {padding:16px 18px 18px}
.comment-columns {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;
align-items:start;
}
.comment-col {
display:flex;flex-direction:column;
gap:10px;
}
.comment-col:last-child {margin-top:20px}
.comment-card {
display:flex;gap:9px;
padding:9px 11px;
background:var(--night-2);
border:1px solid var(--line);
border-top:2px solid var(--rust-deep);
}
.comment-col:last-child .comment-card {
border-top-color:var(--blue);
background:var(--night-3);
}
.comment-avatar {
width:22px;height:22px;
flex:0 0 auto;
object-fit:cover;
border-radius:50%;
filter:grayscale(.5);
}
.comment-body {
display:flex;flex-direction:column;gap:3px;
min-width:0;
}
.comment-nick {
font-size:.7rem;
font-weight:700;
letter-spacing:.06em;
color:var(--warm);
}
.comment-col:last-child .comment-nick {color:var(--blue-light)}
.comment-text {
font-size:.75rem;
line-height:1.66;
color:var(--text);
}
.recommend-region {
padding:14px 18px 16px;
border-top:1px solid var(--line);
}
.recommend-title {
display:flex;align-items:center;
gap:9px;
font-size:.86rem;
letter-spacing:.06em;
color:#e6edf3;
margin-bottom:10px;
}
.recommend-title::before {
content:"";
flex:0 0 auto;
width:3px;height:14px;
background:linear-gradient(180deg,var(--rust-mid),var(--blue-light));
}
.recommend-title::after {
content:"";
flex:1 1 auto;
height:1px;
background:linear-gradient(90deg,var(--line),transparent);
}
.recommend-list {
display:grid;
grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
gap:9px;
align-items:start;
}
a.recommend-item {
display:flex;flex-direction:column;
gap:5px;
padding:7px;
background:var(--night-2);
border:1px solid var(--line);
color:var(--text);
text-decoration:none;
transition:background .18s,border-color .18s,transform .18s;
}
a.recommend-item:hover, a.recommend-item:focus-visible {
background:var(--night-3);
border-color:var(--rust-mid);
transform:translateY(-2px);
outline:none;
}
[data-runtime="recommendation"] img {
width:100%;
aspect-ratio:16 / 10;
height:auto;
object-fit:cover;
display:block;
filter:saturate(.82) contrast(1.05);
background:var(--blue);
}
.recommend-name {
font-size:.76rem;
font-weight:700;
letter-spacing:.03em;
color:#e8eef3;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.recommend-blurb {
font-size:.68rem;
line-height:1.55;
color:var(--text-faint);
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}
.site-footer {
display:flex;flex-direction:column;
gap:11px;
padding:18px 18px 26px;
background:linear-gradient(180deg,#0b1017,#05080c);
border-top:1px solid var(--line);
}
.footer-disclaimer {
max-width:78ch;
font-size:.7rem;
line-height:1.7;
color:var(--text-faint);
}
.footer-nav {
display:flex;flex-wrap:wrap;gap:6px 18px;
}
a[data-contract="footer-home"] {
color:var(--warm);
text-decoration:none;
font-size:.74rem;
letter-spacing:.1em;
border-bottom:1px solid rgba(232,178,106,.35);
}
a[data-contract="footer-home"]:hover {color:#f5d29b;border-bottom-color:#f5d29b}
a[data-contract="footer-sitemap"] {
color:var(--blue-light);
text-decoration:none;
font-size:.74rem;
letter-spacing:.1em;
border-bottom:1px solid rgba(60,109,140,.4);
}
a[data-contract="footer-sitemap"]:hover {color:#7fb4d6;border-bottom-color:#7fb4d6}
.friend-links {
display:flex;flex-wrap:wrap;align-items:center;gap:5px 14px;
padding-top:10px;
border-top:1px dashed rgba(120,150,175,.14);
}
.friend-links-label {
font-size:.68rem;
letter-spacing:.16em;
color:var(--text-faint);
}
a.runtime-friend-link {
color:var(--text-dim);
text-decoration:none;
font-size:.7rem;
letter-spacing:.04em;
padding:1px 0;
transition:color .16s;
}
a.runtime-friend-link:hover {color:var(--rust-mid);text-decoration:underline}
@media (max-width:900px){.synopsis-body {columns:1;column-rule:none}
.episode-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
.timeline-track {flex-direction:column;gap:0;padding:8px 0 8px 20px;min-height:0}
.timeline-track::before {
left:4px;right:auto;top:0;bottom:0;width:2px;height:auto;
transform:none;
background:linear-gradient(180deg,var(--warm),var(--rust-mid) 40%,var(--blue) 78%,var(--blue-light));
}
.timeline-node {
flex:0 0 auto;
padding:9px 0;
}
.timeline-node::after {left:0;top:14px;margin-left:-20px;transform:translateY(-50%) rotate(45deg)}
.timeline-node-up, .timeline-node-down {
justify-content:flex-start;
padding-top:9px;padding-bottom:9px;
}
.timeline-node-up .timeline-label, .timeline-node-down .timeline-label {
border:none;padding:0;
}
.timeline-node-down .timeline-time {order:0;margin-top:3px}
.timeline-node-down .timeline-label {order:0;color:var(--text-dim)}}
@media (max-width:640px){html {font-size:15px}
.site-header {padding:8px 12px;gap:12px}
.hero-media {aspect-ratio:4 / 5;min-height:44vh}
.hero-media .poster-img {opacity:.22}
.hero-slogan {max-width:88%;font-size:.74rem;letter-spacing:.1em;bottom:12px}
.overview-info {padding:13px 14px 12px}
.movie-title {font-size:1.22rem}
.cast-section, .synopsis-section, .details-section, .episodes-section, .comments-section, .timeline-section, .recommend-region {padding-left:14px;padding-right:14px}
.cast-list {grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
.details-table {grid-template-columns:1fr}
.episode-grid {grid-template-columns:1fr}
.comment-columns {grid-template-columns:1fr;gap:12px}
.comment-col:last-child {margin-top:0}
.recommend-list {grid-template-columns:repeat(auto-fill,minmax(128px,1fr))}
.player-controls {padding:7px 8px}
.ctrl {font-size:.68rem;padding:4px 7px}
.ctrl-progress {flex:1 1 100%;order:-1}
.site-footer {padding:16px 14px 22px}}
@media (max-width:400px){.cast-list {grid-template-columns:1fr}
.recommend-list {grid-template-columns:1fr 1fr}}
@media (prefers-reduced-motion:reduce){* {transition:none!important;animation:none!important}}
.player .play, .player.play .ctrl-play {color:var(--warm)}
.player .mute, .player.mute .ctrl-mute {color:var(--rust-mid)}
.player .pip, .player.pip .ctrl-pip {color:var(--blue-light)}
.player .fullscreen, .player.fullscreen .ctrl-fullscreen {color:var(--warm)}
.player .theater, .player.theater .ctrl-theater, .player .is-theater .ctrl-theater {color:#f2c98a}
.player .light, .player.light .ctrl-light, .player .is-lights-off .ctrl-light {color:#f5d29b}
.player .volume, .player .speed, .player .progress, .player .timeupdate {color:var(--text)}
.player .INPUT, .player .SELECT, .player .input, .player .click {color:var(--text)}

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}