* {box-sizing:border-box;margin:0;padding:0}
:root {
--ink:#1a2027;
--ink-soft:#3d4a55;
--ink-mute:#6b7885;
--cool:#e8ecf0;
--cool-deep:#c9d4de;
--paper:#f6f8fa;
--surface:#eef2f6;
--river:#1f4b52;
--river-deep:#163a40;
--skin:#e6d7c4;
--skin-deep:#d8c3a8;
--line:#c2ccd6;
--line-soft:#d8e0e8;
--accent:#2c5f68;
--pad:clamp(14px,2.2vw,26px);
--gap:14px;
}
html {-webkit-text-size-adjust:100%}
body {
font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Source Han Sans SC",sans-serif;
font-weight:400;
line-height:1.5;
color:var(--ink);
background:
linear-gradient(180deg,var(--cool) 0%,var(--paper) 30%,var(--paper) 100%);
font-size:15px;
letter-spacing:.01em;
}
img {display:block;max-width:100%}
a {color:inherit;text-decoration:none}
ul, ol {list-style:none}
h1, h2, h3 {font-weight:700;line-height:1.25}
button {font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.site-header {
position:sticky;top:0;z-index:40;
background:rgba(246,248,250,.94);
border-bottom:1px solid var(--line);
backdrop-filter:blur(6px);
}
.site-nav {
display:flex;align-items:center;gap:var(--gap);
flex-wrap:wrap;
max-width:1240px;margin:0 auto;
padding:10px var(--pad);
}
a[data-contract="site-name"] {
font-weight:700;font-size:17px;letter-spacing:.06em;
color:var(--river-deep);
text-decoration:none;
border-bottom:2px solid var(--river);
padding-bottom:2px;
}
a[data-contract="site-name"]:hover {color:var(--accent);border-color:var(--accent)}
.category-bar {
display:flex;flex-wrap:wrap;gap:6px;
margin-left:auto;
}
a.runtime-category {
white-space:nowrap;
font-size:13px;
color:var(--ink-soft);
text-decoration:none;
padding:4px 10px;
border:1px solid var(--line);
background:var(--surface);
letter-spacing:.04em;
}
a.runtime-category:hover {
color:var(--paper);
background:var(--river);
border-color:var(--river);
}
.page-main {
max-width:1240px;margin:0 auto;
padding:0 var(--pad) 40px;
display:flex;flex-direction:column;
gap:clamp(22px,3.4vw,40px);
}
.movie-overview {
display:flex;flex-direction:column;
gap:16px;
padding-top:clamp(18px,3vw,34px);
}
.overview-hero {
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,1.55fr);
gap:clamp(16px,2.4vw,32px);
align-items:start;
}
.hero-media {
display:flex;flex-direction:column;
gap:10px;
}
.movie-title {
font-size:clamp(26px,3.6vw,42px);
letter-spacing:.02em;
color:var(--river-deep);
line-height:1.1;
}
.movie-tagline {
font-size:clamp(14px,1.5vw,17px);
color:var(--accent);
font-weight:400;
letter-spacing:.03em;
border-left:3px solid var(--river);
padding-left:10px;
}
.movie-seo {
font-size:13px;
color:var(--ink-soft);
max-width:60ch;
}
.poster-media {
align-self:flex-start;
width:min(230px,58%);
border:1px solid var(--line);
padding:5px;
background:var(--paper);
}
.poster-media img {
width:100%;
display:block;
aspect-ratio:9 / 16;
object-fit:cover;
filter:saturate(.82) contrast(1.04);
}
.hero-player {
display:flex;flex-direction:column;
gap:8px;
min-width:0;
border:1px solid var(--line);
background:var(--river-deep);
padding:8px;
}
.hero-player video {
display:block;
width:100%;
aspect-ratio:16 / 9;
background:#0d1b1f;
object-fit:cover;
}
.player-controls {
display:flex;flex-wrap:wrap;gap:4px;
}
.control-btn {
font-size:12px;
letter-spacing:.04em;
color:var(--cool);
background:rgba(255,255,255,.06);
border:1px solid rgba(201,212,222,.35);
padding:4px 9px;
transition:background .15s,color .15s,border-color .15s;
}
.control-btn:hover {
background:var(--skin);color:var(--river-deep);border-color:var(--skin);
}
.control-btn.is-active {
background:var(--accent);color:#fff;border-color:var(--accent);
}
.hero-player.theater-mode {
border-color:var(--skin);
box-shadow:0 0 0 1px var(--skin) inset;
}
body.lights-off {
background:#0b1418;
color:var(--cool);
}
body.lights-off .movie-title, body.lights-off .movie-tagline {color:var(--skin)}
body.lights-off .site-header {background:rgba(11,20,24,.94)}
body.lights-off a[data-contract="site-name"] {color:var(--skin);border-color:var(--skin)}
body.lights-off a.runtime-category {background:#132228;color:var(--cool);border-color:#2a3b44}
body.lights-off .poster-media, body.lights-off .cast-card, body.lights-off .episode-card, body.lights-off .comment-block, body.lights-off .recommend-item, body.lights-off .detail-row, body.lights-off .timeline-list, body.lights-off .site-footer {background:#101c22;border-color:#26363e;color:var(--cool)}
body.lights-off .movie-seo, body.lights-off .synopsis-para {color:var(--cool-deep)}
.episode-status {
display:flex;flex-wrap:wrap;gap:10px;
align-items:baseline;
padding:9px 0;
border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
}
.status-current {
font-weight:700;
font-size:15px;
letter-spacing:.05em;
color:var(--skin-deep);
background:var(--river);
padding:3px 12px;
}
.status-total {
font-size:13px;
color:var(--ink-mute);
letter-spacing:.06em;
}
.section-heading {
font-size:clamp(17px,2vw,21px);
letter-spacing:.05em;
color:var(--river-deep);
padding-bottom:7px;
margin-bottom:12px;
border-bottom:2px solid var(--river);
display:flex;align-items:baseline;gap:10px;
}
.section-heading::before {
content:"";
display:inline-block;
width:6px;height:6px;
background:var(--river);
transform:rotate(45deg);
flex:none;
}
.cast-section {margin-top:2px}
.cast-track {
display:grid;
grid-auto-flow:column;
grid-auto-columns:minmax(190px,1fr);
gap:var(--gap);
overflow-x:auto;
overscroll-behavior-x:contain;
padding-bottom:8px;
scroll-snap-type:x proximity;
}
.cast-card {
scroll-snap-align:start;
display:flex;flex-direction:column;gap:6px;
padding:12px 12px 14px;
background:var(--surface);
border:1px solid var(--line);
border-top:3px solid var(--river);
min-height:100%;
}
.cast-name {
font-weight:700;
font-size:15px;
letter-spacing:.06em;
color:var(--river-deep);
}
.cast-note {
font-size:12.5px;
color:var(--ink-soft);
line-height:1.5;
}
.synopsis-section {}
.synopsis-para {
font-size:14px;
color:var(--ink-soft);
max-width:74ch;
margin-bottom:8px;
}
.synopsis-para:last-child {margin-bottom:0}
.details-list {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
gap:0 var(--gap);
border-top:1px solid var(--line-soft);
}
.detail-row {
display:flex;
align-items:baseline;
gap:10px;
padding:6px 0;
border-bottom:1px solid var(--line-soft);
}
.detail-key {
flex:none;
width:5.5em;
font-size:12.5px;
color:var(--ink-mute);
letter-spacing:.06em;
}
.detail-value {
font-size:13.5px;
color:var(--ink);
}
.timeline-list {
position:relative;
border:1px solid var(--line);
background:var(--surface);
padding:6px 14px 6px 0;
}
.timeline-item {
display:grid;
grid-template-columns:auto 22px minmax(0,1fr);
align-items:start;
gap:12px;
padding:9px 0 9px 14px;
position:relative;
}
.timeline-item + .timeline-item {border-top:1px solid var(--line-soft)}
.timeline-timecode {
font-family:"SFMono-Regular",Menlo,Consolas,"Liberation Mono",monospace;
font-size:12.5px;
letter-spacing:.05em;
color:var(--river);
white-space:nowrap;
padding-top:1px;
}
.timeline-node {
width:9px;height:9px;
border:1.5px solid var(--river);
background:var(--paper);
position:relative;
margin-top:5px;
justify-self:center;
}
.timeline-item:not(:last-child) .timeline-node::after {
content:"";
position:absolute;
left:50%;top:100%;
width:1px;height:calc(200% + 9px);
background:var(--line);
transform:translateX(-50%);
}
.timeline-item-active {
background:linear-gradient(90deg,rgba(31,75,82,.09),rgba(31,75,82,0));
}
.timeline-item-active .timeline-node {
border-color:var(--skin-deep);
background:var(--skin);
box-shadow:0 0 0 3px rgba(216,195,168,.4);
}
.timeline-item-active .timeline-timecode {color:var(--river-deep);font-weight:700}
.timeline-item-active .timeline-label {font-weight:700;color:var(--river-deep)}
.timeline-label {
font-size:13.5px;
color:var(--ink-soft);
}
.episodes-grid {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:var(--gap);
}
.episode-card {
display:grid;
grid-template-columns:minmax(0,1fr) auto;
align-items:baseline;
gap:4px 12px;
padding:11px 13px 13px;
background:var(--surface);
border:1px solid var(--line);
border-left:3px solid var(--line);
}
.episode-title {
grid-column:1;
font-size:14px;
letter-spacing:.03em;
color:var(--ink);
}
.episode-duration {
grid-column:2;
font-family:"SFMono-Regular",Menlo,Consolas,"Liberation Mono",monospace;
font-size:12px;
color:var(--ink-mute);
white-space:nowrap;
}
.episode-summary {
grid-column:1 / -1;
font-size:12.5px;
color:var(--ink-soft);
line-height:1.5;
padding-left:10px;
border-left:1px solid var(--line-soft);
}
.episode-card-active {
border-left-color:var(--river);
background:var(--paper);
box-shadow:0 0 0 1px var(--river) inset;
}
.episode-card-active .episode-title {color:var(--river-deep);font-weight:700}
.episode-card-active .episode-duration {color:var(--accent)}
.comments-stack {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:var(--gap);
align-items:start;
}
.comment-block {
padding:11px 13px 13px;
background:var(--cool);
border:1px solid var(--line);
border-bottom:3px solid var(--river);
display:flex;flex-direction:column;gap:5px;
}
.comment-block:nth-child(2n) {background:var(--skin);border-bottom-color:var(--skin-deep)}
.comment-block:nth-child(3n) {background:var(--surface);border-bottom-color:var(--accent)}
.comment-nickname {
font-weight:700;
font-size:12.5px;
letter-spacing:.06em;
color:var(--river-deep);
}
.comment-text {
font-size:13px;
color:var(--ink-soft);
line-height:1.5;
}
.recommend-region {display:flex;flex-direction:column}
.recommend-region .region-heading {
font-size:15px;
letter-spacing:.05em;
color:var(--river-deep);
padding-bottom:6px;
margin-bottom:9px;
border-bottom:1px solid var(--line);
}
.recommend-list {
display:grid;
grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
gap:10px;
}
a.recommend-item {
display:flex;flex-direction:column;gap:5px;
padding:7px;
background:var(--paper);
border:1px solid var(--line);
transition:border-color .15s,background .15s;
}
[data-runtime="recommendation"] img, .recommend-thumb {
width:100%;
display:block;
aspect-ratio:16 / 9;
height:auto;
object-fit:cover;
filter:saturate(.85);
}
.recommend-item:hover {
border-color:var(--river);
background:var(--surface);
}
.recommend-item:hover .recommend-name {color:var(--accent)}
.recommend-name {
font-size:13px;
font-weight:700;
color:var(--ink);
letter-spacing:.02em;
}
.recommend-blurb {
font-size:11.5px;
color:var(--ink-mute);
line-height:1.45;
}
.site-footer {
max-width:1240px;
margin:0 auto;
padding:20px var(--pad) 40px;
border-top:1px solid var(--line);
display:flex;flex-direction:column;gap:12px;
font-size:12.5px;
color:var(--ink-mute);
}
.friend-links {
display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;
}
.friend-links-label {
font-weight:700;
color:var(--river-deep);
letter-spacing:.06em;
font-size:12.5px;
}
a.runtime-friend-link {
color:var(--ink-soft);
text-decoration:none;
border-bottom:1px solid transparent;
}
a.runtime-friend-link:hover {
color:var(--accent);
border-bottom-color:var(--accent);
}
.footer-nav {
display:flex;flex-wrap:wrap;gap:16px;
}
a[data-contract="footer-home"], a[data-contract="footer-sitemap"] {
color:var(--river);
text-decoration:underline;
text-underline-offset:3px;
text-decoration-thickness:1px;
letter-spacing:.04em;
}
a[data-contract="footer-home"]:hover, a[data-contract="footer-sitemap"]:hover {
color:var(--accent);
text-decoration-thickness:2px;
}
.footer-disclaimer {
font-size:12px;
color:var(--ink-mute);
line-height:1.6;
max-width:80ch;
}
@media (max-width:900px){.overview-hero {grid-template-columns:minmax(0,1fr)}
.poster-media {width:min(200px,46%)}
.comments-stack {grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){body {font-size:14.5px}
.page-main {padding:0 12px 28px;gap:20px}
.site-nav {padding:9px 12px}
.poster-media {width:min(170px,54%)}
.episodes-grid {grid-template-columns:minmax(0,1fr)}
.comments-stack {grid-template-columns:minmax(0,1fr)}
.cast-track {grid-auto-columns:minmax(165px,1fr);gap:10px}
.timeline-item {grid-template-columns:auto 18px minmax(0,1fr);gap:9px;padding-left:10px}
.timeline-list {padding-right:10px}
.details-list {grid-template-columns:minmax(0,1fr)}
.recommend-list {grid-template-columns:repeat(auto-fill,minmax(125px,1fr));gap:8px}
.site-footer {padding:18px 12px 32px}}
@media (max-width:400px){.poster-media {width:100%}
.recommend-list {grid-template-columns:minmax(0,1fr)}
.cast-track {grid-auto-columns:minmax(150px,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}