* {box-sizing:border-box;margin:0;padding:0}
:root {
--blood:#8c0f14;
--blood-bright:#c2181f;
--blood-dark:#4a060a;
--moss:#1c2b23;
--moss-dim:#3a4a3f;
--ash:#0b0b0d;
--ash-2:#131316;
--ash-3:#1a1a1e;
--char:#050506;
--bone:#e8e2d8;
--bone-dim:#a9a49b;
--gray-green:#7f9a86;
--line:#26262b;
}
html {-webkit-text-size-adjust:100%}
body {
background:var(--ash);
color:var(--bone);
font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
font-size:13px;
font-weight:400;
line-height:1.5;
letter-spacing:.02em;
position:relative;
overflow-x:hidden;
}
body::before {
content:"";
position:fixed;
inset:0;
z-index:9999;
pointer-events:none;
opacity:.05;
background-image:
repeating-linear-gradient(0deg,rgba(255,255,255,.6) 0 1px,transparent 1px 3px),
repeating-linear-gradient(90deg,rgba(0,0,0,.7) 0 1px,transparent 1px 4px);
mix-blend-mode:overlay;
}
img {display:block;max-width:100%}
button {font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input, select {font:inherit;color:inherit}
ol, ul {list-style:none}
a {color:inherit}
.site-header {
background:var(--char);
border-bottom:2px solid var(--blood-dark);
position:sticky;
top:0;
z-index:100;
}
.header-inner {
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:8px 14px;
max-width:1280px;
margin:0 auto;
flex-wrap:wrap;
}
.site-brand {
font-size:17px;
font-weight:900;
letter-spacing:.08em;
text-transform:uppercase;
color:var(--blood-bright);
text-decoration:none;
white-space:nowrap;
padding-left:10px;
border-left:4px solid var(--blood);
}
a[data-contract="site-name"] {color:var(--blood-bright);text-decoration:none}
a[data-contract="site-name"]:hover {color:var(--bone);text-decoration:none}
.category-nav {
display:flex;
flex-wrap:wrap;
gap:6px;
justify-content:flex-end;
}
.runtime-category, a.runtime-category {
display:inline-block;
white-space:nowrap;
font-size:12px;
padding:4px 10px;
border:1px solid var(--moss-dim);
background:var(--ash-3);
color:var(--gray-green);
text-decoration:none;
letter-spacing:.06em;
}
a.runtime-category:hover {
background:var(--blood-dark);
border-color:var(--blood);
color:var(--bone);
text-decoration:none;
}
.page-main {
max-width:1280px;
margin:0 auto;
padding:0 14px 40px;
}
.movie-overview-shell {
background:var(--ash-2);
border:1px solid var(--line);
border-top:3px solid var(--blood);
padding:14px;
margin-top:14px;
position:relative;
}
.movie-overview-shell::after {
content:"";
position:absolute;
left:0;right:0;bottom:0;
height:2px;
background:linear-gradient(90deg,var(--blood) 0%,var(--blood-dark) 40%,transparent 100%);
}
.overview-hero {
display:grid;
grid-template-columns:minmax(0,240px) minmax(0,1fr);
gap:16px;
align-items:start;
}
.poster-column {min-width:0}
.poster-frame {
border:2px solid var(--blood-dark);
background:var(--char);
position:relative;
overflow:hidden;
}
.poster-frame::before {
content:"";
position:absolute;
inset:0;
z-index:2;
pointer-events:none;
background:repeating-linear-gradient(135deg,rgba(140,15,20,.16) 0 2px,transparent 2px 6px);
}
.poster-frame img {
width:100%;
height:auto;
aspect-ratio:9 / 16;
object-fit:cover;
display:block;
filter:saturate(.85) contrast(1.1);
}
.overview-lead {min-width:0;display:flex;flex-direction:column;gap:10px}
.hero-silhouette {
position:relative;
height:78px;
overflow:hidden;
background:
radial-gradient(circle at 50% 120%,rgba(140,15,20,.35),transparent 70%),
var(--char);
border-bottom:1px solid var(--blood-dark);
}
.silhouette-mask, .silhouette-burnt {
position:absolute;
bottom:-14px;
width:72px;
height:96px;
display:block;
}
.silhouette-mask {
left:calc(50% - 76px);
background:
linear-gradient(180deg,var(--ash-3) 0%,var(--char) 100%);
clip-path:polygon(50% 0,88% 22%,88% 66%,68% 100%,32% 100%,12% 66%,12% 22%);
box-shadow:0 0 0 1px var(--blood-dark);
}
.silhouette-burnt {
left:calc(50% + 4px);
background:
linear-gradient(180deg,var(--blood-dark) 0%,var(--char) 100%);
clip-path:polygon(50% 0,86% 20%,92% 62%,70% 100%,30% 100%,8% 62%,14% 20%);
box-shadow:0 0 0 1px var(--moss-dim);
}
.movie-title {
font-size:27px;
font-weight:900;
line-height:1.1;
letter-spacing:.04em;
color:var(--bone);
text-shadow:2px 2px 0 var(--blood-dark);
}
.movie-tagline {
font-size:13px;
font-weight:700;
color:var(--blood-bright);
letter-spacing:.14em;
border-left:3px solid var(--blood);
padding-left:8px;
}
.movie-seo {
font-size:12.5px;
color:var(--bone-dim);
line-height:1.62;
max-width:70ch;
}
.player-shell {
border:1px solid var(--line);
background:var(--char);
padding:6px;
min-width:0;
}
.player-shell video {
display:block;
width:100%;
aspect-ratio:16 / 9;
background:#000;
}
.player-shell video.is-lights-off {filter:brightness(.55) contrast(1.2)}
.player-shell video.is-theater {filter:saturate(1.15) contrast(1.08)}
.player-controls {
display:flex;
flex-wrap:wrap;
align-items:center;
gap:6px;
padding:6px 2px 2px;
}
.ctrl-btn {
font-size:11.5px;
font-weight:700;
letter-spacing:.04em;
padding:4px 9px;
border:1px solid var(--blood-dark);
background:var(--ash-3);
color:var(--bone-dim);
white-space:nowrap;
}
.ctrl-btn:hover {border-color:var(--blood);color:var(--bone)}
.ctrl-btn.is-playing, .ctrl-btn.is-active, .ctrl-btn.is-muted {
background:var(--blood);
border-color:var(--blood-bright);
color:var(--bone);
}
.ctrl-range {
-webkit-appearance:none;
appearance:none;
height:6px;
background:var(--ash-3);
border:1px solid var(--line);
cursor:pointer;
}
.ctrl-range::-webkit-slider-thumb {
-webkit-appearance:none;
width:10px;height:14px;
background:var(--blood-bright);
border:1px solid var(--blood-dark);
}
.ctrl-progress {flex:1 1 140px;min-width:80px}
.ctrl-volume {flex:0 1 90px;min-width:60px}
.ctrl-speed {
display:inline-flex;
align-items:center;
gap:4px;
font-size:11.5px;
color:var(--gray-green);
}
.ctrl-speed-label {white-space:nowrap;font-weight:700}
.ctrl-speed select {
background:var(--ash-3);
border:1px solid var(--blood-dark);
color:var(--bone-dim);
font-size:11.5px;
padding:3px 4px;
}
.section-heading {
font-size:14px;
font-weight:900;
letter-spacing:.16em;
color:var(--bone);
text-transform:uppercase;
padding:3px 0 3px 9px;
border-left:4px solid var(--blood-bright);
margin-bottom:9px;
text-shadow:1px 1px 0 var(--char);
}
.section-heading::after {
content:"";
display:block;
height:1px;
margin-top:5px;
background:var(--line);
}
.cast-strip {margin-top:16px}
.cast-track {
display:flex;
gap:8px;
overflow-x:auto;
padding-bottom:6px;
scrollbar-width:thin;
scrollbar-color:var(--blood-dark) var(--ash-3);
}
.cast-track::-webkit-scrollbar {height:6px}
.cast-track::-webkit-scrollbar-track {background:var(--ash-3)}
.cast-track::-webkit-scrollbar-thumb {background:var(--blood-dark)}
.cast-card {
flex:0 0 auto;
width:88px;
display:flex;
flex-direction:column;
align-items:center;
gap:5px;
border:1px solid var(--blood-dark);
background:var(--char);
padding:6px 4px;
align-self:flex-start;
}
.cast-card:hover {border-color:var(--blood-bright)}
.cast-avatar {
width:66px;height:66px;
display:block;
background:
radial-gradient(circle at 50% 34%,var(--moss-dim) 0%,var(--moss) 45%,var(--char) 100%);
border:1px solid var(--blood-dark);
position:relative;
}
.cast-avatar::after {
content:"";
position:absolute;left:50%;top:30%;
width:22px;height:22px;
border-radius:50%;
transform:translateX(-50%);
background:var(--ash-3);
box-shadow:0 26px 0 -4px var(--ash-3);
}
.cast-name {
font-size:11.5px;
font-weight:700;
color:var(--bone-dim);
letter-spacing:.04em;
text-align:center;
white-space:nowrap;
}
.synopsis-block {margin-top:16px}
.synopsis-body {
columns:2;
column-gap:20px;
column-rule:1px solid var(--line);
border-top:1px solid var(--line);
padding-top:9px;
}
.synopsis-para {
font-size:12.5px;
line-height:1.62;
color:var(--bone-dim);
margin-bottom:8px;
break-inside:avoid;
}
.synopsis-para:last-child {margin-bottom:0}
.episode-status {margin-top:16px}
.status-list {
display:flex;
flex-wrap:wrap;
gap:8px;
}
.status-item {
display:flex;
align-items:baseline;
gap:8px;
border:1px solid var(--blood-dark);
background:var(--ash-3);
padding:6px 12px;
}
.status-key {
font-size:11.5px;
color:var(--gray-green);
letter-spacing:.08em;
}
.status-value {
font-size:16px;
font-weight:900;
color:var(--blood-bright);
}
.details-block {margin-top:16px}
.detail-grid {
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:1px;
background:var(--line);
border:1px solid var(--line);
}
.detail-cell {
background:var(--ash-2);
padding:7px 10px;
display:flex;
flex-direction:column;
gap:2px;
min-width:0;
}
.detail-key {
font-size:10.5px;
letter-spacing:.1em;
color:var(--moss-dim);
text-transform:uppercase;
}
.detail-value {
font-size:12.5px;
font-weight:600;
color:var(--bone);
word-break:break-word;
}
.episodes-timeline-pair {
display:grid;
grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
gap:16px;
margin-top:22px;
align-items:start;
}
.episodes-panel, .timeline-panel {
background:var(--ash-2);
border:1px solid var(--line);
border-top:3px solid var(--blood);
padding:12px;
min-width:0;
}
.episode-list {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:8px;
}
.episode-item {min-width:0;display:flex}
.episode-button {
display:grid;
grid-template-columns:auto 1fr auto;
grid-template-areas:
"num title dur"
"sum sum sum";
gap:2px 8px;
width:100%;
text-align:left;
border:1px solid var(--line);
background:var(--ash-3);
padding:8px 9px;
align-items:baseline;
transition:border-color .15s,background .15s;
}
.episode-button:hover {
border-color:var(--blood);
background:var(--char);
}
.episode-button.is-active {
border-color:var(--blood-bright);
background:linear-gradient(180deg,var(--blood-dark),var(--ash-3));
box-shadow:inset 3px 0 0 var(--blood-bright);
}
.episode-number {
grid-area:num;
font-size:11px;
font-weight:900;
color:var(--blood-bright);
letter-spacing:.06em;
white-space:nowrap;
}
.episode-title {
grid-area:title;
font-size:12.5px;
font-weight:700;
color:var(--bone);
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.episode-duration {
grid-area:dur;
font-size:10.5px;
color:var(--gray-green);
white-space:nowrap;
}
.episode-summary {
grid-area:sum;
font-size:11.5px;
line-height:1.5;
color:var(--bone-dim);
}
.timeline-list {
position:relative;
padding-left:20px;
display:flex;
flex-direction:column;
gap:7px;
}
.timeline-list::before {
content:"";
position:absolute;
left:6px;
top:4px;
bottom:4px;
width:2px;
background:linear-gradient(180deg,var(--blood-bright),var(--blood-dark) 60%,var(--moss));
}
.timeline-item {
position:relative;
display:flex;
flex-wrap:wrap;
align-items:baseline;
gap:4px 8px;
border:1px solid transparent;
border-left:0;
padding:4px 6px 4px 4px;
background:var(--ash-3);
}
.timeline-item::before {
content:"";
position:absolute;
left:-18px;
top:9px;
width:8px;height:8px;
background:var(--char);
border:2px solid var(--blood);
transform:rotate(45deg);
}
.timeline-item.is-active {
background:var(--blood-dark);
border-color:var(--blood);
}
.timeline-item.is-active::before {
background:var(--blood-bright);
border-color:var(--bone);
}
.timeline-timecode {
font-size:11px;
font-weight:900;
color:var(--blood-bright);
letter-spacing:.05em;
font-variant-numeric:tabular-nums;
white-space:nowrap;
}
.timeline-label {
font-size:11.5px;
color:var(--bone-dim);
line-height:1.45;
}
.comments-block {margin-top:22px}
.comment-stack {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:8px 18px;
padding-top:4px;
}
.comment-layer {
position:relative;
border:1px solid var(--line);
background:var(--ash-2);
padding:9px 11px;
align-self:start;
}
.comment-layer-a {
border-left:4px solid var(--blood);
margin-right:12px;
}
.comment-layer-b {
border-left:4px solid var(--moss-dim);
margin-left:12px;
background:var(--ash-3);
}
.comment-layer::after {
content:"";
position:absolute;
bottom:-7px;left:22px;
width:0;height:0;
border-left:7px solid transparent;
border-right:7px solid transparent;
border-top:7px solid var(--line);
}
.comment-nickname {
display:block;
font-size:11.5px;
font-weight:900;
color:var(--blood-bright);
letter-spacing:.06em;
margin-bottom:3px;
}
.comment-layer-b .comment-nickname {color:var(--gray-green)}
.comment-text {
font-size:12px;
line-height:1.55;
color:var(--bone-dim);
}
.recommend-region {margin-top:22px}
.recommend-grid {
display:grid;
gap:8px;
}
.recommend-grid-4 {grid-template-columns:repeat(4,minmax(0,1fr))}
.recommend-grid-5 {grid-template-columns:repeat(5,minmax(0,1fr))}
.recommend-grid-3 {grid-template-columns:repeat(3,minmax(0,1fr))}
.recommend-card {
display:flex;
flex-direction:column;
gap:5px;
border:1px solid var(--line);
background:var(--ash-2);
padding:6px;
min-width:0;
align-self:start;
}
a.recommend-card {
color:var(--bone-dim);
text-decoration:none;
}
a.recommend-card:hover {
border-color:var(--blood);
background:var(--char);
color:var(--bone);
text-decoration:none;
}
[data-runtime="recommendation"] img {
width:100%;
height:auto;
aspect-ratio:16 / 9;
object-fit:cover;
display:block;
background:var(--char);
border-bottom:2px solid var(--blood-dark);
filter:saturate(.85) contrast(1.05);
}
.recommend-card [data-runtime="name"] {
font-size:12px;
font-weight:700;
color:var(--bone);
line-height:1.35;
}
.recommend-card [data-runtime="blurb"] {
font-size:11px;
line-height:1.45;
color:var(--gray-green);
}
.site-footer {
margin-top:22px;
border-top:2px solid var(--blood-dark);
background:var(--char);
padding:14px;
}
.footer-disclaimer {
max-width:1280px;
margin:0 auto 9px;
font-size:11px;
line-height:1.55;
color:var(--moss-dim);
}
.footer-links {
max-width:1280px;
margin:0 auto 9px;
display:flex;
gap:14px;
flex-wrap:wrap;
}
a[data-contract="footer-home"], a[data-contract="footer-sitemap"] {
font-size:12px;
font-weight:700;
letter-spacing:.06em;
color:var(--gray-green);
text-decoration:none;
border-bottom:1px solid var(--blood-dark);
padding-bottom:1px;
}
a[data-contract="footer-home"]:hover, a[data-contract="footer-sitemap"]:hover {
color:var(--blood-bright);
text-decoration:none;
}
.friend-links {
max-width:1280px;
margin:0 auto;
display:flex;
flex-wrap:wrap;
align-items:center;
gap:6px 12px;
border-top:1px solid var(--line);
padding-top:9px;
}
.friend-links-label {
font-size:11px;
font-weight:900;
letter-spacing:.14em;
color:var(--blood);
white-space:nowrap;
}
a.runtime-friend-link {
font-size:11.5px;
color:var(--gray-green);
text-decoration:none;
white-space:nowrap;
}
a.runtime-friend-link:hover {
color:var(--bone);
text-decoration:underline;
}
@media (max-width:980px){.movie-overview-shell {padding:12px}
.overview-hero {grid-template-columns:minmax(0,200px) minmax(0,1fr)}
.synopsis-body {columns:1}
.episodes-timeline-pair {grid-template-columns:minmax(0,1fr)}
.episode-list {grid-template-columns:repeat(2,minmax(0,1fr))}
.detail-grid {grid-template-columns:repeat(3,minmax(0,1fr))}
.recommend-grid-5 {grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:720px){body {font-size:12.5px}
.page-main {padding:0 10px 30px}
.overview-hero {grid-template-columns:minmax(0,1fr)}
.poster-column {max-width:230px}
.movie-title {font-size:22px}
.hero-silhouette {height:64px}
.silhouette-mask, .silhouette-burnt {width:58px;height:78px;bottom:-12px}
.silhouette-mask {left:calc(50% - 62px)}
.episode-list {grid-template-columns:minmax(0,1fr)}
.detail-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
.comment-stack {grid-template-columns:minmax(0,1fr);gap:10px}
.comment-layer-a {margin-right:0}
.comment-layer-b {margin-left:0}
.recommend-grid-4 {grid-template-columns:repeat(2,minmax(0,1fr))}
.recommend-grid-5 {grid-template-columns:repeat(2,minmax(0,1fr))}
.recommend-grid-3 {grid-template-columns:repeat(2,minmax(0,1fr))}
.ctrl-progress {flex:1 1 100%}}
@media (max-width:420px){.header-inner {padding:7px 10px}
.site-brand {font-size:15px}
.movie-title {font-size:19px}
.detail-grid {grid-template-columns:minmax(0,1fr)}
.recommend-grid-4, .recommend-grid-5, .recommend-grid-3 {grid-template-columns:minmax(0,1fr)}
.cast-card {width:78px}
.cast-avatar {width:58px;height:58px}
.ctrl-btn {font-size:11px;padding:4px 7px}}

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}