* {margin:0;padding:0;box-sizing:border-box}
:root {
--abyss:#050b12;
--deep:#091320;
--deep-2:#0d1c2c;
--panel:#0b1622;
--rust:#b0622e;
--rust-bright:#d07a3c;
--mist:#c7d3dc;
--mist-dim:#8b9cab;
--blood:#8f2a2a;
--line:rgba(140,170,195,.16);
--line-strong:rgba(160,190,215,.28);
--font-title:"Heiti SC","Microsoft YaHei","PingFang SC","Hiragino Sans GB",sans-serif;
--font-body:"Helvetica Neue","PingFang SC","Microsoft YaHei",sans-serif;
}
html {-webkit-text-size-adjust:100%}
body {
background:
radial-gradient(1200px 700px at 78% -8%,rgba(24,48,72,.55),transparent 62%),
radial-gradient(900px 600px at 4% 34%,rgba(18,38,60,.4),transparent 60%),
var(--abyss);
color:var(--mist);
font-family:var(--font-body);
font-size:13px;
line-height:1.55;
font-stretch:condensed;
letter-spacing:.02em;
min-height:100vh;
overflow-x:hidden;
}
img {display:block;max-width:100%}
a {color:inherit;text-decoration:none}
button {font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input {font:inherit}
ul, ol, dl {list-style:none}
h1, h2, h3 {font-family:var(--font-title);font-weight:800;letter-spacing:.04em;line-height:1.2}
.site-header {
position:sticky;top:0;z-index:60;
background:linear-gradient(180deg,rgba(5,11,18,.96),rgba(5,11,18,.82));
border-bottom:1px solid var(--line);
backdrop-filter:blur(6px);
}
.header-inner {
display:flex;align-items:center;gap:14px;
padding:7px 16px;
max-width:1280px;margin:0 auto;
flex-wrap:wrap;
}
a[data-contract="site-name"] {
font-family:var(--font-title);
font-size:16px;font-weight:800;
letter-spacing:.14em;
color:var(--mist);
text-decoration:none;
padding-left:10px;
border-left:3px solid var(--rust);
white-space:nowrap;
}
a[data-contract="site-name"]:hover {color:var(--rust-bright)}
.category-strip {
display:flex;flex-wrap:wrap;gap:5px;
align-items:center;
flex:1 1 auto;min-width:0;
}
a.runtime-category {
display:inline-block;
white-space:nowrap;
font-size:12px;
padding:3px 10px;
color:var(--mist-dim);
text-decoration:none;
border:1px solid var(--line);
background:rgba(13,28,44,.6);
clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
transition:color .18s,border-color .18s,background .18s;
}
a.runtime-category:hover {
color:var(--rust-bright);
border-color:var(--rust);
background:rgba(38,24,14,.55);
text-decoration:none;
}
.page-main {
max-width:1280px;
margin:0 auto;
padding:14px 16px 26px;
display:flex;flex-direction:column;
gap:16px;
}
.movie-overview {
position:relative;
display:grid;
grid-template-columns:minmax(0,190px) minmax(0,1fr) minmax(0,1.05fr);
grid-template-areas:
"poster head player"
"poster head status"
"cast cast cast"
"synopsis synopsis details";
gap:12px 16px;
padding:16px;
background:
linear-gradient(180deg,rgba(13,28,44,.86),rgba(7,15,24,.92)),
repeating-linear-gradient(0deg,rgba(140,170,195,.045) 0 1px,transparent 1px 26px),
repeating-linear-gradient(90deg,rgba(140,170,195,.05) 0 1px,transparent 1px 26px);
border:1px solid var(--line-strong);
clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px));
overflow:hidden;
}
.movie-overview::before {
content:"";
position:absolute;inset:0;
background:
radial-gradient(620px 420px at 88% 12%,rgba(176,98,46,.14),transparent 66%),
radial-gradient(520px 520px at 6% 90%,rgba(20,44,68,.5),transparent 70%);
pointer-events:none;
}
.movie-overview::after {
content:"";
position:absolute;left:0;right:0;top:0;height:2px;
background:linear-gradient(90deg,var(--rust),transparent 62%);
pointer-events:none;
}
.poster-figure {
grid-area:poster;
position:relative;
align-self:start;
background:#04090f;
border:1px solid var(--line-strong);
clip-path:polygon(0 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%);
}
.poster-img {
width:100%;
height:auto;
aspect-ratio:9 / 16;
object-fit:cover;
display:block;
filter:saturate(.72) contrast(1.06) brightness(.94);
}
.poster-figure::after {
content:"";
position:absolute;inset:0;
pointer-events:none;
background:
linear-gradient(180deg,transparent 62%,rgba(5,11,18,.9)),
radial-gradient(140% 90% at 50% 8%,transparent 42%,rgba(5,11,18,.5));
}
.poster-caption {
position:absolute;left:0;bottom:0;z-index:2;
font-family:var(--font-title);
font-size:10px;letter-spacing:.22em;
color:var(--rust-bright);
padding:5px 8px;
text-transform:uppercase;
border-top:1px solid rgba(176,98,46,.45);
background:rgba(5,11,18,.78);
width:100%;
}
.overview-head {
grid-area:head;
display:flex;flex-direction:column;
gap:8px;
min-width:0;
padding:6px 4px 4px;
border-left:1px solid var(--line);
padding-left:14px;
}
.movie-title {
font-size:clamp(22px,3.1vw,34px);
color:#eaf1f6;
line-height:1.05;
letter-spacing:.06em;
text-shadow:0 0 26px rgba(90,140,180,.35);
position:relative;
padding-bottom:8px;
}
.movie-title::after {
content:"";
position:absolute;left:0;bottom:0;
width:74px;height:3px;
background:linear-gradient(90deg,var(--rust),rgba(176,98,46,0));
}
.movie-tagline {
font-family:var(--font-title);
font-size:14px;
letter-spacing:.3em;
color:var(--rust-bright);
}
.movie-seo {
font-size:11px;
color:var(--mist-dim);
letter-spacing:.12em;
padding-bottom:8px;
border-bottom:1px solid var(--line);
}
.movie-description {
font-size:12.5px;
line-height:1.7;
color:#a9bccb;
}
.player-shell {
grid-area:player;
align-self:start;
display:flex;flex-direction:column;
gap:0;
min-width:0;
background:#04090f;
border:1px solid var(--line-strong);
clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));
overflow:hidden;
}
.player-video {
display:block;
width:100%;
aspect-ratio:16 / 9;
background:#000;
object-fit:cover;
}
.player-controls {
display:flex;flex-wrap:wrap;
align-items:center;
gap:5px;
padding:7px 9px;
background:linear-gradient(180deg,rgba(13,28,44,.95),rgba(6,12,20,.95));
border-top:1px solid var(--line);
}
.ctrl-btn {
font-size:11px;
font-family:var(--font-title);
letter-spacing:.08em;
color:var(--mist-dim);
padding:4px 9px;
border:1px solid var(--line);
background:rgba(11,22,34,.8);
white-space:nowrap;
clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px);
transition:color .16s,border-color .16s,background .16s;
}
.ctrl-btn:hover {color:var(--mist);border-color:var(--line-strong);background:rgba(20,38,56,.9)}
.ctrl-btn.is-active, .ctrl-play.is-active, .ctrl-btn.play, .ctrl-btn.pause {
color:#f2e2d2;
border-color:var(--rust);
background:rgba(56,32,16,.85);
}
.ctrl-progress {
flex:1 1 140px;
min-width:90px;
height:4px;
-webkit-appearance:none;appearance:none;
background:linear-gradient(90deg,var(--rust) 0%,var(--rust) 0%,rgba(140,170,195,.2) 0%);
border:0;border-radius:0;
cursor:pointer;
}
.ctrl-progress::-webkit-slider-thumb {
-webkit-appearance:none;appearance:none;
width:10px;height:14px;
background:var(--rust-bright);
border:0;
clip-path:polygon(0 0,100% 0,100% 70%,50% 100%,0 70%);
}
.ctrl-progress::-moz-range-thumb {
width:10px;height:14px;background:var(--rust-bright);border:0;border-radius:0;
}
.ctrl-volume {
flex:0 1 74px;
min-width:56px;
height:4px;
-webkit-appearance:none;appearance:none;
background:rgba(140,170,195,.2);
border:0;border-radius:0;
cursor:pointer;
}
.ctrl-volume::-webkit-slider-thumb {
-webkit-appearance:none;appearance:none;
width:8px;height:12px;background:var(--mist-dim);
clip-path:polygon(0 0,100% 0,100% 70%,50% 100%,0 70%);
}
.ctrl-volume::-moz-range-thumb {width:8px;height:12px;background:var(--mist-dim);border:0;border-radius:0}
.episode-status {
grid-area:status;
align-self:start;
display:flex;flex-wrap:wrap;
gap:6px;
padding-top:2px;
}
.status-chip {
font-family:var(--font-title);
font-size:11px;
letter-spacing:.12em;
padding:4px 11px;
color:var(--mist-dim);
border:1px solid var(--line);
background:rgba(11,22,34,.72);
white-space:nowrap;
clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
}
.status-current {
color:#f4e4d4;
border-color:var(--rust);
background:linear-gradient(180deg,rgba(90,48,20,.9),rgba(52,28,12,.9));
}
.status-score {
color:#e6c9ad;
border-color:rgba(176,98,46,.5);
}
.status-total {color:var(--mist)}
.cast-strip {
grid-area:cast;
border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
padding:9px 2px;
display:flex;
flex-direction:column;
gap:7px;
min-width:0;
}
.cast-heading, .synopsis-heading, .details-heading, .timeline-heading, .episodes-heading, .comments-heading, .recommend-heading {
font-family:var(--font-title);
font-size:12px;
letter-spacing:.26em;
color:var(--mist);
display:flex;align-items:center;gap:9px;
}
.cast-heading::before, .synopsis-heading::before, .details-heading::before, .timeline-heading::before, .episodes-heading::before, .comments-heading::before, .recommend-heading::before {
content:"";
width:5px;height:12px;
background:var(--rust);
display:inline-block;
clip-path:polygon(0 0,100% 0,100% 70%,50% 100%,0 70%);
flex:0 0 auto;
}
.cast-list {
display:flex;flex-wrap:wrap;
gap:8px;
align-items:flex-start;
}
.cast-member {
display:flex;flex-direction:column;
gap:3px;
width:66px;
background:rgba(9,19,32,.72);
border:1px solid var(--line);
padding:4px 4px 5px;
clip-path:polygon(0 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%);
}
.cast-avatar {
display:block;
width:100%;
aspect-ratio:3 / 4;
background:
linear-gradient(160deg,rgba(176,98,46,.32),transparent 58%),
repeating-linear-gradient(135deg,rgba(140,170,195,.1) 0 2px,transparent 2px 7px),
linear-gradient(180deg,#16304a,#081420);
border:1px solid var(--line-strong);
}
.cast-name {
font-size:10.5px;
letter-spacing:.04em;
color:#bccbd8;
align-self:flex-start;
padding-left:2px;
line-height:1.2;
}
.synopsis-panel {
grid-area:synopsis;
min-width:0;
padding:10px 12px;
background:rgba(7,15,24,.62);
border:1px solid var(--line);
border-left:2px solid rgba(176,98,46,.55);
display:flex;flex-direction:column;gap:8px;
}
.synopsis-body {display:flex;flex-direction:column;gap:7px}
.synopsis-para {
font-size:12.5px;
line-height:1.72;
color:#a3b6c6;
}
.synopsis-para:first-child {color:#c2d2de}
.details-panel {
grid-area:details;
min-width:0;
padding:10px 12px;
background:rgba(7,15,24,.62);
border:1px solid var(--line);
border-left:2px solid rgba(140,170,195,.3);
display:flex;flex-direction:column;gap:8px;
}
.details-list {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:0 14px;
}
.detail-row {
display:flex;
align-items:baseline;
gap:8px;
padding:3px 0;
border-bottom:1px dashed rgba(140,170,195,.13);
min-width:0;
}
.detail-key {
font-family:var(--font-title);
font-size:10.5px;
letter-spacing:.14em;
color:var(--mist-dim);
flex:0 0 58px;
white-space:nowrap;
}
.detail-value {
font-size:12px;
color:#c6d4df;
min-width:0;
word-break:break-word;
}
.timeline-section {
display:flex;flex-direction:column;gap:8px;
padding-top:4px;
}
.timeline-track {
display:grid;
grid-template-columns:repeat(6,minmax(0,1fr));
gap:0;
position:relative;
padding-top:26px;
}
.timeline-track::before {
content:"";
position:absolute;
top:14px;left:3%;right:3%;
height:2px;
background:repeating-linear-gradient(90deg,var(--line-strong) 0 6px,transparent 6px 12px);
}
.timeline-node {
position:relative;
display:flex;flex-direction:column;
gap:5px;
padding:0 8px 0 0;
min-width:0;
border-left:1px solid rgba(140,170,195,.1);
padding-left:8px;
}
.timeline-node:first-child {border-left:0}
.timeline-marker {
position:absolute;
top:-18px;left:8px;
width:11px;height:11px;
background:var(--deep-2);
border:2px solid var(--mist-dim);
border-radius:50%;
box-shadow:0 0 0 3px rgba(5,11,18,.9);
}
.timeline-node-active .timeline-marker {
background:var(--rust-bright);
border-color:#f0c9a4;
box-shadow:0 0 0 3px rgba(5,11,18,.9),0 0 14px rgba(208,122,60,.85);
}
.timeline-timecode {
font-family:var(--font-title);
font-size:11.5px;
letter-spacing:.16em;
color:var(--mist-dim);
}
.timeline-node-active .timeline-timecode {color:var(--rust-bright)}
.timeline-label {
font-size:11.5px;
line-height:1.5;
color:#93a7b7;
}
.timeline-node-active {
background:linear-gradient(180deg,rgba(70,38,16,.5),transparent 78%);
}
.timeline-node-active .timeline-label {color:#e3d2c2}
.episodes-section {display:flex;flex-direction:column;gap:8px}
.episode-grid {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:8px;
}
.episode-card {
display:grid;
grid-template-columns:58px minmax(0,1fr);
grid-template-areas:
"num title"
"num summary"
"num duration";
column-gap:10px;
align-items:start;
padding:8px 10px;
background:
linear-gradient(180deg,rgba(13,28,44,.72),rgba(7,15,24,.78)),
linear-gradient(90deg,rgba(176,98,46,.14),transparent 40%);
border:1px solid var(--line);
border-left:2px solid rgba(176,98,46,.35);
clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%);
min-width:0;
transition:border-color .18s,background .18s;
}
.episode-card:hover {
border-color:rgba(176,98,46,.6);
background:linear-gradient(180deg,rgba(20,38,56,.8),rgba(9,18,29,.82));
}
.episode-number {
grid-area:num;
font-family:var(--font-title);
font-size:12px;
letter-spacing:.1em;
color:var(--rust-bright);
border-right:1px dashed rgba(176,98,46,.4);
padding-right:8px;
align-self:stretch;
}
.episode-title {
grid-area:title;
font-size:13px;
letter-spacing:.05em;
color:#dbe6ee;
}
.episode-summary {
grid-area:summary;
font-size:11.5px;
line-height:1.6;
color:#8fa3b3;
margin-top:2px;
}
.episode-duration {
grid-area:duration;
font-size:10.5px;
letter-spacing:.14em;
color:var(--mist-dim);
margin-top:4px;
font-family:var(--font-title);
}
.episode-card-active {
border-color:rgba(208,122,60,.75);
border-left:3px solid var(--rust-bright);
background:
linear-gradient(180deg,rgba(64,34,14,.62),rgba(9,18,29,.85)),
linear-gradient(90deg,rgba(208,122,60,.2),transparent 55%);
}
.episode-card-active .episode-number {color:#f2cba4}
.episode-card-active .episode-title {color:#f4e6d6}
.comments-section {display:flex;flex-direction:column;gap:8px}
.comments-board {
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:9px;
align-items:start;
padding:4px 0 10px;
}
.comment-note {
position:relative;
display:flex;flex-direction:column;gap:6px;
padding:9px 10px 8px;
font-size:11.5px;
background:
linear-gradient(180deg,rgba(214,224,232,.055),rgba(9,18,29,.72));
border:1px solid var(--line);
box-shadow:0 6px 14px rgba(0,0,0,.35);
clip-path:polygon(0 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%);
min-width:0;
}
.comment-note:nth-child(1) {transform:rotate(-1.1deg)}
.comment-note:nth-child(2) {transform:rotate(.9deg) translateY(7px)}
.comment-note:nth-child(3) {transform:rotate(-.6deg) translateY(-4px)}
.comment-note:nth-child(4) {transform:rotate(1.3deg) translateY(4px)}
.comment-note::before {
content:"";
position:absolute;top:-1px;left:14px;
width:26px;height:2px;
background:var(--rust);
}
.comment-text {
font-size:11.5px;
line-height:1.66;
color:#9db0bf;
}
.comment-nickname {
font-family:var(--font-title);
font-size:10.5px;
letter-spacing:.16em;
color:var(--rust-bright);
align-self:flex-start;
padding-top:5px;
border-top:1px dashed rgba(176,98,46,.35);
width:100%;
}
.recommend-region {display:flex;flex-direction:column;gap:8px}
.recommend-grid {
display:grid;
grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
gap:9px;
align-items:start;
}
a.recommend-card {
display:flex;flex-direction:column;
gap:6px;
padding:7px;
background:rgba(9,19,32,.72);
border:1px solid var(--line);
clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
color:var(--mist);
text-decoration:none;
min-width:0;
transition:border-color .18s,background .18s,transform .18s;
}
a.recommend-card:hover {
border-color:rgba(176,98,46,.7);
background:rgba(20,38,56,.85);
text-decoration:none;
}
.recommend-thumb, [data-runtime="recommendation"] img {
width:100%;
max-width:100%;
aspect-ratio:16 / 10;
height:auto;
object-fit:cover;
display:block;
background:#04090f;
filter:saturate(.7) contrast(1.05) brightness(.92);
border:1px solid rgba(140,170,195,.14);
}
.recommend-name {
font-family:var(--font-title);
font-size:12.5px;
letter-spacing:.05em;
color:#e6c9a8;
line-height:1.3;
}
a.recommend-card:hover .recommend-name {color:#f7d9b3}
.recommend-blurb {
font-size:11px;
line-height:1.55;
color:#8ea2b2;
}
.site-footer {
margin-top:10px;
border-top:1px solid var(--line);
background:linear-gradient(180deg,rgba(6,12,20,.9),rgba(3,7,12,.98));
}
.footer-inner {
max-width:1280px;margin:0 auto;
padding:14px 16px 22px;
display:flex;flex-direction:column;
gap:10px;
}
.footer-disclaimer {
font-size:11px;
line-height:1.7;
color:#6f8291;
max-width:900px;
}
.footer-links {
display:flex;flex-wrap:wrap;gap:14px;
}
a.footer-link {
font-family:var(--font-title);
font-size:11.5px;
letter-spacing:.16em;
color:var(--mist-dim);
text-decoration:none;
border-bottom:1px solid transparent;
padding-bottom:1px;
}
a.footer-link:hover {color:var(--rust-bright);border-bottom-color:var(--rust)}
.friend-links {
display:flex;flex-wrap:wrap;
gap:6px 14px;
align-items:center;
padding-top:8px;
border-top:1px dashed rgba(140,170,195,.14);
}
.friend-links-label {
font-family:var(--font-title);
font-size:10.5px;
letter-spacing:.22em;
color:#5f7281;
white-space:nowrap;
}
a.runtime-friend-link {
font-size:11px;
color:#7c8fa0;
text-decoration:none;
white-space:nowrap;
}
a.runtime-friend-link:hover {color:var(--rust-bright);text-decoration:underline}
body.theater-mode .page-main {max-width:100%;padding-left:8px;padding-right:8px}
body.theater-mode .movie-overview {grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "player" "status" "poster" "cast" "synopsis" "details"}
body.theater-mode .player-shell {border-color:var(--rust)}
body.lights-off {background:#020509}
body.lights-off .page-main, body.lights-off .site-header, body.lights-off .site-footer {filter:brightness(.42) saturate(.7)}
body.lights-off .player-shell {filter:none;box-shadow:0 0 0 1px var(--rust),0 0 42px rgba(208,122,60,.28)}
.player-shell.fullscreen {clip-path:none;border-color:var(--rust)}
.player-shell.fullscreen .player-video {height:100%;object-fit:contain}
.ctrl-btn.mute.is-active, .ctrl-btn.pip.is-active, .ctrl-btn.speed.is-active, .ctrl-btn.fullscreen.is-active, .ctrl-btn.theater.is-active, .ctrl-btn.light.is-active, .ctrl-btn.volume.is-active, .ctrl-btn.progress.is-active, .ctrl-btn.input.is-active, .ctrl-btn.click.is-active {
color:#f6e3cd;border-color:var(--rust-bright);background:rgba(70,38,16,.9)
}
@media (max-width:1080px){.movie-overview {
grid-template-columns:minmax(0,170px) minmax(0,1fr);
grid-template-areas:
"poster head"
"player player"
"status status"
"cast cast"
"synopsis synopsis"
"details details";
}
.details-list {grid-template-columns:repeat(2,minmax(0,1fr))}
.timeline-track {grid-template-columns:repeat(3,minmax(0,1fr));row-gap:18px}
.timeline-track::before {display:none}
.timeline-node {border-left:0;padding-left:0;padding-top:14px;border-top:1px solid rgba(140,170,195,.12)}
.timeline-node:first-child {border-top:0}
.timeline-marker {top:8px;left:0}
.comments-board {grid-template-columns:repeat(2,minmax(0,1fr))}
.comment-note:nth-child(n) {transform:none}}
@media (max-width:760px){.page-main {padding:10px 11px 20px;gap:13px}
.header-inner {padding:6px 11px;gap:9px}
.movie-overview {padding:11px;gap:10px}
.movie-overview {
grid-template-columns:minmax(0,1fr);
grid-template-areas:
"head"
"poster"
"player"
"status"
"cast"
"synopsis"
"details";
}
.poster-figure {max-width:230px}
.overview-head {padding-left:0;border-left:0;border-top:1px solid var(--line);padding-top:10px}
.movie-title {font-size:24px}
.movie-tagline {font-size:12px;letter-spacing:.2em}
.episode-grid {grid-template-columns:minmax(0,1fr)}
.timeline-track {grid-template-columns:repeat(2,minmax(0,1fr))}
.details-list {grid-template-columns:minmax(0,1fr)}
.comments-board {grid-template-columns:minmax(0,1fr)}
.recommend-grid {grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
.player-controls {gap:4px;padding:6px 7px}
.ctrl-btn {font-size:10.5px;padding:4px 7px}
.cast-member {width:58px}}
@media (max-width:420px){.timeline-track {grid-template-columns:minmax(0,1fr)}
.recommend-grid {grid-template-columns:minmax(0,1fr)}
.ctrl-progress {flex-basis:100%}
.ctrl-volume {flex-basis:70px}}

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}