*, *::before, *::after {box-sizing:border-box}
html, body, h1, h2, h3, p, ul, ol, li, dl, dt, dd {margin:0;padding:0}
ul, ol {list-style:none}
img, video {display:block;max-width:100%}
button {font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a {color:inherit;text-decoration:none}
:root {
--ink:#070d17;
--ink-2:#0b1524;
--ink-3:#101d31;
--ink-4:#16263e;
--rust:#a8341f;
--rust-2:#c8502f;
--gold:#c9a24a;
--gold-soft:#8f7433;
--blue:#2c4f7c;
--blue-soft:#183454;
--paper:#d8dee8;
--paper-dim:#93a1b6;
--paper-faint:#63738c;
--line:rgba(201,162,74,.22);
--line-cold:rgba(120,160,220,.16);
--gap:10px;
--pad:14px;
--rule:1px solid var(--line);
font-size:16px;
}
html {-webkit-text-size-adjust:100%}
body {
background:
radial-gradient(120% 90% at 12% -10%, rgba(44,79,124,.35), transparent 60%),
radial-gradient(80% 60% at 100% 0%, rgba(168,52,31,.18), transparent 55%),
linear-gradient(180deg,#050a12 0%, #070d17 38%, #060b14 100%);
background-attachment:fixed;
color:var(--paper);
font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Heiti SC",sans-serif;
font-stretch:condensed;
line-height:1.5;
letter-spacing:.01em;
min-height:100vh;
padding:0;
}
h1, h2, h3 {
font-family:"Songti SC","SimSun","Noto Serif SC",serif;
font-weight:700;
line-height:1.25;
letter-spacing:.02em;
color:#eef2f8;
}
.site-header {
display:flex;
align-items:stretch;
justify-content:space-between;
gap:var(--gap);
padding:0 var(--pad);
background:linear-gradient(90deg,#0a1422 0%, #0d1a2c 55%, #0a1422 100%);
border-bottom:2px solid var(--rust);
position:sticky;
top:0;
z-index:40;
box-shadow:0 2px 0 rgba(201,162,74,.18), 0 10px 24px -18px #000;
}
a[data-contract="site-name"].brand-mark {
display:inline-flex;
align-items:center;
gap:8px;
padding:9px 14px 9px 12px;
font-family:"Songti SC","SimSun",serif;
font-size:1.05rem;
font-weight:700;
letter-spacing:.16em;
color:#f0e6d2;
text-transform:uppercase;
background:transparent;
border-left:3px solid var(--gold);
clip-path:polygon(0 0,100% 0,calc(100% - 10px) 100%,0 100%);
transition:color .15s ease, background .15s ease;
}
a[data-contract="site-name"].brand-mark::before {
content:"";
width:7px;height:7px;
background:var(--rust-2);
transform:rotate(45deg);
flex:none;
}
a[data-contract="site-name"].brand-mark:hover {
background:rgba(201,162,74,.12);
color:#fff;
}
.category-strip {
display:flex;
flex-wrap:wrap;
align-items:center;
justify-content:flex-end;
gap:6px;
padding:8px 0;
min-width:0;
}
a.runtime-category {
display:inline-block;
white-space:nowrap;
padding:5px 10px;
font-size:.78rem;
letter-spacing:.09em;
color:var(--paper-dim);
background:rgba(255,255,255,.03);
border:1px solid var(--line-cold);
clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
transition:color .15s ease,border-color .15s ease,background .15s ease;
}
a.runtime-category:hover {
color:#f3ead6;
border-color:var(--gold);
background:rgba(201,162,74,.14);
}
.page-main {
display:block;
width:100%;
max-width:1180px;
margin:0 auto;
padding:16px var(--pad) 40px;
}
.overview-shell {
display:block;
background:linear-gradient(180deg,#0b1524 0%, #081120 100%);
border:1px solid var(--line-cold);
border-top:2px solid var(--gold-soft);
padding:0;
margin-bottom:22px;
position:relative;
box-shadow:0 24px 50px -34px #000;
}
.overview-hero {
position:relative;
display:grid;
grid-template-columns:minmax(0,1fr);
gap:0;
padding:0;
overflow:hidden;
background:
linear-gradient(180deg, rgba(6,11,20,.2) 0%, rgba(6,11,20,.75) 72%, #081120 100%),
radial-gradient(140% 120% at 78% 8%, rgba(44,79,124,.55), transparent 58%),
linear-gradient(160deg,#122642 0%, #0a1728 55%, #060d18 100%);
}
.hero-silhouette {
position:absolute;
inset:0;
pointer-events:none;
background:
radial-gradient(closest-side at 26% 74%, rgba(2,6,12,.96) 58%, transparent 92%),
radial-gradient(closest-side at 74% 74%, rgba(2,6,12,.96) 58%, transparent 92%),
linear-gradient(90deg, transparent 44%, rgba(168,52,31,.18) 50%, transparent 56%),
repeating-linear-gradient(102deg, rgba(150,190,235,.10) 0 1px, transparent 1px 13px),
radial-gradient(60% 40% at 50% 92%, rgba(200,80,47,.22), transparent 70%);
mix-blend-mode:screen;
z-index:1;
}
.hero-identity {
position:relative;
z-index:3;
padding:22px 16px 10px;
max-width:760px;
}
.movie-title {
font-size:clamp(1.7rem,5.6vw,3rem);
letter-spacing:.06em;
color:#f6efe0;
text-shadow:0 2px 0 rgba(0,0,0,.6), 0 0 26px rgba(44,79,124,.55);
border-left:5px solid var(--rust);
padding-left:12px;
}
.movie-tagline {
margin-top:8px;
padding-left:17px;
font-size:.88rem;
letter-spacing:.14em;
color:var(--gold);
position:relative;
}
.movie-tagline::before {
content:"//";
color:var(--rust-2);
margin-right:6px;
letter-spacing:0;
font-family:monospace;
}
.hero-player {
position:relative;
z-index:3;
width:100%;
padding:14px 16px 18px;
display:flex;
flex-direction:column;
gap:8px;
}
.hero-player video {
display:block;
background:#020509;
border:1px solid var(--line-cold);
outline:1px solid rgba(0,0,0,.6);
box-shadow:0 0 0 1px rgba(201,162,74,.14), 0 20px 44px -26px #000;
}
.player-controls {
display:flex;
flex-wrap:wrap;
gap:5px;
padding-top:2px;
}
.player-btn {
flex:0 1 auto;
padding:5px 10px;
font-size:.72rem;
letter-spacing:.1em;
color:var(--paper-dim);
background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.015));
border:1px solid var(--line-cold);
clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
transition:color .14s ease,border-color .14s ease,background .14s ease,transform .14s ease;
}
.player-btn:hover {
color:#f4ecd8;
border-color:var(--gold);
background:rgba(201,162,74,.16);
transform:translateY(-1px);
}
.player-btn:active {transform:translateY(0)}
.player-btn.is-active {
color:#12060a;
background:linear-gradient(180deg,var(--gold),var(--gold-soft));
border-color:var(--gold);
}
.hero-player.theater-mode {
background:rgba(3,7,13,.86);
outline:1px solid var(--gold-soft);
padding:16px 12px 14px;
}
.hero-player.lights-dim video {
filter:brightness(.55) contrast(1.12) saturate(.8);
box-shadow:0 0 0 1px rgba(201,162,74,.2), 0 0 60px -10px rgba(44,79,124,.5);
}
.hero-player.lights-dim .player-controls {opacity:.72}
.overview-body {
position:relative;
display:grid;
grid-template-columns:minmax(0,1fr);
gap:14px;
padding:16px;
background:linear-gradient(180deg,#0a1422 0%, #0c1727 100%);
border-top:1px solid var(--line-cold);
}
.poster-card {
align-self:start;
width:100%;
background:transparent;
border:0;
padding:0;
position:relative;
}
.poster-card::after {
content:"ARCHIVE / 档案袋";
position:absolute;
top:-1px;left:-1px;
padding:2px 8px;
font-family:monospace;
font-size:.6rem;
letter-spacing:.2em;
color:#120a04;
background:var(--gold);
clip-path:polygon(0 0,100% 0,calc(100% - 7px) 100%,0 100%);
}
.poster-img {
width:100%;
height:auto;
object-fit:cover;
display:block;
border:1px solid var(--line);
outline:1px solid rgba(0,0,0,.55);
box-shadow:0 18px 40px -26px #000;
}
.cast-panel {
min-width:0;
}
.cast-heading, .synopsis-heading, .status-heading, .details-heading, .timeline-heading, .episodes-heading, .comments-heading, .recommend-heading {
font-size:1rem;
letter-spacing:.14em;
color:#f2e9d6;
display:flex;
align-items:center;
gap:8px;
padding-bottom:6px;
margin-bottom:9px;
border-bottom:1px solid var(--line);
}
.cast-heading::before, .synopsis-heading::before, .status-heading::before, .details-heading::before, .timeline-heading::before, .episodes-heading::before, .comments-heading::before, .recommend-heading::before {
content:"";
width:9px;height:9px;
flex:none;
background:var(--rust);
transform:rotate(45deg);
box-shadow:0 0 0 1px rgba(201,162,74,.35);
}
.cast-grid {
display:grid;
grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
gap:6px;
align-items:start;
}
.cast-card {
display:flex;
flex-direction:column;
gap:2px;
padding:7px 9px 8px;
background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.01));
border:1px solid var(--line-cold);
border-left:3px solid var(--rust);
clip-path:polygon(0 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%);
min-width:0;
}
.cast-name {
font-family:"Songti SC","SimSun",serif;
font-size:.92rem;
font-weight:700;
color:#f3ecdc;
letter-spacing:.05em;
}
.cast-role {
font-size:.72rem;
line-height:1.4;
color:var(--paper-faint);
letter-spacing:.03em;
}
.synopsis-panel {
min-width:0;
}
.synopsis-para {
font-size:.84rem;
line-height:1.75;
color:#c3ccda;
text-indent:2em;
padding-left:2px;
}
.synopsis-para+.synopsis-para {margin-top:7px}
.synopsis-para:first-of-type::first-letter {
font-family:"Songti SC","SimSun",serif;
font-size:1.5em;
color:var(--gold);
line-height:1;
}
.episode-status-panel {
min-width:0;
padding:10px;
background:rgba(44,79,124,.14);
border:1px solid var(--line-cold);
border-left:3px solid var(--blue);
}
.status-list {
display:grid;
grid-template-columns:auto minmax(0,1fr);
gap:5px 12px;
align-items:baseline;
}
.status-key {
font-size:.74rem;
letter-spacing:.12em;
color:var(--paper-faint);
}
.status-val {
font-family:"Songti SC","SimSun",serif;
font-size:1.05rem;
color:var(--gold);
letter-spacing:.04em;
}
.details-panel {
min-width:0;
}
.details-list {
display:grid;
grid-template-columns:auto minmax(0,1fr);
gap:0;
border-top:1px solid var(--line-cold);
}
.detail-key, .detail-val {
padding:5px 8px;
font-size:.78rem;
border-bottom:1px solid rgba(120,160,220,.1);
}
.detail-key {
letter-spacing:.1em;
color:var(--paper-faint);
white-space:nowrap;
background:rgba(255,255,255,.02);
}
.detail-val {
color:#cfd8e6;
letter-spacing:.02em;
}
.timeline-shell {
margin-bottom:22px;
padding:14px;
background:linear-gradient(180deg,#0a1422,#08111e);
border:1px solid var(--line-cold);
border-top:2px solid var(--rust);
}
.timeline-track {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
gap:0;
border-left:1px solid var(--line-cold);
}
.timeline-col {
position:relative;
display:flex;
flex-direction:column;
gap:6px;
padding:10px 10px 12px;
border-right:1px solid var(--line-cold);
border-top:2px solid rgba(201,162,74,.28);
background:linear-gradient(180deg,rgba(44,79,124,.16),rgba(44,79,124,.02));
min-width:0;
}
.timeline-col:nth-child(even) {
background:linear-gradient(180deg,rgba(168,52,31,.14),rgba(168,52,31,.02));
border-top-color:rgba(200,80,47,.5);
}
.timeline-col::before {
content:"";
position:absolute;
top:-2px;left:0;
width:100%;height:2px;
background:linear-gradient(90deg,var(--gold),transparent 78%);
opacity:.55;
}
.timeline-col:nth-child(even)::before {
background:linear-gradient(90deg,var(--rust-2),transparent 78%);
}
.timeline-timecode {
font-family:monospace;
font-size:.68rem;
letter-spacing:.18em;
color:var(--gold);
text-transform:uppercase;
}
.timeline-col:nth-child(even) .timeline-timecode {color:var(--rust-2)}
.timeline-label {
font-size:.78rem;
line-height:1.55;
color:#c2cbd9;
}
.episodes-shell {
margin-bottom:22px;
padding:14px;
background:linear-gradient(180deg,#0a1422,#08111e);
border:1px solid var(--line-cold);
border-top:2px solid var(--gold-soft);
}
.episode-list {
display:grid;
grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
gap:7px;
align-items:start;
}
.episode-row {
display:grid;
grid-template-columns:auto minmax(0,1fr) auto;
grid-template-areas:
"num title dur"
"sum sum sum";
gap:4px 8px;
align-items:baseline;
padding:8px 9px 9px;
background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.008));
border:1px solid var(--line-cold);
border-left:3px solid var(--blue);
clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%);
min-width:0;
}
.episode-row:nth-child(3n/**/+2) {border-left-color:var(--rust)}
.episode-row:nth-child(3n) {border-left-color:var(--gold-soft)}
.episode-number {
grid-area:num;
font-family:monospace;
font-size:.72rem;
letter-spacing:.08em;
color:var(--gold);
white-space:nowrap;
}
.episode-title {
grid-area:title;
font-size:.92rem;
color:#f1e9d8;
letter-spacing:.06em;
min-width:0;
}
.episode-duration {
grid-area: dur;
font-size:.68rem;
letter-spacing:.08em;
color:var(--paper-faint);
white-space:nowrap;
padding:1px 6px;
border:1px solid var(--line-cold);
}
.episode-summary {
grid-area: sum;
font-size:.76rem;
line-height:1.6;
color:#aeb9c9;
border-top:1px dashed rgba(201,162,74,.18);
padding-top:5px;
}
.comments-shell {
margin-bottom:22px;
padding:14px;
background:linear-gradient(180deg,#0a1422,#08111e);
border:1px solid var(--line-cold);
border-top:2px solid var(--rust);
}
.comments-columns {
display:grid;
grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
gap:8px;
align-items:start;
}
.comment-post {
display:flex;
flex-direction:column;
gap:5px;
padding:8px 10px 9px;
background:linear-gradient(180deg,rgba(44,79,124,.16),rgba(44,79,124,.03));
border:1px solid var(--line-cold);
border-left:2px solid var(--gold-soft);
min-width:0;
position:relative;
}
.comments-columns .comment-post:nth-child(2n) {
background:linear-gradient(180deg,rgba(168,52,31,.16),rgba(168,52,31,.03));
border-left-color:var(--rust);
}
.comment-nick {
font-family:monospace;
font-size:.72rem;
letter-spacing:.1em;
color:var(--gold);
padding-bottom:4px;
border-bottom:1px dashed rgba(201,162,74,.22);
}
.comments-columns .comment-post:nth-child(2n) .comment-nick {color:var(--rust-2)}
.comment-text {
font-size:.8rem;
line-height:1.68;
color:#bcc6d5;
}
.recommend-shell {
margin-bottom:22px;
padding:14px;
background:linear-gradient(180deg,#0a1422,#08111e);
border:1px solid var(--line-cold);
border-top:2px solid var(--gold-soft);
}
.recommend-shell:last-of-type {margin-bottom:28px}
.recommend-heading {
font-size:.95rem;
}
.recommend-wall {
display:grid;
grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
gap:8px;
align-items:start;
}
a.recommend-card {
display:flex;
flex-direction:column;
gap:6px;
padding:8px;
background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.01));
border:1px solid var(--line-cold);
border-bottom:2px solid var(--gold-soft);
clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%);
min-width:0;
transition:border-color .16s ease,background .16s ease,transform .16s ease,box-shadow .16s ease;
}
a.recommend-card:hover {
border-color:var(--gold);
border-bottom-color:var(--rust-2);
background:linear-gradient(180deg,rgba(201,162,74,.14),rgba(201,162,74,.03));
transform:translateY(-2px);
box-shadow:0 16px 30px -22px #000;
}
[data-runtime="recommendation"] img {
width:100%;
display:block;
aspect-ratio:16 / 10;
height:auto;
object-fit:cover;
background:#020509;
border:1px solid rgba(0,0,0,.5);
filter:saturate(.86) contrast(1.05);
}
.recommend-name {
font-family:"Songti SC","SimSun",serif;
font-size:.86rem;
font-weight:700;
letter-spacing:.04em;
color:#f0e8d6;
}
.recommend-blurb {
font-size:.72rem;
line-height:1.55;
color:var(--paper-faint);
}
.site-footer {
border-top:2px solid var(--rust);
background:linear-gradient(180deg,#080f1b,#050a12);
padding:16px var(--pad) 26px;
display:grid;
grid-template-columns:minmax(0,1fr);
gap:12px;
max-width:1180px;
margin:0 auto;
}
.footer-disclaimer {
font-size:.74rem;
line-height:1.7;
color:var(--paper-faint);
padding-left:10px;
border-left:2px solid var(--gold-soft);
}
.footer-friends {
display:flex;
flex-wrap:wrap;
align-items:center;
gap:6px;
}
.friends-label {
font-family:monospace;
font-size:.7rem;
letter-spacing:.16em;
color:var(--gold);
padding:3px 8px;
border:1px solid var(--line);
clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px);
}
a.runtime-friend-link {
display:inline-block;
white-space:nowrap;
padding:4px 9px;
font-size:.74rem;
letter-spacing:.05em;
color:var(--paper-dim);
background:rgba(255,255,255,.03);
border:1px solid var(--line-cold);
transition:color .14s ease,border-color .14s ease,background .14s ease;
}
a.runtime-friend-link:hover {
color:#f4ecd8;
border-color:var(--rust-2);
background:rgba(168,52,31,.18);
}
.footer-nav {
display:flex;
flex-wrap:wrap;
gap:8px;
padding-top:10px;
border-top:1px solid var(--line-cold);
}
a.footer-link {
display:inline-block;
white-space:nowrap;
padding:5px 12px;
font-size:.76rem;
letter-spacing:.12em;
border:1px solid var(--line);
clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);
transition:background .14s ease,color .14s ease,border-color .14s ease;
}
a[data-contract="footer-home"].footer-link {
color:#f0e6d2;
background:rgba(168,52,31,.22);
border-color:rgba(200,80,47,.5);
}
a[data-contract="footer-home"].footer-link:hover {
background:var(--rust);
color:#fff;
border-color:var(--rust-2);
}
a[data-contract="footer-sitemap"].footer-link {
color:var(--gold);
background:rgba(201,162,74,.12);
border-color:var(--line);
}
a[data-contract="footer-sitemap"].footer-link:hover {
background:var(--gold);
color:#140c02;
border-color:var(--gold);
}
@media (min-width:640px){:root {--pad:18px;--gap:12px}
.overview-body {
grid-template-columns:minmax(0,1fr) minmax(0,1.45fr);
grid-template-areas:
"poster cast"
"poster synopsis"
"status details";
gap:14px 18px;
}
.poster-card {grid-area:poster}
.cast-panel {grid-area:cast}
.synopsis-panel {grid-area:synopsis}
.episode-status-panel {grid-area:status;align-self:start}
.details-panel {grid-area:details}}
@media (min-width:900px){:root {--pad:22px}
.page-main {max-width:1180px;padding-top:20px}
.overview-hero {
grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
grid-template-areas:
"identity player"
"silhouette player";
align-items:start;
}
.hero-identity {grid-area:identity;padding:26px 20px 6px}
.hero-silhouette {grid-area:silhouette;position:relative;inset:auto;min-height:120px}
.hero-player {grid-area:player;padding:18px 18px 20px}
.overview-body {
grid-template-columns:minmax(0,.62fr) minmax(0,1.05fr) minmax(0,1.05fr);
grid-template-areas:
"poster cast cast"
"poster synopsis synopsis"
"status details details";
gap:16px 20px;
padding:18px;
}
.timeline-track {grid-template-columns:repeat(6,minmax(0,1fr))}
.episode-list {grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.comments-columns {grid-template-columns:repeat(2,minmax(0,1fr))}
.recommend-wall {grid-template-columns:repeat(3,minmax(0,1fr))}
.site-footer {
grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
grid-template-areas:
"disclaimer friends"
"nav friends";
gap:14px 24px;
align-items:start;
}
.footer-disclaimer {grid-area:disclaimer}
.footer-friends {grid-area:friends;align-content:start}
.footer-nav {grid-area:nav;border-top:0;padding-top:0;align-self:end}}
@media (min-width:1200px){.overview-body {
grid-template-columns:minmax(0,.55fr) minmax(0,1fr) minmax(0,1fr);
gap:18px 24px;
}
.episode-list {grid-template-columns:repeat(4,minmax(0,1fr))}
.recommend-wall {grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:480px){:root {--pad:12px;--gap:8px}
.site-header {
flex-direction:column;
align-items:stretch;
gap:0;
padding:0 12px;
}
a[data-contract="site-name"].brand-mark {
justify-content:flex-start;
clip-path:none;
border-left:3px solid var(--gold);
}
.category-strip {
justify-content:flex-start;
padding:6px 0 9px;
}
.movie-title {font-size:1.55rem}
.movie-tagline {font-size:.8rem;letter-spacing:.08em}
.cast-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
.details-list {grid-template-columns:auto minmax(0,1fr)}
.detail-key, .detail-val {font-size:.74rem;padding:4px 6px}
.episode-list {grid-template-columns:minmax(0,1fr)}
.episode-row {
grid-template-columns:auto minmax(0,1fr);
grid-template-areas:
"num title"
"dur dur"
"sum sum";
}
.comments-columns {grid-template-columns:minmax(0,1fr)}
.recommend-wall {grid-template-columns:repeat(2,minmax(0,1fr))}
.player-btn {font-size:.68rem;padding:5px 8px}}
@media (max-width:360px){.recommend-wall {grid-template-columns:minmax(0,1fr)}
.cast-grid {grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){* {transition:none !important;animation:none !important}}

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}