* {margin:0;padding:0;box-sizing:border-box}
:root {
--abyss:#050b14;
--deep:#0a1626;
--deep-2:#0e1e33;
--slate:#16293f;
--mist:#8fa6bd;
--mist-dim:#5c7389;
--tear:#eaf2f8;
--tear-dim:#b9c9d6;
--rec:#e33b2e;
--rec-glow:rgba(227,59,46,.6);
--line:rgba(143,166,189,.16);
--font:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
--mono:"SFMono-Regular","DejaVu Sans Mono",Menlo,Consolas,"Courier New",monospace;
}
html {-webkit-text-size-adjust:100%}
body {
font-family:var(--font);
background:
radial-gradient(120% 70% at 82% -6%,rgba(20,48,78,.5),transparent 60%),
radial-gradient(90% 60% at 0% 20%,rgba(10,30,52,.55),transparent 65%),
var(--abyss);
color:var(--mist);
font-size:13px;
line-height:1.7;
letter-spacing:.01em;
min-height:100vh;
overflow-x:hidden;
}
img, video {display:block;max-width:100%}
button {font:inherit;color:inherit;background:none;border:none;cursor:pointer}
a {color:var(--tear-dim);text-decoration:none}
ul, ol {list-style:none}
h1, h2, h3 {font-weight:800;letter-spacing:-.02em;line-height:1.25;color:var(--tear)}
::selection {background:var(--rec);color:#fff}
.site-header {
position:sticky;
top:0;
z-index:40;
background:rgba(5,11,20,.86);
backdrop-filter:blur(8px);
border-bottom:1px solid var(--line);
}
.header-inner {
max-width:1240px;
margin:0 auto;
padding:9px 16px;
display:flex;
align-items:center;
gap:18px;
flex-wrap:wrap;
}
.site-brand {
font-size:15px;
font-weight:800;
letter-spacing:-.03em;
color:var(--tear);
text-decoration:none;
white-space:nowrap;
position:relative;
padding-left:14px;
}
.site-brand::before {
content:"";
position:absolute;
left:0;
top:50%;
transform:translateY(-50%);
width:7px;height:7px;
border-radius:50%;
background:var(--rec);
box-shadow:0 0 8px var(--rec-glow);
}
a[data-contract="site-name"] {color:var(--tear);text-decoration:none}
.category-bar {
display:flex;
flex-wrap:wrap;
gap:4px 6px;
flex:1 1 auto;
min-width:0;
}
a.runtime-category {
white-space:nowrap;
font-size:11.5px;
letter-spacing:.02em;
color:var(--mist-dim);
text-decoration:none;
padding:3px 9px;
border:1px solid var(--line);
border-radius:2px;
transition:color .18s,border-color .18s,background .18s;
}
a.runtime-category:hover {
color:var(--tear);
border-color:rgba(185,201,214,.4);
background:rgba(143,166,189,.08);
}
.page-main {
max-width:1240px;
margin:0 auto;
padding:0 16px 34px;
}
.section-title {
font-size:12px;
font-weight:800;
letter-spacing:.14em;
color:var(--tear-dim);
text-transform:uppercase;
margin:0 0 8px;
padding-left:11px;
position:relative;
}
.section-title::before {
content:"";
position:absolute;
left:0;top:.28em;
width:3px;height:.95em;
background:var(--rec);
box-shadow:0 0 6px var(--rec-glow);
}
.hero-first {
padding:26px 0 30px;
}
.hero-grid {
display:grid;
grid-template-columns:minmax(0,236px) minmax(0,1fr);
gap:24px 30px;
align-items:start;
}
.poster-column {
min-width:0;
}
.poster-frame {
position:relative;
border:1px solid rgba(143,166,189,.22);
background:var(--deep);
overflow:hidden;
box-shadow:0 18px 44px -20px #000,inset 0 0 60px rgba(5,11,20,.7);
}
.poster-image {
width:100%;
height:auto;
display:block;
object-fit:cover;
filter:saturate(.82) contrast(1.05) brightness(.92);
}
.poster-frame::after {
content:"";
position:absolute;
inset:0;
pointer-events:none;
background:
linear-gradient(180deg,rgba(5,11,20,.18) 0%,transparent 26%,transparent 62%,rgba(5,11,20,.62) 100%),
repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px);
mix-blend-mode:multiply;
}
.poster-timecode {
position:absolute;
left:0;right:0;
bottom:0;
display:flex;
align-items:center;
gap:8px;
padding:7px 9px;
font-family:var(--mono);
font-size:10px;
letter-spacing:.06em;
color:var(--tear-dim);
background:linear-gradient(0deg,rgba(3,8,15,.9),rgba(3,8,15,.55) 70%,transparent);
z-index:2;
}
.timecode-stamp {
color:var(--tear);
}
.timecode-dot {
width:7px;height:7px;
border-radius:50%;
background:var(--rec);
box-shadow:0 0 8px var(--rec-glow);
flex:0 0 auto;
animation:recPulse 1.8s ease-in-out infinite;
}
@keyframes recPulse{
0%,100%{opacity:1;box-shadow:0 0 8px var(--rec-glow)}
50%{opacity:.35;box-shadow:0 0 2px var(--rec-glow)}
}
.timecode-label {
margin-left:auto;
color:var(--mist-dim);
}
.hero-side {
min-width:0;
display:flex;
flex-direction:column;
gap:20px;
}
.hero-heading {
padding-bottom:14px;
border-bottom:1px solid var(--line);
}
.movie-title {
font-size:clamp(26px,4.4vw,46px);
letter-spacing:-.045em;
line-height:1.05;
color:var(--tear);
text-shadow:0 2px 30px rgba(180,215,245,.14);
}
.movie-tagline {
margin-top:8px;
font-size:12.5px;
line-height:1.75;
color:var(--mist-dim);
max-width:56ch;
letter-spacing:.015em;
}
.player-shell {
width:100%;
min-width:0;
border:1px solid var(--line);
background:linear-gradient(180deg,var(--deep-2),var(--deep));
padding:8px;
transition:box-shadow .25s,border-color .25s,background .25s;
}
.player-video {
width:100%;
display:block;
background:#000;
border:1px solid rgba(143,166,189,.12);
}
.player-shell.is-fullscreen, .player-shell:fullscreen {
padding:0;
border-color:transparent;
background:#000;
}
.player-shell:fullscreen .player-video, .player-shell.is-fullscreen .player-video {
height:100%;
}
.player-controls {
display:flex;
flex-wrap:wrap;
gap:4px;
margin-top:8px;
}
.control-btn {
font-size:11px;
letter-spacing:.02em;
color:var(--mist);
padding:4px 10px;
border:1px solid var(--line);
border-radius:2px;
background:rgba(143,166,189,.04);
white-space:nowrap;
transition:color .16s,border-color .16s,background .16s;
}
.control-btn:hover {
color:var(--tear);
border-color:rgba(185,201,214,.45);
background:rgba(143,166,189,.12);
}
.control-btn:active {
background:rgba(227,59,46,.18);
border-color:var(--rec);
}
.player-shell.theater-mode {
box-shadow:0 0 0 1px rgba(227,59,46,.35),0 24px 60px -24px #000;
}
.player-shell.lights-off, .player-shell.is-active {
background:#01050b;
border-color:rgba(227,59,46,.28);
}
.player-shell.theater-mode .player-video, .player-shell.lights-off .player-video {
box-shadow:0 0 40px rgba(0,0,0,.9);
}
.player-shell.is-playing .control-btn[data-player-action="play"] {
color:var(--tear);
border-color:rgba(185,201,214,.5);
}
.player-shell.is-muted .control-btn[data-player-action="mute"], .player-shell.volume-low .control-btn[data-player-action="volume"], .player-shell.is-speed-changed .control-btn[data-player-action="speed"], .player-shell.is-pip .control-btn[data-player-action="pip"], .player-shell.show-progress .control-btn[data-player-action="progress"] {
color:var(--rec);
border-color:rgba(227,59,46,.55);
background:rgba(227,59,46,.1);
}
.episode-status {
display:flex;
flex-wrap:wrap;
gap:6px;
}
.status-item {
font-size:11px;
letter-spacing:.04em;
color:var(--tear-dim);
padding:3px 10px;
border-left:2px solid var(--rec);
background:rgba(143,166,189,.07);
white-space:nowrap;
}
.details-panel {
border-top:1px solid var(--line);
padding-top:14px;
}
.detail-list {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:0 22px;
}
.detail-row {
display:flex;
gap:10px;
align-items:baseline;
padding:4px 0;
border-bottom:1px solid rgba(143,166,189,.09);
min-width:0;
}
.detail-key {
flex:0 0 auto;
width:5.2em;
font-size:11px;
letter-spacing:.06em;
color:var(--mist-dim);
}
.detail-value {
flex:1 1 auto;
min-width:0;
font-size:12px;
color:var(--tear-dim);
overflow-wrap:anywhere;
}
.cast-strip {
border-top:1px solid var(--line);
padding-top:14px;
}
.cast-list {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(96px,1fr));
gap:8px;
align-items:start;
}
.cast-item {
display:flex;
flex-direction:column;
gap:6px;
min-width:0;
}
.cast-avatar {
display:block;
width:100%;
aspect-ratio:1/1;
border-radius:2px;
background:
radial-gradient(70% 70% at 50% 34%,rgba(185,201,214,.34),transparent 62%),
linear-gradient(160deg,var(--slate),var(--deep-2) 70%);
border:1px solid rgba(143,166,189,.2);
position:relative;
overflow:hidden;
filter:saturate(.7);
}
.cast-avatar::after {
content:"";
position:absolute;
inset:0;
background:repeating-linear-gradient(90deg,rgba(0,0,0,.14) 0 1px,transparent 1px 4px);
}
.cast-names {
display:flex;
flex-direction:column;
gap:0;
min-width:0;
}
.cast-name {
font-size:11.5px;
font-weight:700;
letter-spacing:-.01em;
color:var(--tear-dim);
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.cast-role {
font-size:10px;
color:var(--mist-dim);
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.synopsis-panel {
border-top:1px solid var(--line);
padding-top:14px;
}
.synopsis-text {
font-size:12px;
line-height:1.95;
color:var(--mist);
letter-spacing:.015em;
}
.synopsis-text + .synopsis-text {
margin-top:7px;
padding-top:7px;
border-top:1px dashed rgba(143,166,189,.12);
}
.timeline-section {
padding:22px 0 8px;
border-top:1px solid var(--line);
}
.timeline-list {
position:relative;
padding-left:6px;
display:flex;
flex-direction:column;
gap:0;
}
.timeline-item {
display:grid;
grid-template-columns:64px 20px minmax(0,1fr);
align-items:start;
gap:0 10px;
padding:7px 0;
position:relative;
border-bottom:1px solid rgba(143,166,189,.08);
}
.timeline-item:last-child {border-bottom:none}
.timeline-timecode {
font-family:var(--mono);
font-size:11px;
letter-spacing:.04em;
color:var(--mist-dim);
padding-top:1px;
text-align:right;
}
.timeline-node {
position:relative;
width:9px;height:9px;
margin:4px auto 0;
border-radius:50%;
background:var(--rec);
box-shadow:0 0 9px var(--rec-glow);
}
.timeline-node::before {
content:"";
position:absolute;
left:50%;
top:11px;
transform:translateX(-50%);
width:1px;
height:calc(100% + 20px);
background:linear-gradient(180deg,rgba(227,59,46,.5),rgba(143,166,189,.14));
}
.timeline-item:last-child .timeline-node::before {display:none}
.timeline-label {
font-size:12px;
line-height:1.7;
color:var(--tear-dim);
letter-spacing:.01em;
}
.episodes-section {
padding:22px 0 8px;
border-top:1px solid var(--line);
}
.episodes-meta {
font-size:11px;
letter-spacing:.06em;
color:var(--mist-dim);
margin:-4px 0 10px 11px;
}
.episode-grid {
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:7px;
align-items:start;
}
.episode-card {
position:relative;
padding:9px 10px 9px 11px;
border:1px solid var(--line);
background:linear-gradient(180deg,rgba(14,30,51,.7),rgba(10,22,38,.7));
cursor:pointer;
transition:border-color .18s,background .18s,transform .18s;
overflow:hidden;
}
.episode-card::before {
content:"";
position:absolute;
left:0;top:0;bottom:0;
width:2px;
background:transparent;
transition:background .18s;
}
.episode-card:hover, .episode-card.is-active {
border-color:rgba(185,201,214,.36);
background:linear-gradient(180deg,rgba(22,41,63,.85),rgba(10,22,38,.85));
}
.episode-card.is-active::before {
background:var(--rec);
box-shadow:0 0 10px var(--rec-glow);
}
.episode-number {
display:block;
font-family:var(--mono);
font-size:10px;
letter-spacing:.08em;
color:var(--mist-dim);
}
.episode-card.is-active .episode-number {color:var(--rec)}
.episode-title {
font-size:12.5px;
font-weight:700;
letter-spacing:-.01em;
color:var(--tear-dim);
margin:2px 0 0;
line-height:1.4;
}
.episode-duration {
display:inline-block;
margin-top:4px;
font-family:var(--mono);
font-size:10px;
letter-spacing:.05em;
color:var(--mist-dim);
}
.episode-summary {
font-size:11px;
line-height:1.7;
color:var(--mist);
margin-top:0;
max-height:0;
opacity:0;
overflow:hidden;
transition:max-height .28s ease,opacity .22s ease,margin-top .28s ease;
}
.episode-card:hover .episode-summary, .episode-card.is-active .episode-summary {
max-height:9em;
opacity:1;
margin-top:7px;
}
.comments-section {
padding:22px 0 8px;
border-top:1px solid var(--line);
}
.comment-columns {
columns:2;
column-gap:8px;
}
.comment-card {
break-inside:avoid;
-webkit-column-break-inside:avoid;
page-break-inside:avoid;
margin:0 0 8px;
padding:9px 11px;
border:1px solid var(--line);
border-left:2px solid rgba(143,166,189,.3);
background:rgba(14,30,51,.5);
}
.comment-nickname {
display:block;
font-size:10.5px;
letter-spacing:.05em;
color:var(--mist-dim);
margin-bottom:3px;
}
.comment-text {
font-size:12px;
line-height:1.8;
color:var(--tear-dim);
letter-spacing:.012em;
}
.recommend-region {
padding:20px 0 0;
border-top:1px solid var(--line);
margin-top:18px;
}
.recommend-list {
display:grid;
gap:6px;
align-items:start;
}
.region-one .recommend-list {grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.region-two .recommend-list {grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
.region-three .recommend-list {grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
a.recommend-item {
display:flex;
flex-direction:column;
gap:4px;
padding:5px;
border:1px solid var(--line);
background:rgba(10,22,38,.6);
color:var(--tear-dim);
text-decoration:none;
min-width:0;
transition:border-color .18s,background .18s,transform .18s;
}
a.recommend-item:hover {
border-color:rgba(185,201,214,.42);
background:rgba(22,41,63,.8);
transform:translateY(-1px);
}
[data-runtime="recommendation"] img {
width:100%;
height:auto;
aspect-ratio:16/10;
object-fit:cover;
display:block;
filter:saturate(.78) contrast(1.04) brightness(.9);
border:1px solid rgba(143,166,189,.14);
}
a.recommend-item [data-runtime="name"] {
font-size:11.5px;
font-weight:700;
letter-spacing:-.01em;
color:var(--tear-dim);
line-height:1.4;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}
a.recommend-item [data-runtime="blurb"] {
font-size:10.5px;
line-height:1.6;
color:var(--mist-dim);
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}
a.recommend-item:hover [data-runtime="name"] {color:var(--tear)}
.site-footer {
border-top:1px solid var(--line);
background:rgba(5,11,20,.7);
padding:18px 16px 26px;
max-width:1240px;
margin:0 auto;
}
.friend-links {
display:flex;
flex-wrap:wrap;
align-items:center;
gap:5px 14px;
margin-bottom:12px;
}
.friend-links-label {
font-size:10.5px;
letter-spacing:.14em;
color:var(--mist-dim);
text-transform:uppercase;
}
a.runtime-friend-link {
font-size:11.5px;
color:var(--mist);
text-decoration:none;
border-bottom:1px solid transparent;
transition:color .16s,border-color .16s;
white-space:nowrap;
}
a.runtime-friend-link:hover {
color:var(--tear);
border-bottom-color:var(--rec);
}
.footer-links {
display:flex;
flex-wrap:wrap;
gap:16px;
padding-top:12px;
border-top:1px solid rgba(143,166,189,.1);
}
a[data-contract="footer-home"], a[data-contract="footer-sitemap"] {
font-size:11.5px;
color:var(--mist);
text-decoration:none;
transition:color .16s;
}
a[data-contract="footer-home"]:hover, a[data-contract="footer-sitemap"]:hover {color:var(--tear)}
.footer-disclaimer {
margin-top:12px;
font-size:10.5px;
line-height:1.75;
color:var(--mist-dim);
max-width:78ch;
}
@media (max-width:980px){.hero-grid {
grid-template-columns:minmax(0,190px) minmax(0,1fr);
gap:20px 22px;
}
.episode-grid {grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.hero-first {padding:18px 0 22px}
.hero-grid {
grid-template-columns:minmax(0,1fr);
gap:18px;
}
.poster-column {
max-width:230px;
}
.detail-list {grid-template-columns:minmax(0,1fr)}
.episode-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
.comment-columns {columns:1}
.region-one .recommend-list, .region-two .recommend-list, .region-three .recommend-list {grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}}
@media (max-width:480px){.page-main {padding:0 12px 26px}
.header-inner {padding:8px 12px;gap:10px}
.site-brand {font-size:14px}
.poster-column {max-width:200px}
.movie-title {font-size:24px}
.movie-tagline {font-size:12px}
.episode-grid {grid-template-columns:minmax(0,1fr)}
.cast-list {grid-template-columns:repeat(auto-fit,minmax(78px,1fr))}
.timeline-item {grid-template-columns:52px 16px minmax(0,1fr);gap:0 8px}
.timeline-timecode {font-size:10px}
.episode-card:hover .episode-summary, .episode-card.is-active .episode-summary {max-height:12em}
.region-one .recommend-list, .region-two .recommend-list, .region-three .recommend-list {grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){* {animation-duration:.001ms!important;transition-duration:.001ms!important}}

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}