* {margin:0;padding:0;box-sizing:border-box}
:root {
--bg:#171c22;
--bg-deep:#11151a;
--wood:#3a2e26;
--wood-lit:#5c4634;
--ink:#cdd4dc;
--ink-dim:#8c96a2;
--ink-faint:#5d6773;
--warm:#e08a3c;
--warm-hot:#f2a24d;
--cold:#3f5a70;
--cold-lit:#5d82a0;
--line:#2a323b;
--line-lit:#3d4854;
--panel:#1c2229;
--panel-2:#20262e;
--font:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Heiti SC",system-ui,-apple-system,"Segoe UI",sans-serif;
}
html {-webkit-text-size-adjust:100%}
body {
background:
radial-gradient(120% 70% at 0% 0%,rgba(63,90,112,.22) 0%,rgba(23,28,34,0) 55%),
radial-gradient(120% 70% at 100% 4%,rgba(92,70,52,.28) 0%,rgba(23,28,34,0) 60%),
var(--bg);
color:var(--ink);
font-family:var(--font);
font-size:13px;
line-height:1.55;
letter-spacing:.02em;
font-stretch:condensed;
min-height:100vh;
}
img, video {display:block;max-width:100%}
a {color:inherit;text-decoration:none}
ol {list-style:none}
h1, h2, h3 {font-weight:800;letter-spacing:.04em;line-height:1.25}
button {font-family:inherit;cursor:pointer}
.site-header {
display:flex;align-items:center;justify-content:space-between;
gap:14px;
padding:9px 16px;
background:linear-gradient(90deg,var(--bg-deep) 0%,#1a2029 60%,var(--wood) 100%);
border-bottom:1px solid var(--line-lit);
position:sticky;top:0;z-index:40;
}
.header-brand {display:flex;align-items:center;min-width:0}
a[data-contract="site-name"] {
font-size:16px;font-weight:800;letter-spacing:.14em;
color:var(--warm-hot);
text-decoration:none;
text-transform:uppercase;
white-space:nowrap;
}
a[data-contract="site-name"]:hover {color:#ffc27d;text-decoration:underline;text-underline-offset:3px}
.categories-nav {
display:flex;flex-wrap:wrap;gap:4px 6px;justify-content:flex-end;
flex:1 1 auto;min-width:0;
}
a.runtime-category {
display:inline-block;
font-size:11.5px;font-weight:700;letter-spacing:.08em;
color:var(--ink-dim);
white-space:nowrap;
padding:3px 9px;
border:1px solid var(--line-lit);
border-radius:1px;
background:rgba(255,255,255,.02);
text-decoration:none;
transition:color .15s,border-color .15s,background .15s;
}
a.runtime-category:hover {color:var(--warm-hot);border-color:var(--warm);background:rgba(224,138,60,.1);text-decoration:none}
.page-main {
max-width:1180px;
margin:0 auto;
padding:14px 16px 26px;
display:flex;
flex-direction:column;
gap:18px;
}
.hero-shell {
display:grid;
grid-template-columns:minmax(0,1fr);
gap:10px;
}
.hero-tagline {
border-left:3px solid var(--warm);
padding:2px 0 2px 11px;
}
.movie-title {
font-size:25px;font-weight:800;letter-spacing:.1em;
color:#f4f6f8;
text-shadow:0 1px 0 rgba(0,0,0,.6);
}
.tagline-text {
font-size:12.5px;
color:var(--warm-hot);
letter-spacing:.22em;
margin-top:4px;
}
.hero-visual {
display:grid;
grid-template-columns:minmax(0,190px) minmax(0,1fr);
gap:14px;
align-items:start;
}
.poster-column {display:flex;align-items:flex-start}
.poster-wrapper {
width:100%;
border:1px solid var(--line-lit);
background:var(--panel);
box-shadow:6px 6px 0 rgba(0,0,0,.35),0 0 0 1px rgba(224,138,60,.12);
position:relative;
}
.poster-wrapper::after {
content:"";
position:absolute;inset:0;
background:linear-gradient(180deg,rgba(63,90,112,.16),rgba(58,46,38,.28));
pointer-events:none;
}
.poster-wrapper img {
width:100%;
height:auto;
aspect-ratio:9 / 16;
object-fit:cover;
display:block;
}
.player-column {
display:flex;flex-direction:column;gap:8px;min-width:0;
}
.player-wrapper {
width:100%;
background:#0b0e12;
border:1px solid var(--line-lit);
position:relative;
overflow:hidden;
}
.player-wrapper video {
width:100%;
height:auto;
aspect-ratio:16 / 9;
display:block;
background:#000;
}
.player-controls {
display:flex;flex-wrap:wrap;gap:5px;
}
.ctrl-btn {
flex:0 0 auto;
font-size:11.5px;
font-weight:700;
letter-spacing:.06em;
color:var(--ink-dim);
background:var(--panel-2);
border:1px solid var(--line-lit);
border-radius:1px;
padding:4px 9px;
line-height:1.3;
transition:color .14s,border-color .14s,background .14s;
}
.ctrl-btn:hover {color:var(--warm-hot);border-color:var(--warm)}
.ctrl-btn.is-active {
color:#1a1207;
background:var(--warm);
border-color:var(--warm-hot);
}
.hero-desc {
border-top:1px solid var(--line);
padding-top:8px;
}
.seo-desc {
font-size:12px;
line-height:1.7;
color:var(--ink-dim);
max-width:70ch;
}
.episode-status-bar {
display:flex;flex-wrap:wrap;gap:8px 18px;
align-items:baseline;
padding:7px 11px;
background:linear-gradient(90deg,rgba(63,90,112,.18),rgba(58,46,38,.22));
border-left:2px solid var(--cold-lit);
}
.status-current {
font-size:12.5px;font-weight:800;letter-spacing:.08em;
color:var(--warm-hot);
font-variant-numeric:tabular-nums;
}
.status-total {
font-size:11.5px;letter-spacing:.12em;
color:var(--ink-faint);
font-variant-numeric:tabular-nums;
}
.section-heading {
font-size:13.5px;font-weight:800;letter-spacing:.2em;
color:#e8ecf1;
padding-left:9px;
border-left:3px solid var(--warm);
margin-bottom:9px;
}
.cast-section {border-top:1px solid var(--line);padding-top:12px}
.cast-grid {
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:8px;
}
.cast-card {
display:flex;flex-direction:column;gap:4px;
padding:6px;
background:var(--panel);
border:1px solid var(--line);
align-self:start;
}
.cast-avatar {
width:100%;
aspect-ratio:1 / 1;
overflow:hidden;
background:linear-gradient(145deg,var(--wood) 0%,#242b33 70%);
border:1px solid var(--line-lit);
display:flex;align-items:center;justify-content:center;
}
.avatar-placeholder {
font-size:22px;font-weight:800;letter-spacing:.02em;
color:var(--warm-hot);
opacity:.9;
}
.cast-name {
font-size:12.5px;font-weight:800;letter-spacing:.06em;
color:#e8ecf1;
}
.cast-role-tag {
align-self:flex-start;
font-size:10.5px;font-weight:700;letter-spacing:.08em;
color:var(--cold-lit);
border:1px solid var(--line-lit);
padding:1px 6px;
white-space:nowrap;
}
.synopsis-block {border-top:1px solid var(--line);padding-top:12px}
.synopsis-para {
font-size:12.5px;line-height:1.72;
color:var(--ink);
max-width:66ch;
}
.synopsis-para+.synopsis-para {margin-top:7px}
.details-block {border-top:1px solid var(--line);padding-top:12px}
.details-list {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:0 18px;
background:var(--panel);
border:1px solid var(--line);
padding:6px 11px;
}
.detail-row {
display:flex;gap:9px;align-items:baseline;
padding:4px 0;
border-bottom:1px dotted var(--line-lit);
}
.detail-key {
flex:0 0 5.2em;
font-size:11px;letter-spacing:.1em;
color:var(--ink-faint);
font-weight:700;
}
.detail-value {
flex:1 1 auto;min-width:0;
font-size:12px;
color:var(--ink);
letter-spacing:.03em;
}
.timeline-section {border-top:1px solid var(--line);padding-top:12px}
.timeline-list {
position:relative;
padding-left:16px;
display:flex;flex-direction:column;
gap:0;
}
.timeline-list::before {
content:"";
position:absolute;left:4px;top:6px;bottom:6px;
width:1px;background:var(--line-lit);
}
.timeline-node {
position:relative;
display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;
padding:7px 0;
}
.timeline-node::before {
content:"";
position:absolute;left:-16px;top:12px;
width:7px;height:7px;
border-radius:50%;
background:var(--bg);
border:1px solid var(--line-lit);
}
.timeline-timecode {
flex:0 0 auto;
font-size:11.5px;font-weight:800;letter-spacing:.1em;
color:var(--cold-lit);
font-variant-numeric:tabular-nums;
white-space:nowrap;
}
.timeline-label {
font-size:12.5px;
color:var(--ink-dim);
}
.timeline-node.is-active::before {
background:var(--warm-hot);
border-color:var(--warm-hot);
box-shadow:0 0 0 3px rgba(224,138,60,.18);
}
.timeline-node.is-active .timeline-timecode {color:var(--warm-hot)}
.timeline-node.is-active .timeline-label {color:#e8ecf1;font-weight:700}
.episodes-section {border-top:1px solid var(--line);padding-top:12px}
.episode-scroll {
display:grid;
grid-auto-flow:column;
grid-auto-columns:minmax(190px,1fr);
grid-template-rows:1fr;
gap:8px;
overflow-x:auto;
overflow-y:hidden;
padding-bottom:7px;
scrollbar-width:thin;
}
.episode-scroll::-webkit-scrollbar {height:6px}
.episode-scroll::-webkit-scrollbar-track {background:var(--panel)}
.episode-scroll::-webkit-scrollbar-thumb {background:var(--line-lit)}
.episode-card {
display:flex;flex-direction:column;gap:3px;
padding:8px 9px;
background:var(--panel);
border:1px solid var(--line);
border-top:2px solid var(--wood-lit);
align-self:start;
min-height:100%;
}
.episode-number {
font-size:10.5px;font-weight:800;letter-spacing:.14em;
color:var(--warm);
font-variant-numeric:tabular-nums;
}
.episode-title {
font-size:14px;font-weight:800;letter-spacing:.1em;
color:#e8ecf1;
}
.episode-summary {
font-size:11.5px;line-height:1.6;
color:var(--ink-dim);
flex:1 1 auto;
}
.episode-duration {
font-size:10.5px;letter-spacing:.1em;
color:var(--ink-faint);
font-variant-numeric:tabular-nums;
padding-top:3px;
border-top:1px dotted var(--line-lit);
}
.comments-section {border-top:1px solid var(--line);padding-top:12px}
.comments-columns {
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,1fr) 14px;
gap:10px;
align-items:start;
}
.comment-col {
display:grid;
gap:7px;
align-content:start;
}
.comment-col-short {grid-template-columns:repeat(2,minmax(0,1fr))}
.comment-col-long {grid-template-columns:minmax(0,1fr)}
.comment-card {
display:flex;flex-direction:column;gap:5px;
padding:8px 10px;
background:var(--panel);
border:1px solid var(--line);
border-left:2px solid var(--cold);
align-self:start;
}
.comment-col-short .comment-card {border-left-color:var(--cold-lit)}
.comment-col-long .comment-card {border-left-color:var(--wood-lit)}
.comment-nickname {
font-size:11px;font-weight:800;letter-spacing:.1em;
color:var(--warm-hot);
}
.comment-text {
font-size:12px;line-height:1.62;
color:var(--ink);
}
.comment-mood-bar {
display:flex;flex-direction:column;
gap:3px;
width:14px;
align-self:stretch;
min-height:70px;
}
.mood-segment {flex:1 1 auto;width:100%}
.mood-low {background:linear-gradient(180deg,var(--cold),#2b3e4d)}
.mood-mid {background:linear-gradient(180deg,var(--cold-lit),var(--wood))}
.mood-high {background:linear-gradient(180deg,var(--warm),#8c4f1c)}
.rec-region {
display:grid;
grid-template-columns:minmax(0,86px) minmax(0,1fr);
gap:10px;
align-items:start;
border-top:1px solid var(--line);
padding-top:12px;
}
.rec-heading {
writing-mode:vertical-rl;
text-orientation:mixed;
font-size:13px;font-weight:800;letter-spacing:.24em;
color:#e8ecf1;
border-left:2px solid var(--warm);
padding:6px 0 6px 7px;
max-height:100%;
}
.rec-list {
display:flex;
flex-wrap:wrap;
gap:8px;
align-content:flex-start;
}
.rec-region-1 .rec-list {gap:8px}
.rec-region-2 .rec-list {gap:10px}
.rec-region-3 .rec-list {gap:12px}
a.rec-card {
display:flex;flex-direction:column;gap:4px;
background:var(--panel);
border:1px solid var(--line);
padding:5px;
color:var(--ink);
text-decoration:none;
align-self:start;
transition:border-color .15s,transform .15s;
}
.rec-region-1 a.rec-card {flex:1 1 150px;max-width:220px}
.rec-region-2 a.rec-card {flex:1 1 170px;max-width:260px}
.rec-region-3 a.rec-card {flex:1 1 190px;max-width:300px}
a.rec-card:hover {
border-color:var(--warm);
text-decoration:none;
transform:translateY(-2px);
}
[data-runtime="recommendation"] img {
width:100%;
max-width:100%;
height:auto;
aspect-ratio:3 / 4;
object-fit:cover;
display:block;
background:var(--bg-deep);
}
.rec-name {
font-size:12px;font-weight:800;letter-spacing:.05em;
color:#e8ecf1;
}
.rec-blurb {
font-size:11px;line-height:1.55;
color:var(--ink-dim);
}
.site-footer {
background:linear-gradient(180deg,var(--bg-deep),#0d1114);
border-top:1px solid var(--line-lit);
margin-top:8px;
}
.footer-inner {
max-width:1180px;
margin:0 auto;
padding:14px 16px 18px;
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:12px;font-weight:700;letter-spacing:.12em;
color:var(--cold-lit);
text-decoration:none;
}
a[data-contract="footer-home"]:hover, a[data-contract="footer-sitemap"]:hover {
color:var(--warm-hot);
text-decoration:underline;
text-underline-offset:3px;
}
.friend-links {
display:flex;flex-wrap:wrap;gap:5px 12px;align-items:baseline;
}
.friend-links-label {
font-size:11px;font-weight:800;letter-spacing:.14em;
color:var(--ink-faint);
}
a.runtime-friend-link {
font-size:11.5px;letter-spacing:.05em;
color:var(--ink-dim);
text-decoration:none;
white-space:nowrap;
}
a.runtime-friend-link:hover {color:var(--warm-hot);text-decoration:underline;text-underline-offset:3px}
.footer-disclaimer {
font-size:11px;line-height:1.65;
color:var(--ink-faint);
max-width:78ch;
border-top:1px dotted var(--line-lit);
padding-top:8px;
}
.lights-off {background:#0a0d10}
.lights-off .hero-visual {filter:brightness(.62)}
.lights-off .player-wrapper {box-shadow:0 0 0 1px var(--warm)}
.player-wrapper.is-theater {
width:100%;
border-color:var(--warm);
box-shadow:0 0 0 1px rgba(224,138,60,.5),0 0 26px rgba(224,138,60,.18);
}
.ctrl-btn.play.is-active, .ctrl-btn.is-active.click {color:#1a1207}
@media (max-width:900px){.page-main {padding:12px 13px 22px;gap:15px}
.cast-grid {grid-template-columns:repeat(3,minmax(0,1fr))}
.details-list {grid-template-columns:repeat(2,minmax(0,1fr))}
.comments-columns {grid-template-columns:minmax(0,1fr) minmax(0,1fr) 12px;gap:8px}
.rec-region {grid-template-columns:minmax(0,70px) minmax(0,1fr)}}
@media (max-width:720px){.hero-visual {grid-template-columns:minmax(0,1fr)}
.poster-column {max-width:180px}
.cast-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
.episode-scroll {grid-auto-columns:minmax(170px,1fr)}
.comment-col-short {grid-template-columns:minmax(0,1fr)}
.rec-region {
grid-template-columns:minmax(0,1fr);
gap:8px;
}
.rec-heading {
writing-mode:horizontal-tb;
border-left:3px solid var(--warm);
border-top:none;
padding:0 0 0 8px;
max-height:none;
}
.rec-region-1 a.rec-card, .rec-region-2 a.rec-card, .rec-region-3 a.rec-card {flex:1 1 44%;max-width:none}}
@media (max-width:480px){body {font-size:12.5px}
.site-header {padding:8px 12px}
.movie-title {font-size:21px}
.tagline-text {letter-spacing:.16em}
.details-list {grid-template-columns:minmax(0,1fr);gap:0}
.cast-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.comments-columns {grid-template-columns:minmax(0,1fr) 10px;gap:8px}
.comment-col-short, .comment-col-long {grid-template-columns:minmax(0,1fr)}
.rec-region-1 a.rec-card, .rec-region-2 a.rec-card, .rec-region-3 a.rec-card {flex:1 1 100%;max-width:none}
.episode-scroll {grid-auto-columns:minmax(160px,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}