* {margin:0;padding:0;box-sizing:border-box}
:root {
--ink:#0d1110;
--ink-soft:#161d1b;
--ink-line:#243230;
--jade:#2f5d55;
--jade-deep:#1d3d38;
--jade-pale:#7fa79d;
--rouge:#7a1f28;
--rouge-bright:#9e2b35;
--rouge-pale:#c98b90;
--paper:#e8e2d4;
--paper-dim:#c9c2b1;
--gold:#b08d4a;
--gold-dim:#7d6636;
font-size:16px;
}
html {-webkit-text-size-adjust:100%}
body {
font-family:"Heiti SC","Microsoft YaHei","PingFang SC",sans-serif;
background:var(--ink);
color:var(--paper);
line-height:1.5;
overflow-x:hidden;
}
img {display:block;max-width:100%}
a {color:inherit;text-decoration:none}
ul {list-style:none}
h1, h2 {font-family:"Songti SC","SimSun","Noto Serif CJK SC",serif;font-weight:700;letter-spacing:.02em}
button, input, select {font:inherit;color:inherit}
button {background:none;border:none;cursor:pointer}
::selection {background:var(--rouge);color:var(--paper)}
.site-header {
position:sticky;top:0;z-index:60;
background:linear-gradient(180deg,#0b0f0e 0%,#0d1413 100%);
border-bottom:1px solid var(--ink-line);
}
.header-inner {
max-width:1240px;margin:0 auto;
display:flex;align-items:center;gap:18px;
padding:8px 16px;
}
.site-brand {
font-family:"Songti SC","SimSun",serif;
font-size:1.05rem;font-weight:700;letter-spacing:.22em;
color:var(--paper);
padding:4px 0;
border-bottom:2px solid var(--rouge);
transition:color .18s,border-color .18s;
}
a[data-contract="site-name"]:hover {color:var(--gold);border-bottom-color:var(--gold)}
.category-bar {
display:flex;flex-wrap:wrap;gap:4px 6px;
margin-left:auto;
}
.runtime-category {
display:inline-block;
white-space:nowrap;
font-size:.74rem;
letter-spacing:.12em;
color:var(--jade-pale);
padding:3px 10px;
border:1px solid var(--ink-line);
background:rgba(47,93,85,.14);
transition:background .18s,color .18s,border-color .18s;
}
a.runtime-category:hover {
color:var(--paper);
background:var(--rouge);
border-color:var(--rouge);
}
.page-main {
max-width:1240px;margin:0 auto;
padding:0 16px 40px;
}
.overview {
border:1px solid var(--ink-line);
border-top:none;
background:linear-gradient(180deg,#101817 0%,#0d1312 55%,#0b100f 100%);
}
.overview-hero {
display:grid;
grid-template-columns:minmax(0,300px) minmax(0,1fr);
gap:26px;
padding:26px 22px 22px;
align-items:start;
}
.poster-shell {
position:relative;
width:100%;
align-self:start;
}
.poster-image {
width:100%;
aspect-ratio:9 / 16;
object-fit:cover;
border:1px solid var(--gold-dim);
filter:saturate(.82) contrast(1.06);
box-shadow:0 0 0 1px #0b0f0e,0 18px 34px -18px #000;
}
.dowry-chest {
position:absolute;
right:-26px;bottom:-14px;
width:128px;height:96px;
z-index:-1;
background:linear-gradient(160deg,#3a151b 0%,#521a22 45%,#2a1013 100%);
border:1px solid var(--gold-dim);
border-radius:1px;
box-shadow:-10px 14px 26px -12px #000;
}
.chest-lid {
position:absolute;left:-4px;top:-13px;
width:136px;height:16px;
background:linear-gradient(180deg,#5c1f26,#33151a);
border:1px solid var(--gold-dim);
transform:rotate(-3.5deg);
transform-origin:left bottom;
}
.chest-silk {
position:absolute;left:8px;top:6px;
width:112px;height:34px;
background:linear-gradient(120deg,var(--rouge-bright) 0%,#7f1d27 60%,#5c141c 100%);
opacity:.92;
transform:rotate(-2deg);
}
.chest-ledger-corner {
position:absolute;left:16px;top:14px;
width:52px;height:26px;
background:linear-gradient(180deg,var(--paper) 0%,#d8cfb8 100%);
transform:rotate(-6deg);
box-shadow:0 1px 0 #6d5f42;
}
.chest-ledger-corner::after {
content:"";position:absolute;inset:6px 5px;
border-top:1px solid #8a7a56;
border-bottom:1px solid #8a7a56;
}
.overview-headline {
display:flex;flex-direction:column;
gap:12px;
min-width:0;
}
.movie-title {
font-size:clamp(1.5rem,3.4vw,2.15rem);
line-height:1.18;
color:var(--paper);
text-shadow:0 1px 0 #000;
}
.movie-title::after {
content:"";display:block;width:64px;height:2px;
margin-top:10px;background:var(--rouge-bright);
}
.movie-tagline {
font-family:"Songti SC","SimSun",serif;
font-size:.95rem;color:var(--gold);
letter-spacing:.06em;
}
.movie-seo {
font-size:.82rem;color:var(--jade-pale);
line-height:1.7;
padding-left:10px;
border-left:2px solid var(--jade-deep);
}
.overview-actions {
display:flex;flex-wrap:wrap;gap:8px;
margin-top:2px;
}
.action-play {
display:inline-block;
font-size:.86rem;letter-spacing:.14em;
padding:8px 26px;
color:var(--paper);
background:linear-gradient(180deg,var(--rouge-bright),var(--rouge));
border:1px solid #b04a52;
transition:background .18s,color .18s,transform .12s;
}
a.action-play:hover {
background:linear-gradient(180deg,#b63440,#8d222b);
color:#fff;
transform:translateY(-1px);
}
a.action-play:active {transform:translateY(1px)}
.action-collect {
font-size:.82rem;letter-spacing:.12em;
padding:8px 20px;
color:var(--jade-pale);
border:1px solid var(--jade);
background:rgba(47,93,85,.12);
transition:color .18s,border-color .18s,background .18s;
}
.action-collect:hover {color:var(--paper);border-color:var(--gold);background:rgba(176,141,74,.16)}
.player-shell {
position:relative;
width:100%;
border:1px solid var(--ink-line);
background:#050908;
}
.player-shell video {
display:block;
aspect-ratio:16 / 9;
width:100%;
background:#050908;
}
.player-controls {
display:flex;flex-wrap:wrap;align-items:center;gap:6px;
padding:7px 9px;
background:#0a1211;
border-top:1px solid var(--ink-line);
}
.pc-play, .pc-mute, .pc-pip, .pc-fullscreen, .pc-theater, .pc-light {
font-size:.72rem;letter-spacing:.08em;
color:var(--jade-pale);
padding:4px 10px;
border:1px solid var(--ink-line);
background:rgba(47,93,85,.1);
transition:color .15s,background .15s,border-color .15s;
}
.pc-play:hover, .pc-mute:hover, .pc-pip:hover, .pc-fullscreen:hover, .pc-theater:hover, .pc-light:hover {
color:var(--paper);border-color:var(--jade);background:rgba(47,93,85,.3);
}
.pc-play.is-active, .pc-mute.is-active, .pc-pip.is-active, .pc-fullscreen.is-active, .pc-theater.is-active, .pc-light.is-active {
color:var(--paper);border-color:var(--rouge-bright);background:var(--rouge);
}
.pc-progress {
flex:1 1 140px;
min-width:90px;
height:4px;
-webkit-appearance:none;appearance:none;
background:linear-gradient(90deg,var(--rouge-bright),var(--jade-deep));
border-radius:0;cursor:pointer;
}
.pc-progress::-webkit-slider-thumb {
-webkit-appearance:none;appearance:none;
width:10px;height:14px;background:var(--gold);
border:1px solid #000;border-radius:0;
}
.pc-progress::-moz-range-thumb {width:10px;height:14px;background:var(--gold);border:1px solid #000;border-radius:0}
.pc-volume {
flex:0 1 76px;
height:4px;
-webkit-appearance:none;appearance:none;
background:var(--jade-deep);cursor:pointer;
}
.pc-volume::-webkit-slider-thumb {-webkit-appearance:none;appearance:none;width:8px;height:12px;background:var(--jade-pale);border-radius:0}
.pc-volume::-moz-range-thumb {width:8px;height:12px;background:var(--jade-pale);border-radius:0}
.pc-speed {
font-size:.72rem;
padding:3px 4px;
color:var(--jade-pale);
background:#0a1211;
border:1px solid var(--ink-line);
cursor:pointer;
}
.pc-speed option {background:#0a1211;color:var(--paper)}
.player-shell.is-theater {
box-shadow:0 0 0 3px var(--rouge),0 0 60px -10px rgba(158,43,53,.6);
}
body.lights-off .page-main {filter:brightness(.72) contrast(1.05)}
body.lights-off .player-shell {filter:none}
.overview > section {
padding:20px 22px;
border-top:1px solid var(--ink-line);
}
.block-heading {
font-size:1.02rem;
letter-spacing:.16em;
color:var(--paper);
padding-left:11px;
border-left:3px solid var(--rouge-bright);
margin-bottom:14px;
}
.synopsis-body {
column-count:2;
column-gap:26px;
column-rule:1px solid var(--ink-line);
}
.synopsis-para {
font-size:.82rem;line-height:1.85;
color:var(--paper-dim);
margin-bottom:11px;
break-inside:avoid;
}
.synopsis-para:last-child {margin-bottom:0}
.cast-grid {
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:1px;
background:var(--ink-line);
border:1px solid var(--ink-line);
}
.cast-cell {
display:flex;flex-direction:column;
align-items:flex-start;
gap:5px;
padding:11px 12px;
background:#0f1716;
transition:background .18s;
}
.cast-cell:hover {background:#15201e}
.cast-actor {
font-family:"Songti SC","SimSun",serif;
font-size:.92rem;color:var(--paper);
letter-spacing:.05em;
}
.cast-rule {
display:block;width:100%;height:1px;
background:linear-gradient(90deg,var(--gold),rgba(176,141,74,.15));
}
.cast-role {font-size:.72rem;color:var(--jade-pale);letter-spacing:.06em}
.episode-status {padding-bottom:8px}
.status-rows {
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:10px;
}
.status-row {
display:flex;flex-direction:column;gap:3px;
padding:8px 10px;
border:1px solid var(--ink-line);
border-top:2px solid var(--jade);
}
.status-key {font-size:.68rem;letter-spacing:.14em;color:var(--jade-pale)}
.status-val {font-family:"Songti SC","SimSun",serif;font-size:1.05rem;color:var(--paper)}
.details-grid {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:1px;
background:var(--ink-line);
border:1px solid var(--ink-line);
}
.detail-item {
display:flex;align-items:baseline;gap:9px;
padding:8px 11px;
background:#0f1716;
}
.detail-key {
flex:0 0 auto;
font-size:.68rem;letter-spacing:.14em;
color:var(--jade-pale);
}
.detail-val {
font-size:.8rem;color:var(--paper-dim);
line-height:1.4;
}
.timeline-section {
max-width:1240px;margin:0 auto;
padding:24px 16px 6px;
}
.timeline-track {
display:flex;gap:12px;
overflow-x:auto;
padding-bottom:14px;
scroll-snap-type:x proximity;
-webkit-overflow-scrolling:touch;
}
.timeline-track::-webkit-scrollbar {height:7px}
.timeline-track::-webkit-scrollbar-track {background:#0a100f;border:1px solid var(--ink-line)}
.timeline-track::-webkit-scrollbar-thumb {background:var(--rouge);border:1px solid #000}
.timeline-card {
flex:0 0 168px;
scroll-snap-align:start;
border:1px solid var(--ink-line);
background:#0f1716;
padding:7px;
display:flex;flex-direction:column;gap:6px;
transition:border-color .18s,background .18s;
}
.timeline-card:hover {border-color:var(--gold);background:#141e1c}
.timeline-frame {
position:relative;
width:100%;
aspect-ratio:16 / 10;
background:
linear-gradient(115deg,rgba(47,93,85,.85) 0%,rgba(29,61,56,.6) 42%,rgba(122,31,40,.85) 100%);
filter:saturate(.7) contrast(1.05);
border:1px solid #0a100f;
overflow:hidden;
}
.timeline-frame::before {
content:"";position:absolute;inset:0;
background:
linear-gradient(180deg,rgba(232,226,212,.16),transparent 55%),
repeating-linear-gradient(90deg,rgba(0,0,0,.22) 0 1px,transparent 1px 11px);
}
.timeline-frame::after {
content:"";position:absolute;right:5px;top:5px;
width:22px;height:14px;
background:var(--paper);
opacity:.75;
transform:rotate(-5deg);
}
.timeline-timecode {
font-size:.62rem;letter-spacing:.16em;
color:var(--gold);
}
.timeline-label {
font-size:.7rem;line-height:1.6;
color:var(--paper-dim);
}
.episodes-section {
max-width:1240px;margin:0 auto;
padding:20px 16px 4px;
}
.episode-list {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:1px;
background:var(--ink-line);
border:1px solid var(--ink-line);
}
.episode-row {
display:grid;
grid-template-columns:46px minmax(0,1fr) auto;
grid-template-areas:
"num title dur"
"num sum   sum";
gap:2px 10px;
padding:9px 12px;
background:#0f1716;
border-left:2px solid transparent;
transition:background .18s,border-color .18s;
}
.episode-row:hover {background:var(--rouge);border-left-color:var(--gold)}
.episode-number {
grid-area:num;
font-family:"Songti SC","SimSun",serif;
font-weight:700;
font-size:1.16rem;
line-height:1.15;
color:var(--gold);
align-self:start;
}
.episode-row:hover .episode-number {color:var(--paper)}
.episode-title {
grid-area:title;
font-size:.86rem;
color:var(--paper);
letter-spacing:.06em;
align-self:center;
}
.episode-row:hover .episode-title {color:#fff}
.episode-duration {
grid-area:dur;
font-size:.66rem;
letter-spacing:.1em;
color:var(--jade-pale);
align-self:center;
}
.episode-row:hover .episode-duration {color:var(--rouge-pale)}
.episode-summary {
grid-area:sum;
font-size:.7rem;
line-height:1.6;
color:#8e9a93;
padding-left:0;
}
.episode-row:hover .episode-summary {color:rgba(255,240,235,.82)}
.comments-section {
max-width:1240px;margin:0 auto;
padding:22px 16px 4px;
}
.comment-columns {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:12px;
align-items:start;
}
.comment-column {
display:flex;flex-direction:column;gap:12px;
}
.comment-card {
border:1px solid var(--ink-line);
border-top:2px solid var(--jade);
background:#0f1716;
padding:11px 12px 12px;
display:grid;
grid-template-columns:26px minmax(0,1fr);
gap:6px 10px;
transition:border-color .18s,transform .12s;
}
.comment-card:hover {border-top-color:var(--rouge-bright);transform:translateY(-2px)}
.comment-avatar {
grid-row:1 / span 2;
width:26px;height:26px;
align-self:start;
}
.avatar-a {background:linear-gradient(135deg,var(--jade),var(--jade-deep))}
.avatar-b {background:linear-gradient(135deg,var(--rouge-bright),var(--rouge))}
.avatar-c {background:linear-gradient(135deg,var(--gold),var(--gold-dim))}
.avatar-d {background:repeating-linear-gradient(45deg,var(--jade-deep) 0 4px,#0f1716 4px 8px)}
.avatar-e {background:conic-gradient(from 40deg,var(--rouge) 0 50%,var(--gold) 50% 100%)}
.comment-nickname {
grid-column:2;
font-size:.74rem;
letter-spacing:.08em;
color:var(--gold);
}
.comment-text {
grid-column:2;
font-size:.74rem;
line-height:1.75;
color:var(--paper-dim);
}
.recommend-region {
max-width:1240px;margin:0 auto;
padding:18px 16px 0;
}
.recommend-heading {
writing-mode:vertical-rl;
text-orientation:upright;
letter-spacing:.24em;
font-size:.8rem;
color:var(--gold);
margin-bottom:10px;
height:auto;
padding:0;
border:none;
}
.recommend-row {
display:grid;
grid-template-columns:repeat(5,minmax(0,1fr));
gap:10px;
align-items:start;
}
.recommend-item {
display:flex;flex-direction:column;gap:6px;
border:1px solid var(--ink-line);
background:#0f1716;
padding:7px;
transition:border-color .18s,background .18s,transform .12s;
}
[data-runtime="recommendation"] img {
width:100%;
height:auto;
aspect-ratio:16 / 10;
object-fit:cover;
filter:saturate(.78) contrast(1.05);
border:1px solid #0a100f;
}
[data-runtime="recommendation"]:hover {
border-color:var(--gold);
background:#141e1c;
transform:translateY(-2px);
}
.recommend-name {
font-size:.76rem;
color:var(--paper);
letter-spacing:.04em;
line-height:1.45;
}
.recommend-blurb {
font-size:.66rem;
line-height:1.6;
color:#86938c;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}
.site-footer {
max-width:1240px;margin:0 auto;
padding:22px 16px 34px;
border-top:1px solid var(--ink-line);
display:flex;flex-direction:column;gap:12px;
}
.footer-disclaimer {
font-size:.66rem;line-height:1.7;
color:#6f7c76;
max-width:820px;
}
.footer-nav {
display:flex;flex-wrap:wrap;gap:14px;
}
a[data-contract="footer-home"], a[data-contract="footer-sitemap"] {
font-size:.74rem;letter-spacing:.14em;
color:var(--jade-pale);
border-bottom:1px solid transparent;
transition:color .18s,border-color .18s;
}
a[data-contract="footer-home"]:hover, a[data-contract="footer-sitemap"]:hover {
color:var(--gold);border-bottom-color:var(--gold);
}
.friend-links {
display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;
}
.friend-links-label {
font-size:.66rem;letter-spacing:.18em;
color:var(--rouge-pale);
padding-right:10px;
border-right:1px solid var(--ink-line);
}
.runtime-friend-link {
font-size:.68rem;letter-spacing:.06em;
color:#7d8a84;
transition:color .18s;
}
a.runtime-friend-link:hover {color:var(--jade-pale)}
@media (max-width:1024px){.overview-hero {grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:20px}
.cast-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
.details-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
.status-rows {grid-template-columns:repeat(2,minmax(0,1fr))}
.recommend-row {grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.header-inner {gap:10px;flex-wrap:wrap}
.category-bar {margin-left:0;width:100%}
.overview-hero {
grid-template-columns:minmax(0,1fr);
gap:22px;
padding:20px 14px 16px;
}
.poster-shell {max-width:230px}
.dowry-chest {right:-16px;width:104px;height:78px}
.chest-lid {width:112px}
.chest-silk {width:88px}
.chest-ledger-corner {width:42px;height:22px}
.overview > section {padding:16px 14px}
.synopsis-body {column-count:1;column-rule:none}
.cast-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
.status-rows {grid-template-columns:repeat(2,minmax(0,1fr))}
.details-grid {grid-template-columns:minmax(0,1fr)}
.episode-list {grid-template-columns:minmax(0,1fr)}
.comment-columns {grid-template-columns:minmax(0,1fr)}
.recommend-row {grid-template-columns:repeat(2,minmax(0,1fr))}
.recommend-heading {
writing-mode:horizontal-tb;
letter-spacing:.16em;
}
.timeline-section, .episodes-section, .comments-section, .recommend-region {padding-left:14px;padding-right:14px}}
@media (max-width:480px){.poster-shell {max-width:180px}
.dowry-chest {display:none}
.movie-title {font-size:1.32rem}
.player-controls {gap:5px;padding:6px}
.pc-play, .pc-mute, .pc-pip, .pc-fullscreen, .pc-theater, .pc-light {font-size:.66rem;padding:3px 7px}
.episode-row {grid-template-columns:38px minmax(0,1fr);grid-template-areas:"num title" "num dur" "sum sum";gap:3px 8px}
.episode-duration {justify-self:start}
.recommend-row {grid-template-columns:minmax(0,1fr)}
.cast-grid {grid-template-columns:minmax(0,1fr)}}

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}