* {box-sizing:border-box;margin:0;padding:0}
:root {
--ink:#0d0c0f;
--ink-2:#151319;
--ink-3:#1d1a21;
--qing:#4a5a5e;
--qing-2:#6d7f80;
--gold:#c9a24a;
--gold-2:#e6c877;
--zhu:#7a2320;
--zhu-2:#a63a2e;
--txt:#d8d2c6;
--txt-dim:#948d80;
--rule:rgba(201,162,74,.22);
--serif:"Songti SC","STSong","SimSun",serif;
--sans:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}
html {-webkit-text-size-adjust:100%}
body {
background:
radial-gradient(120% 60% at 15% 0%,rgba(74,90,94,.35),transparent 60%),
radial-gradient(90% 50% at 95% 8%,rgba(122,35,32,.30),transparent 62%),
var(--ink);
color:var(--txt);
font-family:var(--sans);
font-size:14px;
line-height:1.55;
letter-spacing:.01em;
min-height:100vh;
}
img, video {display:block;max-width:100%}
a {color:inherit;text-decoration:none}
ul, ol {list-style:none}
button, input {font:inherit;color:inherit}
button {background:none;border:0;cursor:pointer}
.site-header {
position:sticky;top:0;z-index:40;
background:linear-gradient(180deg,rgba(13,12,15,.96),rgba(13,12,15,.86));
border-bottom:1px solid var(--rule);
backdrop-filter:blur(6px);
}
.header-bar {
display:flex;align-items:center;gap:18px;
padding:8px 16px;
max-width:1400px;margin:0 auto;
}
a[data-contract="site-name"] {
font-family:var(--serif);
font-size:19px;
font-weight:700;
letter-spacing:.14em;
color:var(--gold-2);
text-decoration:none;
text-shadow:0 0 12px rgba(201,162,74,.35);
white-space:nowrap;
}
a[data-contract="site-name"]:hover {color:#fff}
.header-nav {margin-left:auto;display:flex;align-items:center}
.categories-shell {
display:flex;flex-wrap:wrap;gap:4px 6px;justify-content:flex-end;
}
a.runtime-category {
display:inline-block;
white-space:nowrap;
font-size:12.5px;
padding:3px 9px;
color:var(--qing-2);
text-decoration:none;
border:1px solid rgba(109,127,128,.35);
border-radius:2px;
letter-spacing:.06em;
transition:.18s;
}
a.runtime-category:hover {
color:var(--ink);
background:var(--gold);
border-color:var(--gold);
text-decoration:none;
}
.page-main {
max-width:1400px;
margin:0 auto;
padding:14px 16px 0;
display:flex;
flex-direction:column;
gap:16px;
}
.hero-shell {
display:grid;
grid-template-columns:minmax(0,300px) minmax(0,1fr);
gap:22px;
align-items:start;
padding:18px 0 20px;
position:relative;
}
.hero-shell::after {
content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
background:linear-gradient(90deg,transparent,var(--rule),transparent);
}
.hero-figure {
position:relative;
padding:14px 14px 0;
background:linear-gradient(160deg,rgba(74,90,94,.22),rgba(122,35,32,.18));
border:1px solid var(--rule);
border-radius:2px;
}
.hero-portrait {
display:flex;flex-direction:column;gap:8px;
}
.hero-poster {
width:100%;
height:auto;
object-fit:cover;
filter:saturate(.78) contrast(1.06) brightness(.94);
border:1px solid rgba(201,162,74,.3);
}
.hero-figure-caption {
display:flex;justify-content:space-between;
padding:2px 0 10px;
}
.hero-figure-note {
font-family:var(--serif);
font-size:11.5px;
letter-spacing:.22em;
color:var(--gold);
writing-mode:horizontal-tb;
}
.hero-info {
display:flex;flex-direction:column;
gap:12px;
min-width:0;
}
.movie-title {
font-family:var(--serif);
font-size:clamp(26px,3.6vw,42px);
line-height:1.12;
letter-spacing:.1em;
color:#f2ead8;
font-weight:700;
text-shadow:0 0 26px rgba(201,162,74,.28),0 2px 0 rgba(122,35,32,.5);
}
.movie-tagline {
font-family:var(--serif);
font-size:14.5px;
letter-spacing:.08em;
color:var(--gold-2);
border-left:3px solid var(--zhu-2);
padding-left:10px;
}
.movie-seo {
font-size:13px;
line-height:1.72;
color:var(--txt-dim);
max-width:62ch;
text-align:justify;
}
.player-shell {
position:relative;
width:100%;
border:1px solid var(--rule);
background:#000;
overflow:hidden;
}
.player-video {
display:block;
width:100%;
background:#000;
}
.player-controls {
display:flex;
flex-wrap:wrap;
align-items:center;
gap:6px;
padding:6px 8px;
background:linear-gradient(180deg,rgba(29,26,33,.9),rgba(13,12,15,.98));
border-top:1px solid var(--rule);
}
.player-btn {
font-size:12px;
letter-spacing:.08em;
padding:3px 9px;
color:var(--txt-dim);
border:1px solid rgba(148,141,128,.3);
border-radius:2px;
transition:.16s;
white-space:nowrap;
}
.player-btn:hover {color:var(--gold-2);border-color:var(--gold)}
.player-btn.is-active, .player-btn.is-playing {
color:var(--ink);
background:var(--gold);
border-color:var(--gold);
}
.player-btn.is-muted {color:var(--zhu-2);border-color:var(--zhu-2)}
.player-progress {
flex:1 1 160px;
min-width:110px;
height:4px;
-webkit-appearance:none;appearance:none;
background:linear-gradient(90deg,var(--gold),var(--zhu-2));
border-radius:2px;
cursor:pointer;
}
.player-volume {
flex:0 1 90px;
min-width:70px;
height:4px;
-webkit-appearance:none;appearance:none;
background:var(--qing);
border-radius:2px;
cursor:pointer;
}
.player-progress::-webkit-slider-thumb, .player-volume::-webkit-slider-thumb {
-webkit-appearance:none;appearance:none;
width:11px;height:11px;border-radius:50%;
background:var(--gold-2);
border:1px solid var(--ink);
}
.player-shell.is-theater {
box-shadow:0 0 0 1px var(--gold),0 0 40px rgba(0,0,0,.8);
}
.player-shell.is-lights-off {filter:brightness(.72) saturate(.85)}
.episode-status {
display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;
font-family:var(--serif);
letter-spacing:.08em;
border-top:1px solid var(--rule);
border-bottom:1px solid var(--rule);
padding:7px 2px;
}
.status-current {color:var(--gold-2);font-size:14px}
.status-total {color:var(--txt-dim);font-size:13px}
.status-total::before {content:"/ ";color:var(--rule)}
.cast-strip {display:flex;flex-direction:column;gap:7px}
.cast-heading {
font-family:var(--serif);
font-size:14px;
letter-spacing:.24em;
color:var(--gold);
font-weight:700;
}
.cast-scroll {
display:flex;
gap:10px;
overflow-x:auto;
padding:2px 0 8px;
scrollbar-width:thin;
scrollbar-color:var(--qing) transparent;
}
.cast-scroll::-webkit-scrollbar {height:5px}
.cast-scroll::-webkit-scrollbar-thumb {background:var(--qing);border-radius:3px}
.cast-card {
position:relative;
flex:0 0 auto;
width:78px;
}
.cast-avatar {
display:block;
width:78px;height:78px;
background:
linear-gradient(150deg,rgba(74,90,94,.85),rgba(29,26,33,.95)),
radial-gradient(60% 60% at 50% 30%,rgba(201,162,74,.35),transparent 70%);
border:1px solid rgba(201,162,74,.35);
box-shadow:inset 0 0 18px rgba(0,0,0,.7);
}
.cast-name {
display:block;
margin-top:-13px;
position:relative;
z-index:2;
text-align:center;
font-size:12px;
letter-spacing:.06em;
color:#f0e8d6;
text-shadow:0 1px 3px #000,0 0 8px #000;
background:linear-gradient(180deg,transparent,rgba(13,12,15,.85));
padding-top:12px;
}
.synopsis-panel {
display:flex;flex-direction:column;gap:8px;
padding:12px 14px;
background:linear-gradient(180deg,rgba(21,19,25,.9),rgba(13,12,15,.6));
border-left:2px solid var(--zhu-2);
}
.synopsis-heading, .details-heading {
font-family:var(--serif);
font-size:14px;
letter-spacing:.24em;
color:var(--gold);
font-weight:700;
}
.synopsis-text {
font-size:13px;line-height:1.78;color:var(--txt-dim);
text-align:justify;
max-width:74ch;
}
.synopsis-text::first-letter {color:var(--gold-2)}
.details-panel {
display:flex;flex-direction:column;gap:9px;
margin-top:12px;
padding:12px 14px;
background:linear-gradient(180deg,rgba(21,19,25,.9),rgba(13,12,15,.55));
border:1px solid var(--rule);
}
.details-list {
display:grid;
grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
gap:0 18px;
}
.details-row {
display:flex;align-items:baseline;gap:8px;
padding:5px 0;
border-bottom:1px dotted rgba(148,141,128,.22);
}
.details-key {
flex:0 0 auto;
font-family:var(--serif);
font-size:12px;
letter-spacing:.14em;
color:var(--qing-2);
}
.details-value {
font-size:12.5px;
color:var(--txt);
min-width:0;
}
.section-head-row {
display:flex;align-items:baseline;justify-content:space-between;
gap:12px;
border-bottom:1px solid var(--rule);
padding-bottom:6px;
}
.section-heading {
font-family:var(--serif);
font-size:16px;
letter-spacing:.22em;
color:var(--gold-2);
font-weight:700;
}
.section-count {
font-size:12px;
letter-spacing:.1em;
color:var(--txt-dim);
white-space:nowrap;
}
.timeline-section {display:flex;flex-direction:column;gap:10px}
.timeline-list {
position:relative;
display:flex;flex-direction:column;gap:0;
padding-left:22px;
}
.timeline-list::before {
content:"";position:absolute;left:6px;top:6px;bottom:6px;width:1px;
background:linear-gradient(180deg,var(--gold),rgba(122,35,32,.6),transparent);
}
.timeline-item {
position:relative;
display:grid;
grid-template-columns:74px minmax(0,1fr);
gap:10px;
align-items:baseline;
padding:7px 0;
border-bottom:1px solid rgba(148,141,128,.14);
}
.timeline-item:last-child {border-bottom:0}
.timeline-node {
position:absolute;left:-19px;top:11px;
width:11px;height:11px;
border-radius:50%;
background:radial-gradient(circle at 35% 30%,var(--gold-2),var(--gold) 60%,#7a5f1f);
box-shadow:0 0 0 3px rgba(13,12,15,1),0 0 10px rgba(201,162,74,.6);
}
.timeline-node::after {
content:"";position:absolute;inset:3px;
border:1px solid rgba(13,12,15,.75);
border-radius:50%;
}
.timeline-timecode {
font-family:var(--serif);
font-size:12.5px;
letter-spacing:.12em;
color:var(--gold);
white-space:nowrap;
}
.timeline-label {
font-size:13px;
color:var(--txt-dim);
}
.timeline-item:hover .timeline-label {color:#f0e8d6}
.episodes-section {display:flex;flex-direction:column;gap:10px}
.episode-grid {
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:1px;
background:var(--rule);
border:1px solid var(--rule);
}
.episode-cell {
display:flex;flex-direction:column;gap:5px;
padding:9px 10px 10px;
background:linear-gradient(180deg,rgba(21,19,25,.96),rgba(13,12,15,.96));
transition:.18s;
}
.episode-cell:hover {background:linear-gradient(180deg,rgba(29,26,33,.98),rgba(21,19,25,.98))}
.episode-number {
font-family:var(--serif);
font-size:11.5px;
letter-spacing:.16em;
color:var(--zhu-2);
}
.episode-title {
font-family:var(--serif);
font-size:14px;
letter-spacing:.08em;
color:#efe6d3;
font-weight:700;
}
.episode-summary {
font-size:12px;
line-height:1.62;
color:var(--txt-dim);
}
.episode-duration {
margin-top:auto;
font-size:11px;
letter-spacing:.1em;
color:var(--qing-2);
padding-top:6px;
border-top:1px dotted rgba(148,141,128,.22);
}
.comments-section {display:flex;flex-direction:column;gap:10px}
.comment-list {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:1px;
background:var(--rule);
border:1px solid var(--rule);
}
.comment-item {
display:grid;
grid-template-columns:minmax(0,132px) minmax(0,1fr);
gap:12px;
align-items:start;
padding:10px 12px;
background:linear-gradient(180deg,rgba(21,19,25,.96),rgba(13,12,15,.96));
}
.comment-identity {
display:flex;align-items:center;gap:8px;
min-width:0;
}
.comment-avatar {
flex:0 0 auto;
width:34px;height:34px;
border-radius:50%;
background:
radial-gradient(circle at 40% 30%,rgba(201,162,74,.55),transparent 65%),
linear-gradient(150deg,rgba(74,90,94,.9),rgba(29,26,33,.95));
border:1px solid rgba(201,162,74,.4);
}
.comment-nickname {
font-family:var(--serif);
font-size:12.5px;
letter-spacing:.06em;
color:var(--gold-2);
line-height:1.3;
min-width:0;
}
.comment-body {
font-size:12.5px;
line-height:1.7;
color:var(--txt-dim);
border-left:1px solid rgba(201,162,74,.25);
padding-left:10px;
}
.recommend-region {display:flex;flex-direction:column;gap:9px}
.recommend-head-row {
display:flex;align-items:baseline;justify-content:space-between;
gap:12px;
border-bottom:1px solid var(--rule);
padding-bottom:5px;
}
.recommend-title {
font-family:var(--serif);
font-size:14.5px;
letter-spacing:.2em;
color:var(--gold-2);
font-weight:700;
}
.recommend-count {
font-size:11.5px;
letter-spacing:.1em;
color:var(--qing-2);
white-space:nowrap;
}
.recommend-stack {
display:grid;
grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
gap:1px;
background:var(--rule);
border:1px solid var(--rule);
}
a.recommend-card {
display:flex;flex-direction:column;gap:5px;
padding:8px 9px 10px;
background:linear-gradient(180deg,rgba(21,19,25,.96),rgba(13,12,15,.96));
color:var(--txt);
text-decoration:none;
transition:.18s;
}
a.recommend-card:hover {
background:linear-gradient(180deg,rgba(29,26,33,.99),rgba(21,19,25,.99));
text-decoration:none;
}
.recommend-card img, [data-runtime="recommendation"] img {
width:100%;
aspect-ratio:16 / 10;
height:auto;
object-fit:cover;
display:block;
filter:saturate(.75) contrast(1.05) brightness(.9);
border:1px solid rgba(201,162,74,.22);
}
.recommend-name {
font-family:var(--serif);
font-size:12.5px;
letter-spacing:.06em;
color:#efe6d3;
line-height:1.35;
}
.recommend-blurb {
font-size:11.5px;
line-height:1.55;
color:var(--txt-dim);
}
a.recommend-card:hover .recommend-name {color:var(--gold-2)}
.site-footer {
margin-top:22px;
border-top:1px solid var(--rule);
background:linear-gradient(180deg,rgba(13,12,15,.6),rgba(21,19,25,.95));
}
.footer-inner {
max-width:1400px;margin:0 auto;
padding:16px;
display:flex;flex-direction:column;gap:12px;
}
.footer-nav {
display:flex;flex-wrap:wrap;gap:6px 16px;
padding-bottom:10px;
border-bottom:1px solid rgba(148,141,128,.16);
}
.footer-link {
font-family:var(--serif);
font-size:12.5px;
letter-spacing:.12em;
color:var(--gold);
text-decoration:none;
}
.footer-link:hover {color:#fff;text-decoration:underline}
.friend-links {
display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;
}
.friend-links-label {
font-family:var(--serif);
font-size:12px;
letter-spacing:.16em;
color:var(--qing-2);
}
a.runtime-friend-link {
font-size:12px;
color:var(--txt-dim);
text-decoration:none;
white-space:nowrap;
transition:.16s;
}
a.runtime-friend-link:hover {color:var(--gold-2);text-decoration:underline}
.footer-disclaimer {
font-size:11.5px;
line-height:1.7;
color:#6f6a60;
max-width:96ch;
}
@media (max-width:1080px){.hero-shell {grid-template-columns:minmax(0,250px) minmax(0,1fr)}
.episode-grid {grid-template-columns:repeat(3,minmax(0,1fr))}
.comment-list {grid-template-columns:minmax(0,1fr)}}
@media (max-width:820px){.hero-shell {
grid-template-columns:minmax(0,1fr);
gap:16px;
padding:14px 0 16px;
}
.hero-figure {max-width:320px}
.episode-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
.recommend-stack {grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}}
@media (max-width:600px){.page-main {padding:10px 12px 0;gap:14px}
.header-bar {padding:7px 12px;gap:10px}
a[data-contract="site-name"] {font-size:16px}
.categories-shell {gap:3px 5px}
a.runtime-category {font-size:11.5px;padding:2px 7px}
.hero-figure {max-width:100%;padding:10px 10px 0}
.movie-title {font-size:24px}
.player-controls {gap:4px;padding:5px 6px}
.player-btn {font-size:11px;padding:2px 7px}
.player-progress {flex:1 1 100%}
.player-volume {flex:1 1 60px}
.episode-grid {grid-template-columns:minmax(0,1fr)}
.timeline-item {grid-template-columns:minmax(0,1fr);gap:2px}
.timeline-timecode {font-size:12px}
.comment-item {grid-template-columns:minmax(0,1fr);gap:7px}
.comment-body {border-left:0;border-top:1px solid rgba(201,162,74,.22);padding-left:0;padding-top:6px}
.recommend-stack {grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
.footer-inner {padding:14px 12px}}
@media (max-width:380px){.recommend-stack {grid-template-columns:minmax(0,1fr)}
.cast-card, .cast-avatar {width:68px}
.cast-avatar {height:68px}}

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}