* {box-sizing:border-box;margin:0;padding:0}
:root {
--bg:#0b0d0f;
--bg2:#111418;
--panel:#15181d;
--panel2:#1a1e24;
--line:#262b33;
--line2:#333a44;
--ink:#d7dce3;
--ink-dim:#8b939f;
--ink-faint:#5c636e;
--warn:#ff4a24;
--warn-soft:#c93a1c;
--mono:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
--sans:"Helvetica Neue",Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}
html {-webkit-text-size-adjust:100%}
body {
background:var(--bg);
color:var(--ink);
font-family:var(--sans);
font-size:13px;
line-height:1.5;
letter-spacing:.01em;
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
img {display:block;max-width:100%;height:auto}
a {color:inherit;text-decoration:none}
ul, ol {list-style:none}
button {font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1, h2, h3 {font-weight:800;letter-spacing:-.01em;line-height:1.2}
.site-header {
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
flex-wrap:wrap;
padding:10px 18px;
border-bottom:1px solid var(--line);
background:rgba(11,13,15,.9);
position:sticky;
top:0;
z-index:40;
backdrop-filter:blur(6px);
}
.site-brand {
font-size:15px;
font-weight:800;
letter-spacing:.14em;
text-transform:uppercase;
color:var(--ink);
white-space:nowrap;
}
.site-brand::before {
content:"";
display:inline-block;
width:8px;height:8px;
margin-right:9px;
border:1.5px solid var(--warn);
border-radius:50%;
vertical-align:1px;
}
a[data-contract="site-name"] {
color:var(--ink);
text-decoration:none;
}
a[data-contract="site-name"]:hover {color:var(--warn)}
.categories-bar {
display:flex;
flex-wrap:wrap;
gap:6px;
align-items:center;
}
.runtime-category {
display:inline-block;
white-space:nowrap;
font-size:11px;
letter-spacing:.08em;
padding:4px 9px;
color:var(--ink-dim);
border:1px solid var(--line2);
background:var(--bg2);
transition:color .15s,border-color .15s,background .15s;
}
a.runtime-category {
color:var(--ink-dim);
text-decoration:none;
}
a.runtime-category:hover {
color:#fff;
border-color:var(--warn);
background:#1c1410;
}
.page-main {
display:block;
padding:0 14px;
max-width:1280px;
margin:0 auto;
}
section {margin:0 0 16px}
section:last-child {margin-bottom:22px}
.hero-ring {
position:relative;
margin:14px 0 18px;
min-height:clamp(300px,44vw,520px);
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
border:1px solid var(--line);
background:
radial-gradient(circle at 50% 50%,#1b1f26 0%,#0c0e11 62%,#0a0c0e 100%);
}
.hero-figures {
position:absolute;
inset:0;
}
.hero-figure {
position:absolute;
top:50%;left:50%;
width:clamp(46px,7vw,86px);
height:clamp(66px,10vw,124px);
margin:calc(clamp(66px,10vw,124px) / -2) 0 0 calc(clamp(46px,7vw,86px) / -2);
border-radius:50% 50% 44% 44%/58% 58% 42% 42%;
background:linear-gradient(180deg,#3a414c 0%,#1b1f26 70%);
filter:blur(5px);
opacity:.5;
transform:rotate(calc(var(--i) * 30deg)) translateY(clamp(-210px,-26vw,-120px)) rotate(calc(var(--i) * -30deg));
}
.hero-figure:nth-child(1) {--i:0}
.hero-figure:nth-child(2) {--i:1}
.hero-figure:nth-child(3) {--i:2}
.hero-figure:nth-child(4) {--i:3}
.hero-figure:nth-child(5) {--i:4}
.hero-figure:nth-child(6) {--i:5}
.hero-figure:nth-child(7) {--i:6}
.hero-figure:nth-child(8) {--i:7}
.hero-figure:nth-child(9) {--i:8}
.hero-figure:nth-child(10) {--i:9}
.hero-figure:nth-child(11) {--i:10}
.hero-figure:nth-child(12) {--i:11}
.hero-mirror {
position:relative;
width:clamp(150px,26vw,300px);
aspect-ratio:3 / 4;
display:grid;
grid-template-columns:1fr 1fr;
grid-template-rows:1fr 1fr;
gap:2px;
transform:rotate(-2deg);
filter:drop-shadow(0 0 22px rgba(255,74,36,.16));
}
.hero-mirror-shard {
background:linear-gradient(135deg,#2b323c,#12161b 70%);
border:1px solid #3c444f;
box-shadow:inset 0 0 26px rgba(0,0,0,.7);
}
.hero-mirror-shard:nth-child(1) {clip-path:polygon(0 0,100% 0,84% 100%,0 78%)}
.hero-mirror-shard:nth-child(2) {clip-path:polygon(0 0,100% 0,100% 88%,16% 100%)}
.hero-mirror-shard:nth-child(3) {clip-path:polygon(0 14%,88% 0,100% 100%,0 100%)}
.hero-mirror-shard:nth-child(4) {clip-path:polygon(20% 0,100% 12%,100% 100%,0 100%)}
.hero-mirror-shard:nth-child(5) {
grid-column:1 / -1;
height:34%;
align-self:center;
clip-path:polygon(0 40%,52% 0,100% 46%,58% 100%);
opacity:.4;
background:linear-gradient(90deg,#0a0c0e,#2b323c);
}
.hero-countdown {
position:absolute;
right:clamp(10px,3vw,34px);
bottom:clamp(10px,3vw,30px);
display:flex;
flex-direction:column;
align-items:flex-end;
gap:2px;
transition:color .2s;
}
.hero-countdown-label {
font-size:10px;
letter-spacing:.32em;
color:var(--ink-faint);
text-transform:uppercase;
white-space:nowrap;
}
.hero-countdown-value {
font-family:var(--mono);
font-size:clamp(20px,3.4vw,34px);
font-weight:700;
letter-spacing:.06em;
color:var(--warn);
text-shadow:0 0 18px rgba(255,74,36,.55);
font-variant-numeric:tabular-nums;
}
body.lights-off .hero-countdown-value {
color:#fff;
text-shadow:0 0 26px rgba(255,74,36,.9);
}
body.lights-off .hero-figure {opacity:.2}
.movie-overview {
display:grid;
grid-template-columns:minmax(0,168px) minmax(0,1fr);
gap:16px;
align-items:start;
padding:14px;
border:1px solid var(--line);
background:linear-gradient(180deg,var(--panel) 0%,#12151a 100%);
}
.overview-poster-wrap {
align-self:start;
border:1px solid var(--line2);
background:#0a0c0e;
}
.overview-poster {
display:block;
width:100%;
aspect-ratio:9 / 16;
object-fit:cover;
}
.overview-info {
display:flex;
flex-direction:column;
gap:9px;
min-width:0;
}
.overview-title {
font-size:clamp(19px,3vw,28px);
letter-spacing:.02em;
color:#fff;
}
.overview-tagline {
font-size:12px;
color:var(--warn);
letter-spacing:.06em;
}
.overview-seo {
font-size:12px;
line-height:1.62;
color:var(--ink-dim);
max-width:74ch;
}
.overview-info > .overview-seo, .overview-info > .player-shell, .overview-info > .cast-strip, .overview-info > .episode-status {
border-top:1px solid var(--line);
padding-top:10px;
}
.player-shell {
position:relative;
width:100%;
}
.player-video {
display:block;
width:100%;
aspect-ratio:16 / 9;
background:#000;
border:1px solid var(--line2);
}
.player-controls {
display:flex;
flex-wrap:wrap;
gap:4px;
margin-top:6px;
}
.player-btn {
font-size:11px;
letter-spacing:.06em;
padding:4px 8px;
border:1px solid var(--line2);
background:var(--panel2);
color:var(--ink-dim);
white-space:nowrap;
transition:color .12s,border-color .12s,background .12s;
}
.player-btn:hover {color:#fff;border-color:var(--line2);background:#22272f}
.player-btn.is-active {
color:#fff;
border-color:var(--warn);
background:#241410;
box-shadow:inset 0 0 0 1px rgba(255,74,36,.25);
}
.player-shell.theater-mode {
position:fixed;
inset:0;
z-index:90;
background:#000;
padding:14px;
display:flex;
flex-direction:column;
justify-content:center;
}
.player-shell.theater-mode .player-video {
max-height:82vh;
object-fit:contain;
}
.player-shell.theater-mode .player-controls {justify-content:center}
.cast-strip {
display:block;
}
.cast-heading {
font-size:11px;
letter-spacing:.3em;
color:var(--ink-faint);
text-transform:uppercase;
margin-bottom:8px;
}
.cast-list {
display:flex;
flex-wrap:nowrap;
gap:6px;
overflow-x:auto;
padding-bottom:6px;
scrollbar-width:thin;
}
.cast-card {
flex:0 0 auto;
font-size:12px;
letter-spacing:.04em;
padding:7px 12px;
color:var(--ink);
background:var(--panel2);
border:1px solid var(--line2);
border-left:2px solid var(--warn-soft);
white-space:nowrap;
}
.episode-status {
display:flex;
align-items:baseline;
gap:10px;
flex-wrap:wrap;
}
.episode-status-current {
font-family:var(--mono);
font-size:12px;
letter-spacing:.06em;
color:var(--warn);
border:1px solid var(--warn-soft);
padding:2px 8px;
white-space:nowrap;
}
.episode-status-total {
font-family:var(--mono);
font-size:12px;
letter-spacing:.06em;
color:var(--ink-faint);
white-space:nowrap;
}
.synopsis-panel {
border-top:1px solid var(--line);
padding-top:12px;
}
.synopsis-heading, .timeline-heading, .episodes-heading, .comments-heading, .details-heading, .recommendations-title {
font-size:12px;
font-weight:800;
letter-spacing:.26em;
color:var(--ink-faint);
text-transform:uppercase;
margin-bottom:9px;
}
.synopsis-columns {
display:grid;
grid-template-columns:minmax(0,1fr);
gap:12px;
}
.synopsis-text {
columns:2;
column-gap:22px;
column-rule:1px solid var(--line);
}
.synopsis-para {
font-size:12px;
line-height:1.68;
color:var(--ink-dim);
break-inside:avoid;
margin-bottom:8px;
}
.synopsis-para:last-child {margin-bottom:0}
.details-panel {
border-top:1px solid var(--line);
padding-top:12px;
}
.details-list {
display:grid;
grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
gap:0 14px;
}
.details-row {
display:flex;
align-items:baseline;
gap:8px;
padding:4px 0;
border-bottom:1px solid var(--line);
}
.details-key {
flex:0 0 auto;
font-size:11px;
letter-spacing:.1em;
color:var(--ink-faint);
min-width:52px;
}
.details-value {
font-size:12px;
color:var(--ink);
min-width:0;
}
.timeline-panel {
border-top:1px solid var(--line);
padding-top:12px;
}
.timeline-list {
position:relative;
padding-left:18px;
}
.timeline-list::before {
content:"";
position:absolute;
left:4px;
top:4px;
bottom:4px;
width:1px;
background:linear-gradient(180deg,var(--warn-soft),var(--line) 40%,var(--line));
}
.timeline-item {
position:relative;
display:flex;
flex-wrap:wrap;
align-items:baseline;
gap:4px 10px;
padding:6px 0;
border-bottom:1px solid #1d2128;
}
.timeline-item:last-child {border-bottom:0}
.timeline-node {
position:absolute;
left:-18px;
top:11px;
width:9px;height:9px;
border:1.5px solid var(--warn);
border-radius:50%;
background:var(--bg);
}
.timeline-timecode {
font-family:var(--mono);
font-size:11px;
letter-spacing:.04em;
color:var(--warn);
flex:0 0 auto;
white-space:nowrap;
min-width:112px;
}
.timeline-label {
font-size:12px;
color:var(--ink-dim);
min-width:0;
}
.episodes-panel {
border-top:1px solid var(--line);
padding-top:12px;
}
.episodes-grid {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:8px;
}
.episode-card {
display:flex;
flex-direction:column;
gap:5px;
padding:9px 10px;
background:var(--panel);
border:1px solid var(--line);
border-top:2px solid var(--line2);
transition:border-color .15s,background .15s;
}
.episode-card:hover {
border-color:var(--line2);
border-top-color:var(--warn);
background:var(--panel2);
}
.episode-number {
font-family:var(--mono);
font-size:11px;
letter-spacing:.1em;
color:var(--warn);
}
.episode-title {
font-size:13px;
font-weight:800;
color:#fff;
letter-spacing:.02em;
}
.episode-summary {
font-size:11.5px;
line-height:1.55;
color:var(--ink-dim);
}
.episode-duration {
margin-top:auto;
font-family:var(--mono);
font-size:10px;
letter-spacing:.08em;
color:var(--ink-faint);
}
.comments-panel {
border-top:1px solid var(--line);
padding-top:12px;
}
.comments-list {
display:flex;
flex-direction:column;
gap:6px;
max-width:660px;
}
.comment-card {
padding:8px 10px;
background:var(--panel);
border:1px solid var(--line);
border-left:2px solid var(--line2);
}
.comment-nickname {
display:block;
font-size:11px;
font-weight:800;
letter-spacing:.08em;
color:var(--warn);
margin-bottom:3px;
}
.comment-text {
font-size:12px;
line-height:1.6;
color:var(--ink-dim);
}
.recommendations-region {
border-top:1px solid var(--line);
padding-top:12px;
}
.recommendations-row {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
gap:8px;
align-items:start;
}
.recommendation-card {
display:flex;
flex-direction:column;
gap:5px;
padding:7px;
background:var(--panel);
border:1px solid var(--line);
color:inherit;
text-decoration:none;
transition:border-color .15s,background .15s;
}
a.recommendation-card {
color:var(--ink);
text-decoration:none;
}
.recommendation-card:hover {
border-color:var(--warn-soft);
background:var(--panel2);
}
[data-runtime="recommendation"] img {
display:block;
width:100%;
aspect-ratio:16 / 9;
object-fit:cover;
background:#0a0c0e;
border:1px solid var(--line2);
}
.recommendation-name {
font-size:12px;
font-weight:800;
color:#fff;
letter-spacing:.02em;
}
.recommendation-blurb {
font-size:11px;
line-height:1.5;
color:var(--ink-dim);
}
.site-footer {
max-width:1280px;
margin:0 auto;
padding:14px;
border-top:1px solid var(--line);
display:flex;
flex-direction:column;
gap:9px;
}
.footer-disclaimer {
font-size:11px;
line-height:1.6;
color:var(--ink-faint);
max-width:88ch;
}
.footer-nav {
display:flex;
flex-wrap:wrap;
gap:6px 14px;
}
.footer-nav a {
font-size:11px;
letter-spacing:.1em;
color:var(--ink-dim);
text-decoration:none;
white-space:nowrap;
transition:color .12s;
}
a[data-contract="footer-home"] {color:var(--ink-dim);text-decoration:none}
a[data-contract="footer-sitemap"] {color:var(--ink-dim);text-decoration:none}
a[data-contract="footer-home"]:hover, a[data-contract="footer-sitemap"]:hover {color:var(--warn)}
.footer-friend-links {
display:flex;
flex-wrap:wrap;
align-items:baseline;
gap:5px 12px;
}
.footer-friend-label {
font-size:10px;
letter-spacing:.24em;
color:var(--ink-faint);
text-transform:uppercase;
white-space:nowrap;
}
.runtime-friend-link {
font-size:11px;
letter-spacing:.04em;
color:var(--ink-dim);
text-decoration:none;
white-space:nowrap;
transition:color .12s;
}
a.runtime-friend-link {
color:var(--ink-dim);
text-decoration:none;
}
a.runtime-friend-link:hover {color:var(--warn)}
.player .click, .data-player-action .click {outline:none}
.fullscreen .player-video, .player-video.fullscreen {max-height:100vh}
.mute .player-video, .light .player-video {transition:filter .2s}
.pause .player-video {filter:saturate(.6)}
.play .player-video {filter:none}
.progress .player-btn[data-player-action="progress"] {color:#fff}
.speed .player-btn[data-player-action="speed"] {color:#fff}
.theater .player-shell {box-shadow:0 0 0 1px var(--line2)}
.theater-mode {background:#000}
.volume .player-btn[data-player-action="volume"] {color:#fff}
.pip .player-btn[data-player-action="pip"] {color:#fff}
.lights-off {background:#050607}
.click {outline:1px dashed var(--warn)}
@media (max-width:900px){.movie-overview {grid-template-columns:minmax(0,140px) minmax(0,1fr)}
.episodes-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
.synopsis-text {columns:2}}
@media (max-width:680px){.page-main {padding:0 10px}
.site-header {padding:9px 12px}
.movie-overview {
grid-template-columns:minmax(0,120px) minmax(0,1fr);
gap:12px;
padding:11px;
}
.hero-countdown {right:10px;bottom:10px}
.synopsis-text {columns:1;column-rule:0}
.episodes-grid {grid-template-columns:1fr}
.recommendations-row {grid-template-columns:repeat(2,minmax(0,1fr))}
.details-list {grid-template-columns:1fr}
.timeline-timecode {min-width:96px}}
@media (max-width:430px){.movie-overview {
grid-template-columns:1fr;
}
.overview-poster-wrap {max-width:150px}
.recommendations-row {grid-template-columns:1fr}
.comments-list {max-width:none}
.hero-mirror {width:52vw}}

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}