* {box-sizing:border-box;margin:0;padding:0}
:root {
--bg:#0d1014;
--bg2:#141920;
--bg3:#1a212a;
--line:#232c37;
--ink:#c9d2dc;
--ink-dim:#7d8894;
--ink-mute:#59636e;
--rust:#a4442c;
--rust-bright:#c85a3a;
--steel:#3a4a5c;
--steel-bright:#5d7near;
--steel-hi:#6d8aa6;
}
html {-webkit-text-size-adjust:100%}
body {
background:var(--bg);
color:var(--ink);
font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
font-size:13px;
line-height:1.5;
font-stretch:condensed;
letter-spacing:.02em;
-webkit-font-smoothing:antialiased;
}
img {display:block;max-width:100%}
a {color:inherit;text-decoration:none}
ul {list-style:none}
h1, h2, h3 {font-weight:800;letter-spacing:-.01em;line-height:1.25}
video {display:block;background:#000}
.site-header {
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
padding:8px 14px;
background:linear-gradient(180deg,#10151b,#0b0e12);
border-bottom:1px solid var(--line);
position:sticky;
top:0;
z-index:40;
}
.site-brand {
font-size:15px;
font-weight:800;
letter-spacing:.04em;
color:var(--rust-bright);
text-decoration:none;
white-space:nowrap;
}
.site-brand:hover {color:#e07a56}
.categories-strip {
display:flex;
flex-wrap:wrap;
gap:6px;
justify-content:flex-end;
}
a.runtime-category {
display:inline-block;
white-space:nowrap;
font-size:11px;
padding:3px 9px;
border:1px solid var(--line);
border-radius:2px;
color:#93a1ae;
text-decoration:none;
background:var(--bg2);
transition:.15s;
}
a.runtime-category:hover {
color:#e8eef4;
border-color:var(--rust);
background:#1d1410;
}
.page-main {
max-width:1180px;
margin:0 auto;
padding:12px 14px 24px;
display:flex;
flex-direction:column;
gap:16px;
}
.hero-shell {
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,1.55fr);
gap:14px;
align-items:start;
background:var(--bg2);
border:1px solid var(--line);
border-radius:3px;
padding:12px;
}
.hero-poster-wrap {
position:relative;
width:100%;
border:1px solid #2b3540;
background:#000;
}
.hero-poster {
width:100%;
height:auto;
object-fit:cover;
display:block;
filter:contrast(1.06) saturate(.85);
}
.hero-panel {
position:relative;
display:flex;
flex-direction:column;
gap:8px;
min-width:0;
}
.hero-title {
font-size:23px;
letter-spacing:-.02em;
color:#eef3f8;
}
.hero-tagline {
font-size:12.5px;
color:var(--rust-bright);
letter-spacing:.06em;
border-left:2px solid var(--rust);
padding-left:8px;
}
.hero-seo {
font-size:11px;
color:var(--ink-mute);
line-height:1.45;
}
.clock-overlay {
position:absolute;
top:-2px;
right:0;
display:flex;
flex-direction:column;
align-items:flex-end;
gap:1px;
padding:5px 9px;
background:rgba(18,23,30,.82);
border:1px solid rgba(164,68,44,.55);
border-radius:2px;
pointer-events:none;
backdrop-filter:blur(2px);
z-index:5;
}
.clock-digits {
font-size:24px;
font-weight:800;
letter-spacing:-.03em;
color:var(--rust-bright);
font-variant-numeric:tabular-nums;
line-height:1;
text-shadow:0 0 10px rgba(200,90,58,.45);
}
.clock-caption {
font-size:9px;
letter-spacing:.34em;
color:#8d6a5c;
}
.photo-fragments {
display:flex;
gap:5px;
flex-wrap:wrap;
}
.fragment-chip {
font-size:10px;
padding:2px 7px;
color:#b7c3cf;
background:#1c242e;
border:1px dashed #3a4653;
border-radius:2px;
letter-spacing:.08em;
}
.fragment-chip:first-child {
border-style:solid;
border-color:var(--rust);
color:#d98b6d;
}
.player {
width:100%;
border:1px solid var(--line);
border-radius:2px;
background:#000;
}
.player-controls {
display:flex;
flex-wrap:wrap;
gap:4px;
}
.ctl {
font-family:inherit;
font-size:11px;
letter-spacing:.05em;
padding:4px 9px;
color:#9aa8b5;
background:#1b232d;
border:1px solid #2c3742;
border-radius:2px;
cursor:pointer;
transition:.14s;
}
.ctl:hover {color:#e8eef4;border-color:var(--steel-hi);background:#212c38}
.ctl.is-active {
color:#f0d3c7;
border-color:var(--rust);
background:#2a1712;
box-shadow:inset 0 0 0 1px rgba(200,90,58,.3);
}
.hero-panel.theater-mode {
position:relative;
}
.hero-panel.theater-mode .player {
box-shadow:0 0 0 2px var(--rust),0 0 26px rgba(200,90,58,.35);
}
.hero-panel.lights-off {
background:#05070a;
}
.hero-panel.lights-off .player {
filter:brightness(.55);
}
.cast-strip {
background:var(--bg2);
border:1px solid var(--line);
border-radius:3px;
padding:10px 12px;
}
.cast-heading, .synopsis-heading, .status-heading, .details-heading, .episode-heading, .timeline-heading, .comments-heading, .recommend-heading {
font-size:12px;
letter-spacing:.24em;
color:#93a1ae;
text-transform:uppercase;
padding-bottom:6px;
margin-bottom:10px;
border-bottom:1px solid var(--line);
position:relative;
}
.cast-heading::before, .synopsis-heading::before, .status-heading::before, .details-heading::before, .episode-heading::before, .timeline-heading::before, .comments-heading::before, .recommend-heading::before {
content:"";
position:absolute;
left:0;
bottom:-1px;
width:34px;
height:1px;
background:var(--rust-bright);
}
.cast-list {
display:grid;
grid-template-columns:repeat(6,minmax(0,1fr));
gap:8px;
align-items:start;
}
.cast-card {
display:flex;
flex-direction:column;
gap:3px;
min-width:0;
}
.cast-avatar {
display:flex;
align-items:center;
justify-content:center;
width:100%;
aspect-ratio:1/1;
background:
radial-gradient(circle at 32% 26%,#37485a,#1a222c 72%);
border:1px solid #2f3b48;
border-radius:2px;
color:#a9b8c6;
font-size:11px;
font-weight:700;
letter-spacing:.06em;
overflow:hidden;
}
.cast-card:nth-child(2n) .cast-avatar {
background:radial-gradient(circle at 68% 30%,#4a3229,#1c1512 74%);
color:#d1a08a;
}
.cast-name {
font-size:12px;
font-weight:700;
color:#e3eaf1;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.cast-role {
font-size:10px;
color:var(--ink-mute);
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.synopsis-block {
background:var(--bg2);
border:1px solid var(--line);
border-radius:3px;
padding:10px 12px;
}
.synopsis-para {
font-size:12.5px;
line-height:1.62;
color:#aeb9c5;
text-align:justify;
}
.synopsis-para+.synopsis-para {margin-top:5px}
.episode-status, .details-block {
background:var(--bg2);
border:1px solid var(--line);
border-radius:3px;
padding:10px 12px;
}
.status-line {
font-size:13px;
color:var(--rust-bright);
letter-spacing:.05em;
font-weight:700;
}
.details-list {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:0 12px;
}
.detail-row {
display:flex;
gap:6px;
align-items:baseline;
padding:3px 0;
border-bottom:1px dotted #232c37;
min-width:0;
}
.detail-row dt {
font-size:11px;
color:var(--ink-mute);
white-space:nowrap;
flex:none;
min-width:56px;
}
.detail-row dd {
font-size:11.5px;
color:#c2cdd8;
min-width:0;
overflow-wrap:anywhere;
}
.episode-grid-section {
background:var(--bg2);
border:1px solid var(--line);
border-radius:3px;
padding:10px 12px;
}
.episode-grid {
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:7px;
align-items:start;
}
.episode-card {
display:flex;
flex-direction:column;
gap:3px;
padding:7px 8px;
background:#10161c;
border:1px solid #202932;
border-radius:2px;
min-width:0;
transition:.15s;
}
.episode-card:hover {border-color:#39485a;background:#131a21}
.episode-number {
font-size:10px;
letter-spacing:.16em;
color:var(--ink-mute);
font-variant-numeric:tabular-nums;
}
.episode-title {
font-size:12px;
font-weight:700;
color:#dbe4ed;
line-height:1.35;
}
.episode-summary {
font-size:10.5px;
line-height:1.45;
color:#7f8b97;
}
.episode-duration {
font-size:10px;
color:#5d6873;
letter-spacing:.06em;
margin-top:auto;
padding-top:2px;
font-variant-numeric:tabular-nums;
}
.episode-card-current {
border-color:var(--rust);
background:#1a1310;
box-shadow:inset 0 0 0 1px rgba(200,90,58,.28),0 0 12px rgba(164,68,44,.18);
}
.episode-card-current .episode-number {color:var(--rust-bright)}
.episode-card-current .episode-title {color:#f2e2db}
.episode-card-current .episode-summary {color:#a99086}
.episode-card:not(.episode-card-current) {
filter:brightness(.82) saturate(.85);
}
.timeline-section {
background:var(--bg2);
border:1px solid var(--line);
border-radius:3px;
padding:10px 12px;
}
.timeline-rail {
position:relative;
display:flex;
flex-direction:column;
gap:6px;
padding-left:16px;
}
.timeline-rail::before {
content:"";
position:absolute;
left:3px;
top:2px;
bottom:2px;
width:1px;
background:linear-gradient(180deg,var(--rust),#3a4a5c 60%,#222b35);
}
.timeline-item {
position:relative;
display:flex;
flex-direction:column;
gap:2px;
padding:5px 8px;
background:#10161c;
border:1px solid #1f2831;
border-left:2px solid #2c3742;
border-radius:2px;
}
.timeline-item::before {
content:"";
position:absolute;
left:-16px;
top:11px;
width:7px;
height:7px;
border-radius:50%;
background:#0d1014;
border:1px solid var(--steel-hi);
transform:translateX(0);
}
.timeline-item:hover {border-left-color:var(--rust);background:#131a21}
.timeline-item:hover::before {border-color:var(--rust-bright);background:var(--rust)}
.timeline-item.is-active {
border-left-color:var(--rust-bright);
background:#1a1310;
}
.timeline-item.is-active::before {
background:var(--rust-bright);
border-color:var(--rust-bright);
box-shadow:0 0 8px rgba(200,90,58,.7);
}
.timeline-code {
display:inline-block;
font-size:10px;
font-weight:700;
letter-spacing:.14em;
color:var(--rust-bright);
font-variant-numeric:tabular-nums;
padding:1px 5px;
background:#1d1512;
border:1px solid rgba(164,68,44,.4);
border-radius:2px;
align-self:flex-start;
}
.timeline-label {
font-size:12px;
font-weight:600;
color:#c6d1dc;
}
.comments-section {
background:var(--bg2);
border:1px solid var(--line);
border-radius:3px;
padding:10px 12px;
}
.comments-columns {
column-count:2;
column-gap:12px;
}
.comment-card {
break-inside:avoid;
display:flex;
gap:7px;
align-items:flex-start;
padding:6px 0;
border-bottom:1px dotted #222b34;
}
.comment-avatar {
flex:none;
display:flex;
align-items:center;
justify-content:center;
width:24px;
height:24px;
border-radius:50%;
background:linear-gradient(135deg,#3a4a5c,#1c242e);
border:1px solid #33404e;
font-size:11px;
font-weight:700;
color:#b6c4d2;
}
.comment-body {
display:flex;
flex-direction:column;
gap:2px;
min-width:0;
}
.comment-nickname {
font-size:11px;
font-weight:700;
color:#8fa6ba;
letter-spacing:.04em;
}
.comment-text {
font-size:11.5px;
line-height:1.5;
color:#9fabb7;
text-align:left;
}
.recommend-region {
background:var(--bg2);
border:1px solid var(--line);
border-radius:3px;
padding:10px 12px;
display:flex;
flex-direction:column;
min-width:0;
}
.page-main>.recommend-region {
width:100%;
}
.recommend-list {
display:grid;
grid-template-columns:repeat(auto-fill,minmax(112px,1fr));
gap:7px;
align-items:start;
}
a.recommend-item {
display:flex;
flex-direction:column;
gap:4px;
padding:5px;
background:#10161c;
border:1px solid #1f2831;
border-radius:2px;
color:#b8c4d0;
text-decoration:none;
min-width:0;
transition:.15s;
}
a.recommend-item:hover {
border-color:var(--rust);
background:#161d25;
color:#e6edf4;
}
[data-runtime="recommendation"] img {
width:100%;
height:auto;
aspect-ratio:16/9;
object-fit:cover;
background:#05070a;
border-radius:1px;
filter:saturate(.9) contrast(1.04);
}
.recommend-name {
font-size:11.5px;
font-weight:700;
color:#dbe4ed;
line-height:1.3;
overflow-wrap:anywhere;
}
.recommend-blurb {
font-size:10px;
line-height:1.45;
color:#6f7b87;
overflow-wrap:anywhere;
}
.page-main>.recommend-region {
display:flex;
}
@media(min-width:900px){.page-main {
display:grid;
grid-template-columns:minmax(0,1fr);
}
.page-main>.recommend-region {
grid-column:auto;
}}
@media(min-width:820px){.page-main {
grid-template-columns:repeat(3,minmax(0,1fr));
align-items:start;
}
.hero-shell, .cast-strip, .synopsis-block, .episode-status, .details-block, .episode-grid-section, .timeline-section, .comments-section {
grid-column:1/-1;
}
.page-main>.recommend-region {
grid-column:span 1;
}}
.site-footer {
max-width:1180px;
margin:0 auto;
padding:14px;
border-top:1px solid var(--line);
display:flex;
flex-direction:column;
gap:8px;
}
.footer-disclaimer {
font-size:10.5px;
line-height:1.55;
color:#5c666f;
}
.footer-nav {
display:flex;
gap:12px;
flex-wrap:wrap;
}
a[data-contract="footer-home"] {
font-size:11px;
color:#8fa6ba;
text-decoration:underline;
text-decoration-color:#3a4a5c;
}
a[data-contract="footer-home"]:hover {color:var(--rust-bright)}
a[data-contract="footer-sitemap"] {
font-size:11px;
color:#8fa6ba;
text-decoration:underline;
text-decoration-color:#3a4a5c;
}
a[data-contract="footer-sitemap"]:hover {color:var(--rust-bright)}
.friend-links {
display:flex;
flex-wrap:wrap;
gap:5px 10px;
align-items:center;
padding-top:6px;
border-top:1px dotted #222b34;
}
.friend-links-label {
font-size:10px;
letter-spacing:.2em;
color:#5c666f;
}
a.runtime-friend-link {
font-size:10.5px;
color:#7d8894;
text-decoration:none;
white-space:nowrap;
}
a.runtime-friend-link:hover {
color:var(--rust-bright);
text-decoration:underline;
}
@media(max-width:1024px){.episode-grid {grid-template-columns:repeat(3,minmax(0,1fr))}
.details-list {grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:820px){.hero-shell {grid-template-columns:minmax(0,1fr)}
.hero-poster-wrap {max-width:280px;margin:0 auto}
.cast-list {grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:640px){.page-main {padding:10px 10px 20px;gap:12px}
.hero-title {font-size:19px}
.clock-digits {font-size:19px}
.episode-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
.details-list {grid-template-columns:minmax(0,1fr)}
.comments-columns {column-count:1}
.cast-list {grid-template-columns:repeat(3,minmax(0,1fr))}
.recommend-list {grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
.site-header {flex-wrap:wrap}
.categories-strip {justify-content:flex-start}}
@media(max-width:420px){.cast-list {grid-template-columns:repeat(2,minmax(0,1fr))}
.episode-grid {grid-template-columns:minmax(0,1fr)}
.clock-overlay {position:static;align-self:flex-start}
.clock-overlay {align-items:flex-start}}
@media(prefers-reduced-motion:reduce){* {transition:none!important}}

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}