* {margin:0;padding:0;box-sizing:border-box}
html {-webkit-text-size-adjust:100%}
body {
font-family:"SF Mono",Menlo,Consolas,"Noto Sans Mono CJK SC","PingFang SC","Microsoft YaHei",monospace;
background:#14161a;
color:#c8ccd2;
font-size:13px;
line-height:1.5;
overflow-x:hidden;
}
img, video {display:block;max-width:100%}
ul, ol {list-style:none}
a {color:inherit;text-decoration:none}
button, input {font:inherit;color:inherit}
h1, h2, h3 {font-family:"PingFang SC","Microsoft YaHei",-apple-system,"Helvetica Neue",sans-serif;font-weight:800;letter-spacing:.02em}
.site-header {
position:sticky;top:0;z-index:40;
background:rgba(16,18,21,.94);
border-bottom:1px solid #2a2d33;
box-shadow:0 1px 0 #0b0c0e,0 6px 18px rgba(0,0,0,.5);
}
.header-inner {
display:flex;align-items:center;justify-content:space-between;gap:12px;
max-width:1380px;margin:0 auto;padding:8px 16px;
}
.brand-block {display:flex;align-items:baseline;gap:10px;min-width:0}
a[data-contract="site-name"] {
font-family:"PingFang SC","Microsoft YaHei",sans-serif;
font-weight:800;font-size:16px;letter-spacing:.06em;
color:#eef1f4;text-decoration:none;
border-left:3px solid #8c1f1f;padding-left:8px;
text-shadow:0 0 12px rgba(200,220,255,.18);
}
a[data-contract="site-name"]:hover {color:#fff;border-left-color:#c33}
.brand-sub {
font-size:11px;color:#6c727c;letter-spacing:.18em;white-space:nowrap;
}
.category-nav {
display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;
max-width:100%;
}
a.runtime-category {
white-space:nowrap;
font-size:12px;letter-spacing:.08em;
padding:4px 9px;
color:#a9b0b9;text-decoration:none;
background:#1b1e23;
border:1px solid #31353c;
border-radius:2px;
transition:background .15s,color .15s,border-color .15s;
}
a.runtime-category:hover {background:#26292f;color:#fff;border-color:#8c1f1f}
.page-main {max-width:1380px;margin:0 auto;padding:0 16px}
.hero-shell {
position:relative;
display:grid;
grid-template-columns:minmax(0,240px) minmax(0,1fr);
grid-template-areas:
"poster info"
"cast cast"
"syn syn"
"ephead ephead"
"meta meta";
gap:14px 22px;
padding:18px 0 10px;
border-bottom:1px solid #24272d;
}
.hero-shell::before {
content:"";position:absolute;inset:0 -40vw 40% -40vw;z-index:-1;pointer-events:none;
background:
radial-gradient(60% 55% at 18% 8%,rgba(160,190,220,.10),transparent 70%),
radial-gradient(45% 40% at 92% 0%,rgba(140,31,31,.16),transparent 72%),
linear-gradient(180deg,#0d0f12,#14161a);
}
.hero-poster {grid-area:poster;position:relative;align-self:start;width:100%}
.poster-img {
width:100%;height:auto;object-fit:cover;
border:1px solid #2c3037;
border-radius:2px;
filter:contrast(1.08) saturate(.92);
box-shadow:0 10px 30px rgba(0,0,0,.7),inset 0 0 0 1px rgba(255,255,255,.03);
}
.poster-vignette {
position:absolute;inset:0;pointer-events:none;border-radius:2px;
background:
linear-gradient(180deg,transparent 40%,rgba(8,9,11,.85)),
radial-gradient(70% 60% at 50% 30%,transparent 45%,rgba(5,6,8,.7));
}
.hero-info {grid-area:info;align-self:start;min-width:0}
.movie-title {
font-size:clamp(26px,4.4vw,50px);line-height:1.04;
color:#f2f4f7;letter-spacing:.01em;
text-shadow:0 2px 0 #000,0 0 30px rgba(180,205,235,.16);
}
.movie-tagline {
margin-top:8px;font-size:14px;color:#9fa7b1;letter-spacing:.06em;
padding-left:10px;border-left:2px solid #8c1f1f;
}
.movie-seo {display:none}
.hero-actions {display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
a.btn-primary {
display:inline-block;padding:9px 20px;
background:#8c1f1f;color:#fff;text-decoration:none;
font-family:"PingFang SC","Microsoft YaHei",sans-serif;font-weight:800;
font-size:14px;letter-spacing:.18em;
border:1px solid #b52d2d;border-radius:2px;
box-shadow:0 0 0 1px #000 inset,0 6px 16px rgba(140,31,31,.35);
transition:background .15s,box-shadow .15s;
}
a.btn-primary:hover {background:#b02626;box-shadow:0 0 0 1px #000 inset,0 0 22px rgba(200,50,50,.55)}
.btn-ghost {
padding:9px 18px;background:transparent;color:#c9ced5;
border:1px solid #3a3f47;border-radius:2px;cursor:pointer;
font-family:"PingFang SC","Microsoft YaHei",sans-serif;font-weight:700;
font-size:14px;letter-spacing:.16em;
transition:background .15s,color .15s,border-color .15s;
}
.btn-ghost:hover {background:#1e2126;color:#fff;border-color:#5a6068}
.hero-strip {
display:flex;flex-wrap:wrap;gap:6px;margin-top:14px;
}
.strip-item {
font-size:11px;letter-spacing:.12em;color:#aab1ba;
padding:3px 8px;background:#1a1d22;border:1px solid #2f333a;border-radius:2px;
}
.strip-item:nth-child(4) {color:#e0a0a0;border-color:#5c2222;background:#1e1414}
.panel-heading {
font-size:15px;color:#eef1f4;letter-spacing:.14em;
padding-left:9px;border-left:3px solid #8c1f1f;
margin-bottom:9px;line-height:1.2;
}
.band {padding:6px 0}
.band + .band {border-top:1px solid #22252a}
.band-cast {grid-area:cast;padding-top:12px}
.cast-column {
display:grid;
grid-template-columns:repeat(auto-fill,minmax(148px,1fr));
gap:8px;
align-items:start;
}
.cast-card {
position:relative;
display:flex;flex-direction:column;gap:4px;
padding:10px 10px 11px;
background:linear-gradient(180deg,#1c1f25,#171a1e);
border:1px solid #2c3037;border-left:3px solid #3a4048;
border-radius:2px;
min-height:0;
transition:border-color .15s,transform .15s;
}
.cast-card:hover {border-left-color:#8c1f1f;transform:translateY(-1px)}
.cast-icon {
align-self:flex-start;
font-size:10px;letter-spacing:.16em;color:#7f8791;
padding:2px 6px;border:1px solid #333940;border-radius:2px;
background:#141619;
}
.cast-name {
font-family:"PingFang SC","Microsoft YaHei",sans-serif;
font-weight:800;font-size:16px;color:#f0f2f5;letter-spacing:.08em;
}
.cast-role {font-size:11px;color:#868e99;line-height:1.4}
.band-synopsis {grid-area:syn;padding-top:12px}
.synopsis-columns {
columns:2;
column-gap:24px;
column-rule:1px solid #24272d;
}
.syn-para {
font-size:12.5px;line-height:1.62;color:#aeb5be;
margin-bottom:9px;break-inside:avoid;
}
.syn-para:first-child::first-letter {
font-size:1px;
}
.episodes-head {
display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;
margin-bottom:9px;
}
.episodes-head .panel-heading {margin-bottom:0}
.episode-status {
font-size:11px;letter-spacing:.12em;color:#d8b0b0;
padding:3px 8px;background:#1e1414;border:1px solid #4d2222;border-radius:2px;
white-space:nowrap;
}
.band-meta {grid-area:meta;padding-top:12px}
.meta-rail {
padding:12px 14px;
background:#171a1e;
border:1px solid #262a30;border-radius:2px;
}
.detail-list {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
gap:0 22px;
}
.detail-pair {
display:flex;justify-content:space-between;gap:12px;
padding:5px 0;border-bottom:1px dashed #262a30;
}
.detail-key {
font-size:11px;letter-spacing:.1em;color:#7d848e;
}
.detail-val {
font-size:12px;color:#d2d7dd;text-align:right;
}
.player-shell {
margin:16px 0 8px;
border:1px solid #2a2e34;border-radius:2px;
background:#0b0c0e;
overflow:hidden;
}
.player-shell.is-theater {
position:relative;z-index:30;
box-shadow:0 0 0 1px #000,0 0 60px rgba(0,0,0,.9);
}
.player-frame {
position:relative;
background:#000;
line-height:0;
}
.player-frame video {
display:block;width:100%;height:auto;background:#000;
}
.player-overlay {
position:absolute;inset:0;pointer-events:none;
background:radial-gradient(120% 90% at 50% 0%,rgba(190,215,240,.06),transparent 55%);
}
.player-controls {
display:flex;flex-wrap:wrap;align-items:center;gap:6px;
padding:8px 10px;
background:#141619;border-top:1px solid #24272d;
}
.ctrl-btn {
padding:5px 10px;background:#1d2025;color:#c2c8cf;
border:1px solid #33383f;border-radius:2px;cursor:pointer;
font-size:12px;letter-spacing:.08em;
transition:background .15s,color .15s,border-color .15s;
}
.ctrl-btn:hover {background:#262a30;color:#fff;border-color:#5a6068}
.ctrl-btn.is-active {background:#3a1414;color:#ffd9d9;border-color:#8c1f1f}
.ctrl-btn.is-playing {background:#1f2a1f;color:#d7f0d7;border-color:#3f5c3f}
.ctrl-btn.is-muted {color:#8a9098;border-style:dashed}
.ctrl-range {
-webkit-appearance:none;appearance:none;
height:4px;background:#2b2f35;border-radius:2px;cursor:pointer;
}
.ctrl-progress {flex:1 1 160px;min-width:120px}
.ctrl-volume {flex:0 1 90px;min-width:60px}
.ctrl-range::-webkit-slider-thumb {
-webkit-appearance:none;appearance:none;
width:12px;height:12px;border-radius:2px;
background:#c9ced5;border:1px solid #000;
}
.ctrl-range::-moz-range-thumb {
width:12px;height:12px;border-radius:2px;
background:#c9ced5;border:1px solid #000;
}
body.is-lights-off {background:#07080a}
body.is-lights-off .site-header, body.is-lights-off .site-footer {opacity:.35}
body.is-lights-off .hero-shell::before {opacity:.2}
.band-timeline {
margin-top:18px;padding:16px 0 18px;
border-top:1px solid #24272d;border-bottom:1px solid #24272d;
background:linear-gradient(180deg,#101215,#14161a);
}
.timeline-rail {position:relative}
.timeline-track {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
gap:0;
border-top:2px solid #2f333a;
padding-top:0;
}
.timeline-node {
position:relative;
padding:22px 12px 6px 12px;
border-left:1px solid #23272d;
min-width:0;
}
.timeline-node:first-child {border-left-color:transparent}
.timeline-node::before {
content:"";position:absolute;left:-4px;top:-6px;
width:7px;height:7px;background:#8c1f1f;border:1px solid #d46;border-radius:1px;
}
.timeline-node:first-child::before {left:-1px}
.timeline-node::after {
content:"";position:absolute;left:0;top:0;width:1px;height:14px;background:#2f333a;
}
.node-time {
display:block;
font-size:12px;letter-spacing:.1em;color:#dfe4ea;
margin-bottom:5px;
}
.node-label {
display:block;
font-size:11.5px;line-height:1.45;color:#8e959f;
}
.band-episodes {padding-top:16px}
.episode-reel {
display:grid;
grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
gap:10px;
align-items:start;
}
.episode-card {
position:relative;
display:flex;flex-direction:column;gap:6px;
padding:12px 12px 30px;
background:#181b20;
border:1px solid #2a2e34;border-radius:2px;
min-height:0;
transition:border-color .15s,background .15s;
}
.episode-card:hover {border-color:#4a5058;background:#1c1f25}
.episode-card.is-active {
border-color:#8c1f1f;
background:#1e1515;
box-shadow:inset 0 0 0 1px rgba(140,31,31,.35);
}
.ep-corner {
align-self:flex-start;
font-size:11px;letter-spacing:.12em;font-weight:700;
color:#e8d5d5;background:#3a1414;
border:1px solid #6d2222;border-radius:2px;
padding:2px 7px;
}
.ep-title {
font-size:14px;color:#eef1f4;letter-spacing:.06em;line-height:1.3;
}
.ep-summary {
font-size:11.5px;line-height:1.55;color:#939aa4;
flex:1 1 auto;
}
.ep-duration {
position:absolute;right:10px;bottom:9px;
font-size:10.5px;letter-spacing:.1em;color:#767d87;
}
.band-comments {padding-top:16px}
.comment-stream {
columns:3;
column-gap:12px;
}
.comment-block {
break-inside:avoid;
margin-bottom:10px;
background:#181b20;
border:1px solid #2a2e34;
border-left:3px solid #3a4048;
border-radius:2px;
overflow:hidden;
}
.comment-block[open] {border-left-color:#8c1f1f}
.comment-head {
display:flex;justify-content:space-between;align-items:baseline;gap:10px;
padding:9px 11px;
cursor:pointer;
list-style:none;
background:#1c2026;
}
.comment-head::-webkit-details-marker {display:none}
.comment-head::after {
content:"＋";font-size:11px;color:#5f666f;margin-left:auto;
}
.comment-block[open] .comment-head::after {content:"－";color:#a06a6a}
.comment-nick {
font-family:"PingFang SC","Microsoft YaHei",sans-serif;
font-weight:800;font-size:12.5px;color:#e6e9ed;letter-spacing:.05em;
}
.comment-meta {
font-size:10.5px;letter-spacing:.1em;color:#8b929c;
padding:2px 6px;background:#141619;border:1px solid #2f333a;border-radius:2px;
white-space:nowrap;
}
.comment-text {
padding:10px 11px 12px;
font-size:12px;line-height:1.62;color:#aab1bb;
}
.band-reco {padding-top:16px}
.reco-grid {
display:grid;gap:10px;align-items:start;
}
.reco-grid-4 {grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.reco-grid-3 {grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
a.reco-card {
display:flex;flex-direction:column;gap:6px;
background:#181b20;border:1px solid #2a2e34;border-radius:2px;
padding:0 0 10px;
color:#c8ccd2;text-decoration:none;
overflow:hidden;
transition:border-color .15s,transform .15s,box-shadow .15s;
}
a.reco-card:hover {
border-color:#8c1f1f;transform:translateY(-2px);
box-shadow:0 8px 20px rgba(0,0,0,.6);
}
a.reco-card img {
width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
display:block;filter:contrast(1.06) saturate(.9);
border-bottom:1px solid #2a2e34;
}
a.reco-card [data-runtime="name"] {
font-family:"PingFang SC","Microsoft YaHei",sans-serif;
font-weight:800;font-size:13.5px;color:#eef1f4;letter-spacing:.05em;
padding:0 10px;
}
a.reco-card [data-runtime="blurb"] {
font-size:11.5px;line-height:1.55;color:#8d949e;padding:0 10px;
}
.site-footer {
margin-top:26px;
border-top:1px solid #24272d;
background:#101215;
}
.footer-top {
max-width:1380px;margin:0 auto;padding:16px;
display:flex;flex-wrap:wrap;gap:18px 30px;
align-items:flex-start;
}
.footer-nav {display:flex;flex-wrap:wrap;gap:8px}
a.footer-link {
font-size:12px;letter-spacing:.12em;color:#a9b0b9;text-decoration:none;
padding:3px 8px;border:1px solid #2c3037;border-radius:2px;
}
a.footer-link:hover {color:#fff;border-color:#8c1f1f}
.friend-label {
display:block;font-size:11px;letter-spacing:.18em;color:#6c727c;
margin-bottom:6px;
}
a.runtime-friend-link {
display:inline-block;
font-size:11.5px;letter-spacing:.06em;color:#8f96a0;text-decoration:none;
margin:0 8px 6px 0;
border-bottom:1px solid transparent;
}
a.runtime-friend-link:hover {color:#e0e5ea;border-bottom-color:#8c1f1f}
.footer-disclaimer {
max-width:1380px;margin:0 auto;padding:0 16px 20px;
font-size:11px;line-height:1.6;color:#5f666f;
}
@media (max-width:900px){.hero-shell {
grid-template-columns:minmax(0,180px) minmax(0,1fr);
}
.synopsis-columns {columns:1}
.comment-stream {columns:2}}
@media (max-width:640px){.header-inner {padding:8px 12px}
.page-main {padding:0 12px}
.hero-shell {
grid-template-columns:minmax(0,1fr);
grid-template-areas:
"poster"
"info"
"cast"
"syn"
"ephead"
"meta";
gap:12px;
}
.hero-poster {max-width:210px}
.movie-title {font-size:30px}
.cast-column {grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
.detail-list {grid-template-columns:1fr}
.comment-stream {columns:1}
.timeline-track {grid-template-columns:repeat(auto-fit,minmax(132px,1fr))}
.episode-reel {grid-template-columns:1fr}
.reco-grid-4, .reco-grid-3 {grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.player-controls {gap:5px;padding:7px 8px}
.ctrl-btn {padding:4px 8px;font-size:11.5px}
.ctrl-progress {flex:1 1 100%;order:9}
.ctrl-volume {flex:1 1 100%;order:10}
.footer-top {flex-direction:column;gap:14px}}
@media (max-width:380px){.cast-column {grid-template-columns:1fr}
.reco-grid-4, .reco-grid-3 {grid-template-columns:1fr}
.btn-ghost, a.btn-primary {flex:1 1 auto;text-align:center}}

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}