* {margin:0;padding:0;box-sizing:border-box}
:root {
--ink:#0c0e12;
--ink2:#12151b;
--ink3:#171b23;
--slate:#2a303c;
--slate2:#39414f;
--ash:#8891a1;
--ash2:#aab2c0;
--paper:#d7dce4;
--amber:#e0a24a;
--amber2:#c9862c;
--amberglow:rgba(224,162,74,.22);
--line:#242a34;
--edge:3px;
}
html {-webkit-text-size-adjust:100%}
body {
background:var(--ink);
color:var(--paper);
font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
font-size:13px;
line-height:1.5;
letter-spacing:.01em;
font-stretch:condensed;
background-image:
radial-gradient(120% 80% at 12% 0%,rgba(224,162,74,.06),transparent 55%),
radial-gradient(90% 60% at 95% 18%,rgba(58,72,96,.28),transparent 60%),
linear-gradient(180deg,#0a0c10,#0c0e12 40%,#0a0c10);
}
img {display:block;max-width:100%}
a {color:var(--ash2);text-decoration:none}
ul, ol {list-style:none}
h1, h2, h3 {font-weight:800;line-height:1.2;letter-spacing:.02em}
button, input, select {font:inherit;color:inherit}
.site-header {
display:flex;align-items:center;justify-content:space-between;
gap:14px;flex-wrap:wrap;
padding:8px 16px;
background:linear-gradient(180deg,#0e1116,#0b0d11);
border-bottom:1px solid var(--line);
clip-path:polygon(0 0,100% 0,100% calc(100% - 3px),calc(100% - 6px) 100%,6px 100%,0 calc(100% - 3px));
position:sticky;top:0;z-index:40;
}
a[data-contract="site-name"].site-brand {
font-size:15px;font-weight:800;color:var(--amber);
text-decoration:none;letter-spacing:.12em;
border-left:var(--edge) solid var(--amber2);
padding-left:8px;
white-space:nowrap;
}
a[data-contract="site-name"].site-brand:hover {color:#f2c078}
.category-rail {
display:flex;flex-wrap:wrap;gap:4px;align-items:center;
min-width:0;
}
a.runtime-category {
display:inline-block;
white-space:nowrap;
font-size:11.5px;
color:var(--ash);
text-decoration:none;
padding:3px 9px;
border:1px solid var(--line);
border-radius:1px;
background:#101319;
letter-spacing:.06em;
}
a.runtime-category:hover {
color:var(--amber);border-color:var(--amber2);background:#161a21;
text-decoration:underline;
text-underline-offset:2px;
}
a.runtime-category::after {
content:"";display:inline-block;width:4px;height:4px;margin-left:6px;
background:var(--amber2);vertical-align:2px;
}
.page-main {
display:flex;flex-direction:column;gap:14px;
padding:12px 16px 20px;
max-width:1500px;margin:0 auto;width:100%;
}
.overview-block {
display:grid;
grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
grid-template-areas:
"poster lead"
"poster player"
"poster status"
"cast cast"
"synopsis details";
gap:12px;
align-items:start;
background:linear-gradient(160deg,#11141a,#0d1014 60%,#101319);
border:1px solid var(--line);
border-radius:2px;
padding:12px;
position:relative;
}
.overview-block::before {
content:"";position:absolute;inset:0;
background-image:repeating-linear-gradient(90deg,transparent 0 26px,rgba(255,255,255,.018) 26px 28px);
pointer-events:none;
}
.poster-frame {grid-area:poster;position:relative;align-self:start}
.poster-frame img {
width:100%;height:auto;border-radius:2px;
border:1px solid #2b323e;
filter:saturate(.82) contrast(1.06) brightness(.94);
box-shadow:0 0 0 1px #05070a,0 18px 40px -20px #000;
}
.poster-frame::after {
content:"";position:absolute;inset:auto 0 0 0;height:38%;
background:linear-gradient(180deg,transparent,rgba(10,12,16,.85));
border-radius:2px;pointer-events:none;
}
.overview-lead {grid-area:lead;min-width:0}
.movie-title {
font-size:26px;color:#f0e6d6;letter-spacing:.01em;
text-shadow:0 0 22px rgba(224,162,74,.25);
}
.movie-title::after {
content:"";display:block;width:60px;height:3px;margin-top:6px;
background:linear-gradient(90deg,var(--amber),transparent);
}
.movie-tagline {
margin-top:8px;font-size:14px;font-weight:700;color:var(--amber);
letter-spacing:.08em;line-height:1.35;
}
.movie-seo {
margin-top:8px;font-size:12px;color:var(--ash);line-height:1.68;
max-width:60ch;
}
.player-shell {
grid-area:player;min-width:0;
border:1px solid var(--line);border-radius:2px;
background:#08090c;padding:6px;
}
.player-shell.is-theater {outline:1px solid var(--amber2)}
.player-shell.is-lights-off {background:#000}
.player-shell.is-lights-off video {opacity:.35}
.player-shell video {
display:block;background:#000;border-radius:1px;
}
.player-console {
display:flex;flex-wrap:wrap;align-items:center;gap:6px;
margin-top:6px;padding-top:6px;border-top:1px dashed #232932;
}
.player-btn {
background:#141922;border:1px solid #2b3340;border-radius:1px;
font-size:11px;padding:4px 8px;color:var(--ash2);
cursor:pointer;letter-spacing:.03em;
}
.player-btn:hover {border-color:var(--amber2);color:var(--amber)}
.player-btn.is-playing {border-color:var(--amber);color:var(--amber);background:#1c1a14}
.player-btn.is-muted {color:#7a8598;border-style:dashed}
.player-btn.is-active {border-color:var(--amber);color:var(--amber);background:#1c1a14}
.player-progress {flex:1 1 140px;min-width:90px;height:4px;accent-color:var(--amber2)}
.player-volume {flex:0 1 80px;min-width:60px;height:4px;accent-color:var(--amber2)}
.player-speed-label {
display:inline-flex;align-items:center;gap:4px;
font-size:11px;color:var(--ash);
}
.player-speed {
background:#141922;border:1px solid #2b3340;border-radius:1px;
font-size:11px;padding:3px 4px;color:var(--ash2);
}
.player-speed.is-altered {border-color:var(--amber);color:var(--amber)}
.episode-status-strip {
grid-area:status;
display:flex;flex-wrap:wrap;gap:6px;
}
.status-line {
font-size:11px;color:var(--ash2);
background:#0f1218;
border:1px solid var(--line);
border-left:3px solid var(--slate2);
border-radius:1px;
padding:4px 10px;
letter-spacing:.04em;
}
.status-line:last-child {border-left-color:var(--amber2);color:var(--amber)}
.cast-wall {grid-area:cast;min-width:0;padding-top:4px;border-top:1px solid var(--line)}
.cast-wall-title, .synopsis-title, .details-title, .timeline-title, .episodes-title, .comments-title {
font-size:13px;color:#e6ddcd;letter-spacing:.14em;
display:flex;align-items:center;gap:8px;
}
.cast-wall-title::before, .synopsis-title::before, .details-title::before, .timeline-title::before, .episodes-title::before, .comments-title::before {
content:"";width:8px;height:8px;background:var(--amber2);
clip-path:polygon(0 0,100% 0,100% 70%,70% 100%,0 100%);
}
.cast-list {
display:grid;
grid-template-columns:repeat(auto-fill,minmax(96px,1fr));
gap:6px;margin-top:8px;
align-items:start;
}
.cast-card {
display:flex;flex-direction:column;gap:5px;
background:linear-gradient(180deg,#141922,#0f1218);
border:1px solid var(--line);
border-radius:1px;
padding:6px 7px;
position:relative;
min-height:0;
}
.cast-card::after {
content:"";position:absolute;top:5px;right:7px;
width:5px;height:5px;background:var(--slate2);
}
.cast-name {
writing-mode:vertical-rl;
text-orientation:upright;
font-size:15px;font-weight:800;color:#ecd9b4;
letter-spacing:.18em;
align-self:center;
padding:4px 0;
border-right:2px solid var(--amberglow);
}
.cast-role {
font-size:10px;line-height:1.45;color:var(--ash);
border-top:1px dashed #262d38;
padding-top:5px;
}
.synopsis-block {grid-area:synopsis;min-width:0;border-top:1px solid var(--line);padding-top:6px}
.synopsis-para {
font-size:12px;line-height:1.72;color:#a8b0be;
margin-top:7px;text-indent:2em;
}
.synopsis-para:first-of-type {margin-top:9px}
.synopsis-para:last-child {
color:var(--amber);font-weight:700;text-indent:0;
border-left:3px solid var(--amber2);padding-left:8px;
}
.details-block {grid-area:details;min-width:0;border-top:1px solid var(--line);padding-top:6px}
.details-list {
margin-top:9px;
display:grid;
grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
gap:3px 10px;
align-content:start;
}
.detail-row {
display:flex;gap:8px;align-items:baseline;
border-bottom:1px dotted #232a34;
padding:3px 0;
}
.detail-row dt {
font-size:10.5px;color:var(--ash);white-space:nowrap;
min-width:5.6em;
}
.detail-row dd {font-size:11.5px;color:#c9cfda;font-weight:600}
.timeline-block {
border:1px solid var(--line);border-radius:2px;
background:linear-gradient(180deg,#101319,#0c0e12);
padding:11px 12px;
}
.timeline-list {
margin-top:10px;
display:grid;
grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
gap:8px 14px;
align-items:start;
}
.timeline-node {
position:relative;
padding-left:16px;
padding-top:2px;padding-bottom:2px;
}
.timeline-node::before {
content:"";position:absolute;left:0;top:6px;
width:8px;height:8px;border-radius:50%;
background:var(--ink);border:2px solid var(--amber2);
box-shadow:0 0 0 3px rgba(224,162,74,.08);
}
.timeline-node::after {
content:"";position:absolute;left:3px;top:16px;bottom:-10px;
width:2px;
background-image:repeating-linear-gradient(180deg,var(--slate2) 0 4px,transparent 4px 9px);
}
.timeline-node:last-child::after {display:none}
.timeline-timecode {
display:block;font-size:10.5px;color:var(--amber);
letter-spacing:.06em;font-weight:700;
}
.timeline-label {
display:block;font-size:11.5px;color:#a2aab8;line-height:1.55;margin-top:2px;
}
.episodes-block {
border:1px solid var(--line);border-radius:2px;
background:#0b0d11;padding:11px 0 11px 12px;
}
.episodes-title {padding-right:12px}
.episodes-track {
display:flex;gap:8px;
margin-top:10px;
overflow-x:auto;
padding:6px 12px 10px 0;
scroll-snap-type:x proximity;
scrollbar-color:var(--slate2) #0b0d11;
}
.episodes-track::-webkit-scrollbar {height:7px}
.episodes-track::-webkit-scrollbar-track {background:#0b0d11}
.episodes-track::-webkit-scrollbar-thumb {background:var(--slate2);border-radius:0}
.episode-card {
flex:0 0 210px;
scroll-snap-align:start;
background:linear-gradient(180deg,#12161d,#0e1116);
border:1px solid #222833;
border-radius:1px;
padding:8px 9px;
display:flex;flex-direction:column;gap:5px;
position:relative;
}
.episode-card::before {
content:"";position:absolute;top:0;left:0;right:0;height:3px;
background:repeating-linear-gradient(90deg,var(--slate) 0 6px,transparent 6px 10px);
}
.episode-card.is-current {
flex-basis:250px;
border:1px solid var(--amber2);
background:linear-gradient(180deg,#1c1913,#12100c);
box-shadow:0 0 0 1px rgba(224,162,74,.25),0 0 26px -6px rgba(224,162,74,.35);
}
.episode-card.is-current::before {background:repeating-linear-gradient(90deg,var(--amber) 0 6px,transparent 6px 10px)}
.episode-head {
font-size:12.5px;color:#e4dccb;letter-spacing:.04em;
}
.episode-card.is-current .episode-head {color:var(--amber)}
.episode-summary {
font-size:11px;line-height:1.6;color:#98a0ae;
flex:1 1 auto;
}
.episode-duration {
font-size:10px;color:var(--ash);
border-top:1px dashed #242a34;
padding-top:4px;letter-spacing:.05em;
}
.episode-card.is-current .episode-duration {color:var(--amber2);border-top-color:#3a2f1c}
.comments-block {
border:1px solid var(--line);border-radius:2px;
background:linear-gradient(180deg,#0f1217,#0b0d11);
padding:11px 12px;
}
.comments-columns {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:8px 14px;
margin-top:10px;
align-items:start;
}
.comments-col {display:flex;flex-direction:column;gap:7px;min-width:0}
.comments-col-right {margin-top:16px}
.comment-card {
background:#12161d;
border:1px solid #212833;
border-left:3px solid var(--slate2);
border-radius:1px;
padding:7px 9px;
position:relative;
}
.comment-card::after {
content:"";position:absolute;left:-3px;top:0;bottom:0;width:3px;
background:repeating-linear-gradient(180deg,var(--amber2) 0 5px,transparent 5px 11px);
opacity:.5;
}
.comment-nick {
font-size:10.5px;font-weight:800;color:var(--amber);
letter-spacing:.06em;
}
.comment-text {
font-size:11.5px;line-height:1.62;color:#9fa7b5;margin-top:3px;
}
.rec-region {
border:1px solid var(--line);border-radius:2px;
background:#0b0d11;
padding:10px 12px;
}
.rec-title {
font-size:12.5px;color:#e2d9c8;letter-spacing:.1em;
border-left:3px solid var(--amber2);
padding-left:8px;
}
.rec-grid {
display:grid;
gap:6px;
margin-top:9px;
align-items:start;
}
.rec-grid-five {grid-template-columns:repeat(auto-fill,minmax(118px,1fr))}
.rec-grid-four {grid-template-columns:repeat(auto-fill,minmax(128px,1fr))}
.rec-grid-three {grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
a.rec-item {
display:flex;flex-direction:column;
background:#101419;
border:1px solid #1f2530;
border-radius:1px;
padding:5px;
color:var(--ash2);
text-decoration:none;
transition:border-color .15s,background .15s;
}
a.rec-item:hover {
border-color:var(--amber2);
background:#161a20;
text-decoration:none;
}
a.rec-item:hover .rec-name {color:var(--amber)}
[data-runtime="recommendation"] img {
width:100%;
aspect-ratio:3 / 4;
height:auto;
object-fit:cover;
border-radius:1px;
filter:saturate(.8) contrast(1.05) brightness(.92);
}
.rec-name {
font-size:11.5px;font-weight:700;color:#d3cfc4;
margin-top:5px;line-height:1.35;
}
.rec-blurb {
font-size:10px;color:#7e879a;line-height:1.5;margin-top:3px;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.site-footer {
margin-top:6px;
border-top:1px solid var(--line);
background:linear-gradient(180deg,#0b0d11,#080a0d);
padding:14px 16px 22px;
display:flex;flex-direction:column;gap:9px;
}
.footer-disclaimer {
font-size:10.5px;line-height:1.7;color:#6f7888;
max-width:70ch;
}
.footer-nav {
display:flex;flex-wrap:wrap;gap:8px 16px;
}
a[data-contract="footer-home"], a[data-contract="footer-sitemap"] {
font-size:11.5px;color:var(--ash2);
text-decoration:none;
border-bottom:1px solid #2b3340;
padding-bottom:1px;
}
a[data-contract="footer-home"]:hover, a[data-contract="footer-sitemap"]:hover {color:var(--amber);border-bottom-color:var(--amber2)}
.friend-links {
display:flex;flex-wrap:wrap;align-items:center;gap:5px 10px;
border-top:1px dashed #1d232c;
padding-top:9px;
}
.friend-links-label {
font-size:10.5px;color:var(--amber2);font-weight:800;
letter-spacing:.1em;margin-right:2px;
}
a.runtime-friend-link {
font-size:10.5px;color:#7d8698;
text-decoration:none;
white-space:nowrap;
}
a.runtime-friend-link:hover {color:var(--amber);text-decoration:underline;text-underline-offset:2px}
@media (max-width:1000px){.overview-block {
grid-template-columns:minmax(0,1fr);
grid-template-areas:
"poster"
"lead"
"player"
"status"
"cast"
"synopsis"
"details";
}
.poster-frame {max-width:340px}
.movie-title {font-size:22px}}
@media (max-width:640px){.page-main {padding:10px 10px 16px;gap:11px}
.site-header {padding:7px 10px;gap:8px}
.overview-block {padding:9px;gap:10px}
.movie-title {font-size:19px}
.movie-tagline {font-size:12.5px}
.movie-seo {font-size:11.5px}
.poster-frame {max-width:250px}
.cast-list {grid-template-columns:repeat(auto-fill,minmax(82px,1fr))}
.cast-name {font-size:13px}
.cast-role {font-size:9.5px}
.details-list {grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
.timeline-list {grid-template-columns:minmax(0,1fr)}
.episode-card {flex-basis:180px}
.episode-card.is-current {flex-basis:210px}
.comments-columns {grid-template-columns:minmax(0,1fr)}
.comments-col-right {margin-top:0}
.rec-grid-five {grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}
.rec-grid-four {grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
.rec-grid-three {grid-template-columns:repeat(auto-fill,minmax(112px,1fr))}
.player-progress {flex-basis:100%}
.site-footer {padding:12px 10px 18px}}
@media (max-width:380px){.cast-list {grid-template-columns:repeat(auto-fill,minmax(72px,1fr))}
.rec-grid-five, .rec-grid-four, .rec-grid-three {grid-template-columns:repeat(auto-fill,minmax(90px,1fr))}
.movie-title {font-size:17px}}

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}