* {box-sizing:border-box;margin:0;padding:0}
:root {
--lead:#4a5461;
--lead-deep:#2c333d;
--ink:#161a20;
--indigo:#22303f;
--indigo-2:#1a2531;
--surgical:#eef2f5;
--surgical-2:#dde4ea;
--paper:#f6f8f9;
--orange:#e8793a;
--orange-soft:#f2a06a;
--line:#c3ccd4;
--line-soft:#dfe5ea;
--gap:14px;
}
html {-webkit-text-size-adjust:100%}
body {
font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Source Han Sans SC","Noto Sans CJK SC",system-ui,sans-serif;
background:
linear-gradient(160deg,var(--indigo-2) 0%,var(--indigo) 42%,#2f3d4c 100%);
color:var(--surgical);
font-size:14px;
line-height:1.42;
font-weight:400;
letter-spacing:.01em;
min-height:100vh;
}
img, video {display:block;max-width:100%}
a {color:inherit;text-decoration:none}
ul, ol {list-style:none}
button {font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1, h2, h3 {font-weight:900;line-height:1.15;letter-spacing:-.01em}
.site-header {
position:sticky;top:0;z-index:60;
background:rgba(20,26,33,.86);
border-bottom:1px solid rgba(195,204,212,.22);
backdrop-filter:blur(6px);
}
.header-bar {
max-width:1180px;margin:0 auto;
padding:6px 14px;
display:flex;align-items:center;justify-content:space-between;
gap:12px;
}
.site-logo {
font-size:15px;font-weight:900;
letter-spacing:.08em;
color:var(--surgical);
text-transform:uppercase;
padding:2px 0;
border-left:3px solid var(--orange);
padding-left:8px;
}
.category-strip {
display:flex;flex-wrap:wrap;gap:4px 6px;justify-content:flex-end;
}
.runtime-category {
display:inline-block;
font-size:12px;
line-height:1.3;
white-space:nowrap;
padding:3px 8px;
color:var(--surgical-2);
border:1px solid rgba(195,204,212,.35);
background:rgba(255,255,255,.04);
transition:color .18s,border-color .18s,background .18s;
}
.runtime-category:hover {color:var(--orange-soft);border-color:var(--orange);background:rgba(232,121,58,.12)}
.page-main {
max-width:1180px;
margin:0 auto;
padding:18px 14px 26px;
display:flex;
flex-direction:column;
gap:22px;
}
.section-heading {
font-size:16px;
font-weight:900;
letter-spacing:.06em;
color:var(--surgical);
padding-left:9px;
border-left:4px solid var(--orange);
margin-bottom:10px;
}
.hero-split {
display:grid;
grid-template-columns:minmax(0,0.86fr) minmax(0,2fr);
gap:16px;
align-items:start;
position:relative;
}
.hero-left {
position:relative;
display:grid;
grid-template-columns:auto minmax(0,1fr);
grid-template-rows:auto auto;
column-gap:10px;
row-gap:12px;
align-items:start;
background:linear-gradient(180deg,rgba(10,14,19,.55),rgba(10,14,19,.18));
border-left:1px solid rgba(195,204,212,.2);
padding:12px 12px 14px 10px;
}
.hero-vertical-tagline {
grid-column:1;
grid-row:1 / span 2;
writing-mode:vertical-rl;
text-orientation:mixed;
font-size:13px;
font-weight:700;
letter-spacing:.34em;
color:var(--surgical-2);
padding:2px 0;
border-left:1px solid rgba(232,121,58,.55);
padding-left:6px;
align-self:stretch;
}
.hero-title-block {grid-column:2;grid-row:1}
.hero-title {
font-size:clamp(26px,4.4vw,44px);
color:#fff;
letter-spacing:.02em;
text-shadow:0 2px 14px rgba(0,0,0,.5);
}
.hero-subtitle {
margin-top:6px;
font-size:12px;
color:var(--surgical-2);
letter-spacing:.06em;
}
.poster-media {
grid-column:2;grid-row:2;
position:relative;
overflow:hidden;
border:1px solid rgba(195,204,212,.28);
background:var(--indigo-2);
}
.poster-media img {
width:100%;height:auto;
object-fit:cover;
filter:saturate(.86) contrast(1.06);
}
.poster-media::after {
content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(115deg,rgba(238,242,245,.16) 0 1px,transparent 1px 100%) ,
repeating-linear-gradient(72deg,rgba(255,255,255,.05) 0 1px,transparent 1px 26px);
}
.hero-right {
display:flex;flex-direction:column;gap:8px;
position:relative;
padding:12px;
background:linear-gradient(180deg,rgba(12,17,23,.6),rgba(12,17,23,.24));
border:1px solid rgba(195,204,212,.2);
}
.player-shell {
position:relative;
width:100%;
overflow:hidden;
background:#05080c;
border:1px solid rgba(195,204,212,.3);
box-shadow:0 18px 40px -22px rgba(0,0,0,.9);
}
.player-shell.is-theater {
outline:2px solid var(--orange);
outline-offset:2px;
}
.player-shell.is-lights-off {
filter:brightness(.34) contrast(1.1);
}
.player-shell.is-lights-off .player-controls {filter:brightness(2.6)}
.player-shell video {
aspect-ratio:16 / 9;
width:100%;
display:block;
background:#05080c;
}
.player-controls {
display:flex;flex-wrap:wrap;gap:5px;
padding:7px 8px;
background:linear-gradient(180deg,rgba(8,12,17,.9),rgba(8,12,17,.72));
border-top:1px solid rgba(195,204,212,.22);
}
.pc-btn {
font-size:11.5px;
line-height:1.25;
padding:4px 8px;
color:var(--surgical-2);
border:1px solid rgba(195,204,212,.3);
background:rgba(255,255,255,.04);
white-space:nowrap;
transition:color .16s,border-color .16s,background .16s;
}
.pc-btn:hover {color:#fff;border-color:var(--surgical);background:rgba(238,242,245,.14)}
.pc-btn.play, .pc-btn.click {color:var(--orange-soft);border-color:var(--orange)}
.pc-btn.mute, .pc-btn.volumechange {color:#fff}
.pc-btn.fullscreen, .pc-btn.pip, .pc-btn.speed, .pc-btn.theater, .pc-btn.light, .pc-btn.progress, .pc-btn.volume {color:var(--surgical-2)}
.hero-note {
font-size:12px;
letter-spacing:.08em;
color:var(--orange-soft);
font-weight:700;
padding-top:2px;
border-top:1px dashed rgba(232,121,58,.4);
}
.synopsis-panel {
background:rgba(238,242,245,.05);
border:1px solid rgba(195,204,212,.18);
padding:12px 14px 14px;
}
.synopsis-body {
columns:2;
column-gap:22px;
column-rule:1px solid rgba(195,204,212,.18);
}
.synopsis-para {
font-size:13px;
line-height:1.55;
color:#dbe2e8;
margin:0 0 8px;
break-inside:avoid;
}
.synopsis-para:last-child {margin-bottom:0}
.status-panel {
display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
background:linear-gradient(90deg,rgba(232,121,58,.14),rgba(232,121,58,0) 62%);
border-left:3px solid var(--orange);
padding:8px 14px;
}
.status-panel .section-heading {margin-bottom:0;border-left:0;padding-left:0;font-size:14px}
.status-line {
display:flex;align-items:baseline;gap:8px;
font-size:13px;letter-spacing:.05em;
}
.status-current {color:var(--orange);font-weight:900;font-size:15px}
.status-sep {color:rgba(195,204,212,.5)}
.status-total {color:var(--surgical-2);font-weight:700}
.detail-panel {
background:rgba(238,242,245,.04);
border:1px solid rgba(195,204,212,.18);
padding:12px 14px 14px;
}
.detail-grid {
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:1px;
background:rgba(195,204,212,.2);
border:1px solid rgba(195,204,212,.2);
}
.detail-cell {
display:flex;flex-direction:column;gap:3px;
padding:7px 9px;
background:#1b242e;
min-width:0;
}
.detail-key {
font-size:10.5px;
letter-spacing:.12em;
color:#8e9aa6;
text-transform:uppercase;
}
.detail-value {
font-size:13px;
font-weight:700;
color:#eef2f5;
line-height:1.28;
word-break:break-word;
}
.detail-cell--score {
background:linear-gradient(180deg,rgba(232,121,58,.22),rgba(232,121,58,.08));
}
.detail-cell--score .detail-value {
color:var(--orange);
font-size:19px;
font-weight:900;
letter-spacing:.02em;
}
.detail-cell--score .detail-key {color:var(--orange-soft)}
.cast-panel {
background:rgba(238,242,245,.04);
border:1px solid rgba(195,204,212,.18);
padding:12px 14px 14px;
}
.cast-grid {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:8px;
}
.cast-card {
display:grid;
grid-template-columns:auto minmax(0,1fr);
grid-template-rows:auto auto;
column-gap:9px;
row-gap:1px;
align-items:center;
padding:7px 9px;
background:rgba(255,255,255,.045);
border:1px solid rgba(195,204,212,.16);
}
.cast-avatar {
grid-row:1 / span 2;
width:40px;height:40px;
border-radius:50%;
background:
radial-gradient(circle at 32% 28%,#e9eef2 0 18%,#9aa7b4 18% 46%,#4d5866 46% 100%);
border:1px solid rgba(238,242,245,.4);
box-shadow:inset 0 0 0 2px rgba(10,14,19,.5);
}
.cast-name {
font-size:13px;font-weight:900;color:#fff;
letter-spacing:.03em;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cast-role {
font-size:11px;color:#93a0ad;letter-spacing:.04em;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.timeline-panel {
background:rgba(238,242,245,.04);
border:1px solid rgba(195,204,212,.18);
padding:12px 14px 14px;
}
.timeline-list {
position:relative;
padding-left:20px;
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:2px 24px;
}
.timeline-list::before {
content:"";position:absolute;left:5px;top:5px;bottom:5px;width:1px;
background:linear-gradient(180deg,rgba(232,121,58,.7),rgba(195,204,212,.3));
}
.timeline-node {
position:relative;
display:grid;
grid-template-columns:minmax(0,1fr) auto;
align-items:baseline;
gap:10px;
padding:5px 0;
border-bottom:1px dashed rgba(195,204,212,.15);
}
.timeline-dot {
position:absolute;
left:-19px;top:9px;
width:9px;height:9px;
border-radius:50%;
background:var(--indigo);
border:1px solid var(--orange-soft);
box-shadow:0 0 0 2px rgba(26,37,49,.9);
}
.timeline-label {
font-size:12.5px;
line-height:1.4;
color:#dae1e7;
min-width:0;
}
.timeline-time {
font-size:11.5px;
font-weight:700;
letter-spacing:.06em;
color:var(--orange-soft);
text-align:right;
white-space:nowrap;
font-variant-numeric:tabular-nums;
}
.dual-column {
display:grid;
grid-template-columns:minmax(0,1fr);
gap:16px;
align-items:start;
}
.episodes-panel, .comments-panel {
background:rgba(238,242,245,.04);
border:1px solid rgba(195,204,212,.18);
padding:12px 14px 14px;
}
.episode-list {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:6px;
}
.episode-item {
display:grid;
grid-template-columns:auto minmax(0,1fr) auto;
grid-template-rows:auto auto;
column-gap:8px;
row-gap:2px;
align-items:baseline;
padding:7px 9px;
border:1px solid rgba(195,204,212,.15);
background:rgba(255,255,255,.035);
}
.episode-number {
font-size:11px;
font-weight:900;
letter-spacing:.06em;
color:#93a0ad;
grid-row:1;
}
.episode-title {
font-size:13.5px;
font-weight:900;
color:#fff;
grid-row:1;
letter-spacing:.03em;
}
.episode-duration {
font-size:11px;
color:#8e9aa6;
grid-row:1;
text-align:right;
white-space:nowrap;
}
.episode-summary {
grid-column:2 / span 2;
grid-row:2;
font-size:11.5px;
line-height:1.4;
color:#b7c1ca;
}
.episode-item--active {
background:linear-gradient(90deg,rgba(232,121,58,.2),rgba(232,121,58,.04));
border-color:var(--orange);
}
.episode-item--active .episode-title {color:var(--orange-soft)}
.episode-item--active .episode-number {color:var(--orange)}
.comment-stack {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:8px;
align-items:start;
}
.comment-card {
padding:8px 10px;
background:rgba(255,255,255,.05);
border:1px solid rgba(195,204,212,.16);
border-left:3px solid rgba(195,204,212,.35);
}
.comment-card--narrow {
grid-column:span 1;
background:rgba(255,255,255,.03);
border-left-color:rgba(195,204,212,.3);
}
.comment-card--wide {
grid-column:span 1;
background:rgba(238,242,245,.08);
border-left-color:var(--orange);
}
.comment-nickname {
font-size:11.5px;
font-weight:900;
letter-spacing:.06em;
color:#fff;
margin-bottom:4px;
}
.comment-card--wide .comment-nickname {color:var(--orange-soft)}
.comment-text {
font-size:12px;
line-height:1.5;
color:#c8d1d9;
}
.rec-region {
background:rgba(238,242,245,.04);
border:1px solid rgba(195,204,212,.18);
padding:11px 12px 12px;
}
.rec-region + .rec-region {margin-top:16px}
.rec-title {
font-size:13px;
font-weight:900;
letter-spacing:.06em;
color:#eef2f5;
padding-bottom:6px;
margin-bottom:8px;
border-bottom:1px solid rgba(195,204,212,.22);
}
.rec-list {
display:grid;
grid-template-columns:repeat(6,minmax(0,1fr));
gap:8px;
align-items:start;
}
.rec-region--2 .rec-list {grid-template-columns:repeat(4,minmax(0,1fr))}
.rec-region--3 .rec-list {grid-template-columns:repeat(3,minmax(0,1fr))}
.rec-region--4 .rec-list {grid-template-columns:repeat(3,minmax(0,1fr))}
.rec-item {min-width:0}
a[data-runtime="recommendation"] {
display:flex;flex-direction:column;gap:4px;
font-size:11.5px;
color:#dbe2e8;
text-decoration:none;
padding:5px;
border:1px solid rgba(195,204,212,.14);
background:rgba(255,255,255,.035);
transition:border-color .16s,background .16s,color .16s;
}
a[data-runtime="recommendation"] img {
width:100%;
aspect-ratio:2 / 3;
height:auto;
object-fit:cover;
background:var(--indigo-2);
filter:saturate(.9);
}
a[data-runtime="recommendation"] [data-runtime="name"] {
font-weight:900;
color:#fff;
font-size:12px;
line-height:1.28;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
a[data-runtime="recommendation"] [data-runtime="blurb"] {
font-size:11px;
line-height:1.36;
color:#98a4b0;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
a[data-runtime="recommendation"]:hover {
border-color:var(--orange);
background:rgba(232,121,58,.1);
color:var(--orange-soft);
}
a[data-runtime="recommendation"]:hover [data-runtime="name"] {color:var(--orange-soft)}
.site-footer {
max-width:1180px;
margin:0 auto;
padding:16px 14px 30px;
border-top:1px solid rgba(195,204,212,.2);
display:flex;flex-direction:column;gap:10px;
}
.footer-disclaimer {
font-size:11.5px;
line-height:1.55;
color:#8b97a3;
max-width:820px;
}
.footer-links {
display:flex;flex-wrap:wrap;gap:6px 14px;
}
.footer-link {
font-size:12px;font-weight:700;
color:var(--surgical-2);
text-decoration:underline;
text-decoration-color:rgba(195,204,212,.4);
text-underline-offset:3px;
}
.footer-link:hover {color:var(--orange-soft);text-decoration-color:var(--orange)}
.friend-links {
display:flex;flex-wrap:wrap;align-items:center;gap:5px 10px;
padding-top:8px;
border-top:1px dashed rgba(195,204,212,.16);
}
.friend-links-label {
font-size:11px;font-weight:900;letter-spacing:.14em;
color:#8e9aa6;
white-space:nowrap;
}
.runtime-friend-link {
font-size:11.5px;
color:#aab5bf;
text-decoration:none;
padding:2px 6px;
border:1px solid rgba(195,204,212,.16);
white-space:nowrap;
transition:color .16s,border-color .16s;
}
.runtime-friend-link:hover {color:var(--orange-soft);border-color:var(--orange)}
.click, .play, .progress, .speed, .volume, .volumechange, .mute, .pip, .fullscreen, .theater, .light, .player {
transition:opacity .16s,color .16s,background .16s;
}
.player:focus-visible, .pc-btn:focus-visible, a[data-runtime="recommendation"]:focus-visible, .runtime-category:focus-visible, .footer-link:focus-visible, .runtime-friend-link:focus-visible {outline:2px solid var(--orange);outline-offset:2px}
@media(max-width:1000px){.detail-grid {grid-template-columns:repeat(3,minmax(0,1fr))}
.rec-list {grid-template-columns:repeat(3,minmax(0,1fr))}
.rec-region--2 .rec-list {grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:860px){.page-main {gap:18px}
.hero-split {grid-template-columns:minmax(0,1fr)}
.hero-left {
grid-template-columns:minmax(0,1fr);
grid-template-rows:auto auto auto;
}
.hero-vertical-tagline {
grid-column:1;grid-row:1;
writing-mode:horizontal-tb;
letter-spacing:.22em;
border-left:0;border-bottom:1px solid rgba(232,121,58,.5);
padding:0 0 6px;
}
.hero-title-block {grid-column:1;grid-row:2}
.poster-media {grid-column:1;grid-row:3;max-width:280px}
.synopsis-body {columns:1;column-rule:0}
.dual-column {grid-template-columns:minmax(0,1fr)}
.episode-list {grid-template-columns:minmax(0,1fr)}
.comment-stack {grid-template-columns:minmax(0,1fr)}
.timeline-list {grid-template-columns:minmax(0,1fr)}
.rec-list, .rec-region--2 .rec-list, .rec-region--3 .rec-list, .rec-region--4 .rec-list {
grid-template-columns:repeat(3,minmax(0,1fr));
}}
@media(max-width:640px){body {font-size:13.5px}
.header-bar {padding:6px 10px}
.page-main {padding:14px 10px 22px;gap:16px}
.detail-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
.cast-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
.rec-list, .rec-region--2 .rec-list, .rec-region--3 .rec-list, .rec-region--4 .rec-list {
grid-template-columns:repeat(2,minmax(0,1fr));
}
.hero-vertical-tagline {font-size:12px;letter-spacing:.18em}
.player-controls {gap:4px;padding:6px}
.pc-btn {font-size:11px;padding:3px 6px}
.timeline-list {padding-left:18px}}
@media(max-width:420px){.detail-grid {grid-template-columns:minmax(0,1fr)}
.cast-grid {grid-template-columns:minmax(0,1fr)}
.rec-list, .rec-region--2 .rec-list, .rec-region--3 .rec-list, .rec-region--4 .rec-list {
grid-template-columns:repeat(2,minmax(0,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}