* {margin:0;padding:0;box-sizing:border-box}
:root {
--night:#070b14;
--night-2:#0d1320;
--night-3:#131b2b;
--line:#1e2940;
--warm:#f2b64b;
--warm-soft:#e8a13a;
--warm-dim:rgba(242,182,75,.14);
--ink:#e8ecf4;
--ink-2:#9aa7bd;
--ink-3:#68758d;
--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
--sans:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
html {-webkit-text-size-adjust:100%}
body {
background:var(--night);
color:var(--ink);
font-family:var(--sans);
font-size:13px;
line-height:1.45;
font-weight:400;
letter-spacing:.01em;
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
img {display:block;max-width:100%;height:auto}
a {color:inherit;text-decoration:none}
ul {list-style:none}
button, select, input {font:inherit;color:inherit}
h1, h2, h3 {font-weight:800;line-height:1.2;letter-spacing:.01em}
time {font-variant-numeric:tabular-nums}
.site-header {
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:10px 16px;
background:linear-gradient(180deg,#0a1020,#070b14);
border-bottom:1px solid var(--line);
position:sticky;
top:0;
z-index:40;
}
a[data-contract="site-name"] {
font-size:17px;
font-weight:800;
letter-spacing:.06em;
color:var(--warm);
text-decoration:none;
white-space:nowrap;
flex:0 0 auto;
}
a[data-contract="site-name"]:hover {color:#ffd27a}
.category-nav {
display:flex;
align-items:center;
gap:6px;
overflow-x:auto;
scrollbar-width:none;
flex:1 1 auto;
justify-content:flex-end;
}
.category-nav::-webkit-scrollbar {display:none}
a.runtime-category {
flex:0 0 auto;
white-space:nowrap;
font-size:12px;
font-weight:600;
color:var(--ink-2);
text-decoration:none;
padding:4px 9px;
border:1px solid var(--line);
border-radius:999px;
background:var(--night-2);
transition:color .15s,border-color .15s,background .15s;
}
a.runtime-category:hover {
color:var(--night);
background:var(--warm);
border-color:var(--warm);
}
.page-main {
display:block;
padding:14px 16px 26px;
max-width:1240px;
margin:0 auto;
}
.movie-overview {
display:grid;
grid-template-columns:minmax(0,300px) minmax(0,1fr);
grid-template-areas:
"poster title"
"poster player"
"poster status"
"poster details"
"poster synopsis"
"poster cast";
gap:12px 18px;
align-content:start;
align-items:start;
padding:14px;
background:linear-gradient(160deg,#0e1626 0%,#0a1020 60%,#0c1220 100%);
border:1px solid var(--line);
border-radius:4px;
box-shadow:inset 0 0 0 1px rgba(242,182,75,.04);
}
.overview-poster {
grid-area:poster;
position:relative;
width:100%;
aspect-ratio:2 / 3;
overflow:hidden;
border-radius:3px;
background:var(--night-3);
border:1px solid var(--line);
}
.overview-poster img {
width:100%;
height:100%;
object-fit:cover;
filter:saturate(.85) brightness(.9);
}
.overview-poster::after {
content:"";
position:absolute;
inset:0;
background:linear-gradient(180deg,rgba(242,182,75,.10) 0%,rgba(7,11,20,0) 38%,rgba(7,11,20,.72) 100%);
pointer-events:none;
}
.overview-title-block {
grid-area:title;
display:flex;
flex-direction:column;
gap:6px;
padding-bottom:8px;
border-bottom:1px solid var(--line);
}
.movie-title {
font-size:22px;
font-weight:800;
line-height:1.25;
color:#fff;
letter-spacing:.02em;
}
.movie-tagline {
font-size:12px;
color:var(--warm-soft);
letter-spacing:.08em;
font-weight:500;
}
.player-shell {
grid-area:player;
position:relative;
width:100%;
min-width:0;
background:#000;
border:1px solid var(--line);
border-radius:3px;
overflow:hidden;
}
.player-shell video {
display:block;
width:100%;
max-width:100%;
background:#000;
}
.player-controls {
display:flex;
flex-wrap:wrap;
align-items:center;
gap:6px;
padding:7px 8px;
background:linear-gradient(180deg,#0e1626,#0a1020);
border-top:1px solid var(--line);
}
.ctl {
appearance:none;
-webkit-appearance:none;
font-size:11px;
font-weight:600;
color:var(--ink-2);
background:var(--night-3);
border:1px solid var(--line);
border-radius:2px;
padding:4px 8px;
cursor:pointer;
line-height:1.3;
white-space:nowrap;
transition:color .15s,border-color .15s,background .15s;
}
.ctl:hover {color:var(--warm);border-color:var(--warm-soft)}
.ctl-play {
color:var(--night);
background:var(--warm);
border-color:var(--warm);
font-weight:800;
min-width:56px;
}
.ctl-play:hover {background:#ffd27a;border-color:#ffd27a;color:var(--night)}
.ctl-progress {
flex:1 1 130px;
min-width:90px;
height:4px;
padding:0;
background:var(--night-3);
border:1px solid var(--line);
border-radius:2px;
cursor:pointer;
}
.ctl-volume {
flex:0 1 78px;
min-width:56px;
height:4px;
padding:0;
background:var(--night-3);
border:1px solid var(--line);
border-radius:2px;
cursor:pointer;
}
.ctl-progress::-webkit-slider-thumb, .ctl-volume::-webkit-slider-thumb {
-webkit-appearance:none;
width:10px;
height:10px;
border-radius:50%;
background:var(--warm);
border:none;
cursor:pointer;
}
.ctl-progress::-moz-range-thumb, .ctl-volume::-moz-range-thumb {
width:10px;
height:10px;
border:none;
border-radius:50%;
background:var(--warm);
cursor:pointer;
}
.ctl-speed {
padding-right:16px;
}
.ctl.is-active, .ctl.is-muted {
color:var(--night);
background:var(--warm);
border-color:var(--warm);
}
.player-shell.is-theater {
box-shadow:0 0 0 1px var(--warm),0 0 26px rgba(242,182,75,.28);
}
body.lights-off {
background:#01030a;
}
body.lights-off .page-main, body.lights-off .site-footer, body.lights-off .site-header {
opacity:.34;
filter:saturate(.4);
transition:opacity .25s,filter .25s;
}
body.lights-off .player-shell {
opacity:1;
filter:none;
box-shadow:0 0 0 1px var(--warm),0 0 40px rgba(242,182,75,.35);
}
.episode-status {
grid-area:status;
display:flex;
flex-wrap:wrap;
gap:6px 16px;
align-items:baseline;
padding:7px 10px;
background:var(--warm-dim);
border-left:2px solid var(--warm);
border-radius:2px;
}
.status-line {
font-size:12px;
font-weight:700;
color:var(--warm);
letter-spacing:.04em;
}
.status-current {
font-size:11px;
color:var(--ink-2);
}
.movie-details {
grid-area:details;
padding-top:4px;
}
.details-heading, .synopsis-heading, .cast-heading, .timeline-heading, .episodes-heading, .comments-heading, .recommend-heading {
font-size:12px;
font-weight:800;
letter-spacing:.16em;
color:var(--warm);
text-transform:uppercase;
}
.details-heading {
padding-bottom:6px;
margin-bottom:8px;
border-bottom:1px solid var(--line);
}
.details-list {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:0;
border-top:1px solid var(--line);
}
.detail-key {
font-size:11px;
color:var(--ink-3);
padding:5px 0;
border-bottom:1px solid var(--line);
}
.detail-value {
font-size:12px;
color:var(--ink);
padding:5px 0;
border-bottom:1px solid var(--line);
font-weight:600;
}
.details-list .detail-key:nth-of-type(odd) {border-right:1px solid var(--line);padding-right:8px}
.details-list .detail-value:nth-of-type(odd) {padding-right:8px}
.movie-synopsis {
grid-area:synopsis;
padding-top:4px;
}
.synopsis-heading {
padding-bottom:6px;
margin-bottom:8px;
border-bottom:1px solid var(--line);
}
.synopsis-para {
font-size:12px;
line-height:1.6;
color:var(--ink-2);
margin-bottom:6px;
}
.synopsis-para:last-child {margin-bottom:0}
.movie-cast {
grid-area:cast;
padding-top:4px;
min-width:0;
}
.cast-heading {
padding-bottom:6px;
margin-bottom:8px;
border-bottom:1px solid var(--line);
}
.cast-rail {
display:flex;
gap:8px;
overflow-x:auto;
scrollbar-width:thin;
padding-bottom:6px;
}
.cast-card {
flex:0 0 84px;
display:flex;
flex-direction:column;
gap:4px;
align-items:flex-start;
}
.cast-avatar {
width:84px;
height:84px;
background:
linear-gradient(150deg,#1a2437,#0e1626);
border:1px solid var(--line);
border-radius:2px;
position:relative;
overflow:hidden;
}
.cast-avatar::after {
content:"";
position:absolute;
inset:0;
background:radial-gradient(circle at 50% 34%,rgba(242,182,75,.35),rgba(242,182,75,0) 62%);
}
.cast-name {
font-size:12px;
font-weight:700;
color:var(--ink);
}
.cast-role {
font-size:11px;
color:var(--ink-3);
}
.timeline-section {
margin-top:16px;
padding-top:12px;
border-top:1px solid var(--line);
min-width:0;
}
.timeline-heading {
padding-bottom:6px;
margin-bottom:10px;
border-bottom:1px solid var(--line);
}
.timeline-rail {
display:flex;
gap:10px;
overflow-x:auto;
scrollbar-width:thin;
padding-bottom:8px;
}
.timeline-node {
flex:0 0 190px;
display:flex;
flex-direction:column;
gap:5px;
padding:8px 9px;
background:var(--night-2);
border:1px solid var(--line);
border-radius:2px;
}
.timeline-code {
font-family:var(--mono);
font-size:12px;
font-weight:700;
color:var(--warm);
letter-spacing:.06em;
}
.timeline-dot {
width:7px;
height:7px;
border-radius:50%;
background:var(--warm);
box-shadow:0 0 0 3px rgba(242,182,75,.16);
}
.timeline-label {
font-size:11px;
line-height:1.5;
color:var(--ink-2);
}
.episodes-section {
margin-top:16px;
padding-top:12px;
border-top:1px solid var(--line);
}
.episodes-heading {
padding-bottom:6px;
margin-bottom:10px;
border-bottom:1px solid var(--line);
}
.episode-grid {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:8px;
align-items:start;
}
.episode-card {
display:grid;
grid-template-columns:auto 1fr;
grid-template-areas:
"num title"
"num dur"
"sum sum";
gap:3px 8px;
align-content:start;
padding:9px 10px;
background:var(--night-2);
border:1px solid var(--line);
border-left:2px solid var(--line);
border-radius:2px;
cursor:pointer;
transition:border-color .15s,background .15s;
}
.episode-card:hover, .episode-card.is-active {
background:var(--night-3);
border-color:var(--warm-soft);
border-left-color:var(--warm);
}
.episode-number {
grid-area:num;
font-family:var(--mono);
font-size:11px;
font-weight:700;
color:var(--warm);
letter-spacing:.04em;
white-space:nowrap;
padding-top:2px;
}
.episode-title {
grid-area:title;
font-size:13px;
font-weight:700;
color:var(--ink);
}
.episode-duration {
grid-area:dur;
font-size:11px;
color:var(--ink-3);
font-family:var(--mono);
}
.episode-summary {
grid-area:sum;
font-size:11px;
line-height:1.5;
color:var(--ink-2);
max-height:0;
overflow:hidden;
opacity:0;
margin-top:0;
transition:max-height .25s ease,opacity .2s ease,margin-top .2s ease;
}
.episode-card:hover .episode-summary, .episode-card.is-active .episode-summary {
max-height:120px;
opacity:1;
margin-top:5px;
}
.comments-section {
margin-top:16px;
padding-top:12px;
border-top:1px solid var(--line);
}
.comments-heading {
padding-bottom:6px;
margin-bottom:10px;
border-bottom:1px solid var(--line);
}
.comments-columns {
columns:2;
column-gap:10px;
}
.comment-card {
break-inside:avoid;
display:flex;
flex-direction:column;
gap:4px;
padding:9px 10px;
margin-bottom:10px;
background:var(--night-2);
border:1px solid var(--line);
border-radius:2px;
}
.comment-time {
font-family:var(--mono);
font-size:11px;
font-weight:700;
color:var(--warm);
letter-spacing:.06em;
}
.comment-text {
font-size:12px;
line-height:1.55;
color:var(--ink);
}
.comment-nickname {
font-size:11px;
color:var(--ink-3);
align-self:flex-start;
padding-top:2px;
border-top:1px dashed var(--line);
width:100%;
}
.recommend-region {
margin-top:16px;
padding-top:12px;
border-top:1px solid var(--line);
min-width:0;
}
.recommend-heading {
text-align:left;
padding-bottom:6px;
margin-bottom:10px;
border-bottom:1px solid var(--line);
}
.recommend-list {
display:grid;
grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
gap:8px;
align-items:start;
}
a.recommend-item {
display:flex;
flex-direction:column;
gap:5px;
padding:7px;
background:var(--night-2);
border:1px solid var(--line);
border-radius:2px;
text-decoration:none;
color:var(--ink);
transition:border-color .15s,background .15s;
}
a.recommend-item:hover {
border-color:var(--warm-soft);
background:var(--night-3);
}
[data-runtime="recommendation"] img {
width:100%;
aspect-ratio:16 / 10;
height:auto;
object-fit:cover;
border-radius:2px;
background:var(--night-3);
filter:saturate(.85) brightness(.9);
}
a.recommend-item [data-runtime="name"] {
font-size:12px;
font-weight:700;
color:var(--ink);
line-height:1.35;
}
a.recommend-item [data-runtime="blurb"] {
font-size:11px;
line-height:1.45;
color:var(--ink-3);
}
.site-footer {
margin-top:22px;
padding:14px 16px 22px;
border-top:1px solid var(--line);
background:linear-gradient(180deg,#070b14,#0a1020);
display:flex;
flex-direction:column;
gap:10px;
}
.footer-disclaimer {
font-size:11px;
line-height:1.6;
color:var(--ink-3);
max-width:900px;
}
.footer-nav {
display:flex;
flex-wrap:wrap;
gap:8px 18px;
}
a[data-contract="footer-home"], a[data-contract="footer-sitemap"] {
font-size:12px;
font-weight:600;
color:var(--warm);
text-decoration:none;
}
a[data-contract="footer-home"]:hover, a[data-contract="footer-sitemap"]:hover {
color:#ffd27a;
text-decoration:underline;
}
.footer-friend-links {
display:flex;
flex-wrap:wrap;
align-items:center;
gap:6px 14px;
}
.friend-links-label {
font-size:11px;
font-weight:700;
letter-spacing:.12em;
color:var(--ink-3);
}
a.runtime-friend-link {
font-size:11px;
color:var(--ink-2);
text-decoration:none;
}
a.runtime-friend-link:hover {
color:var(--warm);
text-decoration:underline;
}
@media (max-width:1000px){.movie-overview {
grid-template-columns:minmax(0,240px) minmax(0,1fr);
}
.episode-grid {
grid-template-columns:repeat(2,minmax(0,1fr));
}}
@media (max-width:820px){.movie-overview {
grid-template-columns:minmax(0,1fr);
grid-template-areas:
"poster"
"title"
"player"
"status"
"details"
"synopsis"
"cast";
gap:12px;
}
.overview-poster {
max-width:300px;
}
.comments-columns {
columns:1;
}}
@media (max-width:640px){.site-header {
flex-wrap:wrap;
padding:9px 12px;
gap:8px;
}
.category-nav {
justify-content:flex-start;
}
.page-main {
padding:12px 12px 22px;
}
.movie-overview {
padding:12px;
}
.movie-title {
font-size:18px;
}
.episode-grid {
grid-template-columns:minmax(0,1fr);
}
.recommend-list {
grid-template-columns:repeat(auto-fill,minmax(130px,1fr));
}
.details-list {
grid-template-columns:minmax(0,1fr);
}
.overview-poster {
max-width:240px;
}}
@media (max-width:420px){.timeline-node {
flex:0 0 168px;
}
.cast-card {
flex:0 0 76px;
}
.cast-avatar {
width:76px;
height:76px;
}
.recommend-list {
grid-template-columns:repeat(auto-fill,minmax(118px,1fr));
}}

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}