* {box-sizing:border-box;margin:0;padding:0}
html {-webkit-text-size-adjust:100%}
img, video {display:block;max-width:100%}
button, input, select {font:inherit;color:inherit}
ol, ul {list-style:none}
figure {margin:0}
a {color:inherit;text-decoration:none}
:root {
--ink:#0e1116;
--ink-2:#161a21;
--panel:#12161c;
--panel-2:#181d25;
--line:#2b323d;
--line-soft:#232a34;
--gold:#b8944f;
--gold-dim:#8a6f3c;
--gold-bright:#d8b268;
--text:#c9cfd8;
--text-dim:#8b93a0;
--text-faint:#666e7b;
--cold:#5f6b7a;
--radius:3px;
--font:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
}
body {
background:var(--ink);
color:var(--text);
font-family:var(--font);
font-size:14px;
line-height:1.45;
letter-spacing:.01em;
-webkit-font-smoothing:antialiased;
}
::-webkit-scrollbar {height:8px;width:8px}
::-webkit-scrollbar-track {background:var(--ink-2)}
::-webkit-scrollbar-thumb {background:#2f3742;border:2px solid var(--ink-2)}
.site-header {
position:sticky;top:0;z-index:40;
background:rgba(14,17,22,.94);
border-bottom:1px solid var(--line);
backdrop-filter:blur(6px);
}
.header-inner {
display:flex;align-items:center;gap:18px;
padding:10px clamp(12px,3vw,32px);
min-height:52px;flex-wrap:wrap;
}
a[data-contract="site-name"].brand-mark {
font-size:17px;font-weight:800;letter-spacing:.06em;
color:var(--gold-bright);text-decoration:none;
white-space:nowrap;flex:0 0 auto;
}
a[data-contract="site-name"].brand-mark:hover {color:#f0d49a}
.category-nav {
display:flex;flex-wrap:wrap;gap:6px 4px;
flex:1 1 auto;min-width:0;
}
a.runtime-category {
display:inline-block;
white-space:nowrap;
font-size:12px;font-weight:600;letter-spacing:.14em;
color:var(--text-dim);
padding:4px 10px;border:1px solid var(--line);
text-decoration:none;
transition:color .15s,border-color .15s,background .15s;
}
a.runtime-category:hover {
color:var(--gold-bright);border-color:var(--gold-dim);
background:rgba(184,148,79,.07);
text-decoration:none;
}
.page-main {
display:block;
padding:0 clamp(12px,3vw,32px) 40px;
}
.block-heading {
font-size:15px;font-weight:800;letter-spacing:.18em;
color:var(--gold);
text-transform:none;
margin:0 0 12px;
padding-left:10px;
border-left:3px solid var(--gold);
line-height:1.2;
}
section[data-fragment="timeline"], section[data-fragment="episodes"], section[data-fragment="comments"], section[data-fragment="recommendations"] {
margin-top:34px;
}
.hero-panel {
display:flex;flex-direction:column;
background:linear-gradient(180deg,var(--panel) 0%,#0f1318 100%);
border:1px solid var(--line);
border-top:1px solid var(--gold-dim);
margin-top:26px;
padding:clamp(14px,2vw,24px);
position:relative;
overflow:hidden;
}
.hero-panel::before {
content:"";position:absolute;inset:0;pointer-events:none;
background:
radial-gradient(120% 80% at 8% 0%,rgba(184,148,79,.10),transparent 55%),
radial-gradient(90% 70% at 100% 100%,rgba(95,107,122,.16),transparent 60%);
}
.hero-media {
position:relative;z-index:1;
display:grid;
grid-template-columns:minmax(0,180px) minmax(0,1fr);
gap:clamp(14px,2.4vw,30px);
align-items:start;
}
.hero-still {
align-self:start;
border:1px solid var(--line);
background:#0a0d11;
}
.hero-still img {
width:100%;height:auto;
aspect-ratio:9 / 16;
object-fit:cover;
filter:grayscale(.15) contrast(1.06) brightness(.94);
}
.hero-copy {min-width:0;display:flex;flex-direction:column;gap:10px}
.movie-title {
font-size:clamp(22px,3.4vw,34px);
font-weight:800;letter-spacing:.02em;line-height:1.15;
color:#eef1f5;
}
.movie-tagline {
font-size:13px;letter-spacing:.1em;color:var(--gold);
border-left:2px solid var(--gold-dim);
padding-left:9px;
}
.movie-seo {
font-size:12.5px;line-height:1.62;color:var(--text-dim);
max-width:62ch;
}
.hero-actions {
display:flex;flex-wrap:wrap;gap:8px;margin-top:2px;
}
.btn-play, .btn-ghost {
cursor:pointer;border-radius:var(--radius);
font-size:12.5px;font-weight:700;letter-spacing:.1em;
padding:8px 18px;border:1px solid var(--gold-dim);
transition:background .15s,color .15s,border-color .15s,opacity .15s;
}
.btn-play {background:var(--gold);color:#12161c;border-color:var(--gold)}
.btn-play:hover {background:var(--gold-bright);border-color:var(--gold-bright)}
.btn-ghost {background:transparent;color:var(--gold)}
.btn-ghost:hover {background:rgba(184,148,79,.12);color:var(--gold-bright)}
.player-shell {
position:relative;z-index:1;
margin-top:20px;
width:100%;
border:1px solid var(--line);
background:#05070a;
}
.player-shell video {
width:100%;height:auto;aspect-ratio:16 / 9;
background:#05070a;object-fit:contain;
}
.player-controls {
display:flex;flex-wrap:wrap;align-items:center;gap:8px;
padding:8px 10px;
border-top:1px solid var(--line-soft);
background:var(--ink-2);
}
.player-controls button, .player-controls select {
cursor:pointer;
background:transparent;
border:1px solid var(--line);
color:var(--text-dim);
font-size:11.5px;letter-spacing:.06em;
padding:5px 10px;border-radius:var(--radius);
transition:color .15s,border-color .15s;
}
.player-controls button:hover, .player-controls select:hover {color:var(--gold-bright);border-color:var(--gold-dim)}
.player-controls input[type="range"] {
flex:1 1 110px;min-width:90px;
height:3px;background:var(--line);border-radius:2px;
appearance:none;-webkit-appearance:none;cursor:pointer;
}
.player-controls input[type="range"]::-webkit-slider-thumb {
-webkit-appearance:none;width:11px;height:11px;border-radius:50%;
background:var(--gold);border:none;
}
.player-controls input[type="range"]::-moz-range-thumb {
width:11px;height:11px;border-radius:50%;background:var(--gold);border:none;
}
.player-controls select {background:var(--ink-2)}
.player-shell.is-theater {
border-color:var(--gold-dim);
box-shadow:0 0 0 1px rgba(184,148,79,.25),0 14px 40px rgba(0,0,0,.6);
}
.hero-panel.is-lights-off::before {opacity:.25}
.hero-panel.is-lights-off {background:#07090c}
.player-shell.is-theater .player-controls {border-top-color:var(--gold-dim)}
.overview-body {
position:relative;z-index:1;
display:grid;
grid-template-columns:repeat(12,minmax(0,1fr));
gap:18px 20px;
margin-top:24px;
}
.cast-block {grid-column:span 12}
.synopsis-block {grid-column:span 12}
.episode-status {grid-column:span 4}
.details-block {grid-column:span 8}
.cast-rail {
display:grid;
grid-template-columns:repeat(6,minmax(0,1fr));
gap:10px;
}
.cast-card {
display:flex;flex-direction:column;gap:6px;
border:1px solid var(--line-soft);
background:var(--panel-2);
padding:8px;
}
.cast-portrait {
overflow:hidden;background:#0a0d11;
border:1px solid var(--line-soft);
}
.cast-portrait img {
width:100%;height:auto;
aspect-ratio:3 / 5;
object-fit:cover;
object-position:center top;
filter:grayscale(.35) contrast(1.05) brightness(.92);
}
.cast-names {
display:flex;flex-direction:column;gap:1px;
}
.cast-name {
font-size:12.5px;font-weight:700;color:#e4e8ee;letter-spacing:.04em;
line-height:1.2;
}
.cast-role {
font-size:11px;color:var(--gold-dim);letter-spacing:.06em;line-height:1.2;
}
.synopsis-flow {
column-count:3;column-gap:22px;
column-rule:1px solid var(--line-soft);
}
.synopsis-flow p {
font-size:12.5px;line-height:1.7;color:var(--text-dim);
margin:0 0 10px;
break-inside:avoid;
}
.synopsis-flow p:first-child {
color:var(--text);
}
.synopsis-flow p:first-child::first-letter {
color:var(--gold);font-weight:800;
}
.status-grid {
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;
}
.status-item {
border:1px solid var(--line-soft);
border-left:2px solid var(--gold-dim);
background:var(--panel-2);
padding:9px 11px;
}
.status-item dt {
font-size:11px;letter-spacing:.14em;color:var(--text-faint);margin-bottom:3px;
}
.status-item dd {
font-size:17px;font-weight:800;color:var(--gold-bright);letter-spacing:.02em;
}
.details-grid {
display:grid;
grid-template-columns:repeat(auto-fill,minmax(110px,1fr));
gap:1px;
background:var(--line-soft);
border:1px solid var(--line-soft);
}
.detail-item {
background:var(--panel-2);
padding:8px 10px;
display:flex;flex-direction:column;gap:2px;
}
.detail-item dt {
font-size:10.5px;letter-spacing:.12em;color:var(--text-faint);
}
.detail-item dd {
font-size:12.5px;font-weight:600;color:var(--text);letter-spacing:.02em;
}
.timeline-section {
border-top:1px solid var(--line);
padding-top:20px;
}
.timeline-rail {
display:flex;gap:0;
overflow-x:auto;
padding:16px 4px 14px;
scrollbar-width:thin;
position:relative;
border-bottom:1px solid var(--line-soft);
}
.timeline-node {
position:relative;
flex:0 0 auto;
min-width:170px;
padding:16px 18px 0 0;
display:flex;flex-direction:column;gap:5px;
}
.timeline-node::before {
content:"";position:absolute;top:6px;left:0;right:0;
height:1px;background:var(--gold-dim);
}
.timeline-node::after {
content:"";position:absolute;top:2px;left:0;
width:9px;height:9px;background:var(--ink);
border:1px solid var(--gold);
transform:rotate(45deg);
}
.timeline-node:last-child::before {right:0}
.node-time {
font-size:11.5px;font-weight:700;letter-spacing:.14em;
color:var(--gold-dim);
}
.node-label {
font-size:12.5px;line-height:1.45;color:var(--text-dim);
max-width:190px;
}
.timeline-node {opacity:.5;transition:opacity .2s}
.timeline-node:hover {opacity:.85}
.timeline-node.is-current {opacity:1}
.timeline-node.is-current::after {
background:var(--gold-bright);border-color:var(--gold-bright);
box-shadow:0 0 0 4px rgba(184,148,79,.15);
}
.timeline-node.is-current::before {background:var(--gold-bright)}
.timeline-node.is-current .node-time {color:var(--gold-bright)}
.timeline-node.is-current .node-label {color:#eef1f5;font-weight:600}
.episode-grid {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:8px;
}
.episode-card {
position:relative;
display:grid;
grid-template-columns:auto minmax(0,1fr) auto;
align-items:baseline;
gap:10px;
border:1px solid var(--line-soft);
border-left:2px solid var(--line);
background:var(--panel-2);
padding:9px 12px;
transition:border-color .15s,background .15s;
}
.episode-card:hover {
border-left-color:var(--gold);
background:#1c222b;
}
.episode-card.is-current {
border-left-color:var(--gold-bright);
background:linear-gradient(90deg,rgba(184,148,79,.10),transparent 60%);
}
.episode-number {
font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--gold-dim);
white-space:nowrap;
}
.episode-title {
font-size:13px;font-weight:700;color:#e4e8ee;letter-spacing:.03em;
line-height:1.3;min-width:0;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.episode-duration {
font-size:10.5px;letter-spacing:.08em;color:var(--text-faint);
white-space:nowrap;
}
.episode-summary {
grid-column:1 / -1;
font-size:12px;line-height:1.6;color:var(--text-dim);
max-height:0;opacity:0;overflow:hidden;
transition:max-height .25s ease,opacity .2s ease,margin .25s ease;
margin:0;
}
.episode-card:hover .episode-summary, .episode-card:focus-within .episode-summary {
max-height:140px;opacity:1;margin-top:6px;
}
.episode-card.is-current .episode-duration {color:var(--gold)}
.comments-section {
border-top:1px solid var(--line);
padding-top:20px;
}
.comment-stream {
columns:2;column-gap:16px;
}
.comment-card {
break-inside:avoid;
border:1px solid var(--line-soft);
background:var(--panel-2);
padding:10px 12px;
margin:0 0 10px;
}
.comment-short {
border-left:2px solid var(--gold-dim);
}
.comment-long {
column-span:all;
border-left:2px solid var(--gold);
background:linear-gradient(90deg,rgba(184,148,79,.08),var(--panel-2) 45%);
padding:12px 14px;
}
.comment-nick {
display:block;
font-size:11.5px;font-weight:700;letter-spacing:.08em;
color:var(--gold);
margin-bottom:5px;
}
.comment-text {
font-size:12.5px;line-height:1.62;color:var(--text-dim);
}
.comment-long .comment-text {
color:var(--text);
font-size:13px;
}
.recommend-region {
margin-top:26px;
}
.recommend-grid {
display:grid;gap:8px;
}
.recommend-grid-4 {grid-template-columns:repeat(4,minmax(0,1fr))}
.recommend-grid-3 {grid-template-columns:repeat(3,minmax(0,1fr))}
a.recommend-card {
display:flex;flex-direction:column;gap:6px;
border:1px solid var(--line-soft);
background:var(--panel-2);
padding:8px;
text-decoration:none;color:inherit;
transition:border-color .15s,background .15s,transform .15s;
}
a.recommend-card:hover {
border-color:var(--gold-dim);background:#1c222b;
transform:translateY(-2px);
text-decoration:none;
}
[data-runtime="recommendation"] img.recommend-pic {
width:100%;height:auto;
aspect-ratio:16 / 9;
object-fit:cover;
background:#0a0d11;
border:1px solid var(--line-soft);
filter:grayscale(.2) brightness(.93) contrast(1.05);
}
.recommend-name {
font-size:12.5px;font-weight:800;letter-spacing:.03em;
color:var(--gold-bright);line-height:1.3;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
a.recommend-card:hover .recommend-name {color:#f0d49a}
.recommend-blurb {
font-size:11px;line-height:1.35;color:var(--text-faint);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.site-footer {
margin-top:34px;
border-top:1px solid var(--line);
background:#0b0e12;
padding:22px clamp(12px,3vw,32px) 30px;
display:flex;flex-direction:column;gap:14px;
}
.disclaimer {
font-size:11.5px;line-height:1.6;color:var(--text-faint);
max-width:80ch;
}
.footer-links {
display:flex;flex-wrap:wrap;gap:8px 18px;
}
a[data-contract="footer-home"], a[data-contract="footer-sitemap"] {
font-size:12px;font-weight:700;letter-spacing:.1em;
color:var(--gold-dim);text-decoration:none;
border-bottom:1px solid transparent;
transition:color .15s,border-color .15s;
}
a[data-contract="footer-home"]:hover, a[data-contract="footer-sitemap"]:hover {
color:var(--gold-bright);border-bottom-color:var(--gold-dim);
text-decoration:none;
}
.friend-nav {
display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;
}
.friend-label {
font-size:11px;letter-spacing:.14em;color:var(--text-faint);
}
a.runtime-friend-link {
font-size:11.5px;color:var(--cold);text-decoration:none;
transition:color .15s;
}
a.runtime-friend-link:hover {color:var(--gold);text-decoration:none}
.data-player-action {pointer-events:auto}
.player-shell.is-theater {width:100%}
.player .play {}
.player .pause {}
.player .mute {}
.player .volume {}
.player .progress {}
.player .speed {}
.player .timeupdate {}
.player .pip {}
.player .fullscreen {}
.player .theater {}
.player .light {}
.player .input {}
.player .click {}
.player .change {}
.movie-overview {}
.is-theater {}
.is-lights-off {}
@media (max-width:1100px){.cast-rail {grid-template-columns:repeat(3,minmax(0,1fr))}
.synopsis-flow {column-count:2}
.recommend-grid-4 {grid-template-columns:repeat(2,minmax(0,1fr))}
.recommend-grid-3 {grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){.overview-body {grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.cast-block {grid-column:span 6}
.synopsis-block {grid-column:span 6}
.episode-status {grid-column:span 3}
.details-block {grid-column:span 3}
.comment-stream {columns:2}
.episode-grid {grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.hero-media {grid-template-columns:minmax(0,140px) minmax(0,1fr)}
.movie-seo {font-size:12px}
.episode-grid {grid-template-columns:minmax(0,1fr)}
.recommend-grid-4 {grid-template-columns:repeat(2,minmax(0,1fr))}
.recommend-grid-3 {grid-template-columns:repeat(2,minmax(0,1fr))}
.comment-stream {columns:1}
.comment-long {column-span:none}}
@media (max-width:620px){.header-inner {gap:10px}
.hero-media {grid-template-columns:minmax(0,1fr);gap:14px}
.hero-still {max-width:150px}
.overview-body {grid-template-columns:minmax(0,1fr)}
.cast-block, .synopsis-block, .episode-status, .details-block {grid-column:auto}
.cast-rail {grid-template-columns:repeat(3,minmax(0,1fr))}
.synopsis-flow {column-count:1;column-rule:none}
.status-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
.timeline-node {min-width:145px}
.recommend-grid-4, .recommend-grid-3 {grid-template-columns:repeat(2,minmax(0,1fr))}
.player-controls {gap:6px}
.player-controls button, .player-controls select {font-size:11px;padding:5px 8px}}
@media (max-width:400px){.cast-rail {grid-template-columns:repeat(2,minmax(0,1fr))}
.recommend-grid-4, .recommend-grid-3 {grid-template-columns:minmax(0,1fr)}
.hero-actions {width:100%}
.btn-play, .btn-ghost {flex:1 1 auto;text-align:center}}

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}