* {box-sizing:border-box;margin:0;padding:0}
:root {
--steel-0:#0c0e10;
--steel-1:#141719;
--steel-2:#1b1f22;
--steel-3:#24292d;
--steel-4:#323840;
--steel-5:#4a525b;
--ash:#8b939c;
--ash-light:#b8bfc7;
--bone:#e8eaec;
--blood:#8f1f22;
--blood-bright:#c02a2c;
--blood-deep:#5c1416;
--rule:1px solid #2a3035;
--gap:14px;
--pad:14px;
}
html {-webkit-text-size-adjust:100%}
body {
background:var(--steel-0);
color:var(--ash-light);
font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Heiti SC",system-ui,-apple-system,"Segoe UI",sans-serif;
font-size:14px;
line-height:1.55;
font-weight:400;
letter-spacing:.01em;
min-height:100vh;
}
img {display:block;max-width:100%;height:auto}
a {color:inherit;text-decoration:none}
ul {list-style:none}
button {font:inherit;color:inherit;background:none;border:none;cursor:pointer}
h1, h2, h3 {font-weight:800;line-height:1.2;letter-spacing:-.01em}
.site-header {
position:sticky;
top:0;
z-index:40;
background:linear-gradient(180deg,#0c0e10 0%,rgba(12,14,16,.94) 100%);
border-bottom:var(--rule);
backdrop-filter:blur(6px);
}
.header-inner {
max-width:1240px;
margin:0 auto;
padding:9px 16px;
display:flex;
align-items:center;
gap:18px;
flex-wrap:wrap;
}
.site-brand {
font-size:17px;
font-weight:800;
letter-spacing:.06em;
text-transform:uppercase;
color:var(--bone);
padding-left:11px;
border-left:3px solid var(--blood-bright);
white-space:nowrap;
}
.site-brand:hover {color:var(--blood-bright)}
.category-bar {
display:flex;
flex-wrap:wrap;
gap:6px 8px;
align-items:center;
}
.runtime-category {
display:inline-block;
white-space:nowrap;
font-size:12px;
letter-spacing:.05em;
color:var(--ash);
padding:3px 9px;
border:1px solid var(--steel-4);
background:var(--steel-1);
transition:color .15s,border-color .15s,background .15s;
}
.runtime-category:hover {
color:var(--bone);
border-color:var(--blood-bright);
background:var(--blood-deep);
}
.page-main {
max-width:1240px;
margin:0 auto;
padding:16px;
display:flex;
flex-direction:column;
gap:26px;
}
.section-heading {
font-size:15px;
font-weight:800;
letter-spacing:.14em;
color:var(--bone);
padding-bottom:7px;
margin-bottom:var(--gap);
border-bottom:2px solid var(--steel-3);
position:relative;
}
.section-heading::before {
content:"";
position:absolute;
left:0;
bottom:-2px;
width:44px;
height:2px;
background:var(--blood-bright);
}
.movie-overview {
background:
radial-gradient(120% 90% at 88% 0%,rgba(143,31,34,.20) 0%,rgba(20,23,25,0) 58%),
linear-gradient(180deg,var(--steel-2) 0%,var(--steel-1) 100%);
border:1px solid var(--steel-3);
border-top:2px solid var(--blood-deep);
padding:var(--pad);
}
.overview-hero {
display:grid;
grid-template-columns:minmax(0,224px) minmax(0,1fr);
gap:20px;
align-items:start;
}
.poster-column {
position:relative;
}
.poster-column::after {
content:"";
position:absolute;
inset:0;
pointer-events:none;
box-shadow:inset 0 0 0 1px rgba(192,42,44,.35),inset 0 -60px 70px -40px rgba(0,0,0,.9);
}
.main-poster {
width:100%;
aspect-ratio:9 / 16;
object-fit:cover;
display:block;
filter:grayscale(.42) contrast(1.12) brightness(.86);
background:var(--steel-3);
}
.hero-copy {min-width:0}
.movie-title {
font-size:clamp(26px,4.4vw,46px);
font-weight:900;
letter-spacing:.02em;
color:#f2f3f4;
text-shadow:0 2px 0 rgba(0,0,0,.6),0 0 34px rgba(143,31,34,.5);
margin-bottom:6px;
}
.movie-tagline {
font-size:13px;
letter-spacing:.2em;
color:var(--blood-bright);
border-left:2px solid var(--blood);
padding-left:9px;
margin-bottom:14px;
}
.player-shell {
position:relative;
width:100%;
background:#000;
border:1px solid var(--steel-4);
}
.main-player {
display:block;
width:100%;
aspect-ratio:16 / 9;
background:#000;
}
.player-controls {
display:flex;
flex-wrap:wrap;
gap:5px;
padding:8px;
background:var(--steel-2);
border-top:1px solid var(--steel-3);
}
.ctrl-btn {
font-size:11.5px;
letter-spacing:.06em;
color:var(--ash-light);
padding:4px 10px;
border:1px solid var(--steel-4);
background:var(--steel-1);
transition:color .14s,border-color .14s,background .14s;
}
.ctrl-btn:hover {color:var(--bone);border-color:var(--blood-bright);background:var(--blood-deep)}
.ctrl-btn:active {background:var(--blood)}
.player-shell.is-playing .ctrl-btn[data-player-action="play"] {border-color:var(--blood-bright);color:#fff}
.player-shell.is-theater {
width:100%;
box-shadow:0 0 0 1px var(--blood-deep),0 24px 60px -20px rgba(0,0,0,.9);
}
.player-shell.is-lights-off {background:#000}
.player-shell.is-lights-off .main-player {filter:brightness(.9) contrast(1.08)}
.cast-row {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(108px,1fr));
gap:12px;
align-items:start;
}
.cast-card {
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
gap:5px;
padding:10px 6px;
background:var(--steel-1);
border:1px solid var(--steel-3);
border-bottom:2px solid var(--steel-4);
transition:border-color .16s,background .16s;
}
.cast-card:hover {background:var(--steel-2);border-bottom-color:var(--blood-bright)}
.cast-avatar {
width:64px;
height:64px;
border-radius:50%;
overflow:hidden;
border:2px solid var(--steel-4);
box-shadow:0 0 0 3px rgba(12,14,16,.9);
flex:none;
}
.cast-card:hover .cast-avatar {border-color:var(--blood-bright)}
.cast-img {
width:100%;
height:100%;
object-fit:cover;
filter:grayscale(.5) contrast(1.08);
}
.cast-name {
font-size:13px;
font-weight:800;
color:var(--bone);
letter-spacing:.04em;
}
.cast-role {
font-size:11px;
line-height:1.35;
color:var(--ash);
letter-spacing:.02em;
}
.synopsis-body {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:12px;
align-items:start;
}
.synopsis-para {
font-size:13.5px;
line-height:1.75;
color:#a9b0b8;
padding-left:11px;
border-left:1px solid var(--steel-4);
}
.synopsis-para:first-child {color:#c2c8ce;border-left-color:var(--blood)}
.status-list {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
gap:10px;
align-items:start;
}
.status-item {
display:flex;
align-items:baseline;
justify-content:space-between;
gap:10px;
padding:9px 12px;
background:var(--steel-1);
border:1px solid var(--steel-3);
border-left:3px solid var(--blood-deep);
}
.status-key {
font-size:11px;
letter-spacing:.14em;
color:var(--ash);
white-space:nowrap;
}
.status-value {
font-size:15px;
font-weight:800;
color:var(--bone);
letter-spacing:.02em;
}
.details-grid {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(178px,1fr));
gap:1px;
background:var(--steel-3);
border:1px solid var(--steel-3);
}
.detail-item {
background:var(--steel-1);
padding:8px 11px;
display:flex;
align-items:baseline;
gap:9px;
min-height:100%;
}
.detail-key {
font-size:11px;
letter-spacing:.1em;
color:var(--ash);
white-space:nowrap;
flex:none;
}
.detail-key::after {content:"／";color:var(--steel-5)}
.detail-value {
font-size:12.5px;
color:#cdd3d9;
font-weight:600;
min-width:0;
}
.timeline-scroll {
overflow-x:auto;
overflow-y:hidden;
padding-bottom:8px;
border-top:1px solid var(--steel-3);
border-bottom:1px solid var(--steel-3);
background:linear-gradient(180deg,var(--steel-1),var(--steel-0));
scrollbar-width:thin;
scrollbar-color:var(--blood) var(--steel-2);
-webkit-overflow-scrolling:touch;
}
.timeline-scroll::-webkit-scrollbar {height:8px}
.timeline-scroll::-webkit-scrollbar-track {background:var(--steel-2)}
.timeline-scroll::-webkit-scrollbar-thumb {background:var(--blood);border:1px solid var(--blood-deep)}
.timeline-track {
display:flex;
gap:0;
align-items:stretch;
min-width:max-content;
padding:14px 6px;
}
.timeline-node {
position:relative;
width:132px;
flex:none;
display:flex;
flex-direction:column;
align-items:flex-start;
gap:5px;
padding:0 12px 0 16px;
}
.timeline-node::before {
content:"";
position:absolute;
left:0;
top:15px;
width:16px;
height:2px;
background:var(--steel-5);
}
.timeline-node:first-child {padding-left:8px}
.timeline-node:first-child::before {display:none}
.timeline-icon {
width:30px;
height:30px;
flex:none;
display:flex;
align-items:center;
justify-content:center;
font-size:13px;
font-weight:800;
color:var(--ash);
background:var(--steel-2);
border:1px solid var(--steel-4);
border-radius:50%;
}
.timeline-timecode {
font-size:11px;
letter-spacing:.12em;
color:var(--ash);
}
.timeline-label {
font-size:12.5px;
line-height:1.4;
color:var(--ash-light);
}
.timeline-node.is-aired .timeline-icon {
color:#fff;
background:var(--blood);
border-color:var(--blood-bright);
box-shadow:0 0 0 3px rgba(143,31,34,.18);
}
.timeline-node.is-aired .timeline-timecode {color:var(--blood-bright);font-weight:700}
.timeline-node.is-aired .timeline-label {color:var(--bone)}
.timeline-node:not(.is-aired) .timeline-icon {opacity:.55}
.timeline-node:not(.is-aired) .timeline-label {color:var(--steel-5)}
.episodes-grid {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:10px;
align-items:start;
}
.episode-card {
background:var(--steel-1);
border:1px solid var(--steel-3);
border-left:3px solid var(--steel-4);
padding:10px 12px;
display:flex;
flex-direction:column;
gap:6px;
transition:border-color .16s,background .16s;
}
.episode-card:hover, .episode-card:focus-within {
background:var(--steel-2);
border-left-color:var(--blood-bright);
}
.episode-heading {
display:flex;
align-items:baseline;
gap:9px;
font-size:14px;
}
.episode-number {
font-size:20px;
font-weight:900;
line-height:1;
color:var(--steel-5);
letter-spacing:-.02em;
font-variant-numeric:tabular-nums;
flex:none;
}
.episode-card:hover .episode-number {color:var(--blood-bright)}
.episode-title {
font-size:14px;
font-weight:800;
color:var(--bone);
letter-spacing:.06em;
}
.episode-summary {
font-size:12px;
line-height:1.6;
color:var(--ash);
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}
.episode-card:hover .episode-summary, .episode-card:focus-within .episode-summary {
-webkit-line-clamp:unset;
display:block;
color:var(--ash-light);
}
.episode-duration {
font-size:10.5px;
letter-spacing:.14em;
color:var(--steel-5);
border-top:1px solid var(--steel-3);
padding-top:5px;
margin-top:auto;
}
.episode-card:hover .episode-duration {color:var(--ash)}
.comments-stack {
columns:2;
column-gap:12px;
}
.comment-card {
break-inside:avoid;
background:var(--steel-1);
border:1px solid var(--steel-3);
border-top:2px solid var(--steel-4);
padding:10px 12px;
margin-bottom:12px;
display:flex;
flex-direction:column;
gap:5px;
}
.comment-card:nth-child(3n/**/+2) {background:var(--steel-2);border-top-color:var(--blood-deep)}
.comment-card:nth-child(4n) {margin-top:14px}
.comment-nickname {
font-size:12px;
font-weight:800;
letter-spacing:.06em;
color:var(--blood-bright);
}
.comment-text {
font-size:12.5px;
line-height:1.7;
color:#9aa2aa;
}
.recommend-region {
background:var(--steel-1);
border:1px solid var(--steel-3);
padding:var(--pad);
}
.recommend-heading {
font-size:12.5px;
font-weight:800;
letter-spacing:.16em;
color:var(--bone);
padding-bottom:7px;
margin-bottom:10px;
border-bottom:1px solid var(--steel-3);
}
.recommend-list {
display:grid;
grid-template-columns:repeat(auto-fill,minmax(132px,1fr));
gap:10px;
align-items:start;
}
.recommend-item {
display:flex;
flex-direction:column;
gap:6px;
padding:8px;
background:var(--steel-2);
border:1px solid var(--steel-3);
transition:border-color .16s,background .16s,transform .16s;
}
.recommend-item:hover {
background:var(--steel-3);
border-color:var(--blood-bright);
transform:translateY(-2px);
}
.recommend-item img {
width:100%;
aspect-ratio:9 / 16;
object-fit:cover;
background:var(--steel-4);
filter:grayscale(.5) contrast(1.08) brightness(.88);
}
.recommend-item:hover img {filter:grayscale(.15) contrast(1.1) brightness(.98)}
.recommend-name {
font-size:12.5px;
font-weight:800;
color:var(--bone);
letter-spacing:.03em;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.recommend-blurb {
font-size:11px;
line-height:1.55;
color:var(--ash);
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}
.site-footer {
margin-top:26px;
background:var(--steel-1);
border-top:2px solid var(--blood-deep);
}
.footer-inner {
max-width:1240px;
margin:0 auto;
padding:16px;
display:flex;
flex-direction:column;
gap:12px;
}
.friend-links {
display:flex;
flex-wrap:wrap;
align-items:center;
gap:6px 10px;
}
.friend-links-label {
font-size:11px;
font-weight:800;
letter-spacing:.16em;
color:var(--ash);
white-space:nowrap;
padding-right:8px;
border-right:1px solid var(--steel-4);
}
.runtime-friend-link {
font-size:12px;
color:var(--ash);
white-space:nowrap;
border-bottom:1px solid transparent;
transition:color .14s,border-color .14s;
}
.runtime-friend-link:hover {color:var(--bone);border-bottom-color:var(--blood-bright)}
.footer-nav {
display:flex;
flex-wrap:wrap;
gap:8px 16px;
padding-top:10px;
border-top:1px solid var(--steel-3);
}
.footer-link {
font-size:12px;
letter-spacing:.1em;
color:var(--ash-light);
white-space:nowrap;
}
.footer-link:hover {color:var(--blood-bright)}
.footer-disclaimer {
font-size:11px;
line-height:1.7;
color:var(--steel-5);
max-width:78ch;
}
@media (max-width:900px){.overview-hero {grid-template-columns:minmax(0,170px) minmax(0,1fr);gap:16px}
.episodes-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
.comments-stack {columns:2}}
@media (max-width:680px){.page-main {padding:12px;gap:20px}
.header-inner {padding:8px 12px;gap:12px}
.overview-hero {grid-template-columns:minmax(0,120px) minmax(0,1fr);gap:12px}
.movie-tagline {letter-spacing:.1em;margin-bottom:10px}
.player-controls {gap:4px;padding:6px}
.ctrl-btn {font-size:11px;padding:4px 8px}
.cast-row {grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:8px}
.cast-avatar {width:52px;height:52px}
.synopsis-body {grid-template-columns:minmax(0,1fr)}
.episodes-grid {grid-template-columns:minmax(0,1fr)}
.comments-stack {columns:1}
.recommend-list {grid-template-columns:repeat(auto-fill,minmax(112px,1fr))}}
@media (max-width:420px){.overview-hero {grid-template-columns:minmax(0,1fr)}
.poster-column {max-width:150px}
.main-poster {width:100%}
.movie-title {font-size:26px}
.cast-row {grid-template-columns:repeat(3,minmax(0,1fr))}
.recommend-list {grid-template-columns:repeat(2,minmax(0,1fr))}
.timeline-node {width:120px}}

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}