* {margin:0;padding:0;box-sizing:border-box}
:root {
--ink:#0b0908;
--deep-brown:#1a100c;
--deep-green:#0d1512;
--neon-pink:#ff2d78;
--neon-pink-soft:#ff6aa0;
--tungsten:#ffc94d;
--tungsten-dim:#c9962e;
--smoke:#3a2c26;
--ash:#8a7a72;
--bone:#e8dcd2;
--cig:#ff3b2f;
--film-hole:#060504;
--t:1px;
}
html {-webkit-text-size-adjust:100%}
body {
background:var(--ink);
color:var(--bone);
font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
font-size:13px;
line-height:1.45;
font-stretch:condensed;
letter-spacing:.02em;
overflow-x:hidden;
background-image:
radial-gradient(ellipse 60% 40% at 12% 4%,rgba(255,45,120,.10),transparent 70%),
radial-gradient(ellipse 50% 35% at 88% 12%,rgba(255,201,77,.07),transparent 70%),
linear-gradient(180deg,#0b0908 0%,#0d0b09 40%,#0b0908 100%);
}
img {display:block;max-width:100%}
a {color:inherit;text-decoration:none}
ul, ol {list-style:none}
h1, h2, h3 {font-weight:800}
button {font:inherit;color:inherit;background:none;border:0;cursor:pointer}
figure {display:block}
.site-header {
position:sticky;top:0;z-index:60;
background:linear-gradient(180deg,rgba(11,9,8,.97),rgba(11,9,8,.88));
border-bottom:1px solid rgba(255,45,120,.35);
box-shadow:0 1px 0 rgba(255,201,77,.12),0 6px 18px rgba(0,0,0,.6);
}
.header-inner {
display:flex;align-items:center;gap:14px;
padding:7px 14px;
max-width:1400px;margin:0 auto;
flex-wrap:wrap;
}
a[data-contract="site-name"] {
font-size:16px;font-weight:800;letter-spacing:.12em;
color:var(--tungsten);
text-decoration:none;
text-shadow:1.5px 0 0 rgba(255,45,120,.85),-1px .5px 0 rgba(0,255,200,.18);
white-space:nowrap;
}
.category-nav {
display:flex;flex-wrap:wrap;gap:6px;margin-left:auto;
min-width:0;
}
a.runtime-category {
font-size:11px;font-weight:700;
color:var(--neon-pink-soft);
text-decoration:none;
white-space:nowrap;
padding:3px 9px 2px;
border:1px solid rgba(255,45,120,.5);
border-radius:1px;
background:rgba(255,45,120,.06);
box-shadow:inset 0 0 8px rgba(255,45,120,.12);
transition:background .15s,color .15s;
}
a.runtime-category:hover, a.runtime-category:focus-visible {
background:var(--neon-pink);color:#120608;
text-shadow:none;
}
.page-main {
max-width:1400px;margin:0 auto;
padding:0 14px;
display:flex;flex-direction:column;
}
.hero-silhouette {
position:relative;
margin:0 -14px;
min-height:min(72vh,560px);
display:flex;align-items:flex-end;
overflow:hidden;
border-bottom:1px solid rgba(255,201,77,.18);
background:
linear-gradient(180deg,rgba(6,5,4,.2) 0%,rgba(6,5,4,.75) 62%,#0b0908 100%),
radial-gradient(ellipse 70% 55% at 50% 42%,rgba(255,45,120,.16),transparent 68%),
linear-gradient(180deg,#12100e,#0a0908);
}
.hero-figure {
position:absolute;inset:0;
}
.hero-mirror-shards {
position:absolute;inset:0;
background:
linear-gradient(115deg,transparent 46%,rgba(255,45,120,.55) 46.4%,transparent 47%),
linear-gradient(65deg,transparent 55%,rgba(255,201,77,.42) 55.4%,transparent 56%),
linear-gradient(150deg,transparent 32%,rgba(255,255,255,.14) 32.3%,transparent 33%),
linear-gradient(200deg,transparent 68%,rgba(255,45,120,.3) 68.4%,transparent 69%),
linear-gradient(85deg,transparent 22%,rgba(255,201,77,.22) 22.3%,transparent 23%);
opacity:.85;
mix-blend-mode:screen;
filter:blur(.2px);
}
.hero-bulldozer-distant {
position:absolute;right:6%;bottom:16%;
width:min(38vw,300px);height:min(24vw,150px);
background:
linear-gradient(180deg,rgba(255,201,77,.5),rgba(255,45,120,.16) 60%,transparent);
clip-path:polygon(0 100%,0 62%,18% 62%,18% 40%,58% 40%,58% 22%,74% 22%,74% 52%,100% 52%,100% 100%);
opacity:.4;
filter:blur(1px);
}
.hero-dancer-silhouette {
position:absolute;left:50%;bottom:0;
transform:translateX(-50%);
width:min(52vw,340px);height:min(64vh,470px);
background:
radial-gradient(ellipse 46% 30% at 50% 8%,#150f0c 0 70%,transparent 72%),
linear-gradient(180deg,#130d0a 0%,#0c0908 55%,#080605 100%);
clip-path:polygon(
50% 0%,58% 7%,60% 15%,54% 20%,70% 26%,86% 40%,78% 46%,92% 66%,74% 68%,
82% 100%,58% 100%,52% 78%,48% 78%,42% 100%,18% 100%,26% 68%,8% 66%,
22% 46%,14% 40%,30% 26%,46% 20%,40% 15%,42% 7%
);
box-shadow:0 0 40px rgba(255,45,120,.28),0 0 90px rgba(255,201,77,.14);
}
.hero-dancer-silhouette::after {
content:"";position:absolute;left:50%;top:6%;width:34%;height:16%;
transform:translateX(-50%);
border-radius:50%;
background:radial-gradient(circle at 34% 40%,var(--neon-pink) 0 18%,transparent 60%);
opacity:.5;filter:blur(2px);
}
.hero-title-band {
position:relative;z-index:3;
width:100%;
align-self:flex-end;
margin-bottom:clamp(18px,6vh,52px);
padding:14px 18px 16px;
background:linear-gradient(90deg,rgba(11,9,8,.94) 0%,rgba(26,16,12,.8) 55%,rgba(11,9,8,.35) 100%);
border-top:1px solid rgba(255,45,120,.5);
border-bottom:1px solid rgba(255,201,77,.3);
backdrop-filter:blur(2px);
}
.hero-title {
font-size:clamp(30px,7vw,64px);
line-height:.94;
letter-spacing:.06em;
color:#fff;
text-shadow:
2px 0 0 var(--neon-pink),
-2px .5px 0 var(--tungsten),
0 0 26px rgba(255,45,120,.55);
}
.hero-tagline {
margin-top:8px;
font-size:clamp(11px,1.6vw,14px);
font-weight:600;
color:var(--tungsten);
letter-spacing:.14em;
max-width:52ch;
text-shadow:0 0 10px rgba(255,201,77,.35);
}
.movie-overview {
display:grid;
grid-template-columns:minmax(0,220px) minmax(0,1fr);
gap:18px;
padding:18px 0 20px;
border-bottom:1px solid rgba(255,45,120,.22);
align-items:start;
}
.overview-poster-column {min-width:0}
.poster-figure {
background:linear-gradient(180deg,#150f0c,#0c0908);
border:1px solid rgba(255,201,77,.3);
padding:6px;
box-shadow:0 0 0 1px rgba(255,45,120,.18),0 10px 26px rgba(0,0,0,.7);
}
.poster-figure img {
width:100%;
height:auto;
object-fit:cover;
filter:saturate(1.15) contrast(1.08);
border:1px solid rgba(255,45,120,.25);
}
.poster-caption {
margin-top:6px;
font-size:10.5px;
letter-spacing:.1em;
color:var(--ash);
text-align:center;
}
.overview-info-column {
min-width:0;
display:flex;flex-direction:column;gap:14px;
}
.overview-head {
border-left:3px solid var(--neon-pink);
padding-left:10px;
}
.movie-title {
font-size:clamp(17px,2.6vw,24px);
letter-spacing:.05em;
color:#fff;
text-shadow:1.5px 0 0 rgba(255,45,120,.75),-1px .5px 0 rgba(255,201,77,.5);
}
.movie-tagline {
font-size:11.5px;
color:var(--tungsten-dim);
letter-spacing:.08em;
margin-top:3px;
}
.player-shell {
display:flex;flex-direction:column;gap:6px;
min-width:0;
border:1px solid rgba(255,201,77,.28);
background:#080605;
padding:5px;
box-shadow:inset 0 0 30px rgba(255,45,120,.08);
}
.player-shell video {
display:block;
width:100%;
background:#000;
}
.player-controls {
display:flex;flex-wrap:wrap;gap:4px;
}
.player-btn {
font-size:10.5px;font-weight:700;
letter-spacing:.06em;
padding:3px 8px 2px;
color:var(--tungsten);
border:1px solid rgba(255,201,77,.4);
background:rgba(255,201,77,.05);
white-space:nowrap;
transition:background .14s,color .14s;
}
.player-btn:hover, .player-btn:focus-visible {
background:var(--tungsten);color:#140b06;
}
.player-shell.is-playing .player-btn[data-player-action="play"], .player-shell.is-muted .player-btn[data-player-action="mute"], .player-shell.is-speed .player-btn[data-player-action="speed"], .player-shell.is-pip .player-btn[data-player-action="pip"], .player-shell.is-fullscreen .player-btn[data-player-action="fullscreen"], .player-shell.is-theater .player-btn[data-player-action="theater"], .player-shell.is-light .player-btn[data-player-action="light"] {
background:var(--neon-pink);color:#120608;border-color:var(--neon-pink);
box-shadow:0 0 12px rgba(255,45,120,.6);
}
.player-shell.is-theater {box-shadow:inset 0 0 40px rgba(255,45,120,.22)}
.player-shell.is-light {background:#1a120e}
.player-shell.is-light .player-btn {border-color:var(--tungsten-dim)}
.block-heading {
font-size:12px;letter-spacing:.2em;
color:var(--neon-pink-soft);
text-transform:uppercase;
padding-bottom:3px;margin-bottom:7px;
border-bottom:1px solid rgba(255,45,120,.3);
text-shadow:1px 0 0 rgba(255,201,77,.4);
}
.section-heading {
font-size:14px;letter-spacing:.16em;
color:var(--tungsten);
margin-bottom:9px;
padding-left:9px;
border-left:3px solid var(--neon-pink);
text-shadow:1.5px 0 0 rgba(255,45,120,.6);
}
.synopsis-block {
background:linear-gradient(180deg,rgba(26,16,12,.55),rgba(13,21,18,.4));
border:1px solid rgba(255,201,77,.16);
padding:9px 11px 10px;
}
.synopsis-paragraph {
font-size:12px;
line-height:1.6;
color:#d3c6bc;
margin-bottom:6px;
letter-spacing:.01em;
}
.synopsis-paragraph:last-child {margin-bottom:0}
.episode-status {
background:rgba(255,45,120,.05);
border:1px solid rgba(255,45,120,.22);
padding:8px 11px 9px;
}
.status-list {
display:flex;flex-wrap:wrap;gap:4px 20px;
}
.status-key {
font-size:10.5px;letter-spacing:.14em;
color:var(--ash);
}
.status-value {
font-size:15px;font-weight:800;
color:var(--cig);
text-shadow:0 0 10px rgba(255,59,47,.6);
margin-right:6px;
}
.cast-strip {
padding-top:2px;
}
.cast-list {
display:flex;flex-wrap:wrap;
gap:0;
align-items:flex-start;
}
.cast-item {
position:relative;
padding:0 9px;
flex:0 1 auto;
}
.cast-item+.cast-item::before {
content:"";position:absolute;left:-1px;top:4px;bottom:4px;
width:5px;
background:
radial-gradient(circle 1.6px at 2.5px 4px,var(--film-hole) 1.6px,transparent 1.7px),
radial-gradient(circle 1.6px at 2.5px 12px,var(--film-hole) 1.6px,transparent 1.7px),
radial-gradient(circle 1.6px at 2.5px 20px,var(--film-hole) 1.6px,transparent 1.7px),
radial-gradient(circle 1.6px at 2.5px 28px,var(--film-hole) 1.6px,transparent 1.7px),
radial-gradient(circle 1.6px at 2.5px 36px,var(--film-hole) 1.6px,transparent 1.7px),
radial-gradient(circle 1.6px at 2.5px 44px,var(--film-hole) 1.6px,transparent 1.7px);
background-color:rgba(255,201,77,.18);
opacity:.9;
}
.cast-figure {display:flex;flex-direction:column;align-items:center;gap:4px}
.cast-avatar {
width:52px;height:52px;
border-radius:50%;
background:
radial-gradient(circle at 38% 34%,rgba(255,45,120,.85),transparent 62%),
linear-gradient(160deg,#2a1a14,#0b0807 70%);
border:1px solid rgba(255,201,77,.45);
box-shadow:0 0 14px rgba(255,45,120,.35),inset 0 0 12px rgba(0,0,0,.8);
}
.cast-names {
display:flex;flex-direction:column;align-items:center;
gap:1px;
max-width:80px;
}
.cast-role {
font-size:11px;font-weight:800;
color:var(--bone);
letter-spacing:.03em;
text-align:center;
}
.cast-actor {
font-size:10px;
color:var(--tungsten-dim);
letter-spacing:.06em;
text-align:center;
}
.detail-block {
background:linear-gradient(180deg,rgba(13,21,18,.6),rgba(11,9,8,.4));
border:1px solid rgba(255,201,77,.16);
padding:9px 11px 10px;
}
.detail-list {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
gap:3px 16px;
}
.detail-key {
font-size:10px;letter-spacing:.16em;
color:var(--ash);
grid-column:1;
}
.detail-value {
font-size:11.5px;font-weight:600;
color:#e0d3c8;
grid-column:2;
margin-bottom:4px;
}
.detail-list {grid-auto-flow:row dense}
.detail-key {grid-column:auto}
.detail-value {grid-column:auto}
.detail-list {
grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
}
.detail-key {display:inline-block;margin-right:6px}
.detail-value {display:inline-block;margin-bottom:5px}
.timeline-section {
padding:18px 0 6px;
border-bottom:1px solid rgba(255,45,120,.18);
}
.timeline-list {
position:relative;
display:grid;
grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
gap:10px 18px;
padding-left:4px;
}
.timeline-item {
position:relative;
padding:6px 8px 6px 20px;
background:linear-gradient(90deg,rgba(255,45,120,.05),transparent 70%);
border-left:2px solid rgba(255,45,120,.35);
}
.timeline-item::before {
content:"";position:absolute;left:-1px;top:0;bottom:0;width:2px;
background:linear-gradient(180deg,var(--tungsten),rgba(255,45,120,.6));
box-shadow:0 0 8px rgba(255,201,77,.6);
}
.timeline-node {
position:absolute;left:-6px;top:9px;
width:10px;height:10px;border-radius:50%;
background:var(--cig);
box-shadow:0 0 10px rgba(255,59,47,.95),0 0 22px rgba(255,59,47,.55);
}
.timeline-node::after {
content:"";position:absolute;left:3px;top:9px;width:4px;height:14px;
background:linear-gradient(180deg,rgba(255,201,77,.55),transparent);
filter:blur(1.5px);
}
.timeline-timecode {
display:block;
font-size:10.5px;font-weight:800;
letter-spacing:.18em;
color:var(--tungsten);
margin-bottom:2px;
text-shadow:0 0 8px rgba(255,201,77,.5);
}
.timeline-label {
font-size:11.5px;
line-height:1.5;
color:#cfc2b8;
}
.episodes-section {
padding:16px 0 8px;
border-bottom:1px solid rgba(255,45,120,.18);
}
.episode-card {
display:grid;
grid-template-columns:minmax(0,150px) minmax(0,1fr);
gap:12px;
background:linear-gradient(90deg,rgba(26,16,12,.75),rgba(13,21,18,.5));
border:1px solid rgba(255,201,77,.24);
padding:9px;
align-items:start;
box-shadow:0 0 0 1px rgba(255,45,120,.14),0 8px 22px rgba(0,0,0,.55);
}
.episode-post-thumb {
align-self:start;
border:1px solid rgba(255,45,120,.35);
overflow:hidden;
background:#080605;
}
.episode-post-thumb img {
width:100%;height:auto;
display:block;
object-fit:cover;
filter:saturate(1.1) contrast(1.05);
}
.episode-text {
min-width:0;
display:flex;flex-direction:column;gap:4px;
}
.episode-title {
font-size:14px;letter-spacing:.06em;
color:#fff;
text-shadow:1.5px 0 0 rgba(255,45,120,.7);
}
.episode-duration {
font-size:10.5px;letter-spacing:.14em;
color:var(--tungsten-dim);
}
.episode-summary {
font-size:11.5px;
line-height:1.6;
color:#c8bbb1;
}
.comments-section {
padding:16px 0 8px;
border-bottom:1px solid rgba(255,45,120,.18);
}
.comment-stack {
display:grid;
grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
gap:10px 14px;
align-items:start;
}
.comment-card {
position:relative;
background:linear-gradient(160deg,#241a12,#16100c);
border:1px solid rgba(255,201,77,.22);
padding:8px 10px 9px;
cursor:pointer;
transform:rotate(-1.1deg);
box-shadow:3px 5px 14px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,45,120,.06);
transition:transform .16s,box-shadow .16s;
}
.comment-card:nth-child(2n) {transform:rotate(1.4deg)}
.comment-card:nth-child(3n) {transform:rotate(-.6deg)}
.comment-card:nth-child(5n) {transform:rotate(2deg)}
.comment-card::before {
content:"";position:absolute;left:0;right:0;top:0;height:3px;
background:linear-gradient(90deg,var(--neon-pink),var(--tungsten));
opacity:.6;
}
.comment-card:hover {transform:rotate(0) translateY(-2px);box-shadow:4px 8px 20px rgba(0,0,0,.7)}
.comment-nickname {
font-size:11px;font-weight:800;
letter-spacing:.08em;
color:var(--neon-pink-soft);
margin-bottom:3px;
}
.comment-text {
font-size:11.5px;
line-height:1.5;
color:#cdc0b6;
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
overflow:hidden;
}
.comment-card.is-expanded .comment-text {
-webkit-line-clamp:unset;
overflow:visible;
}
.recommend-region {
padding:14px 0 4px;
}
.region-narrow .recommend-grid {
display:grid;
grid-template-columns:repeat(auto-fill,minmax(110px,1fr));
gap:9px;
}
.region-wide .recommend-grid {
display:grid;
grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
gap:9px;
}
.region-medium .recommend-grid {
display:grid;
grid-template-columns:repeat(auto-fill,minmax(128px,1fr));
gap:9px;
}
a.recommend-item {
display:flex;flex-direction:column;gap:4px;
background:linear-gradient(180deg,#171009,#0c0908);
border:1px solid rgba(255,201,77,.2);
padding:5px;
color:inherit;text-decoration:none;
transition:border-color .15s,transform .15s,box-shadow .15s;
}
a.recommend-item:hover, a.recommend-item:focus-visible {
border-color:var(--neon-pink);
transform:translateY(-2px);
box-shadow:0 0 16px rgba(255,45,120,.35);
}
[data-runtime="recommendation"] img {
width:100%;
aspect-ratio:2 / 3;
height:auto;
object-fit:cover;
display:block;
filter:saturate(1.1) contrast(1.06);
border:1px solid rgba(255,45,120,.18);
}
[data-runtime="recommendation"] [data-runtime="name"] {
font-size:11px;font-weight:800;
letter-spacing:.03em;
color:#f0e5db;
line-height:1.3;
}
[data-runtime="recommendation"] [data-runtime="blurb"] {
font-size:10px;
line-height:1.4;
color:var(--ash);
letter-spacing:.01em;
}
.site-footer {
margin-top:20px;
border-top:1px solid rgba(255,45,120,.35);
background:linear-gradient(180deg,#0d0b09,#060504);
box-shadow:0 -6px 20px rgba(0,0,0,.6);
}
.footer-inner {
max-width:1400px;margin:0 auto;
padding:14px 14px 20px;
display:flex;flex-direction:column;gap:10px;
}
.footer-nav {
display:flex;flex-wrap:wrap;gap:6px 16px;
}
a[data-contract="footer-home"], a[data-contract="footer-sitemap"] {
font-size:11px;font-weight:700;
letter-spacing:.1em;
color:var(--tungsten);
text-decoration:none;
border-bottom:1px solid rgba(255,201,77,.35);
padding-bottom:1px;
}
a[data-contract="footer-home"]:hover, a[data-contract="footer-sitemap"]:hover {
color:var(--neon-pink-soft);
border-bottom-color:var(--neon-pink);
}
.friend-links {
display:flex;flex-wrap:wrap;align-items:baseline;
gap:5px 12px;
}
.friend-links-label {
font-size:10.5px;font-weight:800;
letter-spacing:.16em;
color:var(--ash);
}
a.runtime-friend-link {
font-size:10.5px;
color:#9d8c82;
text-decoration:none;
white-space:nowrap;
border-bottom:1px dotted rgba(255,45,120,.3);
}
a.runtime-friend-link:hover {
color:var(--neon-pink-soft);
border-bottom-color:var(--neon-pink);
}
.footer-disclaimer {
font-size:10px;
line-height:1.6;
color:#6e6158;
letter-spacing:.02em;
max-width:80ch;
}
@media (max-width:900px){.movie-overview {grid-template-columns:minmax(0,180px) minmax(0,1fr)}
.hero-silhouette {min-height:min(64vh,460px)}}
@media (max-width:720px){.page-main {padding:0 10px}
.hero-silhouette {margin:0 -10px;min-height:min(60vh,420px)}
.header-inner {padding:7px 10px;gap:8px}
.movie-overview {
grid-template-columns:minmax(0,1fr);
gap:14px;
}
.overview-poster-column {
max-width:200px;
}
.overview-poster-column .poster-figure {width:100%}
.timeline-list {grid-template-columns:minmax(0,1fr)}
.comment-stack {grid-template-columns:minmax(0,1fr)}
.episode-card {grid-template-columns:minmax(0,1fr)}
.episode-post-thumb {max-width:180px}
.region-narrow .recommend-grid, .region-wide .recommend-grid, .region-medium .recommend-grid {
grid-template-columns:repeat(auto-fill,minmax(105px,1fr));
}
.cast-item {padding:0 7px}
.cast-avatar {width:46px;height:46px}}
@media (max-width:460px){body {font-size:12.5px}
.hero-dancer-silhouette {width:min(78vw,300px);height:min(52vh,340px)}
.hero-bulldozer-distant {width:min(52vw,200px);height:min(30vw,110px)}
.region-narrow .recommend-grid, .region-wide .recommend-grid, .region-medium .recommend-grid {
grid-template-columns:repeat(auto-fill,minmax(92px,1fr));
}
.detail-list {grid-template-columns:minmax(0,1fr)}}
@media (min-width:1100px){.region-narrow .recommend-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
.region-wide .recommend-grid {grid-template-columns:repeat(3,minmax(0,1fr))}
.region-medium .recommend-grid {grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){* {transition: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}