*, *::before, *::after {box-sizing:border-box;margin:0;padding:0}
:root {
--abyss:#0d1a1f;
--deep:#13242b;
--slate:#1b3038;
--steel:#26414b;
--mist:#7c98a1;
--fog:#a8c0c8;
--pale:#dce8ec;
--ember:#ff7a29;
--ember-deep:#e05f12;
--ember-soft:rgba(255,122,41,.13);
--rule:rgba(168,192,200,.16);
--font:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
html {-webkit-text-size-adjust:100%;text-size-adjust:100%}
body {
background:var(--abyss);
color:var(--pale);
font-family:var(--font);
font-size:14px;
line-height:1.55;
letter-spacing:.01em;
min-height:100vh;
overflow-x:hidden;
}
a {color:var(--fog);text-decoration:none}
img {display:block;max-width:100%}
ul, ol {list-style:none}
h1, h2, h3 {font-weight:700;line-height:1.25}
button {font-family:inherit;cursor:pointer}
.site-header {
position:sticky;top:0;z-index:40;
background:rgba(13,26,31,.88);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
border-bottom:1px solid var(--rule);
}
.header-inner {
display:flex;align-items:center;gap:14px;flex-wrap:wrap;
padding:9px 16px;
max-width:1180px;margin:0 auto;
}
a[data-contract="site-name"] {
color:var(--pale);
text-decoration:none;
font-size:16px;
font-weight:800;
letter-spacing:.14em;
white-space:nowrap;
border-left:3px solid var(--ember);
padding-left:9px;
}
a[data-contract="site-name"]:hover {color:var(--ember)}
.category-bar {
display:flex;align-items:center;gap:6px;flex-wrap:wrap;
margin-left:auto;
}
a.runtime-category {
display:inline-block;
color:var(--fog);
text-decoration:none;
font-size:12px;
letter-spacing:.08em;
padding:3px 10px;
border:1px solid var(--rule);
border-radius:2px;
white-space:nowrap;
transition:color .18s,border-color .18s,background .18s;
}
a.runtime-category:hover {
color:var(--abyss);
background:var(--ember);
border-color:var(--ember);
}
.page-main {
max-width:1180px;
margin:0 auto;
padding:16px 16px 0;
display:flex;flex-direction:column;gap:22px;
}
.movie-overview {
display:flex;flex-direction:column;gap:14px;
border:1px solid var(--rule);
background:linear-gradient(160deg,var(--deep),var(--abyss) 72%);
padding:14px;
}
.overview-hero {
display:grid;
grid-template-columns:minmax(0,190px) minmax(0,1fr);
gap:16px;
align-items:start;
}
.hero-poster-wrap {
position:relative;
align-self:start;
}
.hero-poster-wrap::after {
content:"";position:absolute;inset:auto 0 0 0;height:42%;
background:linear-gradient(to top,var(--abyss),transparent);
pointer-events:none;
}
.poster-img {
width:100%;
height:auto;
display:block;
object-fit:cover;
border:1px solid var(--steel);
filter:saturate(.85) contrast(1.05);
}
.hero-body {
display:flex;flex-direction:column;gap:10px;min-width:0;
}
.movie-title {
font-size:clamp(20px,3.4vw,30px);
font-weight:800;
letter-spacing:.06em;
color:#fff;
}
.movie-tagline {
font-size:13px;
color:var(--ember);
letter-spacing:.12em;
border-left:2px solid var(--ember);
padding-left:9px;
}
.hero-player-wrap {
position:relative;
width:100%;
min-width:0;
border:1px solid var(--steel);
background:#050d11;
}
.player-video {
display:block;
width:100%;
max-width:none;
background:#050d11;
object-fit:cover;
}
.player-controls {
display:flex;flex-wrap:wrap;gap:4px;
padding:6px;
background:var(--deep);
border-top:1px solid var(--rule);
}
.ctrl-btn {
font-size:11px;
letter-spacing:.06em;
color:var(--fog);
background:transparent;
border:1px solid var(--rule);
border-radius:2px;
padding:3px 8px;
line-height:1.4;
transition:color .16s,background .16s,border-color .16s;
}
.ctrl-btn:hover {color:var(--pale);border-color:var(--mist)}
.ctrl-btn.is-active, .ctrl-btn.click {
color:var(--abyss);
background:var(--ember);
border-color:var(--ember);
}
.ctrl-play.is-active, .ctrl-btn.play.is-active {background:var(--ember-deep);color:#fff;border-color:var(--ember-deep)}
.player-video.theater-mode {box-shadow:0 0 0 1px var(--ember)}
.player-video.lights-off {filter:brightness(.55)}
.player-video.loading {opacity:.7}
.hero-meta-rail {
display:flex;flex-wrap:wrap;gap:8px;
}
.recorder-timecode, .countdown-block {
flex:1 1 150px;
display:flex;flex-direction:column;gap:2px;
padding:7px 10px;
border:1px solid var(--rule);
border-left:3px solid var(--mist);
background:rgba(38,65,75,.28);
}
.countdown-block {
border-left-color:var(--ember);
background:var(--ember-soft);
}
.timecode-label, .countdown-label {
font-size:10px;
letter-spacing:.16em;
color:var(--mist);
}
.countdown-label {color:var(--ember)}
.timecode-value, .countdown-value {
font-size:20px;
font-weight:800;
letter-spacing:.06em;
font-variant-numeric:tabular-nums;
color:var(--pale);
}
.countdown-value {color:var(--ember)}
.episode-status {
display:flex;flex-wrap:wrap;gap:6px;
}
.status-chip {
font-size:11px;
letter-spacing:.1em;
padding:3px 10px;
border:1px solid var(--rule);
border-radius:2px;
color:var(--fog);
}
.status-current {
color:var(--abyss);
background:var(--ember);
border-color:var(--ember);
font-weight:700;
}
.status-total {border-color:var(--steel)}
.status-update {color:var(--mist)}
.section-heading {
font-size:13px;
font-weight:700;
letter-spacing:.2em;
color:var(--pale);
text-transform:uppercase;
padding-left:9px;
border-left:3px solid var(--ember);
margin-bottom:12px;
}
.cast-strip {
border-top:1px solid var(--rule);
padding-top:14px;
}
.cast-list {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
gap:8px;
}
.cast-item {
display:flex;flex-direction:column;gap:1px;
padding:7px 9px;
border:1px solid var(--rule);
background:var(--deep);
align-self:start;
}
.cast-name {
font-size:14px;
font-weight:700;
color:var(--pale);
letter-spacing:.04em;
}
.cast-role {
font-size:11px;
color:var(--mist);
letter-spacing:.05em;
}
.synopsis-block {
border-top:1px solid var(--rule);
padding-top:14px;
}
.synopsis-para {
font-size:13.5px;
color:var(--fog);
line-height:1.75;
margin-bottom:8px;
max-width:72ch;
}
.synopsis-para:last-child {margin-bottom:0}
.details-block {
border-top:1px solid var(--rule);
padding-top:14px;
}
.details-list {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:1px;
background:var(--rule);
border:1px solid var(--rule);
}
.detail-row {
display:flex;align-items:baseline;gap:8px;
padding:6px 10px;
background:var(--deep);
}
.detail-key {
font-size:11px;
letter-spacing:.1em;
color:var(--mist);
flex:0 0 auto;
}
.detail-value {
font-size:12.5px;
color:var(--pale);
margin-left:auto;
text-align:right;
}
.timeline-section {
border-top:1px solid var(--rule);
padding-top:16px;
}
.timeline-list {
display:flex;flex-direction:column;
position:relative;
padding-left:2px;
}
.timeline-item {
display:grid;
grid-template-columns:64px minmax(0,1fr);
gap:12px;
align-items:baseline;
padding:8px 4px 8px 12px;
border-left:1px solid var(--steel);
position:relative;
transition:background .18s;
}
.timeline-item::before {
content:"";position:absolute;left:-3px;top:15px;
width:5px;height:5px;border-radius:50%;
background:var(--mist);
}
.timeline-item:hover {background:rgba(38,65,75,.26)}
.timeline-item:hover::before {background:var(--ember)}
.timeline-timecode {
font-size:14px;
font-weight:800;
letter-spacing:.05em;
font-variant-numeric:tabular-nums;
color:var(--ember);
}
.timeline-label {
font-size:13px;
color:var(--fog);
}
.episodes-section {
border-top:1px solid var(--rule);
padding-top:16px;
}
.episode-grid {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:8px;
}
.episode-card {
display:flex;flex-direction:column;gap:4px;
align-self:start;
padding:10px;
border:1px solid var(--rule);
background:var(--deep);
transition:border-color .18s,transform .18s;
}
.episode-card:hover {border-color:var(--mist)}
.episode-number {
font-size:10px;
letter-spacing:.16em;
color:var(--mist);
}
.episode-title {
font-size:14px;
font-weight:700;
color:var(--pale);
letter-spacing:.03em;
}
.episode-summary {
font-size:12px;
color:var(--fog);
line-height:1.6;
}
.episode-duration {
font-size:11px;
color:var(--mist);
margin-top:auto;
font-variant-numeric:tabular-nums;
}
.episode-card-active {
background:var(--ember);
border-color:var(--ember);
color:#1a0d04;
}
.episode-card-active .episode-number {color:rgba(26,13,4,.7)}
.episode-card-active .episode-title {color:#1a0d04}
.episode-card-active .episode-summary {color:rgba(26,13,4,.82)}
.episode-card-active .episode-duration {color:rgba(26,13,4,.7)}
.comments-section {
border-top:1px solid var(--rule);
padding-top:18px;
}
.comments-columns {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;
align-items:start;
}
.comment-column {
display:flex;flex-direction:column;gap:8px;
}
.comment-card {
padding:9px 11px;
border:1px solid var(--rule);
border-left:2px solid var(--steel);
background:var(--deep);
}
.comment-card:nth-child(even) {border-left-color:var(--mist)}
.comment-nickname {
display:block;
font-size:11px;
font-weight:700;
letter-spacing:.08em;
color:var(--ember);
margin-bottom:3px;
}
.comment-text {
font-size:12px;
line-height:1.65;
color:var(--fog);
}
.recommend-region {
border-top:1px solid var(--rule);
padding-top:16px;
}
.recommend-title {
font-size:13px;
}
.recommend-row {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
gap:9px;
align-items:start;
}
a.recommend-card {
display:flex;flex-direction:column;gap:5px;
align-self:start;
padding:8px;
border:1px solid var(--rule);
background:var(--deep);
color:var(--fog);
text-decoration:none;
transition:border-color .18s,transform .18s,background .18s;
}
a.recommend-card:hover {
border-color:var(--ember);
background:rgba(255,122,41,.07);
transform:translateY(-2px);
}
[data-runtime="recommendation"] img {
width:100%;
max-width:100%;
height:auto;
aspect-ratio:16 / 10;
object-fit:cover;
display:block;
border:1px solid var(--steel);
}
.recommend-name {
font-size:13px;
font-weight:700;
color:var(--pale);
letter-spacing:.03em;
}
a.recommend-card:hover .recommend-name {color:var(--ember)}
.recommend-blurb {
font-size:11.5px;
line-height:1.55;
color:var(--mist);
}
.site-footer {
margin-top:26px;
border-top:1px solid var(--rule);
background:var(--deep);
}
.footer-inner {
max-width:1180px;margin:0 auto;
padding:16px;
display:flex;flex-direction:column;gap:12px;
}
.friend-links {
display:flex;flex-wrap:wrap;align-items:center;gap:6px;
}
.friend-links-label {
font-size:11px;
letter-spacing:.14em;
color:var(--mist);
margin-right:4px;
}
a.runtime-friend-link {
font-size:11.5px;
color:var(--fog);
text-decoration:none;
padding:2px 8px;
border:1px solid var(--rule);
border-radius:2px;
white-space:nowrap;
transition:color .16s,border-color .16s,background .16s;
}
a.runtime-friend-link:hover {
color:var(--abyss);
background:var(--ember);
border-color:var(--ember);
}
.footer-nav {
display:flex;flex-wrap:wrap;gap:14px;
}
a.footer-link {
font-size:12px;
letter-spacing:.08em;
color:var(--fog);
text-decoration:none;
}
a[data-contract="footer-home"] {color:var(--fog)}
a[data-contract="footer-home"]:hover {color:var(--ember)}
a[data-contract="footer-sitemap"] {color:var(--mist)}
a[data-contract="footer-sitemap"]:hover {color:var(--ember)}
.footer-disclaimer {
font-size:11px;
line-height:1.7;
color:var(--mist);
max-width:80ch;
}
@media (max-width:820px){.overview-hero {
grid-template-columns:minmax(0,150px) minmax(0,1fr);
gap:12px;
}
.episode-grid {grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.page-main {padding:12px 12px 0;gap:18px}
.overview-hero {
grid-template-columns:1fr;
gap:12px;
}
.hero-poster-wrap {
max-width:190px;
}
.hero-poster-wrap::after {display:none}
.movie-overview {padding:12px}
.header-inner {padding:8px 12px;gap:8px}
.category-bar {margin-left:0;width:100%}
.episode-grid {grid-template-columns:1fr}
.comments-columns {grid-template-columns:1fr}
.cast-list {grid-template-columns:repeat(2,minmax(0,1fr))}
.details-list {grid-template-columns:1fr}
.timeline-item {grid-template-columns:56px minmax(0,1fr);gap:9px}
.recorder-timecode, .countdown-block {flex:1 1 100%}
.recommend-row {grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.cast-list {grid-template-columns:1fr}
.recommend-row {grid-template-columns:1fr}
.timecode-value, .countdown-value {font-size:18px}}

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}