:root {
--ink:#e9e2d4;
--ink-dim:#b9ad99;
--ink-faint:#7d7364;
--rust:#8f3326;
--rust-deep:#3a1410;
--rust-glow:#c24430;
--green:#1d3329;
--green-deep:#0e1a15;
--gold:#b8934a;
--gold-dim:#8a6d34;
--blue:#1f3d5c;
--blue-glow:#5b8bb8;
--red:#a8232b;
--red-neon:#e0353f;
--bg:#0c0a09;
--bg-2:#141110;
--bg-3:#1b1615;
--line:rgba(184,147,74,.22);
--line-soft:rgba(184,147,74,.1);
--serif:"Songti SC","SimSun","Noto Serif CJK SC",serif;
--sans:"PingFang SC","Heiti SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
}
*, *::before, *::after {box-sizing:border-box;margin:0;padding:0;}
html {-webkit-text-size-adjust:100%;}
body {
background:var(--bg);
color:var(--ink);
font-family:var(--sans);
font-size:14px;
line-height:1.5;
letter-spacing:.02em;
background-image:
radial-gradient(120% 60% at 12% -8%,rgba(143,51,38,.28),transparent 62%),
radial-gradient(110% 55% at 88% -6%,rgba(31,61,92,.32),transparent 60%),
linear-gradient(180deg,#0c0a09 0%,#100d0c 42%,#0b0908 100%);
background-attachment:fixed;
min-height:100%;
overflow-x:hidden;
}
img, video {display:block;max-width:100%;}
img {height:auto;}
ul, ol {list-style:none;}
a {color:inherit;text-decoration:none;}
button {font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
dl, dd, dt {margin:0;}
::selection {background:var(--red);color:#fff;}
.site-header {
position:sticky;
top:0;
z-index:40;
background:linear-gradient(180deg,rgba(9,7,7,.97),rgba(9,7,7,.86) 70%,rgba(9,7,7,.58));
backdrop-filter:blur(8px);
border-bottom:1px solid var(--line);
}
.masthead {
display:flex;
align-items:center;
gap:14px;
padding:7px 12px 6px;
flex-wrap:wrap;
}
a[data-contract="site-name"] {
font-family:var(--serif);
font-weight:700;
font-size:17px;
letter-spacing:.14em;
color:var(--gold);
text-decoration:none;
white-space:nowrap;
text-shadow:0 0 14px rgba(184,147,74,.32);
}
a[data-contract="site-name"]:hover {color:var(--ink);}
.header-nav {
display:flex;
align-items:center;
gap:2px;
margin-left:auto;
flex-wrap:wrap;
}
a.nav-link {
display:block;
padding:3px 9px;
font-size:12.5px;
letter-spacing:.16em;
color:var(--ink-dim);
text-decoration:none;
border-bottom:1px solid transparent;
transition:color .18s,border-color .18s;
white-space:nowrap;
}
a.nav-link:hover {
color:var(--red-neon);
border-bottom-color:var(--red-neon);
}
.category-bar {
display:flex;
flex-wrap:wrap;
gap:4px;
padding:0 12px 7px;
border-top:1px solid var(--line-soft);
padding-top:6px;
}
a.runtime-category {
display:inline-block;
padding:2px 8px;
font-size:11.5px;
letter-spacing:.18em;
color:var(--ink-faint);
text-decoration:none;
white-space:nowrap;
border:1px solid rgba(184,147,74,.16);
background:rgba(143,51,38,.07);
transition:color .18s,background .18s,border-color .18s;
}
a.runtime-category:hover {
color:var(--gold);
border-color:var(--gold-dim);
background:rgba(143,51,38,.2);
}
.page-main {
display:block;
padding:0 10px 6px;
}
.section-heading {
font-family:var(--serif);
font-weight:700;
font-size:14px;
letter-spacing:.28em;
color:var(--gold);
padding:0 0 5px;
margin-bottom:7px;
border-bottom:1px solid var(--line);
position:relative;
}
.section-heading::before {
content:"";
position:absolute;
left:0;
bottom:-1px;
width:34px;
height:2px;
background:var(--red);
}
section {margin-top:14px;}
section:first-child {margin-top:0;}
.hero-mirror {
margin-top:0;
padding-top:14px;
}
.mirror-stage {
display:grid;
grid-template-columns:1fr 22px 1fr;
align-items:stretch;
gap:0;
position:relative;
overflow:hidden;
background:
linear-gradient(90deg,rgba(143,51,38,.24) 0%,rgba(12,10,9,.1) 42%,rgba(31,61,92,.26) 100%),
linear-gradient(180deg,#0d0b0a,#161211 70%,#0b0908);
border:1px solid var(--line-soft);
}
.mirror-half {
position:relative;
display:flex;
flex-direction:column;
align-items:center;
justify-content:flex-end;
gap:8px;
padding:10px 8px 8px;
min-height:0;
}
.mirror-half-left {
background:
radial-gradient(90% 70% at 60% 30%,rgba(224,53,63,.14),transparent 70%);
}
.mirror-half-right {
background:
radial-gradient(90% 70% at 40% 34%,rgba(91,139,184,.16),transparent 72%);
}
.poster-frame {
width:100%;
max-width:150px;
position:relative;
margin:0 auto;
box-shadow:0 12px 30px rgba(0,0,0,.72),0 0 0 1px rgba(184,147,74,.24);
}
.poster-frame::after {
content:"";
position:absolute;
inset:0;
background:linear-gradient(200deg,rgba(224,53,63,.16),transparent 52%);
pointer-events:none;
}
.poster-img {
width:100%;
height:auto;
object-fit:cover;
aspect-ratio:9 / 16;
filter:saturate(.86) contrast(1.06) brightness(.92);
}
.mirror-name {
font-family:var(--serif);
font-size:13px;
letter-spacing:.3em;
color:var(--gold);
text-shadow:0 0 12px rgba(0,0,0,.9);
}
.mirror-half-left .mirror-name {color:#d8b06a;}
.mirror-half-right .mirror-name {color:#8fb4d6;}
.mirror-silhouette {
position:relative;
width:100%;
max-width:150px;
aspect-ratio:9 / 16;
display:flex;
flex-direction:column;
align-items:center;
justify-content:flex-end;
padding-bottom:6%;
background:
radial-gradient(80% 55% at 50% 74%,rgba(224,53,63,.2),transparent 72%),
linear-gradient(180deg,#0b1014,#12181d 60%,#080a0c);
box-shadow:0 12px 30px rgba(0,0,0,.7),0 0 0 1px rgba(91,139,184,.2);
overflow:hidden;
}
.mirror-silhouette::before {
content:"";
position:absolute;
left:50%;
top:16%;
width:74%;
height:1px;
transform:translateX(-50%);
background:linear-gradient(90deg,transparent,rgba(224,53,63,.55),transparent);
}
.silhouette-head {
width:26%;
aspect-ratio:1;
border-radius:50%;
background:
radial-gradient(circle at 38% 34%,rgba(224,53,63,.34),transparent 60%),
#2a0d10;
box-shadow:0 0 22px rgba(224,53,63,.34);
margin-bottom:-2%;
position:relative;
z-index:2;
}
.silhouette-body {
width:72%;
height:44%;
background:
linear-gradient(180deg,#2c0f12,#160708 78%),
#160708;
border-radius:42% 42% 6% 6% / 30% 30% 4% 4%;
box-shadow:0 0 30px rgba(224,53,63,.24);
position:relative;
z-index:1;
}
.silhouette-body::after {
content:"";
position:absolute;
left:50%;
top:26%;
width:2px;
height:64%;
transform:translateX(-50%);
background:linear-gradient(180deg,transparent,rgba(224,53,63,.6),transparent);
}
.rail-divider {
display:flex;
flex-direction:column;
justify-content:space-between;
align-items:center;
padding:8px 0;
background:linear-gradient(180deg,#0a0807,#1a1513 50%,#0a0807);
border-left:1px solid rgba(184,147,74,.14);
border-right:1px solid rgba(184,147,74,.14);
}
.rail-bar {
display:block;
width:100%;
height:2px;
background:linear-gradient(90deg,rgba(184,147,74,.1),var(--gold-dim),rgba(184,147,74,.1));
box-shadow:0 0 8px rgba(184,147,74,.28);
}
.overview-panel {
margin-top:12px;
padding:12px 12px 14px;
background:
linear-gradient(180deg,rgba(27,22,21,.92),rgba(12,10,9,.92));
border:1px solid var(--line);
border-top:2px solid var(--rust);
position:relative;
}
.overview-panel::before {
content:"";
position:absolute;
inset:0;
pointer-events:none;
background:radial-gradient(70% 40% at 8% 0%,rgba(143,51,38,.16),transparent 68%);
}
.title-block {
position:relative;
display:flex;
flex-wrap:wrap;
align-items:baseline;
gap:6px 14px;
padding-bottom:9px;
border-bottom:1px solid var(--line-soft);
}
.movie-title {
font-family:var(--serif);
font-weight:700;
font-size:22px;
line-height:1.2;
letter-spacing:.08em;
color:#f0e6d2;
text-shadow:0 0 20px rgba(143,51,38,.5);
}
.movie-tagline {
font-family:var(--serif);
font-size:12.5px;
letter-spacing:.2em;
color:var(--red-neon);
opacity:.86;
}
.player-shell {
position:relative;
margin-top:11px;
width:100%;
background:#000;
border:1px solid rgba(184,147,74,.26);
box-shadow:0 14px 34px rgba(0,0,0,.72);
transition:box-shadow .25s,border-color .25s;
}
.player-shell::after {
content:"";
position:absolute;
inset:0;
pointer-events:none;
box-shadow:inset 0 0 46px rgba(0,0,0,.6);
}
.player-shell video {
width:100%;
aspect-ratio:16 / 9;
background:#000;
object-fit:cover;
display:block;
}
.player-controls {
display:flex;
flex-wrap:wrap;
gap:3px;
padding:6px 6px 5px;
background:linear-gradient(180deg,rgba(20,16,15,.96),rgba(9,7,7,.96));
border-top:1px solid var(--line-soft);
}
.ctl {
padding:3px 8px;
font-size:11.5px;
letter-spacing:.12em;
color:var(--ink-dim);
border:1px solid rgba(184,147,74,.2);
background:rgba(143,51,38,.08);
white-space:nowrap;
transition:color .16s,background .16s,border-color .16s;
}
.ctl:hover {
color:var(--gold);
border-color:var(--gold-dim);
background:rgba(143,51,38,.24);
}
.ctl:focus-visible {outline:1px solid var(--blue-glow);outline-offset:1px;}
.ctl-play.is-playing, .play.is-playing {color:var(--red-neon);border-color:var(--red-neon);}
.ctl-mute.is-muted, .mute.is-muted {color:var(--blue-glow);border-color:var(--blue-glow);}
.ctl-speed.is-active, .speed.is-active {color:var(--gold);border-color:var(--gold);}
.player-shell.is-theater, .theater.is-theater {
border-color:var(--gold);
box-shadow:0 0 0 1px rgba(184,147,74,.4),0 0 40px rgba(143,51,38,.42);
}
.player-shell.is-light-off, .light.is-light-off {filter:brightness(.72) saturate(1.16);}
.player-shell.is-fullscreen, .fullscreen.is-fullscreen {
display:flex;
flex-direction:column;
justify-content:center;
background:#000;
}
.player-shell.is-fullscreen video {
height:auto;
max-height:100%;
}
.seo-lede {
margin-top:10px;
padding:8px 10px;
font-size:12.5px;
line-height:1.62;
color:var(--ink-dim);
background:rgba(29,51,41,.24);
border-left:2px solid var(--green);
}
.synopsis {margin-top:14px;}
.synopsis-para {
font-size:13px;
line-height:1.68;
color:var(--ink-dim);
padding:5px 0 5px 10px;
border-left:1px solid var(--line-soft);
}
.synopsis-para + .synopsis-para {margin-top:3px;}
.synopsis-para:first-of-type {color:var(--ink);}
.cast-row {
display:flex;
flex-wrap:wrap;
align-items:flex-start;
gap:10px;
padding:4px 0 2px;
}
.cast-card {
display:flex;
flex-direction:column;
align-items:center;
gap:5px;
position:relative;
padding:0 2px;
}
.cast-avatar {
display:block;
width:52px;
height:52px;
border-radius:50%;
background:
radial-gradient(circle at 36% 32%,rgba(224,53,63,.6),rgba(58,20,16,.96) 72%),
#3a1410;
border:1px solid rgba(184,147,74,.44);
box-shadow:0 0 14px rgba(143,51,38,.4);
position:relative;
}
.cast-avatar::after {
content:"";
position:absolute;
left:50%;
bottom:11%;
width:56%;
height:44%;
transform:translateX(-50%);
border-radius:50% 50% 26% 26%;
background:rgba(12,10,9,.72);
}
.cast-card + .cast-card .cast-avatar {
margin-left:-26px;
}
.cast-name {
font-family:var(--serif);
font-size:11.5px;
letter-spacing:.16em;
color:var(--ink-dim);
white-space:nowrap;
}
.cast-card:first-child .cast-name {color:var(--gold);}
.status-row {
display:flex;
flex-wrap:wrap;
gap:5px 18px;
align-items:baseline;
padding:6px 10px;
background:rgba(31,61,92,.16);
border:1px solid rgba(91,139,184,.2);
}
.status-key {
font-size:11.5px;
letter-spacing:.2em;
color:var(--ink-faint);
}
.status-value {
font-family:var(--serif);
font-size:15px;
color:var(--gold);
margin-right:8px;
}
.detail-grid {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:1px;
background:var(--line-soft);
border:1px solid var(--line-soft);
}
.detail-key, .detail-value {
padding:5px 8px;
background:var(--bg-2);
font-size:12px;
}
.detail-key {
color:var(--ink-faint);
letter-spacing:.14em;
font-size:11px;
}
.detail-value {
color:var(--ink);
}
.timeline-list {
display:flex;
flex-direction:column;
gap:0;
position:relative;
padding-left:26px;
}
.timeline-list::before {
content:"";
position:absolute;
left:9px;
top:4px;
bottom:4px;
width:1px;
background:linear-gradient(180deg,transparent,var(--gold-dim) 8%,var(--gold-dim) 92%,transparent);
}
.timeline-item {
position:relative;
display:grid;
grid-template-columns:minmax(0,1fr) auto;
align-items:baseline;
gap:4px 12px;
padding:6px 8px 6px 10px;
background:rgba(20,17,16,.72);
border-left:1px solid var(--line-soft);
}
.timeline-item + .timeline-item {margin-top:2px;}
.timeline-marker {
position:absolute;
left:-22px;
top:9px;
width:11px;
height:11px;
border-radius:50%;
background:var(--rust-deep);
border:1px solid var(--gold-dim);
box-shadow:0 0 0 2px var(--bg);
}
.timeline-item-bead .timeline-marker {
background:
radial-gradient(circle at 34% 30%,#e6c37a,rgba(143,51,38,.9) 78%);
border-radius:50%;
}
.timeline-item-shell .timeline-marker {
border-radius:2px 2px 4px 4px;
background:linear-gradient(180deg,#d8b06a,#7a5a22);
box-shadow:0 0 0 2px var(--bg),0 0 10px rgba(184,147,74,.4);
}
.timeline-label {
font-size:13px;
line-height:1.5;
color:var(--ink);
}
.timeline-time {
font-family:var(--serif);
font-size:11.5px;
letter-spacing:.16em;
color:var(--red-neon);
white-space:nowrap;
text-align:right;
}
.episode-grid {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:6px;
align-items:start;
}
.episode-card {
position:relative;
display:flex;
flex-direction:column;
gap:3px;
padding:8px 8px 7px;
background:
linear-gradient(180deg,rgba(29,51,41,.24),rgba(20,17,16,.92));
border:1px solid var(--line-soft);
border-top:1px solid var(--line);
overflow:hidden;
}
.episode-card::after {
content:"";
position:absolute;
inset:0;
pointer-events:none;
background:radial-gradient(70% 40% at 100% 0%,rgba(143,51,38,.14),transparent 70%);
}
.episode-number {
align-self:flex-start;
font-family:var(--serif);
font-size:11px;
letter-spacing:.12em;
color:var(--gold);
padding:1px 6px;
background:rgba(184,147,74,.14);
border:1px solid rgba(184,147,74,.3);
text-shadow:0 1px 0 rgba(0,0,0,.8);
}
.episode-number::before {
content:"";
position:absolute;
inset:0;
pointer-events:none;
opacity:.3;
background-image:repeating-linear-gradient(0deg,rgba(0,0,0,.4) 0 1px,transparent 1px 3px);
}
.episode-title {
font-family:var(--serif);
font-weight:700;
font-size:14px;
letter-spacing:.06em;
color:#f0e6d2;
}
.episode-summary {
font-size:12px;
line-height:1.52;
color:var(--ink-dim);
display:-webkit-box;
-webkit-line-clamp:2;
line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}
.episode-duration {
font-size:11px;
letter-spacing:.14em;
color:var(--ink-faint);
margin-top:1px;
}
.comment-columns {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:8px;
align-items:start;
}
.comment-col {
display:flex;
flex-direction:column;
gap:6px;
}
.comment-col-right {margin-top:16px;}
.comment-card {
display:flex;
gap:8px;
padding:7px 8px;
background:rgba(20,17,16,.86);
border:1px solid var(--line-soft);
border-left:2px solid rgba(168,35,43,.6);
}
.comment-avatar {
flex:0 0 auto;
width:26px;
height:26px;
border-radius:50%;
background:
radial-gradient(circle at 38% 32%,rgba(168,35,43,.9),rgba(58,20,16,.96) 76%),
#3a1410;
border:1px solid rgba(168,35,43,.5);
position:relative;
}
.comment-avatar::after {
content:"";
position:absolute;
left:50%;
bottom:16%;
width:52%;
height:40%;
transform:translateX(-50%);
border-radius:50% 50% 30% 30%;
background:rgba(12,10,9,.7);
}
.comment-body {
display:flex;
flex-direction:column;
gap:2px;
min-width:0;
}
.comment-nick {
font-family:var(--serif);
font-size:11.5px;
letter-spacing:.1em;
color:var(--gold);
}
.comment-text {
font-size:12px;
line-height:1.5;
color:var(--ink-dim);
}
.rec-region {margin-top:16px;}
.rec-row {
display:grid;
grid-template-columns:repeat(auto-fill,minmax(132px,1fr));
gap:6px;
align-items:start;
}
a.rec-item {
display:flex;
flex-direction:column;
gap:4px;
padding:6px;
background:linear-gradient(180deg,rgba(27,22,21,.9),rgba(12,10,9,.92));
border:1px solid var(--line-soft);
color:var(--ink-dim);
text-decoration:none;
transition:border-color .18s,color .18s,transform .18s,box-shadow .18s;
}
a.rec-item:hover, a.rec-item:focus-visible {
border-color:var(--gold-dim);
color:var(--ink);
box-shadow:0 8px 20px rgba(0,0,0,.6);
transform:translateY(-1px);
}
[data-runtime="recommendation"] img {
width:100%;
aspect-ratio:16 / 10;
height:auto;
object-fit:cover;
background:#000;
filter:saturate(.82) brightness(.9);
display:block;
}
[data-runtime="recommendation"] [data-runtime="name"] {
font-family:var(--serif);
font-weight:700;
font-size:12.5px;
line-height:1.35;
letter-spacing:.04em;
color:var(--ink);
}
[data-runtime="recommendation"] [data-runtime="blurb"] {
font-size:11px;
line-height:1.42;
color:var(--ink-faint);
display:-webkit-box;
-webkit-line-clamp:2;
line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}
.rec-region-1 .section-heading::before {background:var(--red);}
.rec-region-2 .section-heading::before {background:var(--gold);}
.rec-region-3 .section-heading::before {background:var(--blue-glow);}
.site-footer {
margin-top:20px;
padding:12px 12px 18px;
border-top:1px solid var(--line);
background:linear-gradient(180deg,rgba(12,10,9,.4),rgba(9,7,7,.96));
}
.footer-disclaimer {
font-size:11.5px;
line-height:1.6;
color:var(--ink-faint);
max-width:70ch;
}
.footer-nav {
display:flex;
flex-wrap:wrap;
gap:2px 6px;
margin-top:8px;
}
a[data-contract="footer-home"], a[data-contract="footer-sitemap"] {
font-size:12px;
letter-spacing:.14em;
color:var(--ink-dim);
text-decoration:none;
padding:2px 0;
border-bottom:1px solid transparent;
transition:color .18s,border-color .18s;
}
a[data-contract="footer-home"]:hover, a[data-contract="footer-sitemap"]:hover {
color:var(--gold);
border-bottom-color:var(--gold-dim);
}
.friend-links {
display:flex;
flex-wrap:wrap;
align-items:center;
gap:4px 10px;
margin-top:10px;
padding-top:8px;
border-top:1px solid var(--line-soft);
}
.friend-links-label {
font-family:var(--serif);
font-size:11.5px;
letter-spacing:.22em;
color:var(--gold-dim);
}
a.runtime-friend-link {
font-size:11.5px;
color:var(--ink-faint);
text-decoration:none;
white-space:nowrap;
border-bottom:1px dotted rgba(184,147,74,.28);
transition:color .18s,border-color .18s;
}
a.runtime-friend-link:hover {
color:var(--red-neon);
border-bottom-color:var(--red-neon);
}
.click {cursor:pointer;}
.progress {color:var(--ink-dim);}
.volume {color:var(--ink-dim);}
.pip {color:var(--ink-dim);}
.pause {color:var(--red-neon);}
@media (max-width:900px){.detail-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
.episode-grid {grid-template-columns:repeat(3,minmax(0,1fr));}}
@media (max-width:760px){.mirror-stage {grid-template-columns:1fr 16px 1fr;}
.poster-frame, .mirror-silhouette {max-width:100%;}
.detail-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
.episode-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
.comment-columns {grid-template-columns:minmax(0,1fr);}
.comment-col-right {margin-top:0;}
.rec-row {grid-template-columns:repeat(auto-fill,minmax(118px,1fr));}}
@media (max-width:560px){.page-main {padding:0 8px 6px;}
.masthead {padding:6px 8px 5px;}
.category-bar {padding:5px 8px 6px;}
.movie-title {font-size:19px;}
.seo-lede {font-size:12px;}
.detail-grid {grid-template-columns:minmax(0,1fr);}
.episode-grid {grid-template-columns:minmax(0,1fr);}
.cast-avatar {width:44px;height:44px;}
.cast-card + .cast-card .cast-avatar {margin-left:-22px;}
.rec-row {grid-template-columns:repeat(auto-fill,minmax(104px,1fr));}
.timeline-item {grid-template-columns:minmax(0,1fr);}
.timeline-time {text-align:left;}}
@media (max-width:400px){.mirror-stage {grid-template-columns:1fr;grid-template-rows:auto auto auto;}
.rail-divider {
flex-direction:row;
padding:0 8px;
height:14px;
border-left:0;
border-right:0;
border-top:1px solid rgba(184,147,74,.14);
border-bottom:1px solid rgba(184,147,74,.14);
}
.rail-bar {width:2px;height:100%;background:linear-gradient(180deg,rgba(184,147,74,.1),var(--gold-dim),rgba(184,147,74,.1));}
.rec-row {grid-template-columns:repeat(auto-fill,minmax(96px,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}