* {margin:0;padding:0;box-sizing:border-box}
html {-webkit-text-size-adjust:100%}
img, video {display:block;max-width:100%}
ul, ol {list-style:none}
a {color:inherit;text-decoration:none}
button, input {font:inherit;color:inherit}
:root {
--day:#e8b445;
--day-soft:#f5d98a;
--day-deep:#b8791a;
--night:#2a4d8f;
--night-soft:#5b8fd6;
--night-deep:#101c3a;
--ink:#0c1220;
--ink-2:#161f36;
--paper:#f4f0e6;
--line:rgba(232,180,69,.28);
--line-blue:rgba(91,143,214,.32);
--dim:#9aa7c2;
}
body {
font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",system-ui,-apple-system,"Segoe UI",sans-serif;
background:
radial-gradient(1200px 620px at 12% -8%,rgba(232,180,69,.20),transparent 62%),
radial-gradient(1100px 640px at 96% 4%,rgba(42,77,143,.34),transparent 60%),
linear-gradient(160deg,#0a0f1c 0%,#0c1220 46%,#0a1424 100%);
color:#e9edf7;
font-size:14px;
line-height:1.5;
letter-spacing:.01em;
min-height:100vh;
font-weight:500;
}
body::before {
content:"";
position:fixed;
inset:0;
pointer-events:none;
z-index:0;
background-image:
repeating-linear-gradient(115deg,rgba(255,255,255,.014) 0 2px,transparent 2px 7px);
mix-blend-mode:screen;
}
.page-main, .site-header, .site-footer {position:relative;z-index:1}
.site-header {
position:sticky;
top:0;
z-index:40;
background:linear-gradient(90deg,rgba(12,18,32,.94),rgba(16,28,58,.94));
border-bottom:1px solid var(--line);
backdrop-filter:blur(9px);
}
.site-header::after {
content:"";
position:absolute;
left:0;right:0;bottom:-1px;height:2px;
background:linear-gradient(90deg,var(--day) 0%,var(--day) 44%,#fff 50%,var(--night-soft) 56%,var(--night) 100%);
opacity:.85;
}
.header-inner {
max-width:1240px;
margin:0 auto;
padding:9px 16px;
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
flex-wrap:wrap;
}
a[data-contract="site-name"] {
font-size:19px;
font-weight:900;
letter-spacing:.06em;
color:#fff;
text-decoration:none;
text-shadow:0 0 14px rgba(232,180,69,.55),0 0 26px rgba(91,143,214,.35);
position:relative;
padding-left:20px;
}
a[data-contract="site-name"]::before {
content:"⚡";
position:absolute;
left:0;top:50%;
transform:translateY(-52%);
font-size:15px;
color:var(--day);
text-shadow:0 0 10px var(--day);
}
.category-rail {
display:flex;
flex-wrap:wrap;
gap:6px 7px;
justify-content:flex-end;
align-items:center;
}
a.runtime-category {
display:inline-block;
white-space:nowrap;
padding:4px 11px;
font-size:12.5px;
font-weight:700;
color:var(--day-soft);
text-decoration:none;
border:1px solid var(--line);
border-radius:3px;
background:linear-gradient(180deg,rgba(232,180,69,.14),rgba(232,180,69,.03));
transition:background .18s,color .18s,border-color .18s;
}
a.runtime-category:hover {
background:var(--day);
color:#131313;
border-color:var(--day);
}
.overview-shell {
max-width:1240px;
margin:0 auto;
padding:20px 16px 22px;
}
.overview-split {
display:grid;
grid-template-columns:minmax(0,260px) minmax(0,1fr);
gap:22px;
align-items:start;
}
.poster-column {
position:sticky;
top:64px;
align-self:start;
}
.poster-frame {
position:relative;
display:block;
border:1px solid var(--line);
border-radius:5px;
overflow:hidden;
background:var(--ink-2);
box-shadow:0 14px 34px rgba(0,0,0,.55),0 0 0 1px rgba(91,143,214,.16) inset;
}
.poster-frame::after {
content:"";
position:absolute;
inset:0;
pointer-events:none;
background:linear-gradient(115deg,rgba(232,180,69,.16),transparent 42%,transparent 58%,rgba(42,77,143,.26));
}
.poster-frame img {
width:100%;
height:auto;
object-fit:cover;
}
.poster-caption {
position:relative;
display:grid;
grid-template-columns:1fr auto 1fr;
align-items:center;
gap:6px;
padding:7px 9px;
background:linear-gradient(90deg,rgba(232,180,69,.20),rgba(12,18,32,.85) 50%,rgba(42,77,143,.30));
border-top:1px solid var(--line);
font-size:11.5px;
font-weight:800;
letter-spacing:.08em;
}
.caption-day {color:var(--day);text-align:left;text-shadow:0 0 8px rgba(232,180,69,.5)}
.caption-night {color:var(--night-soft);text-align:right;text-shadow:0 0 8px rgba(91,143,214,.5)}
.caption-bolt {
color:#fff;
font-size:15px;
text-shadow:0 0 10px var(--day),0 0 18px var(--night-soft);
}
.overview-body {
min-width:0;
display:flex;
flex-direction:column;
gap:14px;
}
.movie-title {
font-size:clamp(26px,4.4vw,42px);
font-weight:900;
line-height:1.06;
letter-spacing:.05em;
color:#fff;
position:relative;
padding-left:14px;
text-shadow:0 0 22px rgba(232,180,69,.35),0 3px 18px rgba(0,0,0,.6);
}
.movie-title::before {
content:"";
position:absolute;
left:0;top:6%;bottom:6%;
width:5px;
border-radius:2px;
background:linear-gradient(180deg,var(--day),#fff 48%,var(--night-soft));
box-shadow:0 0 12px rgba(232,180,69,.6);
}
.movie-tagline {
font-size:14px;
font-weight:700;
letter-spacing:.16em;
color:var(--day-soft);
padding:3px 0 0 14px;
}
.movie-seo {
font-size:13px;
line-height:1.68;
color:#c3ccdf;
padding:8px 11px;
border-left:2px solid var(--night-soft);
background:linear-gradient(90deg,rgba(42,77,143,.20),rgba(42,77,143,0));
}
.player-frame {
position:relative;
min-width:0;
border:1px solid var(--line-blue);
border-radius:6px;
overflow:hidden;
background:#05080f;
box-shadow:0 12px 34px rgba(0,0,0,.55);
}
.player-frame video {
width:100%;
height:auto;
background:#05080f;
}
.player-controls {
display:flex;
flex-wrap:wrap;
align-items:center;
gap:6px;
padding:8px 9px;
background:linear-gradient(180deg,rgba(16,28,58,.92),rgba(8,12,22,.96));
border-top:1px solid var(--line-blue);
}
.ctrl-btn {
padding:5px 10px;
font-size:12px;
font-weight:700;
letter-spacing:.03em;
color:#dbe4f5;
background:linear-gradient(180deg,rgba(91,143,214,.20),rgba(91,143,214,.06));
border:1px solid var(--line-blue);
border-radius:3px;
cursor:pointer;
transition:background .16s,color .16s,border-color .16s;
white-space:nowrap;
}
.ctrl-btn:hover {
background:var(--night-soft);
color:#06101f;
border-color:var(--night-soft);
}
.ctrl-range {
-webkit-appearance:none;
appearance:none;
height:5px;
border-radius:3px;
background:linear-gradient(90deg,var(--day),var(--night-soft));
outline:none;
cursor:pointer;
}
.ctrl-progress {flex:1 1 160px;min-width:110px}
.ctrl-volume {flex:0 1 96px;min-width:70px}
.ctrl-range::-webkit-slider-thumb {
-webkit-appearance:none;
width:13px;height:13px;
border-radius:50%;
background:#fff;
border:2px solid var(--day);
box-shadow:0 0 9px rgba(232,180,69,.8);
}
.ctrl-range::-moz-range-thumb {
width:13px;height:13px;
border-radius:50%;
background:#fff;
border:2px solid var(--day);
box-shadow:0 0 9px rgba(232,180,69,.8);
}
.episode-status {
display:flex;
flex-wrap:wrap;
gap:7px;
}
.status-chip {
font-size:12px;
font-weight:800;
letter-spacing:.06em;
padding:4px 11px;
border-radius:3px;
border:1px solid transparent;
}
.status-current {
color:#131313;
background:linear-gradient(180deg,var(--day-soft),var(--day));
border-color:var(--day);
box-shadow:0 0 12px rgba(232,180,69,.4);
}
.status-total {
color:var(--night-soft);
background:rgba(42,77,143,.22);
border-color:var(--line-blue);
}
.status-score {
color:#fff;
background:linear-gradient(90deg,rgba(232,180,69,.24),rgba(42,77,143,.30));
border-color:var(--line);
}
.block-heading, .section-heading, .rec-heading {
font-size:15px;
font-weight:900;
letter-spacing:.12em;
color:#fff;
position:relative;
padding-left:16px;
margin-bottom:10px;
text-shadow:0 0 12px rgba(232,180,69,.22);
}
.block-heading::before, .section-heading::before, .rec-heading::before {
content:"";
position:absolute;
left:0;top:50%;
transform:translateY(-50%);
width:7px;height:7px;
background:var(--day);
transform:translateY(-50%) rotate(45deg);
box-shadow:0 0 10px var(--day);
}
.section-heading {
font-size:17px;
padding-bottom:8px;
border-bottom:1px solid var(--line);
}
.cast-block {min-width:0}
.cast-row {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
gap:8px;
align-items:start;
}
.cast-card {
position:relative;
padding:9px 11px;
border-radius:7px;
border:1px solid var(--line-blue);
background:linear-gradient(160deg,rgba(22,31,54,.92),rgba(12,18,32,.92));
overflow:hidden;
display:flex;
flex-direction:column;
gap:2px;
transition:border-color .18s,transform .18s;
}
.cast-card::before {
content:"⚡";
position:absolute;
right:8px;top:6px;
font-size:11px;
color:rgba(232,180,69,.5);
}
.cast-card:hover {
border-color:var(--day);
transform:translateY(-2px);
}
.cast-name {
font-size:14px;
font-weight:900;
color:var(--day-soft);
letter-spacing:.05em;
}
.cast-role {
font-size:11.5px;
font-weight:700;
color:var(--night-soft);
letter-spacing:.05em;
}
.cast-slogan {
font-size:11.5px;
color:#aeb9d0;
line-height:1.45;
max-height:0;
opacity:0;
overflow:hidden;
transition:max-height .24s ease,opacity .24s ease,margin-top .24s ease;
}
.cast-card:hover .cast-slogan {
max-height:60px;
opacity:1;
margin-top:4px;
}
.synopsis-block {
min-width:0;
padding:11px 13px;
border:1px solid var(--line);
border-radius:6px;
background:linear-gradient(150deg,rgba(232,180,69,.07),rgba(12,18,32,.55) 60%,rgba(42,77,143,.10));
}
.synopsis-para {
font-size:13px;
line-height:1.72;
color:#c8d1e2;
padding-left:11px;
border-left:1px solid rgba(232,180,69,.22);
margin-bottom:7px;
}
.synopsis-para:last-child {margin-bottom:0}
.details-block {
min-width:0;
padding:11px 13px;
border:1px solid var(--line-blue);
border-radius:6px;
background:linear-gradient(150deg,rgba(42,77,143,.14),rgba(12,18,32,.55));
}
.details-list {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(158px,1fr));
gap:0 16px;
}
.detail-row {
display:flex;
align-items:baseline;
gap:8px;
padding:4px 0;
border-bottom:1px dashed rgba(154,167,194,.18);
}
.detail-key {
flex:0 0 auto;
font-size:12px;
font-weight:800;
letter-spacing:.06em;
color:var(--day);
}
.detail-key::after {content:""}
.detail-value {
font-size:12.5px;
color:#d3dbeb;
font-weight:600;
}
.timeline-section {
max-width:1240px;
margin:0 auto;
padding:16px 16px 18px;
border-top:1px solid rgba(154,167,194,.12);
}
.timeline-track {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(178px,1fr));
gap:8px;
align-items:start;
}
.timeline-node {
position:relative;
display:flex;
flex-direction:column;
gap:3px;
padding:9px 11px 9px 13px;
border-radius:5px;
border:1px solid var(--line-blue);
background:linear-gradient(160deg,rgba(16,28,58,.80),rgba(10,15,28,.86));
}
.timeline-node::before {
content:"";
position:absolute;
left:0;top:0;bottom:0;
width:3px;
border-radius:5px 0 0 5px;
background:linear-gradient(180deg,var(--day),var(--night-soft));
opacity:.85;
}
.node-dot {
position:absolute;
left:-4px;top:12px;
width:9px;height:9px;
border-radius:50%;
background:#fff;
box-shadow:0 0 10px var(--day),0 0 18px var(--night-soft);
}
.node-timecode {
font-size:11.5px;
font-weight:900;
letter-spacing:.10em;
color:var(--day);
}
.node-label {
font-size:12.5px;
line-height:1.5;
color:#c6d0e3;
}
.episodes-section {
max-width:1240px;
margin:0 auto;
padding:16px 16px 18px;
border-top:1px solid rgba(154,167,194,.12);
}
.episode-grid {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:8px;
align-items:start;
}
.episode-card {
position:relative;
display:flex;
flex-direction:column;
gap:3px;
padding:9px 11px;
border-radius:5px;
border:1px solid rgba(154,167,194,.16);
background:linear-gradient(165deg,rgba(20,28,48,.92),rgba(10,15,28,.92));
transition:border-color .16s,background .16s;
}
.episode-card::after {
content:"";
position:absolute;
right:0;top:0;
border-width:0 15px 15px 0;
border-style:solid;
border-color:transparent var(--day) transparent transparent;
opacity:.42;
}
.episode-card:hover {
border-color:var(--day);
background:linear-gradient(165deg,rgba(232,180,69,.10),rgba(16,28,58,.92));
}
.ep-number {
font-size:11px;
font-weight:900;
letter-spacing:.14em;
color:var(--night-soft);
}
.ep-title {
font-size:13.5px;
font-weight:900;
color:var(--day-soft);
letter-spacing:.04em;
line-height:1.3;
}
.ep-summary {
font-size:11.5px;
line-height:1.5;
color:#aeb9d0;
}
.ep-duration {
font-size:10.5px;
font-weight:700;
letter-spacing:.08em;
color:#7f8ca8;
margin-top:1px;
}
.comments-section {
max-width:1240px;
margin:0 auto;
padding:16px 16px 18px;
border-top:1px solid rgba(154,167,194,.12);
}
.comment-columns {
columns:2;
column-gap:9px;
}
.comment-item {
position:relative;
display:block;
break-inside:avoid;
margin-bottom:9px;
padding:9px 11px 9px 13px;
border-radius:5px;
border:1px solid rgba(154,167,194,.16);
background:linear-gradient(160deg,rgba(22,31,54,.86),rgba(11,16,30,.9));
}
.comment-dot {
position:absolute;
left:0;top:11px;
width:5px;height:16px;
border-radius:3px;
}
.dot-a {background:var(--day)}
.dot-b {background:var(--night-soft)}
.dot-c {background:#9b6bd6}
.dot-d {background:#49b9a0}
.dot-e {background:#e0658a}
.dot-f {background:#d98a3c}
.comment-nick {
display:block;
font-size:12px;
font-weight:900;
letter-spacing:.05em;
color:#eef2fa;
margin-bottom:3px;
}
.comment-text {
font-size:12.5px;
line-height:1.62;
color:#bcc7dc;
}
.rec-region {
max-width:1240px;
margin:0 auto;
padding:14px 16px 4px;
border-top:1px solid rgba(154,167,194,.12);
}
.rec-region-3 {padding-bottom:18px}
.rec-heading {
font-size:14px;
}
.rec-region-1 .rec-heading::before {content:"";background:var(--day)}
.rec-region-2 .rec-heading::before {background:var(--night-soft)}
.rec-region-3 .rec-heading::before {background:#9b6bd6}
.rec-region-1 .rec-heading {padding-left:26px}
.rec-region-2 .rec-heading {padding-left:26px}
.rec-region-3 .rec-heading {padding-left:26px}
.rec-region-1 .rec-heading::after, .rec-region-2 .rec-heading::after, .rec-region-3 .rec-heading::after {
position:absolute;
left:0;top:50%;
transform:translateY(-50%);
font-size:14px;
}
.rec-region-1 .rec-heading::after {content:"⚡"}
.rec-region-2 .rec-heading::after {content:"📋"}
.rec-region-3 .rec-heading::after {content:"❄"}
.rec-row {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:9px;
align-items:start;
}
.rec-item {
min-width:0;
}
a[data-runtime="recommendation"] {
display:flex;
flex-direction:column;
gap:4px;
padding:7px;
border-radius:6px;
border:1px solid rgba(154,167,194,.16);
background:linear-gradient(165deg,rgba(22,31,54,.86),rgba(10,15,28,.9));
color:#dfe6f4;
text-decoration:none;
transition:border-color .16s,transform .16s;
}
a[data-runtime="recommendation"]:hover {
border-color:var(--night-soft);
transform:translateY(-2px);
}
a[data-runtime="recommendation"] img {
width:100%;
height:auto;
aspect-ratio:16 / 10;
object-fit:cover;
border-radius:4px;
background:#0a0f1c;
}
a[data-runtime="recommendation"] span[data-runtime="name"] {
font-size:12.5px;
font-weight:900;
color:#fff;
line-height:1.35;
}
a[data-runtime="recommendation"] span[data-runtime="blurb"] {
font-size:11px;
line-height:1.45;
color:#9fabc4;
}
.site-footer {
max-width:1240px;
margin:0 auto;
padding:16px 16px 26px;
border-top:1px solid var(--line);
display:flex;
flex-direction:column;
gap:10px;
}
.footer-disclaimer {
font-size:11.5px;
line-height:1.6;
color:#7f8ca8;
}
.footer-nav {
display:flex;
flex-wrap:wrap;
gap:8px;
}
a[data-contract="footer-home"], a[data-contract="footer-sitemap"] {
font-size:12.5px;
font-weight:800;
letter-spacing:.06em;
padding:4px 12px;
border-radius:3px;
border:1px solid var(--line);
}
a[data-contract="footer-home"] {
color:var(--day);
text-decoration:none;
background:rgba(232,180,69,.10);
}
a[data-contract="footer-home"]:hover {background:var(--day);color:#131313}
a[data-contract="footer-sitemap"] {
color:var(--night-soft);
text-decoration:none;
background:rgba(42,77,143,.16);
border-color:var(--line-blue);
}
a[data-contract="footer-sitemap"]:hover {background:var(--night-soft);color:#06101f}
.friend-links {
display:flex;
flex-wrap:wrap;
align-items:center;
gap:6px 8px;
padding-top:8px;
border-top:1px dashed rgba(154,167,194,.18);
}
.friend-links-label {
font-size:11.5px;
font-weight:900;
letter-spacing:.10em;
color:var(--day);
padding:3px 8px;
border:1px solid var(--line);
border-radius:3px;
background:rgba(232,180,69,.08);
}
a.runtime-friend-link {
font-size:12px;
color:#aeb9d0;
text-decoration:none;
border-bottom:1px solid transparent;
transition:color .16s,border-color .16s;
}
a.runtime-friend-link:hover {
color:var(--night-soft);
border-bottom-color:var(--night-soft);
}
.player.is-playing, video.is-playing {outline:2px solid var(--day);outline-offset:-2px}
video.is-muted {opacity:.94}
body.is-lights-off::after {
content:"";
position:fixed;
inset:0;
z-index:80;
background:rgba(0,0,0,.72);
pointer-events:none;
}
body.is-theater .overview-shell {background:rgba(4,7,14,.6)}
body.is-theater .poster-column {opacity:.35}
.player .play, .player .mute, .player .progress, .player .volume, .player .timeupdate, .player .speed, .player .pip, .player .fullscreen, .player .theater, .player .light, .player .input, .player .x, .player .click {transition:opacity .16s,color .16s}
.ctrl-btn.input, .ctrl-btn.click, .ctrl-btn.x {opacity:.9}
@media (max-width:1000px){.overview-split {grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:18px}
.episode-grid {grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:820px){.overview-split {grid-template-columns:minmax(0,1fr)}
.poster-column {position:static;max-width:280px}
.rec-row {grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:680px){.episode-grid {grid-template-columns:minmax(0,1fr)}
.comment-columns {columns:1}
.timeline-track {grid-template-columns:minmax(0,1fr)}
.rec-row {grid-template-columns:repeat(2,minmax(0,1fr))}
.cast-row {grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
.poster-column {max-width:240px}}
@media (max-width:460px){.rec-row {grid-template-columns:minmax(0,1fr)}
.poster-column {max-width:100%}
.player-controls {gap:5px}
.ctrl-progress {flex:1 1 100%}
.ctrl-volume {flex:1 1 60%}
.header-inner {padding:8px 12px}
.movie-title {font-size:26px}
.cast-row {grid-template-columns:repeat(auto-fit,minmax(120px,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}