*, *::before, *::after {box-sizing:border-box;margin:0;padding:0}
:root {
--indigo:#0d1a24;
--indigo-deep:#08131c;
--moss:#12251f;
--moss-2:#162d26;
--bone:#e8e2d4;
--bone-dim:#b9b2a1;
--copper:#9c6b3f;
--copper-2:#c08a55;
--rust:#7a4a2a;
--line:rgba(192,138,85,.32);
--stitch:rgba(232,226,212,.28);
--gap:14px;
--gap-tight:8px;
--sec:30px;
--r:3px;
}
html {-webkit-text-size-adjust:100%}
body {
background:
radial-gradient(1200px 700px at 12% -8%,rgba(156,107,63,.13),transparent 60%),
radial-gradient(900px 600px at 96% 4%,rgba(22,45,38,.9),transparent 62%),
linear-gradient(180deg,var(--indigo) 0%,var(--indigo-deep) 46%,var(--moss) 100%);
background-attachment:fixed;
color:var(--bone);
font-family:"Helvetica Neue",Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
font-size:14px;
line-height:1.62;
letter-spacing:.01em;
padding:0 16px 46px;
min-height:100%;
overflow-x:hidden;
}
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:0;cursor:pointer}
h1, h2 {font-family:"Songti SC","SimSun","Noto Serif CJK SC",Georgia,serif;font-weight:600;letter-spacing:.06em;line-height:1.24}
video {display:block;max-width:100%}
.site-header {
display:flex;align-items:center;justify-content:space-between;gap:var(--gap);
flex-wrap:wrap;
padding:16px 2px 14px;
border-bottom:1px solid var(--line);
position:relative;
max-width:1220px;margin:0 auto;
}
.site-header::after {
content:"";position:absolute;left:0;bottom:-1px;width:56px;height:1px;background:var(--copper-2);
}
a[data-contract="site-name"] {
font-family:"Songti SC","SimSun",Georgia,serif;
font-size:20px;letter-spacing:.34em;color:var(--bone);
text-decoration:none;
padding-left:.34em;
white-space:nowrap;
}
a[data-contract="site-name"]:hover {color:var(--copper-2)}
.category-nav {
display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;
justify-content:flex-end;
}
a.runtime-category {
display:inline-block;
font-size:12px;letter-spacing:.14em;
color:var(--bone-dim);
text-decoration:none;
white-space:nowrap;
padding:3px 9px;
border:1px solid var(--line);
border-radius:var(--r);
transition:color .18s,border-color .18s,background-color .18s;
}
a.runtime-category:hover {
color:var(--indigo-deep);
background:var(--copper-2);
border-color:var(--copper-2);
}
.page-main {max-width:1220px;margin:0 auto;display:block}
.hero {
display:grid;
grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
grid-template-areas:
"poster stitch"
"poster player"
"cast cast";
column-gap:26px;row-gap:18px;
padding:26px 0 var(--sec);
border-bottom:1px solid var(--line);
align-items:start;
}
.hero-button {
grid-area:poster;
position:relative;
align-self:start;
justify-self:start;
width:100%;
max-width:290px;
padding:12px 12px 12px 12px;
background:linear-gradient(160deg,rgba(232,226,212,.07),rgba(156,107,63,.09));
border:1px solid var(--line);
border-radius:var(--r);
box-shadow:0 18px 40px -26px rgba(0,0,0,.9);
}
.hero-button::before {
content:"";position:absolute;inset:6px;border:1px dashed var(--stitch);border-radius:2px;pointer-events:none;
}
.poster-img {
width:100%;
aspect-ratio:9 / 16;
object-fit:cover;
border-radius:2px;
filter:saturate(.82) contrast(1.06) brightness(.94);
}
.hero-stitch {
grid-area:stitch;
position:relative;
padding-left:22px;
align-self:start;
}
.hero-stitch::before {
content:"";position:absolute;left:0;top:4px;bottom:4px;width:1px;
background:repeating-linear-gradient(180deg,var(--copper-2) 0 5px,transparent 5px 11px);
}
.movie-title {
font-size:clamp(26px,4.4vw,44px);
letter-spacing:.22em;
color:var(--bone);
text-shadow:0 1px 0 rgba(0,0,0,.5);
}
.movie-tagline {
margin-top:10px;
font-size:13px;
letter-spacing:.3em;
color:var(--copper-2);
}
.movie-seo {
margin-top:14px;
font-size:13px;
line-height:1.85;
color:var(--bone-dim);
max-width:46ch;
}
.player-shell {
grid-area:player;
align-self:start;
position:relative;
border:1px solid var(--line);
border-radius:var(--r);
background:rgba(8,19,28,.72);
padding:8px;
}
.player-video {
width:100%;
aspect-ratio:16 / 9;
object-fit:cover;
background:#04101a;
border-radius:2px;
}
.player-controls {
display:flex;flex-wrap:wrap;gap:6px;
margin-top:8px;
padding-top:8px;
border-top:1px dashed var(--stitch);
}
.ctrl-btn {
font-size:12px;letter-spacing:.1em;
color:var(--bone-dim);
border:1px solid var(--line);
border-radius:var(--r);
padding:3px 10px;
background:rgba(232,226,212,.03);
transition:color .16s,border-color .16s,background-color .16s;
white-space:nowrap;
}
.ctrl-btn:hover, .ctrl-btn:focus-visible {
color:var(--indigo-deep);background:var(--copper-2);border-color:var(--copper-2);outline:none;
}
.player-shell.play .ctrl-btn[data-player-action="play"], .player-shell.is-muted .ctrl-btn[data-player-action="mute"], .player-shell.is-muted .ctrl-btn[data-player-action="volume"], .player-shell.is-seeking .ctrl-btn[data-player-action="progress"], .player-shell.is-speeding .ctrl-btn[data-player-action="speed"], .player-shell.is-theater .ctrl-btn[data-player-action="theater"], .player-shell.is-lights-off .ctrl-btn[data-player-action="light"] {
color:var(--copper-2);border-color:var(--copper-2);background:rgba(156,107,63,.16);
}
.player-shell.is-lights-off {background:#02080d}
.player-shell.is-lights-off .player-video {filter:brightness(.62) contrast(1.14)}
.player-shell.is-theater {box-shadow:0 0 0 1px var(--copper),0 26px 60px -34px #000}
.cast-band {
grid-area:cast;
margin-top:6px;
padding-top:16px;
border-top:1px solid var(--line);
}
.cast-heading {
font-size:14px;letter-spacing:.42em;color:var(--copper-2);
margin-bottom:12px;
}
.cast-list {
display:flex;flex-wrap:wrap;gap:10px;
align-items:stretch;
}
.cast-card {
display:flex;flex-direction:column;align-items:center;gap:5px;
flex:0 0 auto;
width:96px;
padding:8px 6px 9px;
background:linear-gradient(180deg,rgba(232,226,212,.06),rgba(232,226,212,.02));
border:1px solid var(--line);
border-radius:var(--r);
transition:border-color .18s,transform .18s;
}
.cast-card:hover {border-color:var(--copper-2);transform:translateY(-2px)}
.cast-img {
width:64px;height:64px;object-fit:cover;
border-radius:2px;
filter:grayscale(.42) contrast(1.08) brightness(.96);
border:1px solid rgba(232,226,212,.16);
}
.cast-name {
font-size:12.5px;letter-spacing:.08em;color:var(--bone);text-align:center;
}
.cast-role {
font-size:11px;letter-spacing:.04em;color:var(--bone-dim);text-align:center;
}
.synopsis-block {
padding:var(--sec) 0;
border-bottom:1px solid var(--line);
max-width:78ch;
}
.synopsis-heading, .detail-heading, .timeline-heading, .episodes-heading, .comments-heading {
font-size:16px;letter-spacing:.34em;color:var(--bone);
position:relative;padding-left:18px;margin-bottom:14px;
}
.synopsis-heading::before, .detail-heading::before, .timeline-heading::before, .episodes-heading::before, .comments-heading::before {
content:"";position:absolute;left:0;top:.42em;width:9px;height:9px;border-radius:50%;
background:var(--bone);box-shadow:inset 0 0 0 2px rgba(8,19,28,.92),0 0 0 1px var(--copper);
}
.synopsis-para {
font-size:13.5px;line-height:1.9;color:var(--bone-dim);
margin-bottom:10px;
padding-left:18px;
border-left:1px dotted var(--stitch);
}
.synopsis-para:last-child {margin-bottom:0}
.episode-status {
display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px;
margin:var(--sec) 0;
padding:10px 14px;
border:1px solid var(--line);
border-left:2px solid var(--copper);
border-radius:var(--r);
background:rgba(232,226,212,.035);
font-size:12.5px;letter-spacing:.12em;
}
.status-label {color:var(--copper-2)}
.status-value {color:var(--bone);font-family:"Songti SC","SimSun",Georgia,serif;font-size:16px;letter-spacing:.16em}
.status-current {
color:var(--bone-dim);
margin-left:auto;
position:relative;padding-left:14px;
}
.status-current::before {
content:"";position:absolute;left:0;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;
background:var(--copper-2);
}
.detail-list {
padding:0 0 var(--sec);
border-bottom:1px solid var(--line);
}
.detail-grid {
display:grid;
grid-template-columns:repeat(auto-fill,minmax(148px,1fr));
gap:1px;
background:var(--line);
border:1px solid var(--line);
border-radius:var(--r);
overflow:hidden;
}
.detail-item {
display:flex;align-items:baseline;gap:8px;
padding:8px 11px;
background:rgba(8,19,28,.86);
min-width:0;
}
.detail-item dt {
font-size:11px;letter-spacing:.14em;color:var(--copper-2);white-space:nowrap;flex:0 0 auto;
}
.detail-item dd {
font-size:12.5px;color:var(--bone-dim);min-width:0;overflow-wrap:anywhere;
}
.timeline-section {
padding:var(--sec) 0;
border-bottom:1px solid var(--line);
}
.timeline-stitch {
position:relative;
padding-left:26px;
display:flex;flex-direction:column;gap:0;
}
.timeline-stitch::before {
content:"";position:absolute;left:6px;top:6px;bottom:6px;width:1px;
background:repeating-linear-gradient(180deg,var(--copper-2) 0 6px,transparent 6px 13px);
}
.timeline-node {
position:relative;
padding:0 0 12px 0;
}
.timeline-node:last-child {padding-bottom:0}
.timeline-node::before {
content:"";position:absolute;left:-26px;top:5px;
width:13px;height:13px;border-radius:50%;
background:radial-gradient(circle at 34% 32%,var(--bone) 0 22%,var(--bone-dim) 24% 40%,#6d6656 42% 100%);
box-shadow:0 0 0 1px var(--copper),0 2px 6px -2px #000;
}
.timeline-node::after {
content:"";position:absolute;left:-22px;top:9px;width:5px;height:5px;border-radius:50%;
background:rgba(8,19,28,.9);box-shadow:inset 0 0 0 1px rgba(232,226,212,.35);
}
.timeline-time {
display:inline-block;
font-family:"Songti SC","SimSun",Georgia,serif;
font-size:12.5px;letter-spacing:.2em;color:var(--copper-2);
margin-right:10px;
}
.timeline-label {
display:inline;
font-size:13px;line-height:1.75;color:var(--bone-dim);
}
.episodes-section {
padding:var(--sec) 0;
border-bottom:1px solid var(--line);
}
.episode-grid {
display:grid;
grid-template-columns:repeat(auto-fill,minmax(170px,1fr));
gap:8px;
align-items:start;
}
.episode-cell {
position:relative;
display:flex;flex-direction:column;gap:3px;
padding:9px 11px 10px;
border:1px solid var(--line);
border-radius:var(--r);
background:rgba(232,226,212,.028);
overflow:hidden;
transition:border-color .18s,background-color .18s;
}
.episode-cell::after {
content:"";position:absolute;right:0;bottom:0;width:10px;height:10px;
background:linear-gradient(135deg,transparent 50%,rgba(156,107,63,.5) 50%);
}
.episode-cell:hover, .episode-cell:focus-within {
border-color:var(--copper);
background:rgba(156,107,63,.1);
}
.episode-number {
font-size:11px;letter-spacing:.2em;color:var(--copper-2);
}
.episode-title {
font-family:"Songti SC","SimSun",Georgia,serif;
font-size:14px;letter-spacing:.08em;color:var(--bone);
}
.episode-duration {
font-size:11px;letter-spacing:.08em;color:var(--bone-dim);
}
.episode-summary {
font-size:12px;line-height:1.72;color:var(--bone-dim);
max-height:0;opacity:0;overflow:hidden;
transition:max-height .28s ease,opacity .22s ease,margin-top .28s ease;
margin-top:0;
}
.episode-cell:hover .episode-summary, .episode-cell:focus-within .episode-summary {
max-height:220px;opacity:1;margin-top:6px;
padding-top:7px;
border-top:1px dotted var(--stitch);
}
.comments-section {
padding:var(--sec) 0;
border-bottom:1px solid var(--line);
}
.comments-grid {
display:grid;
grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
gap:14px 22px;
align-items:start;
}
.comment-item {
display:flex;flex-direction:column;gap:4px;
padding:9px 12px;
background:linear-gradient(180deg,rgba(232,226,212,.05),rgba(232,226,212,.015));
border:1px solid var(--line);
border-radius:var(--r);
}
.comment-nick {
font-size:11px;letter-spacing:.16em;color:var(--copper-2);
}
.comment-text {
font-size:13px;line-height:1.8;color:var(--bone-dim);
padding-top:6px;
border-top:1px dashed var(--stitch);
}
.recommend-drawer {
padding:0 0 var(--sec);
margin-top:var(--sec);
border-top:1px solid var(--line);
}
.recommend-drawer + .recommend-drawer {margin-top:0;padding-top:0}
.drawer-handle {
display:flex;align-items:center;gap:10px;
font-size:14px;letter-spacing:.26em;color:var(--bone);
padding:12px 0 10px;
border-bottom:1px dashed var(--stitch);
position:relative;
}
.drawer-handle::before {
content:"";width:22px;height:3px;flex:0 0 auto;border-radius:2px;
background:linear-gradient(90deg,var(--copper-2),rgba(156,107,63,.2));
}
.drawer-handle::after {
content:"";position:absolute;right:0;top:50%;width:34px;height:1px;
background:repeating-linear-gradient(90deg,var(--copper-2) 0 4px,transparent 4px 8px);
}
.drawer-strip {
display:grid;
grid-auto-flow:column;
grid-auto-columns:minmax(232px,268px);
gap:10px;
overflow-x:auto;
overflow-y:hidden;
padding:12px 2px 14px;
scroll-snap-type:x proximity;
scrollbar-width:thin;
scrollbar-color:var(--copper) rgba(232,226,212,.08);
}
.drawer-strip::-webkit-scrollbar {height:6px}
.drawer-strip::-webkit-scrollbar-track {background:rgba(232,226,212,.07);border-radius:3px}
.drawer-strip::-webkit-scrollbar-thumb {background:rgba(156,107,63,.75);border-radius:3px}
a.rec-item {
display:flex;flex-direction:column;gap:6px;
padding:8px;
border:1px solid var(--line);
border-radius:var(--r);
background:rgba(8,19,28,.72);
scroll-snap-align:start;
color:var(--bone-dim);
text-decoration:none;
transition:border-color .18s,transform .18s,background-color .18s;
}
a.rec-item:hover {
border-color:var(--copper-2);
background:rgba(156,107,63,.1);
transform:translateY(-2px);
}
[data-runtime="recommendation"] img {
width:100%;
height:132px;
aspect-ratio:16 / 9;
object-fit:cover;
border-radius:2px;
filter:saturate(.8) contrast(1.05) brightness(.92);
}
[data-runtime="recommendation"] [data-runtime="name"] {
font-family:"Songti SC","SimSun",Georgia,serif;
font-size:13.5px;letter-spacing:.08em;color:var(--bone);
}
[data-runtime="recommendation"] [data-runtime="blurb"] {
font-size:11.5px;line-height:1.7;color:var(--bone-dim);
}
.site-footer {
max-width:1220px;margin:0 auto;
padding:24px 0 0;
border-top:1px solid var(--line);
display:flex;flex-direction:column;gap:12px;
}
.footer-nav {
display:flex;flex-wrap:wrap;gap:8px 18px;
}
a[data-contract="footer-home"], a[data-contract="footer-sitemap"] {
font-size:12px;letter-spacing:.18em;color:var(--bone-dim);
text-decoration:none;
padding-bottom:2px;
border-bottom:1px dotted var(--stitch);
transition:color .16s,border-color .16s;
}
a[data-contract="footer-home"]:hover, a[data-contract="footer-sitemap"]:hover {
color:var(--copper-2);border-color:var(--copper-2);
}
.friend-nav {
display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;
}
.friend-label {
font-size:11px;letter-spacing:.22em;color:var(--copper-2);
padding-right:10px;
border-right:1px dotted var(--stitch);
}
a.runtime-friend-link {
font-size:11.5px;letter-spacing:.06em;color:var(--bone-dim);
text-decoration:none;white-space:nowrap;
transition:color .16s;
}
a.runtime-friend-link:hover {color:var(--copper-2);text-decoration:underline}
.footer-disclaimer {
font-size:11px;line-height:1.8;color:rgba(185,178,161,.7);
max-width:80ch;
padding-top:10px;
border-top:1px dashed var(--stitch);
}
@media (max-width:900px){.hero {
grid-template-columns:minmax(0,1fr);
grid-template-areas:
"poster"
"stitch"
"player"
"cast";
row-gap:18px;
}
.hero-button {max-width:236px;justify-self:center}
.hero-stitch {padding-left:18px}
.movie-seo {max-width:none}}
@media (max-width:620px){body {padding:0 12px 36px;font-size:13.5px}
.site-header {padding:13px 0 11px;gap:10px}
a[data-contract="site-name"] {font-size:17px;letter-spacing:.24em}
.category-nav {justify-content:flex-start}
.hero {padding-top:18px;row-gap:14px}
.hero-button {max-width:200px;padding:9px}
.hero-stitch {padding-left:15px}
.movie-title {letter-spacing:.16em}
.movie-tagline {letter-spacing:.2em;font-size:12px}
.hero-button::before {inset:4px}
.player-shell {padding:6px}
.player-controls {gap:5px}
.ctrl-btn {font-size:11.5px;padding:3px 8px}
.cast-list {gap:8px}
.cast-card {width:84px;padding:7px 5px 8px}
.cast-img {width:56px;height:56px}
.synopsis-heading, .detail-heading, .timeline-heading, .episodes-heading, .comments-heading {margin-bottom:11px}
.synopsis-para {font-size:13px;line-height:1.84}
.episode-status {padding:9px 11px;gap:6px 12px}
.status-current {margin-left:0}
.detail-grid {grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
.timeline-stitch {padding-left:22px}
.timeline-node::before {left:-22px;top:4px;width:12px;height:12px}
.timeline-node::after {left:-18px;top:8px}
.episode-grid {grid-template-columns:repeat(auto-fill,minmax(142px,1fr));gap:7px}
.episode-summary {font-size:11.5px}
.comments-grid {grid-template-columns:minmax(0,1fr);gap:11px}
.drawer-strip {grid-auto-columns:minmax(196px,220px)}
[data-runtime="recommendation"] img {height:108px}
.friend-label {border-right:0;padding-right:0}}
@media (max-width:380px){.episode-grid {grid-template-columns:minmax(0,1fr)}
.cast-card {width:76px}
.cast-img {width:50px;height:50px}}

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}