* {box-sizing:border-box;margin:0;padding:0}
:root {
--bg:#0b0f16;
--panel:#111826;
--panel-2:#0e1420;
--line:#1e2a3d;
--line-hot:#2d3f5c;
--ink:#c9d6e8;
--ink-dim:#6f8199;
--neon:#a05cff;
--neon-soft:#7c3aed;
--glitch:#3dffa4;
--glitch-dim:#1d8f5c;
--warn:#ff4d6d;
--mono:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,"Courier New",monospace;
}
html {-webkit-text-size-adjust:100%}
body {
background:var(--bg);
color:var(--ink);
font-family:var(--mono);
font-size:13px;
line-height:1.45;
letter-spacing:.01em;
overflow-x:hidden;
}
body.lights-off {background:#05070b}
body.lights-off .page-main {filter:brightness(.82) contrast(1.08)}
img {display:block;max-width:100%}
a {color:inherit;text-decoration:none}
button, input, select {font-family:inherit;font-size:inherit;color:inherit}
h1, h2, h3 {font-weight:600;line-height:1.25}
.site-header {
background:linear-gradient(180deg,#0d131f,#0a0e17);
border-bottom:1px solid var(--line);
padding:8px 12px 6px;
}
.header-top {
display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;
}
a[data-contract="site-name"] {
color:#eaf1ff;font-size:16px;font-weight:700;letter-spacing:.06em;
text-decoration:none;
text-shadow:0 0 6px rgba(160,92,255,.55),0 0 18px rgba(160,92,255,.25);
white-space:nowrap;
}
a[data-contract="site-name"]:hover {color:#fff;text-decoration:underline;text-decoration-color:var(--neon)}
.header-tagline {
color:var(--ink-dim);font-size:11px;flex:1 1 220px;min-width:0;
}
.header-status {
display:flex;align-items:center;gap:6px;
border:1px solid var(--line-hot);
background:var(--panel-2);
padding:2px 7px;
font-size:10px;
}
.status-dot {
width:6px;height:6px;border-radius:50%;
background:var(--glitch);
box-shadow:0 0 6px var(--glitch);
flex:none;
}
.status-label {color:var(--ink-dim);white-space:nowrap}
.status-value {color:var(--glitch);white-space:nowrap}
.categories-bar {
display:flex;flex-wrap:wrap;gap:6px;
margin-top:8px;
padding-top:7px;
border-top:1px solid var(--line);
}
a.runtime-category {
display:inline-block;
padding:3px 9px;
border:1px solid var(--line-hot);
background:var(--panel-2);
color:#bda4ff;
font-size:11px;
letter-spacing:.04em;
white-space:nowrap;
text-decoration:none;
transition:background .15s,color .15s,border-color .15s;
}
a.runtime-category:hover {
background:rgba(160,92,255,.16);
border-color:var(--neon);
color:#e6d9ff;
text-decoration:none;
}
.page-main {
padding:0 12px;
max-width:1400px;
margin:0 auto;
}
.hero {
display:grid;
grid-template-columns:minmax(0,300px) minmax(0,1fr);
gap:12px;
padding:12px 0;
align-items:start;
}
.hero-media {
position:relative;
display:flex;
flex-direction:column;
gap:8px;
border:1px solid var(--line);
background:var(--panel);
padding:8px;
min-width:0;
}
.poster-shell {
position:relative;
width:100%;
border:1px solid var(--line-hot);
background:#05070b;
overflow:hidden;
}
.poster-shell img {
width:100%;
height:auto;
display:block;
filter:grayscale(.25) contrast(1.1) saturate(1.1);
}
.poster-glitch-tag {
position:absolute;
left:6px;bottom:6px;
font-size:9px;
letter-spacing:.18em;
padding:2px 6px;
color:#05070b;
background:var(--glitch);
text-shadow:0 0 6px rgba(61,255,164,.8);
}
.hero-code-rain {
position:absolute;
top:10px;right:10px;
display:flex;flex-direction:column;
gap:2px;
pointer-events:none;
max-width:62%;
text-align:right;
}
.code-line {
font-size:9px;
line-height:1.3;
color:var(--glitch);
opacity:.55;
text-shadow:0 0 5px rgba(61,255,164,.5);
white-space:nowrap;
overflow:hidden;
}
.code-line:nth-child(2) {color:var(--neon);opacity:.7}
.code-line:nth-child(4) {opacity:.35}
.hero-countdown {
position:absolute;
right:10px;bottom:10px;
display:flex;flex-direction:column;
align-items:flex-end;
gap:1px;
padding:5px 8px;
background:rgba(5,7,11,.82);
border:1px solid var(--neon);
}
.countdown-label {
font-size:9px;letter-spacing:.22em;color:var(--ink-dim);
}
.countdown-value {
font-size:22px;font-weight:700;letter-spacing:.04em;
color:#f2e9ff;
text-shadow:
 2px 0 0 rgba(61,255,164,.85),
 -2px 0 0 rgba(255,77,109,.7),
 0 0 14px rgba(160,92,255,.9);
animation:glitch 2.6s infinite steps(1);
}
@keyframes glitch{
0%,92%,100%{transform:translate(0,0)}
93%{transform:translate(-2px,1px)}
95%{transform:translate(2px,-1px)}
97%{transform:translate(-1px,0)}
}
.hero-info {
border:1px solid var(--line);
background:var(--panel);
padding:10px;
display:flex;
flex-direction:column;
gap:10px;
min-width:0;
}
.hero-info-status {
display:flex;align-items:center;gap:6px;
font-size:10px;
padding-bottom:7px;
border-bottom:1px solid var(--line);
}
.movie-title {
font-size:22px;
letter-spacing:.05em;
color:#f4f8ff;
text-shadow:0 0 10px rgba(160,92,255,.6),0 0 26px rgba(160,92,255,.25);
}
.movie-tagline {
font-size:11px;color:var(--glitch);
letter-spacing:.06em;
padding-bottom:8px;
border-bottom:1px dashed var(--line-hot);
}
.player-shell {
width:100%;
min-width:0;
border:1px solid var(--line-hot);
background:#05070b;
}
.player-shell.is-theater {
box-shadow:0 0 0 1px var(--neon),0 0 34px rgba(160,92,255,.35);
}
.player-shell video {
display:block;
background:#000;
}
.player-controls {
display:flex;flex-wrap:wrap;align-items:center;gap:6px;
padding:6px;
border-top:1px solid var(--line);
background:var(--panel-2);
}
.player-btn {
padding:3px 8px;
border:1px solid var(--line-hot);
background:#131c2b;
color:var(--ink);
font-size:11px;
cursor:pointer;
transition:background .15s,border-color .15s,color .15s;
}
.player-btn:hover {border-color:var(--neon);color:#e8dcff}
.player-btn.is-playing, .player-btn.is-active {
background:rgba(61,255,164,.14);
border-color:var(--glitch);
color:var(--glitch);
}
.player-btn.is-muted {
background:rgba(255,77,109,.14);
border-color:var(--warn);
color:var(--warn);
}
.player-range {
-webkit-appearance:none;appearance:none;
flex:1 1 90px;
min-width:70px;
height:4px;
background:#1b2536;
border:1px solid var(--line-hot);
cursor:pointer;
}
.player-range::-webkit-slider-thumb {
-webkit-appearance:none;
width:10px;height:14px;
background:var(--neon);
box-shadow:0 0 8px rgba(160,92,255,.9);
border:0;
}
.player-range::-moz-range-thumb {
width:10px;height:14px;border:0;
background:var(--neon);
box-shadow:0 0 8px rgba(160,92,255,.9);
}
.player-select {
padding:3px 6px;
border:1px solid var(--line-hot);
background:#131c2b;
color:var(--ink);
font-size:11px;
cursor:pointer;
}
.player-select:hover {border-color:var(--neon)}
.overview-status {
display:flex;flex-wrap:wrap;gap:6px;
}
.status-chip {
font-size:10px;
padding:2px 8px;
border:1px solid var(--line-hot);
color:#9fd8c0;
background:rgba(61,255,164,.06);
white-space:nowrap;
}
.section-title {
font-size:13px;
letter-spacing:.16em;
color:#dcd0ff;
text-shadow:0 0 8px rgba(160,92,255,.5);
padding-bottom:5px;
border-bottom:1px solid var(--line-hot);
display:flex;align-items:center;gap:6px;
}
.section-title::before {
content:"//";
color:var(--glitch);
font-size:11px;
text-shadow:0 0 6px rgba(61,255,164,.7);
}
.synopsis {display:flex;flex-direction:column;gap:6px}
.synopsis-text {
font-size:12px;
color:#a9b8ce;
padding-left:8px;
border-left:1px solid var(--line-hot);
}
.cast {display:flex;flex-direction:column;gap:8px}
.cast-grid {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
gap:8px;
align-items:start;
}
.cast-card {
display:flex;flex-direction:column;align-items:flex-start;gap:4px;
border:1px solid var(--line);
background:var(--panel-2);
padding:7px;
min-width:0;
}
.cast-avatar {
width:38px;height:38px;
display:flex;align-items:center;justify-content:center;
font-size:16px;font-weight:700;
color:#e9ddff;
background:
 radial-gradient(circle at 30% 25%,rgba(160,92,255,.55),transparent 60%),
 #0d1420;
border:1px solid var(--neon);
box-shadow:0 0 10px rgba(160,92,255,.35) inset;
border-radius:50%;
}
.cast-name {font-size:12px;color:#eef3ff}
.cast-code {font-size:10px;color:var(--glitch);letter-spacing:.05em}
.details {display:flex;flex-direction:column;gap:8px}
.detail-list {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
gap:0 14px;
}
.detail-row {
display:flex;justify-content:space-between;gap:10px;
padding:3px 0;
border-bottom:1px dotted var(--line-hot);
font-size:11px;
min-width:0;
}
.detail-row dt {color:var(--ink-dim);white-space:nowrap}
.detail-row dd {color:#cfe0f5;text-align:right;min-width:0;overflow-wrap:anywhere}
.hero-breath {
height:20px;
border-bottom:1px solid var(--line);
margin-bottom:12px;
}
.module-status {
display:flex;align-items:center;gap:6px;
font-size:10px;
padding:3px 7px;
border:1px solid var(--line);
background:var(--panel-2);
margin-bottom:6px;
width:fit-content;
max-width:100%;
}
.timeline-section {margin-bottom:12px}
.timeline-track {
display:flex;
gap:8px;
overflow-x:auto;
padding-bottom:8px;
scrollbar-color:var(--neon) var(--panel-2);
}
.timeline-track::-webkit-scrollbar {height:7px}
.timeline-track::-webkit-scrollbar-track {background:var(--panel-2)}
.timeline-track::-webkit-scrollbar-thumb {background:var(--neon-soft)}
.timeline-node {
flex:0 0 186px;
display:flex;flex-direction:column;gap:4px;
border:1px solid var(--line);
background:var(--panel);
padding:8px;
position:relative;
}
.node-dot {
width:14px;height:14px;
border-radius:50%;
border:2px solid var(--glitch);
background:
 radial-gradient(circle at 50% 50%,var(--glitch) 0 2px,transparent 3px),
 #0b1220;
box-shadow:0 0 8px rgba(61,255,164,.6);
position:relative;
}
.node-dot::after {
content:"";
position:absolute;inset:-5px;
border-radius:50%;
border:1px dashed rgba(61,255,164,.35);
}
.node-time {
font-size:11px;color:var(--neon);
letter-spacing:.08em;
}
.node-label {font-size:11px;color:#9fb0c8}
.episodes-section {margin-bottom:12px}
.episode-grid {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:8px;
align-items:start;
}
.episode-card {
display:flex;gap:8px;
border:1px solid var(--line);
background:var(--panel);
padding:7px;
min-width:0;
}
.episode-card.is-active {
border-color:var(--neon);
box-shadow:0 0 0 1px rgba(160,92,255,.35),0 0 16px rgba(160,92,255,.18);
}
.episode-thumb {
flex:0 0 52px;
height:72px;
display:flex;align-items:center;justify-content:center;
font-size:11px;letter-spacing:.1em;
color:var(--glitch);
background:
 repeating-linear-gradient(0deg,rgba(61,255,164,.12) 0 1px,transparent 1px 5px),
 #0a1120;
border:1px solid var(--line-hot);
}
.episode-body {
flex:1 1 auto;min-width:0;
display:flex;flex-direction:column;gap:4px;
}
.episode-title {
font-size:12px;color:#e6eeff;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.episode-summary {
font-size:11px;color:#8fa0b8;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
overflow:hidden;
}
.episode-meta {display:flex;gap:8px;font-size:10px}
.episode-duration {color:var(--ink-dim)}
.progress-bar {
height:4px;
background:#161f2e;
border:1px solid var(--line-hot);
overflow:hidden;
}
.progress-fill {
display:block;height:100%;width:62%;
background:linear-gradient(90deg,var(--neon),var(--glitch));
box-shadow:0 0 8px rgba(61,255,164,.6);
}
.episode-card.is-active .progress-fill {
background:linear-gradient(90deg,var(--glitch),var(--neon));
}
.comments-section {margin-bottom:12px}
.comments-masonry {
column-count:3;
column-gap:8px;
}
.comment-card {
break-inside:avoid;
margin:0 0 8px;
border:1px solid var(--line-hot);
background:var(--panel-2);
padding:7px;
display:flex;flex-direction:column;gap:5px;
}
.comment-head {
display:flex;justify-content:space-between;gap:8px;
font-size:10px;
padding-bottom:4px;
border-bottom:1px dashed var(--line-hot);
}
.comment-nick {color:var(--glitch)}
.comment-prompt {color:var(--neon);white-space:nowrap}
.comment-text {font-size:11px;color:#9fb0c8}
.recommend-region {margin-bottom:12px}
.recommend-title {
font-size:12px;
letter-spacing:.08em;
color:#e2d6ff;
text-shadow:0 0 8px rgba(160,92,255,.45);
margin-bottom:6px;
padding-bottom:4px;
border-bottom:1px solid var(--line);
display:flex;align-items:center;gap:4px;
}
.recommend-title::after {
content:"_";
color:var(--glitch);
animation:caret 1s steps(1) infinite;
}
@keyframes caret{0%,49%{opacity:1}50%,100%{opacity:0}}
.recommend-list {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
gap:8px;
align-items:start;
}
a.recommend-item {
display:flex;flex-direction:column;gap:4px;
border:1px solid var(--line);
background:var(--panel);
padding:6px;
min-width:0;
color:var(--ink);
text-decoration:none;
transition:border-color .15s,transform .15s;
}
a.recommend-item:hover {
border-color:var(--neon);
text-decoration:none;
}
[data-runtime="recommendation"] img {
width:100%;
height:auto;
aspect-ratio:16 / 9;
object-fit:cover;
background:#05070b;
border:1px solid var(--line-hot);
}
.recommend-name {
font-size:11px;color:#dfe9fb;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.recommend-blurb {
font-size:10px;color:var(--ink-dim);
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
overflow:hidden;
}
.site-footer {
margin-top:12px;
border-top:1px solid var(--line-hot);
background:linear-gradient(180deg,#0a0e17,#080b12);
padding:10px 12px 14px;
}
.footer-top {
display:flex;flex-wrap:wrap;gap:10px 18px;
align-items:flex-start;
padding-bottom:8px;
border-bottom:1px dashed var(--line);
}
.footer-brand {display:flex;flex-direction:column;gap:2px}
.footer-site-name {
font-size:13px;color:#eaf1ff;letter-spacing:.06em;
text-shadow:0 0 8px rgba(160,92,255,.5);
}
.footer-nav {display:flex;flex-wrap:wrap;gap:12px;font-size:11px}
a[data-contract="footer-home"], a[data-contract="footer-sitemap"] {
color:#9fb0c8;text-decoration:none;
}
a[data-contract="footer-home"]:hover, a[data-contract="footer-sitemap"]:hover {
color:var(--glitch);text-decoration:underline;
}
.friend-links {
display:flex;flex-wrap:wrap;gap:6px 10px;
align-items:center;
font-size:11px;
}
.friend-links-label {color:var(--ink-dim);white-space:nowrap}
a.runtime-friend-link {
color:#b79dff;
text-decoration:none;
white-space:nowrap;
}
a.runtime-friend-link:hover {
color:#e6d9ff;text-decoration:underline;
}
.footer-disclaimer {
margin-top:8px;
font-size:10px;
color:var(--ink-dim);
line-height:1.6;
}
@media (max-width:1024px){.comments-masonry {column-count:2}
.hero {grid-template-columns:minmax(0,240px) minmax(0,1fr)}}
@media (max-width:820px){.hero {grid-template-columns:minmax(0,1fr)}
.hero-media {max-width:300px}
.episode-grid {grid-template-columns:minmax(0,1fr)}}
@media (max-width:620px){.page-main {padding:0 8px}
.comments-masonry {column-count:1}
.countdown-value {font-size:18px}
.movie-title {font-size:18px}
.cast-grid {grid-template-columns:repeat(auto-fit,minmax(104px,1fr))}
.player-range {flex:1 1 100%}}
@media (max-width:420px){.cast-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
.detail-list {grid-template-columns:minmax(0,1fr)}
.timeline-node {flex:0 0 160px}}

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}