* {margin:0;padding:0;box-sizing:border-box}
:root {
--ink:#0d1218;
--ink2:#141b24;
--paper:#eef1f4;
--paper-dim:#b9c1c9;
--paper-mute:#7d8894;
--blood:#8e1f24;
--blood-bright:#b32b31;
--line:rgba(238,241,244,.14);
--line-soft:rgba(238,241,244,.08);
--tint:rgba(238,241,244,.04);
--gap:10px;
}
html {-webkit-text-size-adjust:100%}
body {
background-color:var(--ink);
background-image:
linear-gradient(rgba(13,18,24,.86),rgba(13,18,24,.86)),
repeating-linear-gradient(0deg,rgba(238,241,244,.035) 0 1px,transparent 1px 5px),
repeating-linear-gradient(90deg,rgba(238,241,244,.02) 0 1px,transparent 1px 9px),
radial-gradient(120% 90% at 12% -10%,rgba(142,31,36,.16),transparent 60%);
background-attachment:fixed;
color:var(--paper-dim);
font-family:"Helvetica Neue",Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
font-stretch:condensed;
font-size:13px;
line-height:1.45;
letter-spacing:.01em;
padding:0 0 24px;
min-height:100vh;
}
img, video {display:block;max-width:100%}
ul, ol {list-style:none}
a {color:inherit;text-decoration:none}
h1, h2, h3 {font-weight:600;letter-spacing:.02em}
h2 {font-size:12px;text-transform:uppercase;letter-spacing:.22em;color:var(--paper-mute)}
input, button {font:inherit;color:inherit}
.site-header {
display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--gap) 18px;
padding:10px 14px;border-bottom:1px solid var(--line);
background:linear-gradient(180deg,rgba(20,27,36,.9),rgba(13,18,24,.6));
position:relative;z-index:5;
}
.site-header::after {
content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
background:repeating-linear-gradient(90deg,var(--blood) 0 14px,transparent 14px 22px);opacity:.7;
}
a[data-contract="site-name"] {
font-size:15px;font-weight:700;letter-spacing:.16em;color:var(--paper);
text-decoration:none;white-space:nowrap;
border-left:3px solid var(--blood);padding-left:9px;
}
a[data-contract="site-name"]:hover {color:#fff;text-decoration:none}
.category-bar {
display:flex;flex-wrap:wrap;gap:6px;flex:1 1 auto;justify-content:flex-end;
}
.runtime-category {
display:inline-block;white-space:nowrap;
font-size:11px;letter-spacing:.14em;color:var(--paper-mute);
text-decoration:none;
padding:3px 8px;border:1px solid var(--line);background:var(--tint);
}
a.runtime-category:hover {color:var(--paper);border-color:var(--blood);text-decoration:none}
.archive-main {
display:flex;flex-direction:column;gap:var(--gap);
padding:12px 14px 0;
max-width:1560px;margin:0 auto;width:100%;
}
.movie-overview {
display:grid;
grid-template-columns:minmax(0,1.35fr) minmax(0,2fr);
grid-template-areas:
"hero head"
"hero player"
"cast cast"
"syn status"
"syn details";
gap:var(--gap) 16px;
background:linear-gradient(180deg,rgba(20,27,36,.72),rgba(13,18,24,.5));
border:1px solid var(--line);
padding:12px;
position:relative;
}
.movie-overview::before {
content:"";position:absolute;inset:0;pointer-events:none;
background:repeating-linear-gradient(0deg,rgba(238,241,244,.018) 0 1px,transparent 1px 4px);
}
.hero-media {
grid-area:hero;
align-self:start;
position:relative;
border:1px solid var(--line);
background:var(--ink2);
overflow:hidden;
}
.hero-media img {
width:100%;height:auto;aspect-ratio:9 / 16;object-fit:cover;
filter:grayscale(.3) contrast(1.06) brightness(.82);
}
.hero-media::after {
content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(180deg,transparent 45%,rgba(13,18,24,.9) 100%);
}
.hero-caption {
position:absolute;left:0;right:0;bottom:0;z-index:2;
padding:8px 9px 7px;
color:#f2f5f8;font-size:11px;line-height:1.3;letter-spacing:.14em;
border-top:1px solid rgba(142,31,36,.55);
background:linear-gradient(90deg,rgba(142,31,36,.28),transparent 70%);
text-shadow:0 1px 3px rgba(0,0,0,.9);
}
.overview-head {
grid-area:head;align-self:start;
border-bottom:1px solid var(--line);
padding-bottom:6px;
}
.movie-title {
font-size:24px;line-height:1.1;color:var(--paper);letter-spacing:.06em;
}
.movie-tagline {
margin-top:4px;font-size:11.5px;color:var(--paper-mute);letter-spacing:.12em;
border-left:2px solid var(--blood);padding-left:8px;
}
.player-shell {
grid-area:player;align-self:start;
width:100%;min-width:0;
border:1px solid var(--line);
background:#05080b;
position:relative;
}
.player-shell video {
width:100%;aspect-ratio:16 / 9;background:#05080b;display:block;
}
.player-controls {
display:flex;flex-wrap:wrap;align-items:center;gap:6px;
padding:7px 8px;border-top:1px solid var(--line);
background:rgba(13,18,24,.9);
}
.ctrl {
font-size:10.5px;letter-spacing:.1em;line-height:1;
padding:5px 7px;border:1px solid var(--line);
background:var(--tint);color:var(--paper-dim);
cursor:pointer;white-space:nowrap;
}
.ctrl:hover {border-color:var(--blood);color:var(--paper)}
.ctrl-progress {flex:1 1 140px;min-width:80px;height:14px;background:transparent;appearance:none;cursor:pointer}
.ctrl-volume {flex:0 1 74px;min-width:56px;height:14px;background:transparent;appearance:none;cursor:pointer}
.ctrl-progress::-webkit-slider-runnable-track, .ctrl-volume::-webkit-slider-runnable-track {height:2px;background:var(--line)}
.ctrl-progress::-webkit-slider-thumb, .ctrl-volume::-webkit-slider-thumb {
appearance:none;width:9px;height:9px;margin-top:-3.5px;
background:var(--blood-bright);border:none;border-radius:0;
}
.ctrl-progress::-moz-range-track, .ctrl-volume::-moz-range-track {height:2px;background:var(--line)}
.ctrl-progress::-moz-range-thumb, .ctrl-volume::-moz-range-thumb {width:9px;height:9px;background:var(--blood-bright);border:none;border-radius:0}
.ctrl-play.is-playing {border-color:var(--blood);color:var(--paper)}
.ctrl-mute.is-muted {border-color:var(--blood);color:var(--blood-bright)}
.ctrl-theater.is-active, .ctrl-light.is-active {border-color:var(--blood);color:var(--paper);background:rgba(142,31,36,.18)}
.player-shell.is-theater {outline:1px solid var(--blood);outline-offset:2px}
.player-shell.lights-off {background:#000}
.player-shell.lights-off .player-controls {background:#000}
.player-shell.lights-off video {filter:brightness(.72)}
.cast-strip {
grid-area:cast;
border-top:1px solid var(--line);border-bottom:1px solid var(--line);
padding:8px 0;
display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px 14px;
}
.cast-strip-title {
flex:0 0 auto;font-size:10.5px;letter-spacing:.24em;color:var(--blood-bright);
padding-top:3px;writing-mode:horizontal-tb;
}
.cast-list {
display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
gap:8px;flex:1 1 60%;min-width:0;
}
.cast-item {
display:flex;flex-direction:column;gap:2px;min-width:0;
border-left:1px solid var(--line);padding-left:7px;
}
.cast-name {font-size:12px;color:var(--paper);letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cast-role {font-size:10px;color:var(--paper-mute);letter-spacing:.08em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.synopsis {grid-area:syn;align-self:start;min-width:0}
.synopsis-title {margin-bottom:7px}
.synopsis-columns {
columns:2;column-gap:18px;column-rule:1px solid var(--line-soft);
}
.synopsis-para {
font-size:12px;line-height:1.62;color:var(--paper-dim);
margin-bottom:9px;break-inside:avoid;
text-align:justify;
}
.synopsis-para::first-letter {color:var(--blood-bright)}
.episode-status {grid-area:status;align-self:start;min-width:0}
.episode-status-title {margin-bottom:6px}
.episode-status-list {display:flex;flex-wrap:wrap;gap:6px}
.status-row {
display:flex;align-items:baseline;gap:8px;
border:1px solid var(--line);padding:5px 9px;background:var(--tint);
flex:1 1 auto;
}
.status-row dt {font-size:10px;letter-spacing:.16em;color:var(--paper-mute);white-space:nowrap}
.status-row dd {font-size:15px;color:var(--paper);letter-spacing:.04em;margin-left:auto}
.details {grid-area:details;align-self:start;min-width:0}
.details-title {margin-bottom:6px}
.details-list {
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
gap:0 18px;
border-top:1px solid var(--line);
}
.detail-row {
display:flex;align-items:baseline;gap:8px;
padding:4px 0;border-bottom:1px solid var(--line-soft);min-width:0;
}
.detail-row dt {font-size:10.5px;letter-spacing:.1em;color:var(--paper-mute);white-space:nowrap;flex:0 0 auto}
.detail-row dd {font-size:11.5px;color:var(--paper-dim);margin-left:auto;text-align:right;min-width:0}
.timeline {
border:1px solid var(--line);
background:linear-gradient(180deg,rgba(20,27,36,.5),rgba(13,18,24,.35));
padding:12px;
}
.timeline-title {margin-bottom:9px}
.timeline-list {
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
gap:0 22px;
}
.timeline-node {
position:relative;
display:grid;grid-template-columns:1fr;gap:2px;
padding:0 0 10px 16px;
border-left:1px solid var(--blood);
}
.timeline-node::before {
content:"";position:absolute;left:-3.5px;top:4px;
width:6px;height:6px;background:var(--blood-bright);
}
.timeline-timecode {
font-size:10.5px;letter-spacing:.14em;color:var(--blood-bright);white-space:nowrap;
}
.timeline-label {font-size:11.5px;line-height:1.5;color:var(--paper-dim)}
.episodes {
border:1px solid var(--line);padding:12px;
background:linear-gradient(180deg,rgba(20,27,36,.4),rgba(13,18,24,.3));
}
.episodes-title {margin-bottom:9px}
.episode-grid {
display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
gap:8px;
}
.episode-card {
display:flex;flex-direction:column;gap:4px;
border:1px solid var(--line);padding:8px 9px 9px;
background:var(--tint);
}
.episode-card-current {
border-color:var(--blood);
background:linear-gradient(180deg,rgba(142,31,36,.14),rgba(13,18,24,.2));
}
.episode-number {
font-size:10px;letter-spacing:.2em;color:var(--blood-bright);
}
.episode-name {font-size:12.5px;color:var(--paper);letter-spacing:.04em;line-height:1.3}
.episode-summary {font-size:11px;line-height:1.55;color:var(--paper-mute);flex:1 1 auto}
.episode-duration {
font-size:10px;letter-spacing:.14em;color:var(--paper-mute);
border-top:1px solid var(--line-soft);padding-top:4px;
}
.comments {
border:1px solid var(--line);padding:12px;
}
.comments-title {margin-bottom:9px}
.comment-columns {
columns:2;column-gap:20px;column-rule:1px solid var(--line-soft);
}
.comment-card {
display:grid;grid-template-columns:auto 1fr;gap:2px 8px;
padding:8px 0;border-bottom:1px solid var(--line-soft);
break-inside:avoid;
}
.comment-avatar {
grid-row:1 / span 2;
width:26px;height:26px;border-radius:50%;
background:#4a5461;border:1px solid var(--line);
}
.comment-nickname {font-size:11px;letter-spacing:.1em;color:var(--paper);align-self:center}
.comment-text {grid-column:2;font-size:11.5px;line-height:1.55;color:var(--paper-mute)}
.rec-region {
display:grid;grid-template-columns:auto minmax(0,1fr);
gap:0 14px;
border:1px solid var(--line);padding:10px 12px;
background:linear-gradient(90deg,rgba(142,31,36,.06),transparent 30%);
}
.rec-title {
writing-mode:vertical-rl;
text-orientation:upright;
align-self:start;
justify-self:end;
font-size:11px;letter-spacing:.24em;color:var(--blood-bright);
border-right:1px solid var(--blood);
padding-right:8px;
max-height:100%;
}
.rec-list {
display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
gap:8px;min-width:0;
}
a.rec-item {
display:flex;flex-direction:column;gap:3px;min-width:0;
border:1px solid var(--line);padding:5px;background:var(--tint);
color:var(--paper-dim);text-decoration:none;
}
[data-runtime="recommendation"] img {
width:100%;height:auto;aspect-ratio:16 / 9;object-fit:cover;
background:#05080b;filter:grayscale(.25) brightness(.9);
}
.rec-item span[data-runtime="name"] {
font-size:11px;color:var(--paper);letter-spacing:.05em;line-height:1.3;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.rec-item span[data-runtime="blurb"] {
font-size:10px;line-height:1.45;color:var(--paper-mute);
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
a.rec-item:hover {border-color:var(--blood);color:var(--paper);text-decoration:none}
a.rec-item:hover span[data-runtime="name"] {color:#fff}
.site-footer {
margin:14px auto 0;max-width:1560px;width:100%;
padding:12px 14px 0;
border-top:1px solid var(--line);
display:flex;flex-direction:column;gap:9px;
}
.footer-disclaimer {font-size:11px;line-height:1.6;color:var(--paper-mute);max-width:900px}
.footer-nav {display:flex;flex-wrap:wrap;gap:14px}
a[data-contract="footer-home"], a[data-contract="footer-sitemap"] {
font-size:11px;letter-spacing:.14em;color:var(--paper-dim);
text-decoration:none;border-bottom:1px solid var(--blood);padding-bottom:1px;
}
a[data-contract="footer-home"]:hover, a[data-contract="footer-sitemap"]:hover {color:#fff;text-decoration:none}
.friend-links {
display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;
border-top:1px solid var(--line-soft);padding-top:8px;
}
.friend-links-label {font-size:10px;letter-spacing:.24em;color:var(--blood-bright);white-space:nowrap}
a.runtime-friend-link {
font-size:11px;color:var(--paper-mute);text-decoration:none;
border:1px solid var(--line);padding:2px 7px;white-space:nowrap;
}
a.runtime-friend-link:hover {color:var(--paper);border-color:var(--blood);text-decoration:none}
@media (max-width:1180px){.movie-overview {
grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);
grid-template-areas:
"hero head"
"hero player"
"cast cast"
"syn syn"
"status details";
}
.synopsis-columns {columns:2}
.episode-grid {grid-template-columns:repeat(3,minmax(0,1fr))}
.details-list {grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.archive-main {padding:10px 10px 0}
.movie-overview {
grid-template-columns:minmax(0,1fr);
grid-template-areas:
"hero"
"head"
"player"
"cast"
"syn"
"status"
"details";
padding:10px;
}
.hero-media {max-width:280px}
.cast-list {grid-template-columns:repeat(3,minmax(0,1fr))}
.synopsis-columns {columns:1}
.episode-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
.timeline-list {grid-template-columns:minmax(0,1fr)}
.comment-columns {columns:1}
.rec-region {grid-template-columns:minmax(0,1fr);gap:8px}
.rec-title {
writing-mode:horizontal-tb;text-orientation:mixed;
justify-self:start;border-right:none;border-bottom:1px solid var(--blood);
padding:0 0 5px;
}}
@media (max-width:560px){.site-header {padding:9px 11px;gap:8px}
.category-bar {justify-content:flex-start}
a[data-contract="site-name"] {font-size:14px}
.movie-title {font-size:19px}
.movie-tagline {font-size:11px}
.cast-list {grid-template-columns:repeat(2,minmax(0,1fr))}
.details-list {grid-template-columns:minmax(0,1fr)}
.episode-grid {grid-template-columns:minmax(0,1fr)}
.player-controls {gap:5px;padding:6px}
.ctrl {font-size:10px;padding:4px 6px}
.ctrl-progress {flex:1 1 100%}
.rec-list {grid-template-columns:repeat(auto-fit,minmax(104px,1fr))}
.synopsis-para {font-size:11.5px}}

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}