* {margin:0;padding:0;box-sizing:border-box}
:root {
--bg:#0e1012;
--surface:#16191c;
--surface-2:#1c2024;
--line:#2a2f34;
--ink:#c9cfd4;
--ink-dim:#7d868d;
--ink-faint:#565e64;
--neon:#3dff9e;
--neon-dim:#1f8f5c;
--font:"Helvetica Neue",Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
--mono:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
}
html {-webkit-text-size-adjust:100%}
body {
background:var(--bg);
color:var(--ink);
font-family:var(--font);
font-size:13px;
line-height:1.5;
letter-spacing:.02em;
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
img {display:block;max-width:100%}
a {color:inherit;text-decoration:none}
ul, ol {list-style:none}
button, input {font:inherit;color:inherit}
h1, h2 {font-weight:700;letter-spacing:.04em;line-height:1.25}
:focus-visible {outline:1px solid var(--neon);outline-offset:2px}
.site-header {
display:flex;
align-items:center;
gap:16px;
flex-wrap:wrap;
padding:8px 14px;
border-bottom:1px solid var(--line);
background:rgba(14,16,18,.92);
position:sticky;
top:0;
z-index:40;
backdrop-filter:blur(6px);
}
a[data-contract="site-name"] {
font-size:15px;
font-weight:800;
letter-spacing:.14em;
text-transform:uppercase;
color:var(--neon);
text-decoration:none;
white-space:nowrap;
}
a[data-contract="site-name"]:hover {color:#8bffcb;text-decoration:none}
.category-bar {
display:flex;
flex-wrap:wrap;
gap:6px 10px;
min-width:0;
}
a.runtime-category {
display:inline-block;
font-size:12px;
letter-spacing:.08em;
color:var(--ink-dim);
text-decoration:none;
white-space:nowrap;
padding:2px 8px;
border:1px solid var(--line);
border-radius:2px;
background:var(--surface);
}
a.runtime-category:hover {
color:var(--neon);
border-color:var(--neon-dim);
text-decoration:none;
}
.page-main {
display:block;
padding:0 14px 0;
max-width:1280px;
margin:0 auto;
}
.movie-overview {
display:grid;
grid-template-columns:minmax(0,300px) minmax(0,1fr);
gap:18px;
align-items:start;
padding:14px 0 10px;
}
.poster-frame {
position:relative;
width:100%;
max-width:300px;
background:#000;
border:1px solid var(--line);
overflow:hidden;
}
.poster-still {
width:100%;
height:auto;
display:block;
object-fit:cover;
filter:grayscale(.7) contrast(1.08) brightness(.86);
}
.monitor-inset {
position:absolute;
right:8px;
bottom:8px;
display:flex;
flex-direction:column;
gap:2px;
padding:5px 7px;
background:rgba(8,10,11,.82);
border:1px solid var(--neon-dim);
box-shadow:0 0 0 1px rgba(0,0,0,.6) inset;
max-width:calc(100% - 16px);
}
.monitor-label {
font-size:9px;
letter-spacing:.1em;
color:var(--ink-dim);
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.monitor-timecode {
font-family:var(--mono);
font-size:15px;
font-weight:700;
letter-spacing:.06em;
color:var(--neon);
text-shadow:0 0 8px rgba(61,255,158,.5);
animation:blink 1.6s steps(1,end) infinite;
}
@keyframes blink{0%,70%{opacity:1}71%,100%{opacity:.35}}
.overview-info {min-width:0}
.movie-title {
font-size:clamp(20px,3.2vw,30px);
letter-spacing:.06em;
color:#eef2f4;
}
.movie-tagline {
margin-top:8px;
font-size:13px;
letter-spacing:.1em;
color:var(--ink-dim);
padding-bottom:10px;
border-bottom:1px dashed var(--line);
}
.episode-status {
display:flex;
flex-wrap:wrap;
gap:6px;
align-items:center;
margin-top:10px;
}
.status-chip {
font-size:11px;
letter-spacing:.08em;
padding:2px 7px;
border:1px solid var(--line);
background:var(--surface);
color:var(--ink-dim);
white-space:nowrap;
}
.status-chip.is-current {
color:var(--neon);
border-color:var(--neon-dim);
background:rgba(61,255,158,.07);
}
.status-score {
font-family:var(--mono);
font-size:12px;
font-weight:700;
letter-spacing:.06em;
color:var(--neon);
margin-left:auto;
}
.status-score::first-letter {color:var(--neon)}
.section-heading {
font-size:11px;
letter-spacing:.2em;
text-transform:uppercase;
color:var(--neon);
padding-bottom:4px;
margin-bottom:8px;
border-bottom:1px solid var(--line);
display:flex;
align-items:center;
gap:6px;
}
.section-heading::before {
content:"";
width:6px;height:6px;
background:var(--neon);
flex:none;
}
.details-panel {margin-top:14px}
.detail-list {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:0 16px;
}
.detail-row {
display:flex;
justify-content:space-between;
gap:8px;
padding:3px 0;
border-bottom:1px dotted #22272b;
min-width:0;
}
.detail-row dt {
color:var(--ink-faint);
font-size:11px;
letter-spacing:.06em;
white-space:nowrap;
flex:none;
}
.detail-row dd {
color:var(--ink);
font-size:11.5px;
text-align:right;
min-width:0;
overflow-wrap:anywhere;
}
.cast-panel {margin-top:14px}
.cast-list {
display:grid;
grid-template-columns:repeat(5,minmax(0,1fr));
gap:6px;
}
.cast-card {
display:flex;
flex-direction:column;
gap:2px;
padding:6px 7px;
background:var(--surface);
border:1px solid var(--line);
border-left:2px solid var(--neon-dim);
min-width:0;
}
.cast-name {
font-size:12px;
font-weight:700;
letter-spacing:.06em;
color:#e6ebee;
}
.cast-role {
font-size:10px;
letter-spacing:.08em;
color:var(--ink-faint);
}
.synopsis-panel {margin-top:14px}
.synopsis-para {
font-size:12.5px;
line-height:1.72;
color:var(--ink-dim);
margin-bottom:8px;
}
.synopsis-para:last-child {margin-bottom:0}
.player-shell {
position:relative;
margin:6px 0 12px;
background:#000;
border:1px solid var(--line);
}
.player-shell.is-theater {
border-color:var(--neon-dim);
box-shadow:0 0 0 1px rgba(61,255,158,.25),0 0 24px rgba(61,255,158,.12);
}
.player-shell.is-lights-off {background:#000}
.player-shell.is-lights-off .player-controls {opacity:.35}
.player-shell.is-lights-off:hover .player-controls {opacity:1}
.player-video {
display:block;
width:100%;
background:#000;
}
.player-controls {
display:flex;
flex-wrap:wrap;
align-items:center;
gap:6px;
padding:6px 8px;
background:var(--surface);
border-top:1px solid var(--line);
}
.player-btn {
font-size:11px;
letter-spacing:.08em;
padding:3px 9px;
background:var(--surface-2);
border:1px solid var(--line);
color:var(--ink-dim);
cursor:pointer;
white-space:nowrap;
transition:color .15s,border-color .15s,background .15s;
}
.player-btn:hover {color:var(--neon);border-color:var(--neon-dim)}
.player-btn.is-active {color:var(--neon);border-color:var(--neon-dim);background:rgba(61,255,158,.08)}
.player-progress {
flex:1 1 160px;
min-width:80px;
height:4px;
-webkit-appearance:none;
appearance:none;
background:var(--line);
border:none;
cursor:pointer;
}
.player-progress::-webkit-slider-thumb {
-webkit-appearance:none;
width:10px;height:14px;
background:var(--neon);
border:none;
cursor:pointer;
}
.player-progress::-moz-range-thumb {
width:10px;height:14px;
background:var(--neon);
border:none;border-radius:0;
cursor:pointer;
}
.player-volume {
flex:0 1 80px;
min-width:54px;
height:4px;
-webkit-appearance:none;
appearance:none;
background:var(--line);
border:none;
cursor:pointer;
}
.player-volume::-webkit-slider-thumb {
-webkit-appearance:none;
width:8px;height:13px;
background:var(--ink-dim);
border:none;
cursor:pointer;
}
.player-volume::-moz-range-thumb {
width:8px;height:13px;
background:var(--ink-dim);
border:none;border-radius:0;
cursor:pointer;
}
.timeline-section {
margin:12px 0;
padding-top:6px;
}
.timeline-ruler {
display:grid;
grid-template-columns:repeat(6,minmax(0,1fr));
gap:0;
border-top:1px solid var(--line);
padding-top:0;
}
.timeline-tick {
position:relative;
padding:14px 8px 8px;
border-right:1px solid #1d2226;
min-width:0;
}
.timeline-tick:last-child {border-right:none}
.timeline-tick::before {
content:"";
position:absolute;
top:-4px;left:0;
width:1px;height:9px;
background:var(--ink-faint);
}
.timeline-tick::after {
content:"";
position:absolute;
top:-7px;left:0;
width:7px;height:7px;
border-radius:50%;
background:var(--bg);
border:1px solid var(--ink-faint);
}
.timeline-tick.is-current {
background:rgba(61,255,158,.05);
}
.timeline-tick.is-current::after {
background:var(--neon);
border-color:var(--neon);
box-shadow:0 0 8px var(--neon);
animation:pulse 1.4s ease-in-out infinite;
}
@keyframes pulse{
0%,100%{opacity:1;transform:scale(1)}
50%{opacity:.35;transform:scale(1.5)}
}
.tick-timecode {
display:block;
font-family:var(--mono);
font-size:12px;
font-weight:700;
letter-spacing:.06em;
color:var(--ink-dim);
margin-bottom:4px;
}
.timeline-tick.is-current .tick-timecode {color:var(--neon)}
.tick-label {
display:block;
font-size:11px;
line-height:1.6;
color:var(--ink-faint);
}
.episodes-section {margin:12px 0}
.episode-grid {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:6px;
}
.episode-card {
display:grid;
grid-template-columns:1fr auto;
grid-template-areas:
"num dur"
"title title"
"sum sum";
column-gap:10px;
row-gap:3px;
padding:7px 9px;
background:var(--surface);
border:1px solid var(--line);
border-left:2px solid #242a2f;
min-width:0;
}
.episode-card.is-current {
border-color:var(--neon-dim);
border-left-color:var(--neon);
background:rgba(61,255,158,.06);
}
.episode-number {
grid-area:num;
font-family:var(--mono);
font-size:11px;
font-weight:700;
letter-spacing:.06em;
color:var(--ink-faint);
white-space:nowrap;
}
.episode-card.is-current .episode-number {color:var(--neon)}
.episode-duration {
grid-area:dur;
font-family:var(--mono);
font-size:10.5px;
letter-spacing:.04em;
color:var(--ink-faint);
text-align:right;
white-space:nowrap;
}
.episode-title {
grid-area:title;
font-size:12.5px;
font-weight:700;
letter-spacing:.05em;
color:#e6ebee;
}
.episode-summary {
grid-area:sum;
font-size:11px;
line-height:1.62;
color:var(--ink-faint);
}
.comments-section {margin:12px 0}
.comment-stream {
columns:2;
column-gap:8px;
}
.comment-card {
break-inside:avoid;
display:grid;
grid-template-columns:22px 1fr;
grid-template-areas:
"av nick"
"av text";
column-gap:8px;
row-gap:2px;
padding:7px 9px;
margin-bottom:8px;
background:var(--surface);
border:1px solid var(--line);
min-width:0;
}
.comment-avatar {
grid-area:av;
width:22px;height:22px;
background:
linear-gradient(135deg,var(--surface-2) 0 50%,#333a40 50% 100%);
border:1px solid #2f363c;
}
.comment-card:nth-child(2n) .comment-avatar {
background:
linear-gradient(225deg,#3a4147 0 45%,var(--surface-2) 45% 100%);
}
.comment-card:nth-child(3n) .comment-avatar {
background:
linear-gradient(90deg,#2b3136 0 30%,#454d54 30% 60%,#2b3136 60% 100%);
}
.comment-nickname {
grid-area:nick;
font-size:11px;
font-weight:700;
letter-spacing:.06em;
color:var(--neon-dim);
align-self:center;
}
.comment-text {
grid-area:text;
font-size:11.5px;
line-height:1.65;
color:var(--ink-dim);
}
.recommend-region {
margin:12px 0;
padding:8px 9px 9px;
background:var(--surface);
border:1px solid var(--line);
min-width:0;
}
.recommend-list {
display:grid;
grid-template-columns:1fr;
gap:8px;
}
.recommend-item {min-width:0}
a[data-runtime="recommendation"] {
display:grid;
grid-template-columns:64px 1fr;
grid-template-areas:
"img name"
"img blurb";
column-gap:8px;
row-gap:2px;
align-items:start;
padding:4px;
background:var(--surface-2);
border:1px solid #232a2f;
text-decoration:none;
color:var(--ink);
transition:border-color .15s,background .15s;
}
a[data-runtime="recommendation"]:hover {
border-color:var(--neon-dim);
background:rgba(61,255,158,.05);
text-decoration:none;
}
[data-runtime="recommendation"] img {
grid-area:img;
width:64px;
height:88px;
object-fit:cover;
background:#000;
filter:grayscale(.6) brightness(.9);
}
[data-runtime="recommendation"] [data-runtime="name"] {
grid-area:name;
font-size:11.5px;
font-weight:700;
letter-spacing:.04em;
color:#e2e8eb;
line-height:1.4;
}
[data-runtime="recommendation"] [data-runtime="blurb"] {
grid-area:blurb;
font-size:10.5px;
line-height:1.55;
color:var(--ink-faint);
}
.site-footer {
margin-top:14px;
padding:12px 14px 20px;
border-top:1px solid var(--line);
background:#0b0d0e;
max-width:1280px;
margin-left:auto;
margin-right:auto;
}
.disclaimer-text {
font-size:10.5px;
line-height:1.7;
color:var(--ink-faint);
max-width:760px;
}
.footer-nav {
display:flex;
flex-wrap:wrap;
gap:8px 14px;
margin-top:10px;
}
a[data-contract="footer-home"], a[data-contract="footer-sitemap"] {
font-size:11.5px;
letter-spacing:.1em;
color:var(--ink-dim);
text-decoration:none;
border-bottom:1px solid transparent;
}
a[data-contract="footer-home"]:hover, a[data-contract="footer-sitemap"]:hover {
color:var(--neon);
border-bottom-color:var(--neon-dim);
text-decoration:none;
}
.friend-links {
display:flex;
flex-wrap:wrap;
align-items:baseline;
gap:6px 12px;
margin-top:12px;
padding-top:10px;
border-top:1px dotted #23282c;
}
.friend-links-label {
font-size:10.5px;
letter-spacing:.16em;
color:var(--ink-faint);
white-space:nowrap;
}
a.runtime-friend-link {
font-size:11px;
letter-spacing:.04em;
color:#6c757b;
text-decoration:none;
white-space:nowrap;
}
a.runtime-friend-link:hover {
color:var(--neon);
text-decoration:underline;
}
.play, .pause, .mute, .volume, .speed, .pip, .fullscreen, .theater, .light, .progress, .timeupdate, .player, .click, .input, .x {}
.player-shell .is-active {color:var(--neon)}
@media (max-width:900px){.movie-overview {
grid-template-columns:minmax(0,240px) minmax(0,1fr);
gap:14px;
}
.cast-list {grid-template-columns:repeat(3,minmax(0,1fr))}
.timeline-ruler {grid-template-columns:repeat(3,minmax(0,1fr));row-gap:4px}
.timeline-tick:nth-child(3n) {border-right:none}
.recommend-region {grid-template-columns:minmax(0,1fr)}}
@media (max-width:680px){.site-header {padding:7px 10px;gap:10px}
.page-main {padding:0 10px}
.movie-overview {
grid-template-columns:minmax(0,1fr);
gap:12px;
}
.poster-frame {max-width:100%}
.monitor-timecode {font-size:13px}
.detail-list {grid-template-columns:minmax(0,1fr)}
.cast-list {grid-template-columns:repeat(2,minmax(0,1fr))}
.timeline-ruler {grid-template-columns:repeat(2,minmax(0,1fr))}
.timeline-tick:nth-child(3n) {border-right:1px solid #1d2226}
.timeline-tick:nth-child(2n) {border-right:none}
.episode-grid {grid-template-columns:minmax(0,1fr)}
.comment-stream {columns:1}
.player-controls {gap:5px;padding:6px}
.player-btn {font-size:10.5px;padding:3px 7px}
.friend-links {gap:6px 10px}}
@media (max-width:420px){.movie-title {font-size:19px}
.movie-tagline {font-size:12px}
.timeline-ruler {grid-template-columns:minmax(0,1fr)}
.timeline-tick {border-right:none}
.cast-list {grid-template-columns:minmax(0,1fr)}
a[data-runtime="recommendation"] {grid-template-columns:56px 1fr}
[data-runtime="recommendation"] img {width:56px;height:78px}}

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}