* {margin:0;padding:0;box-sizing:border-box}
:root {
--brick:#4a4440;
--brick-deep:#2b2725;
--brick-soft:#5c5450;
--mortar:#7d7570;
--warm:#e8d9b0;
--warm-dim:#b9a97f;
--tape-red:#8f2f28;
--tape-red-lite:#b8443a;
--neon:#e6f24a;
--film:#1a1716;
--panel:#221e1c;
--panel-2:#2c2724;
--rule:#3a3431;
--ink:#d8cfbe;
--ink-dim:#948a7c;
}
html {-webkit-text-size-adjust:100%}
body {
background:var(--film);
color:var(--ink);
font-family:"Heiti SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
font-size:14px;
line-height:1.45;
letter-spacing:.01em;
overflow-x:hidden;
}
img {display:block;max-width:100%}
ul, ol {list-style:none}
a {color:inherit;text-decoration:none}
h1, h2, h3 {font-weight:700}
button {font:inherit;color:inherit;background:none;border:none;cursor:pointer}
.site-header {
display:flex;
align-items:center;
gap:16px;
padding:8px 16px;
background:linear-gradient(180deg,#211d1b,#191615);
border-bottom:2px solid var(--tape-red);
position:sticky;
top:0;
z-index:40;
}
.site-brand {
font-size:17px;
font-weight:700;
letter-spacing:.18em;
color:var(--warm);
text-transform:uppercase;
white-space:nowrap;
}
a[data-contract="site-name"] {
color:var(--warm);
text-decoration:none;
}
a[data-contract="site-name"]:hover {color:var(--neon)}
.category-bar {
display:flex;
flex-wrap:wrap;
gap:6px;
min-width:0;
}
a.runtime-category {
display:inline-block;
white-space:nowrap;
font-size:12px;
padding:3px 9px;
color:var(--warm-dim);
background:#2e2926;
border:1px solid var(--rule);
border-left:3px solid var(--tape-red);
letter-spacing:.08em;
}
a.runtime-category:hover {
color:var(--neon);
background:#383230;
border-left-color:var(--neon);
}
.movie-page {
max-width:1180px;
margin:0 auto;
padding:0 16px 40px;
}
.movie-page.lights-off {
background:#0d0b0a;
}
.movie-page.lights-off .player-section {
background:#000;
}
.hero-poster {
display:grid;
grid-template-columns:minmax(0,300px) minmax(0,1fr);
gap:22px;
align-items:start;
padding:26px 0 30px;
margin-bottom:8px;
}
.hero-media {
position:relative;
align-self:start;
}
.hero-media img {
width:100%;
height:auto;
aspect-ratio:9 / 16;
object-fit:cover;
display:block;
border:1px solid #3d3733;
filter:saturate(.82) contrast(1.05);
box-shadow:0 0 0 1px #000,0 14px 30px rgba(0,0,0,.55);
}
.hero-media::after {
content:"";
position:absolute;
inset:0;
pointer-events:none;
background:linear-gradient(180deg,rgba(20,17,16,.08),rgba(20,17,16,.32) 70%,rgba(20,17,16,.6));
}
.hero-info {
min-width:0;
}
.movie-title {
font-size:clamp(22px,3.4vw,38px);
line-height:1.08;
letter-spacing:.02em;
color:var(--warm);
font-weight:800;
font-stretch:condensed;
margin-bottom:6px;
text-shadow:1px 1px 0 rgba(0,0,0,.6);
}
.movie-tagline {
position:relative;
display:inline-block;
font-size:13px;
letter-spacing:.14em;
color:var(--warm-dim);
padding:4px 10px 4px 12px;
margin-bottom:12px;
background:rgba(143,47,40,.16);
border-left:3px solid var(--tape-red-lite);
}
.movie-seo {
font-size:13px;
line-height:1.7;
color:var(--ink-dim);
max-width:64ch;
margin-bottom:16px;
}
.cast-row {
border-top:1px solid var(--rule);
border-bottom:1px solid var(--rule);
padding:12px 0;
margin-bottom:16px;
}
.cast-title {
font-size:12px;
letter-spacing:.3em;
color:var(--warm-dim);
margin-bottom:10px;
font-weight:700;
}
.cast-list {
display:flex;
flex-wrap:wrap;
gap:14px 18px;
}
.cast-item {
display:flex;
flex-direction:column;
align-items:center;
gap:5px;
width:64px;
}
.cast-avatar {
width:54px;
height:54px;
border-radius:50%;
background:
radial-gradient(circle at 35% 28%,#6d6259,#3a3330 70%),
#2b2725;
border:2px solid #4c4540;
box-shadow:inset 0 0 0 2px #1d1a19,0 3px 8px rgba(0,0,0,.5);
}
.cast-name {
font-size:12px;
letter-spacing:.04em;
color:var(--ink);
white-space:nowrap;
}
.synopsis-block {
margin-bottom:16px;
}
.synopsis-title {
font-size:12px;
letter-spacing:.3em;
color:var(--warm-dim);
margin-bottom:8px;
}
.synopsis-line {
font-size:12.5px;
line-height:1.72;
color:var(--ink-dim);
margin-bottom:6px;
text-indent:2em;
}
.synopsis-line:last-child {
color:var(--warm-dim);
}
.episode-status {
display:flex;
flex-wrap:wrap;
gap:8px;
margin-bottom:16px;
}
.status-current, .status-total, .status-duration {
font-size:12px;
padding:3px 9px;
letter-spacing:.06em;
border:1px solid var(--rule);
}
.status-current {
background:var(--tape-red);
color:#f4e6dc;
border-color:var(--tape-red-lite);
font-weight:700;
}
.status-total {
background:#2e2926;
color:var(--warm-dim);
}
.status-duration {
background:#2e2926;
color:var(--ink-dim);
}
.detail-list {
display:grid;
grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
gap:0 18px;
border-top:1px solid var(--rule);
padding-top:10px;
}
.detail-row {
display:flex;
gap:8px;
align-items:baseline;
padding:4px 0;
border-bottom:1px dashed #332e2b;
min-width:0;
}
.detail-key {
font-size:11.5px;
color:var(--ink-dim);
flex:0 0 auto;
letter-spacing:.06em;
}
.detail-key::after {content:"："}
.detail-value {
font-size:12px;
color:var(--ink);
flex:1 1 auto;
min-width:0;
text-align:right;
}
.player-section {
margin:0 0 26px;
background:#161312;
border:1px solid var(--rule);
}
.player-wrapper {
position:relative;
width:100%;
background:#000;
}
.player-wrapper video {
display:block;
width:100%;
aspect-ratio:16 / 9;
height:auto;
background:#000;
}
.player-wrapper.theater-mode {
box-shadow:0 0 0 1px var(--tape-red),0 0 40px rgba(232,217,176,.08);
}
.player-wrapper.theater-mode video {
max-height:82vh;
object-fit:contain;
}
.player-controls {
display:flex;
flex-wrap:wrap;
gap:1px;
background:var(--rule);
border-top:1px solid var(--rule);
}
.ctrl-btn {
flex:1 1 auto;
min-width:66px;
padding:7px 6px;
font-size:12px;
letter-spacing:.08em;
background:#26221f;
color:var(--ink-dim);
border:none;
transition:background .12s,color .12s;
}
.ctrl-btn:hover {
background:#332d29;
color:var(--warm);
}
.ctrl-btn.active {
background:var(--tape-red);
color:#f6e7dc;
}
.ctrl-btn.click {
background:#3b342f;
color:var(--neon);
}
.timeline-section {
margin:0 0 28px;
padding:16px 0 18px;
border-top:1px solid var(--rule);
}
.timeline-heading {
font-size:15px;
letter-spacing:.42em;
color:var(--warm);
margin-bottom:14px;
padding-left:2px;
text-shadow:0 0 12px rgba(232,217,176,.18);
}
.timeline-strip {
display:flex;
gap:8px;
overflow-x:auto;
padding:4px 2px 12px;
scroll-snap-type:x proximity;
scrollbar-color:var(--tape-red) #221e1c;
scrollbar-width:thin;
}
.timeline-strip::-webkit-scrollbar {height:7px}
.timeline-strip::-webkit-scrollbar-track {background:#221e1c}
.timeline-strip::-webkit-scrollbar-thumb {background:var(--tape-red)}
.timeline-cell {
flex:0 0 auto;
width:158px;
min-height:132px;
display:flex;
flex-direction:column;
justify-content:space-between;
gap:10px;
padding:9px 9px 9px 11px;
background:rgba(232,217,176,.05);
border:1px solid #3f3834;
border-top:2px solid rgba(232,217,176,.22);
scroll-snap-align:start;
position:relative;
}
.timeline-cell::before, .timeline-cell::after {
content:"";
position:absolute;
top:0;bottom:0;
width:5px;
background:repeating-linear-gradient(180deg,#1c1917 0 7px,#3b3430 7px 13px);
}
.timeline-cell::before {left:-1px}
.timeline-cell::after {right:-1px}
.timeline-timecode {
font-size:12px;
font-weight:700;
letter-spacing:.1em;
color:var(--warm);
}
.timeline-label {
writing-mode:vertical-rl;
text-orientation:upright;
font-size:11px;
line-height:1.35;
letter-spacing:.14em;
color:var(--ink-dim);
max-height:150px;
align-self:flex-end;
}
.timeline-cell:hover {
background:rgba(232,217,176,.1);
border-top-color:var(--neon);
}
.timeline-cell:hover .timeline-label {color:var(--ink)}
.episodes-section {
margin:0 0 28px;
padding-top:16px;
border-top:1px solid var(--rule);
}
.episodes-heading {
font-size:15px;
letter-spacing:.42em;
color:var(--warm);
margin-bottom:14px;
padding-left:2px;
text-shadow:0 0 12px rgba(232,217,176,.18);
}
.episodes-layout {
display:grid;
grid-template-columns:minmax(0,320px) minmax(0,1fr);
gap:18px;
align-items:start;
}
.episode-list {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:0;
border-top:1px solid var(--rule);
}
.episode-item {
display:grid;
grid-template-columns:auto minmax(0,1fr) auto;
align-items:center;
gap:6px;
padding:6px 8px;
font-size:12px;
border-bottom:1px solid #2f2a27;
border-right:1px solid #2f2a27;
cursor:pointer;
transition:background .12s;
}
.episode-item:hover {
background:#2b2623;
}
.episode-number {
font-size:11px;
font-weight:700;
color:var(--ink-dim);
min-width:15px;
text-align:right;
letter-spacing:.02em;
}
.episode-name {
color:var(--ink);
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.episode-duration {
font-size:10.5px;
color:#6f665c;
white-space:nowrap;
}
.episode-item-active {
background:linear-gradient(90deg,rgba(143,47,40,.55),rgba(143,47,40,.18));
border-right-color:var(--tape-red-lite);
}
.episode-item-active .episode-number {color:var(--neon)}
.episode-item-active .episode-name {color:#f4e6dc;font-weight:700}
.episode-item-active .episode-duration {color:var(--warm-dim)}
.episode-summary {
background:var(--panel-2);
border:1px solid var(--rule);
border-left:3px solid var(--tape-red);
padding:12px 14px;
}
.episode-summary-title {
font-size:13px;
letter-spacing:.08em;
color:var(--warm);
margin-bottom:7px;
}
.episode-summary-text {
font-size:12.5px;
line-height:1.7;
color:var(--ink-dim);
}
.comments-section {
margin:0 0 30px;
padding:16px 14px 18px;
background:#181514;
border-top:2px solid var(--tape-red);
}
.comments-heading {
font-size:14px;
letter-spacing:.42em;
color:var(--warm-dim);
margin-bottom:12px;
}
.comment-stack {
display:grid;
grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
gap:8px;
}
.comment-item {
display:grid;
grid-template-columns:auto minmax(0,1fr);
gap:0 10px;
align-items:start;
background:#221e1c;
border-left:4px solid var(--tape-red);
padding:8px 10px;
}
.comment-nickname {
grid-column:1;
writing-mode:vertical-rl;
text-orientation:upright;
font-size:11px;
font-weight:700;
letter-spacing:.16em;
color:var(--neon);
max-height:120px;
line-height:1.1;
}
.comment-text {
grid-column:2;
font-size:12px;
line-height:1.65;
color:var(--ink-dim);
}
.comment-item:hover {
background:#282321;
}
.comment-item:hover .comment-text {color:var(--ink)}
.recommend-region {
margin:0 0 26px;
padding-top:14px;
border-top:1px solid var(--rule);
}
.recommend-title {
font-size:13px;
letter-spacing:.22em;
font-weight:400;
color:var(--warm-dim);
margin-bottom:11px;
}
.recommend-list {
display:grid;
grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
gap:12px;
}
a[data-runtime="recommendation"] {
display:flex;
flex-direction:column;
gap:4px;
background:var(--panel);
border:1px solid #342e2b;
padding:6px;
min-width:0;
transition:border-color .12s,background .12s;
}
a[data-runtime="recommendation"] img {
width:100%;
height:auto;
aspect-ratio:16 / 10;
object-fit:cover;
display:block;
border:1px solid #302a27;
filter:saturate(.85);
}
a[data-runtime="recommendation"] span[data-runtime="name"] {
font-size:12px;
font-weight:700;
color:var(--ink);
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
a[data-runtime="recommendation"] span[data-runtime="blurb"] {
font-size:11px;
line-height:1.5;
color:#7d7367;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}
a[data-runtime="recommendation"]:hover {
background:#2a2523;
border-color:var(--tape-red-lite);
}
a[data-runtime="recommendation"]:hover span[data-runtime="name"] {color:var(--neon)}
.site-footer {
background:#131110;
border-top:2px solid var(--tape-red);
padding:14px 16px 22px;
font-size:12px;
}
.footer-links {
display:flex;
flex-wrap:wrap;
gap:14px;
margin-bottom:10px;
}
a[data-contract="footer-home"], a[data-contract="footer-sitemap"] {
color:var(--warm-dim);
text-decoration:none;
letter-spacing:.1em;
border-bottom:1px solid transparent;
}
a[data-contract="footer-home"]:hover, a[data-contract="footer-sitemap"]:hover {
color:var(--neon);
border-bottom-color:var(--neon);
}
.friend-links {
display:flex;
flex-wrap:wrap;
align-items:baseline;
gap:8px 14px;
margin-bottom:12px;
}
.friend-links-label {
font-size:11.5px;
letter-spacing:.2em;
color:#6f665c;
white-space:nowrap;
}
a.runtime-friend-link {
color:#8a8073;
text-decoration:none;
white-space:nowrap;
font-size:11.5px;
border-left:2px solid #3a3431;
padding-left:8px;
}
a.runtime-friend-link:hover {
color:var(--neon);
border-left-color:var(--neon);
}
.footer-disclaimer {
font-size:11px;
line-height:1.6;
color:#5c544c;
max-width:80ch;
}
@media (max-width:900px){.hero-poster {
grid-template-columns:minmax(0,240px) minmax(0,1fr);
gap:18px;
}
.episodes-layout {
grid-template-columns:minmax(0,1fr);
}
.episode-list {
grid-template-columns:repeat(3,minmax(0,1fr));
}}
@media (max-width:640px){body {font-size:13px}
.site-header {
padding:8px 12px;
gap:10px;
}
.movie-page {padding:0 12px 32px}
.hero-poster {
grid-template-columns:minmax(0,1fr);
gap:16px;
padding:18px 0 22px;
}
.hero-media {
max-width:230px;
}
.movie-title {font-size:23px}
.movie-tagline {font-size:12px;letter-spacing:.08em}
.movie-seo {font-size:12.5px}
.cast-list {gap:12px 14px}
.cast-item {width:56px}
.cast-avatar {width:46px;height:46px}
.detail-list {grid-template-columns:minmax(0,1fr)}
.detail-value {text-align:left}
.player-controls {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
}
.ctrl-btn {min-width:0}
.timeline-cell {width:140px;min-height:120px}
.episode-list {grid-template-columns:minmax(0,1fr)}
.episode-name {white-space:normal;overflow:visible;text-overflow:clip}
.comment-stack {grid-template-columns:minmax(0,1fr)}
.comment-nickname {
writing-mode:horizontal-tb;
grid-column:1 / -1;
max-height:none;
margin-bottom:4px;
}
.comment-text {grid-column:1 / -1}
.recommend-list {grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.timeline-label {max-height:none}}
@media (max-width:380px){.recommend-list {grid-template-columns:minmax(0,1fr)}
.episode-item {
grid-template-columns:auto minmax(0,1fr);
gap:4px;
}
.episode-duration {grid-column:2;font-size:10px}}

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}