* {margin:0;padding:0;box-sizing:border-box}
:root {
--rust:#8a4a2b;
--ochre:#a9762f;
--iron:#3b3a38;
--iron-dark:#232220;
--iron-black:#141312;
--dark-red:#6e1f1c;
--cold-blue:#3fd0e0;
--cold-blue-dim:rgba(63,208,224,.35);
--sand:#c9b08a;
--sand-dim:#9b8a6e;
--text:#d8cfc1;
--text-dim:#8f8577;
--rule:rgba(169,118,47,.28);
--gap:10px;
}
html {-webkit-text-size-adjust:100%}
body {
background:
radial-gradient(120% 60% at 50% 0%,#2c2621 0%,var(--iron-dark) 45%,var(--iron-black) 100%);
color:var(--text);
font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,sans-serif;
font-size:14px;
line-height:1.5;
font-weight:400;
letter-spacing:.02em;
min-height:100vh;
}
img, video {display:block;max-width:100%}
a {color:inherit;text-decoration:none}
ul, ol {list-style:none}
button, input, select {font:inherit;color:inherit}
h1, h2 {font-weight:800;line-height:1.15}
.section-heading {
font-size:15px;
font-weight:900;
letter-spacing:.22em;
color:var(--sand);
text-transform:uppercase;
padding-bottom:5px;
margin-bottom:var(--gap);
border-bottom:2px solid var(--rule);
position:relative;
}
.section-heading::after {
content:"";
position:absolute;
left:0;bottom:-2px;
width:44px;height:2px;
background:var(--ochre);
}
.section-heading::before {
content:"//";
color:var(--dark-red);
margin-right:8px;
font-weight:900;
letter-spacing:0;
}
.site-header {
display:flex;
align-items:center;
justify-content:space-between;
gap:var(--gap);
flex-wrap:wrap;
padding:10px 16px;
background:linear-gradient(180deg,var(--iron-dark),rgba(20,19,18,.92));
border-bottom:1px solid var(--rule);
position:sticky;
top:0;
z-index:40;
backdrop-filter:blur(4px);
}
.site-brand {
font-size:18px;
font-weight:900;
letter-spacing:.14em;
color:var(--sand);
text-transform:uppercase;
padding-left:12px;
position:relative;
text-shadow:0 1px 0 rgba(0,0,0,.8),0 0 10px rgba(169,118,47,.35);
}
.site-brand::before {
content:"";
position:absolute;
left:0;top:50%;
transform:translateY(-50%) skewY(-14deg);
width:5px;height:20px;
background:linear-gradient(180deg,var(--ochre),var(--dark-red));
}
.site-brand:hover {color:var(--cold-blue)}
.category-bar {
display:flex;
flex-wrap:wrap;
gap:6px;
justify-content:flex-end;
}
.runtime-category {
display:inline-block;
white-space:nowrap;
font-size:12px;
font-weight:700;
letter-spacing:.08em;
color:var(--text-dim);
padding:4px 12px;
background:rgba(255,255,255,.03);
border:1px solid var(--rule);
clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);
transition:.18s;
}
.runtime-category:hover {
color:var(--iron-black);
background:var(--ochre);
border-color:var(--ochre);
}
.page-main {
padding:14px 16px 8px;
max-width:1280px;
margin:0 auto;
display:flex;
flex-direction:column;
gap:22px;
}
.overview-block {
background:linear-gradient(160deg,rgba(59,58,56,.55),rgba(20,19,18,.7));
border:1px solid var(--rule);
border-radius:2px;
padding:14px;
position:relative;
overflow:hidden;
}
.overview-block::before {
content:"";
position:absolute;
inset:0;
pointer-events:none;
background:
repeating-linear-gradient(115deg,transparent 0 22px,rgba(169,118,47,.05) 22px 23px);
mix-blend-mode:overlay;
}
.overview-heading {
position:relative;
margin-bottom:14px;
padding-bottom:10px;
border-bottom:1px solid var(--rule);
}
.movie-title {
font-size:clamp(26px,6vw,44px);
font-weight:900;
letter-spacing:.06em;
color:var(--sand);
text-transform:uppercase;
text-shadow:2px 2px 0 rgba(110,31,28,.5),0 0 22px rgba(169,118,47,.25);
background:linear-gradient(92deg,var(--sand) 0%,var(--ochre) 55%,var(--rust) 100%);
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
}
.movie-tagline-line {
margin-top:6px;
font-size:13px;
font-weight:600;
letter-spacing:.14em;
color:var(--text-dim);
border-left:3px solid var(--dark-red);
padding-left:10px;
}
.overview-body {
display:grid;
grid-template-columns:minmax(0,1fr);
gap:16px;
align-items:start;
}
.poster-figure {
position:relative;
border:1px solid var(--rule);
background:var(--iron-black);
line-height:0;
max-width:340px;
width:100%;
}
.poster-figure::after {
content:"";
position:absolute;
inset:0;
box-shadow:inset 0 0 40px rgba(0,0,0,.7);
pointer-events:none;
}
.poster-img {
width:100%;
height:auto;
display:block;
aspect-ratio:9 / 16;
object-fit:cover;
filter:saturate(.85) contrast(1.08);
}
.overview-info {
display:flex;
flex-direction:column;
gap:12px;
min-width:0;
}
.player-shell {
position:relative;
background:#000;
border:1px solid var(--rule);
width:100%;
min-width:0;
overflow:hidden;
}
.player-video {
display:block;
width:100%;
background:#000;
}
.player-controls {
display:flex;
flex-wrap:wrap;
align-items:center;
gap:6px;
padding:8px;
background:linear-gradient(180deg,rgba(35,34,32,.95),rgba(20,19,18,.98));
border-top:1px solid var(--rule);
}
.player-btn {
font-size:11px;
font-weight:800;
letter-spacing:.1em;
color:var(--text);
background:rgba(255,255,255,.04);
border:1px solid var(--rule);
padding:4px 9px;
cursor:pointer;
clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
transition:.15s;
}
.player-btn:hover {background:var(--ochre);color:var(--iron-black);border-color:var(--ochre)}
.player-btn.is-active {background:var(--cold-blue);color:var(--iron-black);border-color:var(--cold-blue);box-shadow:0 0 12px var(--cold-blue-dim)}
.player-btn.is-muted {background:var(--dark-red);color:var(--sand);border-color:var(--dark-red)}
.player-range {
flex:1 1 90px;
min-width:70px;
height:4px;
-webkit-appearance:none;
appearance:none;
background:linear-gradient(90deg,var(--ochre),var(--rust));
border-radius:0;
cursor:pointer;
outline:none;
}
.player-range::-webkit-slider-thumb {
-webkit-appearance:none;
appearance:none;
width:10px;height:14px;
background:var(--cold-blue);
border:none;
cursor:pointer;
box-shadow:0 0 8px var(--cold-blue-dim);
}
.player-range::-moz-range-thumb {
width:10px;height:14px;
background:var(--cold-blue);
border:none;border-radius:0;
cursor:pointer;
}
.player-select {
font-size:11px;
font-weight:700;
background:rgba(255,255,255,.04);
color:var(--text);
border:1px solid var(--rule);
padding:4px 6px;
cursor:pointer;
}
.player-shell.is-theater {
position:relative;
z-index:30;
box-shadow:0 0 0 9999px rgba(0,0,0,.9),0 0 30px rgba(0,0,0,.9);
}
.player-shell.is-lights-off::after {
content:"";
position:absolute;inset:0;
background:rgba(0,0,0,.72);
pointer-events:none;
}
.meta-chip-list {
display:flex;
flex-wrap:wrap;
gap:6px;
}
.chip {
font-size:11px;
font-weight:700;
letter-spacing:.06em;
color:var(--sand);
padding:3px 10px;
background:rgba(169,118,47,.12);
border:1px solid var(--rule);
clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
}
.seo-description-line {
font-size:13px;
line-height:1.7;
color:var(--text-dim);
padding:8px 10px;
background:rgba(0,0,0,.22);
border-left:3px solid var(--dark-red);
}
.cast-section {margin-top:2px}
.cast-strip {
display:grid;
grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
gap:6px;
}
.cast-card {
display:flex;
align-items:center;
gap:8px;
padding:6px 8px;
background:rgba(255,255,255,.025);
border:1px solid rgba(169,118,47,.16);
border-left:2px solid var(--rust);
transition:.16s;
}
.cast-card:hover {
background:rgba(169,118,47,.14);
border-left-color:var(--cold-blue);
}
.cast-avatar {
flex:0 0 auto;
width:30px;height:30px;
border-radius:50%;
background:
radial-gradient(circle at 35% 30%,var(--ochre),var(--iron-dark) 70%);
border:1px solid var(--rule);
box-shadow:inset 0 0 8px rgba(0,0,0,.7);
position:relative;
}
.cast-avatar::after {
content:"";
position:absolute;inset:0;
border-radius:50%;
box-shadow:inset -3px -3px 6px rgba(0,0,0,.55);
}
.cast-name {
font-size:12px;
font-weight:700;
letter-spacing:.08em;
color:var(--text);
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.synopsis-section {margin-top:2px}
.synopsis-body {
display:grid;
grid-template-columns:minmax(0,1fr);
gap:6px;
}
.synopsis-paragraph {
font-size:12.5px;
line-height:1.72;
color:var(--text-dim);
padding-left:10px;
border-left:1px solid rgba(169,118,47,.22);
}
.synopsis-paragraph:first-child {color:var(--text)}
.episode-status {
margin-top:2px;
padding:10px;
background:rgba(110,31,28,.14);
border:1px solid rgba(110,31,28,.5);
clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
}
.episode-status .section-heading {margin-bottom:8px}
.status-current {
font-size:15px;
font-weight:900;
letter-spacing:.08em;
color:var(--sand);
}
.status-current::before {
content:"●";
color:var(--cold-blue);
font-size:10px;
margin-right:8px;
vertical-align:middle;
animation:pulse 1.6s infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.status-total {
font-size:12px;
color:var(--text-dim);
letter-spacing:.14em;
margin-top:2px;
}
.details-section {margin-top:2px}
.detail-list {
display:grid;
grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
gap:0 14px;
border-top:1px solid var(--rule);
}
.detail-row {
display:flex;
align-items:baseline;
gap:8px;
padding:5px 0;
border-bottom:1px dotted rgba(169,118,47,.22);
min-width:0;
}
.detail-key {
flex:0 0 auto;
font-size:11px;
font-weight:700;
letter-spacing:.1em;
color:var(--ochre);
min-width:52px;
}
.detail-value {
font-size:12px;
color:var(--text);
min-width:0;
overflow-wrap:anywhere;
}
.timeline-section {
padding-top:2px;
}
.timeline-scroller {
overflow-x:auto;
overflow-y:hidden;
padding-bottom:8px;
scrollbar-width:thin;
scrollbar-color:var(--ochre) transparent;
-webkit-overflow-scrolling:touch;
}
.timeline-scroller::-webkit-scrollbar {height:6px}
.timeline-scroller::-webkit-scrollbar-track {background:rgba(255,255,255,.04)}
.timeline-scroller::-webkit-scrollbar-thumb {background:var(--ochre)}
.timeline-track {
display:flex;
align-items:stretch;
gap:0;
min-width:max-content;
position:relative;
padding:14px 4px 6px;
}
.timeline-track::before {
content:"";
position:absolute;
left:0;right:0;
top:34px;
height:2px;
background:
repeating-linear-gradient(90deg,var(--rust) 0 14px,transparent 14px 20px);
}
.timeline-node {
position:relative;
flex:0 0 auto;
width:150px;
display:flex;
flex-direction:column;
align-items:flex-start;
gap:4px;
padding:0 8px;
}
.horseshoe-mark {
width:20px;height:20px;
position:relative;
z-index:2;
background:var(--iron-dark);
border:2px solid var(--ochre);
border-radius:50% 50% 40% 40%;
box-shadow:0 0 0 4px var(--iron-black);
}
.horseshoe-mark::before {
content:"";
position:absolute;
left:50%;bottom:0;
transform:translateX(-50%);
width:8px;height:9px;
background:var(--iron-black);
border-radius:0 0 40% 40%;
}
.timeline-node.is-active .horseshoe-mark {
border-color:var(--cold-blue);
box-shadow:0 0 0 4px var(--iron-black),0 0 14px var(--cold-blue);
}
.timeline-timecode {
font-size:11px;
font-weight:900;
letter-spacing:.12em;
color:var(--ochre);
margin-top:4px;
}
.timeline-node.is-active .timeline-timecode {color:var(--cold-blue)}
.timeline-label {
font-size:11.5px;
line-height:1.45;
color:var(--text-dim);
border-top:1px solid rgba(169,118,47,.2);
padding-top:4px;
width:100%;
}
.timeline-node.is-active .timeline-label {color:var(--text)}
.episodes-section {padding-top:2px}
.episode-grid {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:6px;
}
.episode-card {
display:grid;
grid-template-columns:auto minmax(0,1fr);
grid-template-rows:auto auto;
align-items:baseline;
column-gap:8px;
row-gap:3px;
padding:7px 9px;
background:linear-gradient(135deg,rgba(59,58,56,.4),rgba(20,19,18,.55));
border:1px solid rgba(169,118,47,.16);
border-left:2px solid var(--rust);
transition:.16s;
cursor:pointer;
}
.episode-card:hover {
background:linear-gradient(135deg,rgba(169,118,47,.2),rgba(20,19,18,.7));
border-left-color:var(--cold-blue);
}
.episode-number {
grid-row:1 / 3;
font-size:26px;
font-weight:900;
line-height:1;
color:var(--rust);
letter-spacing:-.02em;
text-shadow:1px 1px 0 rgba(0,0,0,.7);
align-self:center;
min-width:34px;
text-align:center;
}
.episode-card:hover .episode-number {color:var(--ochre)}
.episode-title {
font-size:13px;
font-weight:800;
letter-spacing:.06em;
color:var(--sand);
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.episode-duration {
grid-column:2;
font-size:10.5px;
letter-spacing:.1em;
color:var(--text-dim);
}
.episode-summary {
grid-column:1 / -1;
grid-row:3;
font-size:11.5px;
line-height:1.6;
color:var(--text-dim);
max-height:0;
overflow:hidden;
opacity:0;
transition:max-height .28s ease,opacity .2s ease,margin .28s ease;
margin-top:0;
}
.episode-card:hover .episode-summary {
max-height:120px;
opacity:1;
margin-top:4px;
}
.episode-card:active .episode-summary, .episode-card:focus-within .episode-summary {
max-height:140px;
opacity:1;
margin-top:4px;
}
.comments-section {padding-top:2px}
.comment-list {
display:grid;
grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
gap:8px;
align-items:start;
}
.comment-card {
background:linear-gradient(150deg,rgba(59,58,56,.42),rgba(20,19,18,.6));
border:1px solid rgba(169,118,47,.16);
padding:10px 10px 8px;
position:relative;
}
.comment-quote {
position:relative;
padding-left:26px;
}
.comment-quote::before {
content:"“";
position:absolute;
left:0;top:-6px;
font-size:34px;
line-height:1;
font-family:Georgia,serif;
color:var(--ochre);
opacity:.75;
text-shadow:0 0 10px rgba(169,118,47,.4);
}
.comment-text {
font-size:12px;
line-height:1.65;
color:var(--text);
}
.comment-author {
margin-top:6px;
font-size:11px;
font-weight:700;
letter-spacing:.1em;
color:var(--ochre);
border-top:1px solid rgba(169,118,47,.2);
padding-top:4px;
display:inline-block;
}
.comment-author::before {content:"— "}
.recommend-region {padding-top:2px}
.recommend-region .section-heading {margin-bottom:8px}
.recommend-grid {
display:grid;
grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
gap:8px;
align-items:start;
}
.recommend-item {
display:block;
background:linear-gradient(160deg,rgba(59,58,56,.45),rgba(20,19,18,.6));
border:1px solid rgba(169,118,47,.16);
padding:6px;
transition:.18s;
position:relative;
overflow:hidden;
color:var(--text);
text-decoration:none;
}
.recommend-item:hover {
border-color:var(--ochre);
background:linear-gradient(160deg,rgba(169,118,47,.2),rgba(20,19,18,.7));
transform:translateY(-2px);
}
.recommend-item img, .recommend-item .recommend-poster {
width:100%;
height:auto;
aspect-ratio:16 / 10;
object-fit:cover;
display:block;
filter:saturate(.8) contrast(1.05);
background:var(--iron-black);
}
.recommend-name {
display:block;
margin-top:5px;
font-size:12.5px;
font-weight:800;
letter-spacing:.04em;
color:var(--sand);
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.recommend-blurb {
display:block;
margin-top:2px;
font-size:11px;
line-height:1.5;
color:var(--text-dim);
overflow:hidden;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
}
.site-footer {
margin-top:8px;
padding:16px;
background:linear-gradient(180deg,rgba(35,34,32,.9),var(--iron-black));
border-top:1px solid var(--rule);
font-size:11.5px;
color:var(--text-dim);
display:flex;
flex-direction:column;
gap:10px;
}
.footer-disclaimer {
line-height:1.7;
letter-spacing:.02em;
max-width:70ch;
}
.footer-nav {
display:flex;
flex-wrap:wrap;
gap:8px;
}
.footer-link {
font-size:11.5px;
font-weight:700;
letter-spacing:.1em;
color:var(--ochre);
text-decoration:none;
padding:3px 10px;
border:1px solid var(--rule);
clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
transition:.15s;
}
.footer-link:hover {background:var(--ochre);color:var(--iron-black)}
.friend-links {
display:flex;
flex-wrap:wrap;
align-items:center;
gap:6px;
}
.friend-links-label {
font-size:11px;
font-weight:800;
letter-spacing:.16em;
color:var(--dark-red);
text-transform:uppercase;
padding-right:6px;
border-right:2px solid var(--dark-red);
}
.runtime-friend-link {
font-size:11px;
letter-spacing:.04em;
color:var(--text-dim);
text-decoration:none;
padding:2px 6px;
border-bottom:1px solid transparent;
transition:.15s;
white-space:nowrap;
}
.runtime-friend-link:hover {
color:var(--cold-blue);
border-bottom-color:var(--cold-blue);
}
@media (min-width:640px){.page-main {padding:18px 22px 10px;gap:26px}
:root {--gap:12px}
.overview-block {padding:18px}
.overview-body {
grid-template-columns:minmax(0,220px) minmax(0,1fr);
gap:20px;
}
.poster-figure {max-width:none}
.synopsis-body {
grid-template-columns:repeat(2,minmax(0,1fr));
gap:8px 16px;
}
.episode-grid {gap:8px}
.player-controls {gap:8px}}
@media (min-width:960px){.page-main {padding:24px 32px 14px;gap:32px}
body {font-size:15px}
.movie-title {font-size:46px}
.overview-body {
grid-template-columns:minmax(0,250px) minmax(0,1fr);
gap:26px;
}
.overview-info {gap:14px}
.episode-grid {
grid-template-columns:repeat(3,minmax(0,1fr));
}
.cast-strip {
grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
}
.comment-list {
grid-template-columns:repeat(4,minmax(0,1fr));
}
.detail-list {
grid-template-columns:repeat(3,minmax(0,1fr));
}
.recommend-grid {
grid-template-columns:repeat(auto-fill,minmax(170px,1fr));
}
.site-footer {
padding:20px 32px;
flex-direction:row;
flex-wrap:wrap;
align-items:flex-start;
justify-content:space-between;
gap:16px 28px;
}
.footer-disclaimer {flex:1 1 320px}
.footer-nav {flex:0 0 auto}
.friend-links {flex:1 1 100%}}
@media (min-width:1200px){.movie-title {font-size:52px}
.episode-grid {grid-template-columns:repeat(4,minmax(0,1fr))}
.overview-body {grid-template-columns:minmax(0,280px) minmax(0,1fr)}}
@media (max-width:480px){.page-main {padding:10px 10px 6px;gap:18px}
.overview-block {padding:10px}
.episode-number {font-size:22px;min-width:28px}
.episode-grid {gap:5px}
.comment-list {grid-template-columns:minmax(0,1fr)}
.recommend-grid {grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
.cast-strip {grid-template-columns:repeat(auto-fill,minmax(105px,1fr))}
.site-header {padding:8px 10px}
.player-controls {gap:5px;padding:6px}
.player-btn {font-size:10px;padding:3px 7px}
.detail-list {grid-template-columns:minmax(0,1fr)}
.timeline-node {width:132px}}

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}