* {margin:0;padding:0;box-sizing:border-box}
:root {
--iron:#1a1e24;
--iron-2:#232932;
--iron-3:#2c333d;
--dragon:#3d6fb4;
--dragon-bright:#5b9be0;
--dragon-deep:#1e3a63;
--spark:#e8a24a;
--spark-hot:#ffcf7a;
--text:#c7ced8;
--text-dim:#7d8794;
--text-bright:#eef2f7;
--line:#333b46;
--line-soft:#2a3038;
}
html {-webkit-text-size-adjust:100%}
body {
background:var(--iron);
color:var(--text);
font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",-apple-system,"Segoe UI",system-ui,sans-serif;
font-size:14px;
line-height:1.4;
font-stretch:condensed;
letter-spacing:.01em;
overflow-x:hidden;
}
img {display:block;max-width:100%}
a {color:inherit;text-decoration:none}
ul, ol {list-style:none}
h1, h2, h3 {font-weight:800;line-height:1.2}
button, input, select {font:inherit;color:inherit}
::selection {background:var(--dragon);color:#fff}
.site-header {
position:sticky;top:0;z-index:50;
background:rgba(20,24,30,.94);
border-bottom:1px solid var(--line);
backdrop-filter:blur(6px);
}
.header-bar {
display:flex;align-items:center;gap:18px;
padding:8px 16px;
max-width:1600px;margin:0 auto;
}
a[data-contract="site-name"].brand {
font-size:19px;font-weight:900;letter-spacing:.06em;
color:var(--text-bright);
text-decoration:none;
text-transform:uppercase;
white-space:nowrap;
border-left:3px solid var(--dragon);
padding-left:9px;
}
a[data-contract="site-name"].brand:hover {color:var(--dragon-bright)}
.category-nav {
display:flex;flex-wrap:wrap;gap:6px;
flex:1 1 auto;
min-width:0;
}
a.runtime-category {
display:inline-block;
white-space:nowrap;
font-size:12px;
font-weight:600;
letter-spacing:.04em;
color:var(--text-dim);
text-decoration:none;
padding:3px 9px;
border:1px solid var(--line);
background:var(--iron-2);
transition:color .15s,border-color .15s,background .15s;
}
a.runtime-category:hover {
color:var(--text-bright);
border-color:var(--dragon);
background:var(--dragon-deep);
}
.page-main {
max-width:1600px;
margin:0 auto;
padding:0 16px 4px;
}
.page-main>section {
padding:10px 0;
border-bottom:1px solid var(--line-soft);
}
.section-heading {
font-size:15px;
letter-spacing:.08em;
color:var(--text-bright);
margin-bottom:8px;
padding-left:8px;
border-left:3px solid var(--spark);
text-transform:none;
}
.hero-shell {padding-top:14px!important}
.hero-grid {
display:grid;
grid-template-columns:minmax(0,2fr) minmax(0,1fr);
gap:20px;
align-items:start;
}
.poster-column {min-width:0}
.poster-frame {
position:relative;
width:100%;
max-width:340px;
margin:0;
border:1px solid var(--line);
background:var(--iron-2);
box-shadow:0 0 0 1px rgba(61,111,180,.25),0 12px 30px -14px rgba(0,0,0,.9);
}
.poster-frame img {
width:100%;
height:auto;
display:block;
object-fit:cover;
filter:saturate(.85) contrast(1.06);
}
.poster-caption {
font-size:11px;
letter-spacing:.05em;
color:var(--text-dim);
padding:6px 8px;
border-top:1px solid var(--line);
background:linear-gradient(180deg,var(--iron-3),var(--iron-2));
}
.hero-info-column {min-width:0;display:flex;flex-direction:column;gap:10px}
.movie-title {
font-size:clamp(26px,3.4vw,44px);
font-weight:900;
letter-spacing:.03em;
color:var(--text-bright);
line-height:1.05;
text-shadow:0 0 26px rgba(61,111,180,.35);
}
.movie-tagline {
font-size:14px;
font-weight:700;
letter-spacing:.18em;
color:var(--spark);
padding-bottom:8px;
border-bottom:1px solid var(--line);
}
.movie-seo {
font-size:13px;
line-height:1.55;
color:var(--text);
max-width:62ch;
}
.hero-metrics {
display:flex;flex-wrap:wrap;gap:6px;
}
.metric-chip {
font-size:12px;
font-weight:700;
letter-spacing:.04em;
padding:3px 10px;
border:1px solid var(--line);
background:var(--iron-2);
color:var(--text);
white-space:nowrap;
}
.metric-score {color:var(--spark-hot);border-color:#5a4526;background:#2a2214}
.metric-current {color:var(--dragon-bright);border-color:var(--dragon-deep);background:#16233a}
.player-shell {
position:relative;
width:100%;
border:1px solid var(--line);
background:#0d1014;
box-shadow:0 10px 28px -16px rgba(0,0,0,.95);
}
.player-shell.is-theater {
box-shadow:0 0 0 2px var(--dragon),0 20px 44px -18px rgba(0,0,0,1);
}
.player-shell.is-lights-off {background:#000}
.player-shell.is-lights-off video {filter:brightness(.72) contrast(1.12)}
video[data-contract="player"] {
display:block;
width:100%;
background:#000;
}
.player-controls {
display:flex;
flex-wrap:wrap;
align-items:center;
gap:6px 10px;
padding:7px 9px;
border-top:1px solid var(--line);
background:var(--iron-2);
}
.ctrl-btn {
cursor:pointer;
font-size:11px;
font-weight:700;
letter-spacing:.03em;
padding:4px 9px;
color:var(--text);
background:var(--iron-3);
border:1px solid var(--line);
transition:background .15s,color .15s,border-color .15s;
}
.ctrl-btn:hover {background:var(--dragon-deep);border-color:var(--dragon);color:#fff}
.ctrl-btn.is-active {background:var(--dragon);border-color:var(--dragon-bright);color:#fff}
.ctrl-progress, .ctrl-volume, .ctrl-speed {
display:inline-flex;align-items:center;gap:5px;
font-size:11px;
font-weight:600;
color:var(--text-dim);
white-space:nowrap;
}
.ctrl-progress {flex:1 1 150px;min-width:120px}
.ctrl-progress input[type="range"] {flex:1 1 auto;min-width:0}
.player-controls input[type="range"] {
-webkit-appearance:none;appearance:none;
height:4px;
background:var(--iron-3);
border:1px solid var(--line);
cursor:pointer;
}
.player-controls input[type="range"]::-webkit-slider-thumb {
-webkit-appearance:none;appearance:none;
width:11px;height:11px;
background:var(--spark);
border:1px solid var(--spark-hot);
border-radius:0;
}
.player-controls input[type="range"]::-moz-range-thumb {
width:11px;height:11px;
background:var(--spark);
border:1px solid var(--spark-hot);
border-radius:0;
}
.player-controls select {
font-size:11px;
padding:3px 5px;
color:var(--text);
background:var(--iron-3);
border:1px solid var(--line);
cursor:pointer;
}
.cast-matrix {min-width:0}
.cast-grid {
display:grid;
grid-template-columns:repeat(8,minmax(0,1fr));
gap:8px;
}
.cast-card {
display:flex;
flex-direction:column;
gap:5px;
padding:7px;
background:var(--iron-2);
border:1px solid var(--line);
border-top:2px solid var(--dragon-deep);
transition:border-color .15s,transform .15s;
}
.cast-card:hover {border-top-color:var(--spark);transform:translateY(-2px)}
.cast-avatar {
width:100%;
aspect-ratio:1/1;
border:1px solid var(--line);
background:
radial-gradient(circle at 50% 38%,var(--iron-3) 0 34%,transparent 35%),
linear-gradient(160deg,var(--dragon-deep),var(--iron-3) 70%);
position:relative;
overflow:hidden;
}
.cast-avatar::after {
content:"";
position:absolute;inset:auto 0 0 0;
height:3px;
background:linear-gradient(90deg,var(--spark),transparent 80%);
opacity:.7;
}
.cast-name {
font-size:13px;
font-weight:800;
color:var(--text-bright);
letter-spacing:.02em;
}
.cast-role {
font-size:10.5px;
line-height:1.3;
color:var(--text-dim);
display:inline-block;
border:1px solid var(--line-soft);
padding:2px 5px;
background:var(--iron-3);
align-self:flex-start;
}
.synopsis-block {min-width:0}
.synopsis-list {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:0;
}
.synopsis-item {
font-size:12.5px;
line-height:1.5;
color:var(--text);
padding:7px 12px;
border-right:1px solid var(--line-soft);
position:relative;
counter-increment:syn;
}
.synopsis-item:last-child {border-right:none}
.synopsis-item::first-letter {
color:var(--spark);
font-weight:900;
}
.details-block {min-width:0}
.detail-list {
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:0;
border-top:1px solid var(--line-soft);
}
.detail-row {
display:flex;
align-items:baseline;
gap:6px;
padding:5px 10px;
border-bottom:1px solid var(--line-soft);
border-right:1px solid var(--line-soft);
min-width:0;
}
.detail-key {
font-size:11px;
font-weight:700;
color:var(--text-dim);
letter-spacing:.05em;
white-space:nowrap;
flex:0 0 auto;
}
.detail-value {
font-size:12.5px;
font-weight:600;
color:var(--text-bright);
min-width:0;
}
.timeline-section {min-width:0}
.timeline-scroller {
display:flex;
gap:0;
overflow-x:auto;
overflow-y:hidden;
padding:8px 0 10px;
scroll-snap-type:x proximity;
scrollbar-width:thin;
scrollbar-color:var(--dragon-deep) var(--iron-2);
}
.timeline-scroller::-webkit-scrollbar {height:6px}
.timeline-scroller::-webkit-scrollbar-track {background:var(--iron-2)}
.timeline-scroller::-webkit-scrollbar-thumb {background:var(--dragon-deep)}
.timeline-node {
position:relative;
flex:0 0 auto;
width:210px;
scroll-snap-align:start;
padding:14px 12px 8px;
margin-right:10px;
background:var(--iron-2);
border:1px solid var(--line);
border-top:1px solid var(--line);
display:flex;
flex-direction:column;
gap:5px;
}
.timeline-node::before {
content:"";
position:absolute;
top:0;left:0;right:0;
height:1px;
background:linear-gradient(90deg,var(--dragon),transparent);
}
.node-spark {
width:9px;height:9px;
transform:rotate(45deg);
background:var(--spark);
box-shadow:0 0 10px 2px rgba(232,162,74,.85);
border:1px solid var(--spark-hot);
}
.node-timecode {
font-size:11px;
font-weight:800;
letter-spacing:.12em;
color:var(--dragon-bright);
font-variant-numeric:tabular-nums;
}
.node-label {
font-size:12px;
line-height:1.4;
color:var(--text);
}
.episodes-section {min-width:0}
.episode-grid {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:8px;
}
.episode-card {
display:flex;
flex-direction:column;
gap:3px;
padding:8px 10px;
background:var(--iron-2);
border:1px solid var(--line);
border-left:2px solid var(--dragon-deep);
transition:border-left-color .15s,background .15s;
}
.episode-card:hover {background:var(--iron-3);border-left-color:var(--spark)}
.episode-number {
font-size:10.5px;
font-weight:800;
letter-spacing:.14em;
color:var(--spark);
}
.episode-title {
font-size:14px;
font-weight:800;
color:var(--text-bright);
line-height:1.25;
}
.episode-summary {
font-size:11.5px;
line-height:1.45;
color:var(--text-dim);
border-top:1px solid var(--line-soft);
padding-top:4px;
}
.episode-duration {
font-size:10.5px;
font-weight:700;
letter-spacing:.06em;
color:var(--dragon-bright);
align-self:flex-start;
}
.comments-section {min-width:0}
.comment-stack {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:8px;
align-items:start;
}
.comment-card {
display:grid;
grid-template-columns:auto 1fr;
grid-template-areas:"av nick" "txt txt";
gap:2px 8px;
padding:7px 9px;
background:var(--iron-2);
border:1px solid var(--line-soft);
border-bottom:1px solid var(--line);
}
.comment-avatar {
grid-area:av;
width:26px;height:26px;
border:1px solid var(--line);
background:
radial-gradient(circle at 50% 40%,var(--dragon-deep) 0 40%,transparent 41%),
linear-gradient(150deg,var(--iron-3),#161a20);
}
.comment-nickname {
grid-area:nick;
align-self:center;
font-size:12px;
font-weight:800;
color:var(--dragon-bright);
letter-spacing:.02em;
}
.comment-text {
grid-area:txt;
font-size:11.5px;
line-height:1.45;
color:var(--text);
}
.recommend-region {min-width:0;border-bottom:1px solid var(--line-soft);padding:10px 0}
.region-title {
font-size:14px;
font-weight:800;
letter-spacing:.05em;
color:var(--text-bright);
display:inline-block;
padding-bottom:4px;
margin-bottom:8px;
border-bottom:2px solid var(--spark);
}
.region-columns {
display:grid;
grid-template-columns:repeat(auto-fill,minmax(0,1fr));
gap:8px;
}
.region-one .region-columns {grid-template-columns:repeat(4,minmax(0,1fr))}
.region-two .region-columns {grid-template-columns:repeat(3,minmax(0,1fr))}
.region-three .region-columns {grid-template-columns:repeat(5,minmax(0,1fr))}
a.recommend-card {
display:flex;
flex-direction:column;
gap:4px;
padding:6px;
background:var(--iron-2);
border:1px solid var(--line);
color:var(--text);
text-decoration:none;
transition:border-color .15s,transform .15s,background .15s;
min-width:0;
}
a.recommend-card:hover {
border-color:var(--dragon);
background:var(--iron-3);
transform:translateY(-2px);
}
[data-runtime="recommendation"] img {
width:100%;
aspect-ratio:16/9;
height:auto;
object-fit:cover;
display:block;
border:1px solid var(--line-soft);
background:var(--iron-3);
}
[data-runtime="recommendation"] [data-runtime="name"] {
font-size:12px;
font-weight:800;
line-height:1.3;
color:var(--text-bright);
}
[data-runtime="recommendation"] [data-runtime="blurb"] {
font-size:10.5px;
line-height:1.4;
color:var(--text-dim);
}
.site-footer {
max-width:1600px;
margin:0 auto;
padding:12px 16px 24px;
border-top:1px solid var(--line);
display:flex;
flex-direction:column;
gap:8px;
}
.footer-nav {display:flex;flex-wrap:wrap;gap:14px}
a[data-contract="footer-home"], a[data-contract="footer-sitemap"] {
font-size:12px;
font-weight:700;
letter-spacing:.05em;
color:var(--dragon-bright);
text-decoration:none;
border-bottom:1px solid transparent;
transition:color .15s,border-color .15s;
}
a[data-contract="footer-home"]:hover, a[data-contract="footer-sitemap"]:hover {
color:var(--text-bright);
border-bottom-color:var(--spark);
}
.friend-links {
display:flex;flex-wrap:wrap;align-items:center;gap:5px 12px;
}
.friend-links-label {
font-size:11px;
font-weight:800;
letter-spacing:.1em;
color:var(--text-dim);
border-right:1px solid var(--line);
padding-right:10px;
}
a.runtime-friend-link {
font-size:11.5px;
color:var(--text-dim);
text-decoration:none;
white-space:nowrap;
border-bottom:1px dotted var(--line);
transition:color .15s,border-color .15s;
}
a.runtime-friend-link:hover {color:var(--dragon-bright);border-bottom-color:var(--dragon)}
.footer-disclaimer {
font-size:10.5px;
line-height:1.5;
color:var(--text-dim);
opacity:.8;
max-width:90ch;
}
@media (max-width:1200px){.cast-grid {grid-template-columns:repeat(4,minmax(0,1fr))}
.region-one .region-columns {grid-template-columns:repeat(3,minmax(0,1fr))}
.region-three .region-columns {grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:1000px){.hero-grid {grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.detail-list {grid-template-columns:repeat(3,minmax(0,1fr))}
.synopsis-list {grid-template-columns:repeat(2,minmax(0,1fr))}
.synopsis-item:nth-child(2n) {border-right:none}
.region-two .region-columns {grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:860px){.hero-grid {grid-template-columns:minmax(0,1fr)}
.poster-frame {max-width:280px}
.cast-grid {grid-template-columns:repeat(3,minmax(0,1fr))}
.comment-stack {grid-template-columns:repeat(2,minmax(0,1fr))}
.region-one .region-columns {grid-template-columns:repeat(2,minmax(0,1fr))}
.region-three .region-columns {grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.page-main {padding:0 12px 4px}
.header-bar {padding:8px 12px;gap:12px}
.movie-title {font-size:26px}
.synopsis-list {grid-template-columns:minmax(0,1fr)}
.synopsis-item {border-right:none;border-bottom:1px solid var(--line-soft)}
.synopsis-item:last-child {border-bottom:none}
.detail-list {grid-template-columns:repeat(2,minmax(0,1fr))}
.episode-grid {grid-template-columns:minmax(0,1fr)}
.comment-stack {grid-template-columns:minmax(0,1fr)}
.cast-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
.region-one .region-columns, .region-two .region-columns, .region-three .region-columns {grid-template-columns:repeat(2,minmax(0,1fr))}
.timeline-node {width:180px}}
@media (max-width:420px){.detail-list {grid-template-columns:minmax(0,1fr)}
.cast-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
.region-one .region-columns, .region-two .region-columns, .region-three .region-columns {grid-template-columns:minmax(0,1fr)}
.friend-links-label {border-right:none;padding-right:0}}

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}