* {margin:0;padding:0;box-sizing:border-box}
:root {
--bronze:#b0793a;
--bronze-dim:#6e4a22;
--bronze-deep:#3a2712;
--sunset:#c8442a;
--sunset-deep:#7a2314;
--neon:#2fd6ff;
--ink:#0d0b09;
--ink-2:#161210;
--ink-3:#1f1915;
--bone:#e8ddc8;
--bone-dim:#a99b83;
--line:#33261a;
}
html {-webkit-text-size-adjust:100%}
body {
background:var(--ink);
color:var(--bone);
font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
font-weight:700;
line-height:1.45;
letter-spacing:.01em;
overflow-x:hidden;
}
img, video {display:block;max-width:100%}
a {color:inherit;text-decoration:none}
ul, ol {list-style:none}
button, input {font:inherit;color:inherit}
.site-header {
position:sticky;top:0;z-index:60;
background:linear-gradient(180deg,rgba(13,11,9,.97),rgba(13,11,9,.86));
border-bottom:1px solid var(--line);
backdrop-filter:blur(6px);
}
.site-header-bar {
display:flex;align-items:center;justify-content:space-between;
gap:12px;padding:8px 14px;
}
a[data-contract="site-name"] {
font-size:18px;font-weight:900;letter-spacing:.14em;
color:var(--bronze);text-decoration:none;
text-transform:uppercase;
border-left:4px solid var(--sunset);
padding-left:8px;
}
a[data-contract="site-name"]:hover {color:var(--sunset)}
.site-nav {display:flex;flex-wrap:wrap;gap:2px}
a.nav-link {
font-size:13px;font-weight:800;letter-spacing:.08em;
color:var(--bone-dim);text-decoration:none;
padding:5px 9px;
border:1px solid transparent;
text-transform:uppercase;
}
a.nav-link:hover {color:var(--neon);border-color:var(--neon);background:rgba(47,214,255,.07)}
.category-bar {
display:flex;flex-wrap:wrap;gap:4px;
padding:6px 14px 8px;
border-top:1px solid rgba(51,38,26,.6);
}
a.runtime-category {
display:inline-block;
white-space:nowrap;
font-size:12px;font-weight:800;letter-spacing:.06em;
color:var(--bronze);
text-decoration:none;
padding:3px 9px;
background:var(--ink-3);
border:1px solid var(--line);
clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
}
a.runtime-category:hover {color:var(--ink);background:var(--bronze);border-color:var(--bronze)}
.page-main {
display:block;
padding:10px 12px 4px;
max-width:1400px;
margin:0 auto;
}
.movie-overview {margin-bottom:14px}
.hero-shell {
display:grid;
grid-template-columns:minmax(0,2fr) minmax(0,1fr);
gap:12px;
align-items:start;
border:1px solid var(--line);
background:
radial-gradient(120% 90% at 12% 8%,rgba(200,68,42,.22),transparent 60%),
radial-gradient(90% 80% at 90% 100%,rgba(47,214,255,.12),transparent 62%),
linear-gradient(160deg,var(--ink-2),var(--ink));
padding:12px;
}
.hero-figure {min-width:0}
.poster-frame {
position:relative;
border:1px solid var(--bronze-dim);
background:var(--ink-3);
overflow:hidden;
box-shadow:0 0 0 1px rgba(0,0,0,.6),0 14px 40px rgba(0,0,0,.6);
}
.poster-frame img {
width:100%;
height:auto;
object-fit:cover;
display:block;
filter:saturate(.92) contrast(1.06);
}
.poster-frame::after {
content:"";
position:absolute;inset:0;
pointer-events:none;
background:
linear-gradient(90deg,rgba(200,68,42,.28) 0 3px,transparent 3px),
repeating-linear-gradient(0deg,rgba(0,0,0,.14) 0 1px,transparent 1px 3px);
mix-blend-mode:multiply;
}
.hero-copy {
display:flex;flex-direction:column;
gap:10px;
min-width:0;
align-self:start;
padding-top:2px;
}
.movie-title {
font-size:clamp(26px,4.4vw,54px);
font-weight:900;
line-height:1;
letter-spacing:.02em;
color:var(--bone);
text-shadow:0 0 0 var(--sunset),3px 3px 0 rgba(200,68,42,.55),6px 6px 0 rgba(0,0,0,.5);
}
.movie-tagline {
font-size:clamp(12px,1.3vw,15px);
font-weight:700;
letter-spacing:.05em;
color:var(--bronze);
border-left:3px solid var(--sunset);
padding-left:8px;
}
.hero-actions {display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.action-btn {
display:inline-block;
font-size:13px;font-weight:900;letter-spacing:.14em;
padding:9px 16px;
text-decoration:none;
border:1px solid var(--bronze);
clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
transition:background .12s linear,color .12s linear;
}
a.action-btn.action-play {
background:var(--sunset);
color:#fff2e6;
border-color:var(--sunset);
text-decoration:none;
}
a.action-btn.action-play:hover {background:var(--neon);border-color:var(--neon);color:var(--ink)}
a.action-btn.action-follow {
background:transparent;
color:var(--bronze);
text-decoration:none;
}
a.action-btn.action-follow:hover {background:var(--bronze);color:var(--ink)}
.hero-status-rail {
display:flex;flex-direction:column;
gap:10px;
min-width:0;
align-self:start;
}
.episode-status {
border:1px solid var(--line);
background:linear-gradient(180deg,rgba(58,39,18,.55),rgba(13,11,9,.2));
padding:8px 10px;
display:flex;flex-direction:column;gap:6px;
}
.status-current, .status-total, .status-mode {
display:flex;align-items:baseline;justify-content:space-between;
gap:8px;
border-bottom:1px dashed rgba(176,121,58,.35);
padding-bottom:5px;
}
.status-mode {border-bottom:0;padding-bottom:0}
.status-label {
font-size:11px;font-weight:800;letter-spacing:.16em;
color:var(--bone-dim);
white-space:nowrap;
}
.status-value {
font-size:15px;font-weight:900;letter-spacing:.04em;
color:var(--bronze);
white-space:nowrap;
}
.status-current .status-value {
font-size:30px;line-height:1;
color:var(--sunset);
text-shadow:0 0 12px rgba(200,68,42,.55);
}
.timeline {
border:1px solid var(--line);
background:var(--ink-2);
padding:9px 10px;
min-width:0;
}
.timeline-heading {
font-size:13px;font-weight:900;letter-spacing:.2em;
color:var(--bone);
padding-bottom:6px;
margin-bottom:8px;
border-bottom:2px solid var(--sunset-deep);
text-transform:uppercase;
}
.timeline-track {
display:grid;
grid-auto-flow:column;
grid-auto-columns:minmax(150px,1fr);
gap:10px;
overflow-x:auto;
padding-bottom:8px;
scrollbar-width:thin;
scrollbar-color:var(--bronze) var(--ink-3);
}
.timeline-track::-webkit-scrollbar {height:6px}
.timeline-track::-webkit-scrollbar-track {background:var(--ink-3)}
.timeline-track::-webkit-scrollbar-thumb {background:var(--bronze)}
.timeline-node {
position:relative;
padding:22px 6px 4px 4px;
border-left:2px solid rgba(176,121,58,.4);
min-width:0;
}
.timeline-node::before {
content:"";
position:absolute;left:-9px;top:2px;
width:16px;height:16px;
background:var(--bronze);
clip-path:polygon(50% 0,100% 38%,100% 100%,0 100%,0 38%);
box-shadow:0 0 0 2px var(--ink-2),0 0 10px rgba(176,121,58,.5);
}
.timeline-node:last-child::before {
background:var(--sunset);
clip-path:polygon(0 0,100% 0,100% 100%,50% 76%,0 100%);
box-shadow:0 0 0 2px var(--ink-2),0 0 16px rgba(200,68,42,.85);
}
.timeline-node:last-child {
border-left:2px solid var(--sunset);
background:linear-gradient(90deg,rgba(200,68,42,.18),transparent);
}
.node-timecode {
display:block;
font-size:11px;font-weight:900;letter-spacing:.1em;
color:var(--neon);
margin-bottom:3px;
font-variant-numeric:tabular-nums;
}
.node-label {
display:block;
font-size:12px;font-weight:700;line-height:1.4;
color:var(--bone);
}
.overview-body {
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,320px);
gap:12px;
align-items:start;
margin-top:12px;
}
.overview-main {display:flex;flex-direction:column;gap:12px;min-width:0}
.synopsis {
border:1px solid var(--line);
background:var(--ink-2);
padding:10px 12px;
}
.synopsis-heading, .cast-heading, .details-heading, .episodes-heading, .comments-heading, .recommendation-heading {
font-size:14px;font-weight:900;letter-spacing:.2em;
color:var(--bone);
text-transform:uppercase;
margin-bottom:8px;
padding-left:9px;
border-left:4px solid var(--sunset);
}
.synopsis-paragraph {
font-size:13px;font-weight:600;line-height:1.72;
color:#cfc2ab;
margin-bottom:8px;
}
.synopsis-paragraph:last-child {margin-bottom:0}
.synopsis-paragraph::first-letter {
font-weight:900;
color:var(--bronze);
}
.cast {
border:1px solid var(--line);
background:var(--ink-2);
padding:10px 12px;
}
.cast-track {
display:grid;
grid-auto-flow:column;
grid-auto-columns:minmax(150px,1fr);
gap:8px;
overflow-x:auto;
padding-bottom:8px;
scrollbar-width:thin;
scrollbar-color:var(--bronze) var(--ink-3);
}
.cast-track::-webkit-scrollbar {height:6px}
.cast-track::-webkit-scrollbar-track {background:var(--ink-3)}
.cast-track::-webkit-scrollbar-thumb {background:var(--bronze)}
.cast-card {
display:flex;flex-direction:column;gap:5px;
padding:8px 9px;
background:linear-gradient(180deg,rgba(58,39,18,.5),rgba(13,11,9,.35));
border:1px solid var(--line);
border-top:3px solid var(--bronze);
align-self:start;
}
.cast-card:nth-child(even) {border-top-color:var(--neon)}
.cast-name {
font-size:15px;font-weight:900;letter-spacing:.04em;
color:var(--bone);
white-space:nowrap;
}
.cast-role {
font-size:11px;font-weight:600;line-height:1.45;
color:var(--bone-dim);
}
.details {
border:1px solid var(--line);
background:var(--ink-2);
padding:10px 12px;
min-width:0;
align-self:start;
}
.details-list {display:flex;flex-direction:column}
.detail-row {
display:flex;align-items:baseline;gap:10px;
padding:5px 0;
border-bottom:1px dashed rgba(51,38,26,.9);
}
.detail-row:last-child {border-bottom:0}
.detail-key {
flex:0 0 74px;
font-size:11px;font-weight:800;letter-spacing:.1em;
color:var(--bone-dim);
}
.detail-value {
font-size:12px;font-weight:700;
color:var(--bronze);
text-align:right;
margin-left:auto;
}
.player-shell {
margin-top:12px;
border:1px solid var(--line);
background:var(--ink-2);
}
.player-stage {
width:100%;
background:#000;
border-bottom:1px solid var(--line);
}
.player-stage video {
width:100%;
height:auto;
display:block;
background:#000;
}
.player-controls {
display:flex;flex-wrap:wrap;align-items:center;gap:6px;
padding:8px 10px;
background:linear-gradient(180deg,var(--ink-3),var(--ink-2));
}
.ctrl-btn {
font-size:12px;font-weight:800;letter-spacing:.06em;
padding:5px 10px;
background:var(--ink);
color:var(--bronze);
border:1px solid var(--bronze-dim);
cursor:pointer;
clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
}
.ctrl-btn:hover {background:var(--bronze);color:var(--ink);border-color:var(--bronze)}
.ctrl-btn[data-player-action="play"] {background:var(--sunset);color:#fff2e6;border-color:var(--sunset)}
.ctrl-btn[data-player-action="play"]:hover {background:var(--neon);border-color:var(--neon);color:var(--ink)}
.ctrl-range {
-webkit-appearance:none;appearance:none;
flex:1 1 120px;min-width:90px;
height:5px;
background:var(--ink);
border:1px solid var(--line);
cursor:pointer;
}
.ctrl-range[data-player-action="volume"] {flex:0 1 90px;min-width:70px}
.ctrl-range::-webkit-slider-thumb {
-webkit-appearance:none;appearance:none;
width:12px;height:14px;
background:var(--neon);
clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
cursor:pointer;
}
.ctrl-range::-moz-range-thumb {
width:12px;height:14px;border:0;
background:var(--neon);
clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
cursor:pointer;
}
.ctrl-range::-moz-range-track {height:5px;background:var(--ink)}
.player .play .light .mute .pip .progress .speed .theater .timeupdate .volume .fullscreen .input .click {}
body.is-theater .player-shell {
position:relative;z-index:50;
background:#000;
border-color:var(--sunset);
box-shadow:0 0 0 100vmax rgba(0,0,0,.86);
}
body.is-theater .player-stage {max-width:none}
body.is-lights-off .page-main {filter:brightness(.42) saturate(.6)}
body.is-lights-off .player-shell {filter:none;position:relative;z-index:50}
.episodes {
margin-top:16px;
border-top:3px solid var(--sunset-deep);
padding-top:12px;
}
.episode-grid {
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:2px;
background:var(--line);
border:1px solid var(--line);
}
.episode-card {
position:relative;
background:var(--ink-2);
padding:12px 10px 10px;
min-width:0;
display:flex;flex-direction:column;gap:5px;
align-self:start;
overflow:hidden;
}
.episode-card::before {
content:"";
position:absolute;top:0;right:0;left:0;height:2px;
background:linear-gradient(90deg,var(--bronze),transparent);
}
.episode-card:hover {background:var(--ink-3)}
.episode-card:hover::before {background:linear-gradient(90deg,var(--neon),transparent)}
.episode-number {
position:absolute;top:2px;right:6px;
font-size:44px;font-weight:900;line-height:1;
color:rgba(176,121,58,.28);
font-variant-numeric:tabular-nums;
pointer-events:none;
}
.episode-title {
font-size:14px;font-weight:900;letter-spacing:.03em;
color:var(--bone);
position:relative;z-index:1;
padding-right:28px;
}
.episode-summary {
font-size:11.5px;font-weight:600;line-height:1.5;
color:var(--bone-dim);
position:relative;z-index:1;
}
.episode-duration {
font-size:11px;font-weight:900;letter-spacing:.1em;
color:var(--sunset);
margin-top:auto;
}
.comments {
margin-top:16px;
border-top:3px solid var(--bronze-deep);
padding-top:12px;
}
.comment-stack {
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:8px;
align-items:start;
}
.comment-card {
background:var(--ink-3);
border:1px solid var(--line);
border-left:4px solid var(--bronze);
padding:9px 10px;
display:flex;flex-direction:column;gap:5px;
min-width:0;
align-self:start;
box-shadow:0 6px 16px rgba(0,0,0,.5);
}
.comment-card:nth-child(3n/**/+1) {margin-left:0}
.comment-card:nth-child(3n/**/+2) {margin-left:10px;border-left-color:var(--neon)}
.comment-card:nth-child(3n) {margin-left:20px;border-left-color:var(--sunset)}
.comment-nickname {
font-size:12px;font-weight:900;letter-spacing:.06em;
color:var(--bronze);
white-space:nowrap;
overflow:hidden;text-overflow:ellipsis;
}
.comment-text {
font-size:11.5px;font-weight:600;line-height:1.55;
color:#cfc2ab;
}
.recommendation-region {
margin-top:16px;
border-top:3px solid var(--bronze-deep);
padding-top:12px;
}
.recommendation-heading {
font-size:16px;
font-weight:900;
letter-spacing:.16em;
color:var(--bone);
}
.recommendation-grid {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:6px;
}
.recommendation-card {
display:flex;flex-direction:column;gap:4px;
background:var(--ink-2);
border:1px solid var(--line);
padding:6px;
min-width:0;
align-self:start;
transition:border-color .12s linear,transform .12s linear;
}
.recommendation-card img {
width:100%;
aspect-ratio:16 / 9;
height:auto;
object-fit:cover;
background:var(--ink-3);
display:block;
filter:saturate(.9) contrast(1.05);
}
.recommendation-name {
font-size:12.5px;font-weight:900;letter-spacing:.03em;
color:var(--bone);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.recommendation-blurb {
font-size:10.5px;font-weight:600;line-height:1.45;
color:var(--bone-dim);
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
a.recommendation-card:hover {
border-color:var(--sunset);
transform:translateY(-2px);
}
a.recommendation-card:hover .recommendation-name {color:var(--neon)}
.site-footer {
margin-top:20px;
border-top:1px solid var(--line);
background:var(--ink-2);
padding:14px 14px 20px;
display:flex;flex-direction:column;gap:10px;
}
.footer-links {display:flex;flex-wrap:wrap;gap:10px}
a[data-contract="footer-home"] {
font-size:12px;font-weight:800;letter-spacing:.1em;
color:var(--bronze);text-decoration:none;
padding:3px 0;border-bottom:1px solid transparent;
}
a[data-contract="footer-home"]:hover {color:var(--neon);border-bottom-color:var(--neon)}
a[data-contract="footer-sitemap"] {
font-size:12px;font-weight:800;letter-spacing:.1em;
color:var(--bone-dim);text-decoration:none;
padding:3px 0;border-bottom:1px solid transparent;
}
a[data-contract="footer-sitemap"]:hover {color:var(--neon);border-bottom-color:var(--neon)}
.friend-links {
display:flex;flex-wrap:wrap;align-items:center;gap:6px;
padding-top:8px;
border-top:1px dashed rgba(51,38,26,.9);
}
.friend-links-label {
font-size:11px;font-weight:900;letter-spacing:.16em;
color:var(--bone-dim);
white-space:nowrap;
margin-right:4px;
}
a.runtime-friend-link {
font-size:11px;font-weight:700;
color:var(--bronze-dim);text-decoration:none;
padding:2px 6px;
background:var(--ink-3);
border:1px solid var(--line);
white-space:nowrap;
}
a.runtime-friend-link:hover {color:var(--neon);border-color:var(--neon)}
.footer-disclaimer {
font-size:10.5px;font-weight:600;line-height:1.6;
color:#6f6353;
max-width:900px;
}
@media (max-width:1080px){.episode-grid {grid-template-columns:repeat(3,minmax(0,1fr))}
.comment-stack {grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:920px){.hero-shell {grid-template-columns:minmax(0,1fr)}
.overview-body {grid-template-columns:minmax(0,1fr)}
.recommendation-grid {grid-template-columns:repeat(3,minmax(0,1fr))}
.episode-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
.comment-stack {grid-template-columns:repeat(2,minmax(0,1fr))}
.comment-card:nth-child(3n/**/+2), .comment-card:nth-child(3n) {margin-left:0}}
@media (max-width:640px){.page-main {padding:8px 8px 4px}
.site-header-bar {padding:7px 10px}
.category-bar {padding:5px 10px 7px}
.movie-title {font-size:clamp(24px,8vw,36px)}
.hero-shell {padding:9px}
.recommendation-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
.episode-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
.comment-stack {grid-template-columns:minmax(0,1fr)}
.episode-number {font-size:36px}
.ctrl-range {flex:1 1 100%}
.player-controls {gap:5px}}
@media (max-width:420px){.recommendation-grid {grid-template-columns:minmax(0,1fr)}
.episode-grid {grid-template-columns:minmax(0,1fr)}
.timeline-track {grid-auto-columns:minmax(126px,1fr)}
.cast-track {grid-auto-columns:minmax(126px,1fr)}
.detail-key {flex:0 0 62px}}

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}