* {margin:0;padding:0;box-sizing:border-box}
:root {
--void:#0b0d10;
--void-2:#12151a;
--panel:#171b21;
--panel-2:#1d222a;
--rust:#8a4b2f;
--rust-lit:#b3603a;
--ash:#8d9198;
--ash-dim:#5d636b;
--bone:#d8d3c8;
--warm:#e8b464;
--warm-glow:rgba(232,180,100,.16);
--cold:#3f5c78;
--line:rgba(141,145,152,.18);
--line-warm:rgba(232,180,100,.22);
--r-lg:18px;
--r-md:12px;
--r-sm:8px;
--serif:"Songti SC","STSong","Noto Serif SC",Georgia,"Times New Roman",serif;
--sans:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;
}
html {-webkit-text-size-adjust:100%}
body {
background:
radial-gradient(1200px 700px at 12% -8%,rgba(63,92,120,.20),transparent 62%),
radial-gradient(900px 600px at 100% 8%,rgba(138,75,47,.14),transparent 60%),
linear-gradient(#0b0d10,#0e1116 40%,#0b0d10);
color:var(--bone);
font-family:var(--serif);
font-size:15px;
line-height:1.62;
letter-spacing:.01em;
min-height:100vh;
overflow-x:hidden;
}
img, video {display:block;max-width:100%}
ul, ol {list-style:none}
a {color:inherit;text-decoration:none}
button {font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input[type="range"] {font:inherit}
h1, h2, h3 {font-weight:600;line-height:1.28;letter-spacing:.02em}
::selection {background:var(--warm-glow);color:#fff}
:focus-visible {outline:1px solid var(--warm);outline-offset:2px}
.site-header {
position:sticky;top:0;z-index:60;
background:linear-gradient(rgba(11,13,16,.96),rgba(11,13,16,.82));
border-bottom:1px solid var(--line);
backdrop-filter:blur(8px);
}
.header-inner {
display:flex;align-items:center;gap:14px;
max-width:1280px;margin:0 auto;
padding:10px 18px;
}
.brand-mark {
font-size:19px;font-weight:700;letter-spacing:.14em;
color:var(--warm);
text-shadow:0 0 18px var(--warm-glow);
white-space:nowrap;
}
.brand-mark::before {
content:"";display:inline-block;vertical-align:middle;
width:7px;height:7px;margin-right:9px;border-radius:2px;
background:var(--rust-lit);
box-shadow:0 0 10px rgba(179,96,58,.7);
}
a[data-contract="site-name"] {color:var(--warm);text-decoration:none}
a[data-contract="site-name"]:hover {color:#f6cd8d;text-decoration:none}
.category-nav {
display:flex;flex-wrap:wrap;align-items:center;gap:6px;
flex:1 1 auto;min-width:0;
}
a.runtime-category {
display:inline-block;
padding:4px 11px;
border:1px solid var(--line-warm);
border-radius:999px;
font-family:var(--sans);font-size:12px;letter-spacing:.08em;
color:var(--ash);
white-space:nowrap;
background:rgba(232,180,100,.05);
text-decoration:none;
transition:color .18s,border-color .18s,background .18s;
}
a.runtime-category:hover {color:var(--warm);border-color:var(--warm);background:rgba(232,180,100,.12);text-decoration:none}
.page-main {
max-width:1280px;margin:0 auto;
padding:18px 18px 10px;
display:flex;flex-direction:column;gap:22px;
}
.section-heading {
font-size:17px;letter-spacing:.14em;color:var(--bone);
padding-left:12px;border-left:3px solid var(--rust-lit);
margin-bottom:12px;
}
.section-heading::after {
content:"";display:block;height:1px;margin-top:8px;
background:linear-gradient(90deg,var(--line-warm),transparent 72%);
}
.hero-panel {
display:grid;
grid-template-columns:minmax(0,0.82fr) minmax(0,1.18fr);
gap:22px;align-items:start;
padding:16px;
border:1px solid var(--line);
border-radius:var(--r-lg);
background:
linear-gradient(180deg,rgba(23,27,33,.94),rgba(16,19,24,.96)),
radial-gradient(700px 420px at 8% 0,rgba(63,92,120,.22),transparent 68%),
radial-gradient(500px 380px at 100% 100%,rgba(138,75,47,.16),transparent 70%);
box-shadow:0 22px 60px -32px #000 inset,0 18px 50px -30px #000;
position:relative;
overflow:hidden;
}
.hero-panel::before {
content:"";position:absolute;inset:auto 0 0 0;height:190px;pointer-events:none;
background:
repeating-linear-gradient(90deg,rgba(0,0,0,.42) 0 3px,transparent 3px 22px),
repeating-linear-gradient(90deg,rgba(0,0,0,.26) 0 2px,transparent 2px 14px),
linear-gradient(180deg,transparent,rgba(0,0,0,.72));
mask-image:linear-gradient(180deg,transparent,#000 78%);
opacity:.55;
}
.hero-visual {
display:flex;flex-direction:column;gap:12px;
position:relative;z-index:1;min-width:0;
}
.poster-frame {
position:relative;
border-radius:var(--r-md);
overflow:hidden;
border:1px solid rgba(232,180,100,.28);
box-shadow:0 0 0 1px rgba(0,0,0,.6),0 24px 50px -26px #000,0 0 40px -18px rgba(232,180,100,.28);
background:#0a0c0f;
}
.poster-frame::after {
content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(200deg,rgba(63,92,120,.22),transparent 46%,rgba(11,13,16,.55));
mix-blend-mode:multiply;
}
.poster-frame img {
width:100%;height:auto;object-fit:cover;
filter:saturate(.72) contrast(1.06) brightness(.94);
}
.hero-player {
position:relative;min-width:0;
border-radius:var(--r-md);
overflow:hidden;
border:1px solid var(--line);
background:#05070a;
box-shadow:0 18px 44px -26px #000;
}
.hero-player video {
display:block;width:100%;height:auto;
background:#05070a;
}
.player-controls {
display:flex;flex-wrap:wrap;align-items:center;gap:6px;
padding:8px 9px;
background:linear-gradient(180deg,rgba(23,27,33,.96),rgba(11,13,16,.98));
border-top:1px solid var(--line);
}
.ctrl-btn {
font-family:var(--sans);font-size:12px;letter-spacing:.06em;
padding:5px 10px;
border:1px solid var(--line);
border-radius:var(--r-sm);
color:var(--ash);
background:rgba(255,255,255,.02);
white-space:nowrap;
transition:color .16s,border-color .16s,background .16s,box-shadow .16s;
}
.ctrl-btn:hover {color:var(--warm);border-color:var(--line-warm);background:rgba(232,180,100,.08)}
.ctrl-btn.is-muted, .ctrl-btn.is-active {
color:#0b0d10;background:var(--warm);border-color:var(--warm);
box-shadow:0 0 16px var(--warm-glow);
}
.ctrl-range {
-webkit-appearance:none;appearance:none;
height:4px;border-radius:999px;
background:linear-gradient(90deg,var(--rust-lit),rgba(141,145,152,.28));
outline:none;
}
.ctrl-range[data-player-action="progress"] {flex:1 1 150px;min-width:96px}
.ctrl-range[data-player-action="volume"] {flex:0 1 82px;min-width:64px}
.ctrl-range::-webkit-slider-thumb {
-webkit-appearance:none;appearance:none;
width:13px;height:13px;border-radius:50%;
background:var(--warm);
border:2px solid #0b0d10;
box-shadow:0 0 12px var(--warm-glow);
cursor:pointer;
}
.ctrl-range::-moz-range-thumb {
width:13px;height:13px;border-radius:50%;
background:var(--warm);border:2px solid #0b0d10;
box-shadow:0 0 12px var(--warm-glow);cursor:pointer;
}
.hero-player.is-lights-off {box-shadow:0 0 0 1px var(--warm),0 0 70px -8px rgba(232,180,100,.35)}
.hero-player.is-playing {border-color:var(--line-warm)}
.hero-info {
display:flex;flex-direction:column;gap:14px;
position:relative;z-index:1;min-width:0;
}
.movie-title {
font-size:clamp(26px,3.6vw,40px);
letter-spacing:.06em;
color:#f2ece0;
text-shadow:0 0 30px rgba(232,180,100,.18),0 2px 0 rgba(0,0,0,.5);
}
.movie-tagline {
font-size:14px;color:var(--ash);
padding-left:12px;
border-left:2px solid var(--rust);
letter-spacing:.04em;
}
.cast-strip {display:flex;flex-direction:column;gap:8px}
.cast-heading {
font-size:12px;font-family:var(--sans);letter-spacing:.24em;
color:var(--ash-dim);text-transform:uppercase;
}
.cast-list {
display:flex;flex-wrap:wrap;gap:6px;
}
.cast-chip {
display:inline-flex;align-items:center;gap:8px;
padding:4px 12px 4px 4px;
border:1px solid var(--line);
border-radius:999px;
background:linear-gradient(180deg,rgba(29,34,42,.9),rgba(17,20,25,.9));
transition:border-color .18s,box-shadow .18s,transform .18s;
}
.cast-chip:hover {border-color:var(--line-warm);box-shadow:0 0 18px -6px var(--warm-glow);transform:translateY(-1px)}
.cast-avatar {
width:26px;height:26px;border-radius:50%;
flex:0 0 auto;
background:
radial-gradient(circle at 50% 34%,rgba(255,255,255,.34),transparent 42%),
linear-gradient(160deg,#7f858e,#3a4048 55%,#22262c);
filter:grayscale(1) contrast(1.12);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 0 12px -4px var(--warm-glow);
position:relative;
}
.cast-avatar::after {
content:"";position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);
width:5px;height:5px;border-radius:50%;
background:#f6e6c2;
box-shadow:0 0 8px rgba(246,230,194,.9);
}
.cast-name {
font-family:var(--sans);font-size:12.5px;letter-spacing:.04em;
color:var(--bone);white-space:nowrap;
}
.synopsis-block {display:flex;flex-direction:column;gap:7px}
.synopsis-heading {
font-size:12px;font-family:var(--sans);letter-spacing:.24em;
color:var(--ash-dim);text-transform:uppercase;
}
.synopsis-para {
font-size:13.5px;color:#b9b6ae;
border-left:1px solid rgba(141,145,152,.16);
padding-left:10px;
}
.synopsis-para:first-of-type {color:#cec9bd}
.episode-status {
display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;
padding:9px 12px;
border:1px solid var(--line-warm);
border-radius:var(--r-md);
background:linear-gradient(180deg,rgba(232,180,100,.08),rgba(232,180,100,.02));
}
.status-label {
font-family:var(--sans);font-size:11.5px;letter-spacing:.16em;
color:var(--ash-dim);
}
.status-value {
font-size:14px;color:var(--warm);
letter-spacing:.05em;
text-shadow:0 0 14px var(--warm-glow);
}
.status-label+.status-value {margin-right:6px}
.detail-block {display:flex;flex-direction:column;gap:8px}
.detail-heading {
font-size:12px;font-family:var(--sans);letter-spacing:.24em;
color:var(--ash-dim);text-transform:uppercase;
}
.detail-list {
display:grid;
grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
gap:5px 14px;
}
.detail-row {
display:flex;align-items:baseline;gap:8px;
padding-bottom:5px;
border-bottom:1px dashed rgba(141,145,152,.14);
min-width:0;
}
.detail-key {
font-family:var(--sans);font-size:11.5px;letter-spacing:.1em;
color:var(--ash-dim);white-space:nowrap;flex:0 0 auto;
}
.detail-value {
font-size:13px;color:#c8c4ba;min-width:0;
overflow-wrap:anywhere;
}
.timeline-section {
padding:14px 16px 16px;
border:1px solid var(--line);
border-radius:var(--r-lg);
background:linear-gradient(180deg,rgba(20,24,29,.9),rgba(13,16,20,.92));
}
.timeline-list {
display:grid;
grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
gap:2px 20px;
position:relative;
}
.timeline-node {
display:grid;
grid-template-columns:auto auto minmax(0,1fr);
align-items:center;
gap:8px;
padding:7px 6px 7px 0;
border-bottom:1px solid rgba(141,145,152,.1);
min-width:0;
}
.timeline-node:last-child {border-bottom-color:transparent}
.timeline-dot {
width:9px;height:9px;border-radius:50%;
background:radial-gradient(circle at 34% 32%,#c97a4e,#6d3419 70%);
box-shadow:0 0 0 3px rgba(138,75,47,.16),0 0 12px -2px rgba(201,122,78,.7);
flex:0 0 auto;
}
.timeline-timecode {
font-family:var(--sans);font-size:11.5px;letter-spacing:.12em;
color:var(--rust-lit);white-space:nowrap;
}
.timeline-label {
font-size:13.5px;color:#c2beb4;min-width:0;
overflow-wrap:anywhere;
}
.episodes-section {
padding:14px 16px 16px;
border:1px solid var(--line);
border-radius:var(--r-lg);
background:linear-gradient(180deg,rgba(18,21,26,.9),rgba(12,15,19,.94));
}
.episode-grid {
display:grid;
grid-template-columns:repeat(auto-fill,minmax(215px,1fr));
gap:8px;
align-items:start;
}
.episode-card {
display:flex;flex-direction:column;gap:3px;
padding:9px 11px 10px;
border:1px solid var(--line);
border-radius:var(--r-md);
background:linear-gradient(180deg,rgba(29,34,42,.72),rgba(17,20,25,.86));
transition:border-color .18s,box-shadow .18s,background .18s;
position:relative;
overflow:hidden;
}
.episode-card::before {
content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
background:linear-gradient(180deg,var(--rust-lit),transparent 82%);
opacity:.6;
}
.episode-card:hover {
border-color:var(--line-warm);
box-shadow:0 0 26px -12px var(--warm-glow),0 12px 30px -22px #000;
background:linear-gradient(180deg,rgba(35,40,49,.8),rgba(19,22,27,.9));
}
.episode-number {
font-family:var(--sans);font-size:11px;letter-spacing:.16em;
color:var(--warm);
text-shadow:0 0 12px var(--warm-glow);
}
.episode-title {
font-size:15px;letter-spacing:.03em;color:#e6e1d6;
}
.episode-summary {
font-size:12.5px;line-height:1.5;color:#9a978f;
overflow-wrap:anywhere;
}
.episode-duration {
margin-top:4px;
font-family:var(--sans);font-size:11px;letter-spacing:.1em;
color:var(--ash-dim);
}
.comments-section {
padding:14px 16px 16px;
border:1px solid var(--line);
border-radius:var(--r-lg);
background:linear-gradient(180deg,rgba(18,21,26,.9),rgba(12,15,19,.94));
}
.comments-columns {
display:grid;
grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
gap:16px;
align-items:start;
}
.comments-short-col, .comments-long-col {
display:flex;flex-direction:column;gap:7px;
min-width:0;
}
.comments-subheading {
font-size:12px;font-family:var(--sans);letter-spacing:.22em;
color:var(--ash-dim);text-transform:uppercase;
padding-bottom:6px;
border-bottom:1px solid var(--line);
}
.comment-short-list {
display:flex;flex-direction:column;gap:6px;
}
.comment-short-item {
display:flex;flex-direction:column;gap:2px;
padding:7px 10px;
border-left:2px solid rgba(138,75,47,.55);
border-radius:0 var(--r-sm) var(--r-sm) 0;
background:linear-gradient(90deg,rgba(29,34,42,.6),rgba(29,34,42,.12));
}
.comment-long-item {
display:flex;flex-direction:column;gap:4px;
padding:10px 12px;
border:1px solid var(--line);
border-radius:var(--r-md);
background:linear-gradient(180deg,rgba(29,34,42,.7),rgba(16,19,24,.8));
}
.comment-long-item .comment-text {font-size:13.5px;color:#bcb8af}
.comment-nickname {
font-family:var(--sans);font-size:11.5px;letter-spacing:.1em;
color:var(--warm);
}
.comment-text {
font-size:12.5px;line-height:1.58;color:#a7a49c;
overflow-wrap:anywhere;
}
.comment-short-item .comment-text {font-size:12.5px}
.comment-long-item:nth-child(3) .comment-text {font-size:14px;color:#cbc6bb}
.recommend-region {
padding:14px 16px 16px;
border:1px solid var(--line);
border-radius:var(--r-lg);
background:linear-gradient(180deg,rgba(18,21,26,.9),rgba(12,15,19,.94));
}
.recommend-title {
font-size:15px;letter-spacing:.08em;color:#ded9cf;
margin-bottom:11px;
padding-left:11px;
border-left:3px solid var(--rust-lit);
}
.recommend-grid {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:9px;
align-items:start;
}
.recommend-card {
display:flex;flex-direction:column;gap:6px;
padding:8px;
border:1px solid var(--line);
border-radius:var(--r-md);
background:linear-gradient(180deg,rgba(29,34,42,.66),rgba(16,19,24,.82));
color:inherit;
text-decoration:none;
transition:border-color .18s,box-shadow .18s,transform .18s,background .18s;
min-width:0;
}
.recommend-card:hover {
border-color:var(--line-warm);
box-shadow:0 0 26px -12px var(--warm-glow),0 14px 32px -24px #000;
transform:translateY(-2px);
background:linear-gradient(180deg,rgba(35,40,49,.78),rgba(19,22,27,.9));
}
.recommend-card img {
width:100%;
aspect-ratio:16 / 10;
height:auto;
object-fit:cover;
border-radius:var(--r-sm);
background:#0a0c0f;
filter:saturate(.8) contrast(1.04) brightness(.94);
transition:filter .2s;
}
.recommend-card:hover img {filter:saturate(.98) contrast(1.06) brightness(1.02)}
.recommend-card [data-runtime="name"] {
font-size:13.5px;color:#e2ddd2;letter-spacing:.03em;
overflow-wrap:anywhere;
}
.recommend-card [data-runtime="blurb"] {
font-size:11.5px;line-height:1.5;color:#8f8c85;
overflow-wrap:anywhere;
}
.closing-slogan {
text-align:center;
font-size:clamp(15px,2.2vw,20px);
letter-spacing:.12em;
color:var(--warm);
padding:20px 16px;
margin:0 auto;
max-width:760px;
text-shadow:0 0 34px var(--warm-glow);
position:relative;
}
.closing-slogan::before, .closing-slogan::after {
content:"";display:block;height:1px;margin:0 auto 14px;
width:min(360px,72%);
background:linear-gradient(90deg,transparent,var(--line-warm),transparent);
}
.closing-slogan::after {margin:14px auto 0}
.site-footer {
max-width:1280px;margin:0 auto;
padding:16px 18px 34px;
border-top:1px solid var(--line);
display:flex;flex-direction:column;gap:12px;
}
.footer-disclaimer {
font-size:12px;line-height:1.66;color:var(--ash-dim);
max-width:820px;
}
.footer-nav {
display:flex;flex-wrap:wrap;gap:8px 18px;
}
.footer-nav a {
font-family:var(--sans);font-size:12.5px;letter-spacing:.1em;
color:var(--ash);
text-decoration:none;
transition:color .16s;
}
.footer-nav a:hover {color:var(--warm)}
a[data-contract="footer-home"] {color:var(--ash);text-decoration:none}
a[data-contract="footer-home"]:hover {color:var(--warm);text-decoration:none}
a[data-contract="footer-sitemap"] {color:var(--ash);text-decoration:none}
a[data-contract="footer-sitemap"]:hover {color:var(--warm);text-decoration:none}
.friend-links {
display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;
padding-top:11px;
border-top:1px dashed rgba(141,145,152,.14);
}
.friend-links-label {
font-family:var(--sans);font-size:11.5px;letter-spacing:.18em;
color:var(--ash-dim);
margin-right:2px;
}
a.runtime-friend-link {
font-family:var(--sans);font-size:12px;letter-spacing:.04em;
color:#7f848c;
text-decoration:none;
padding:2px 8px;
border:1px solid rgba(141,145,152,.14);
border-radius:999px;
white-space:nowrap;
transition:color .16s,border-color .16s,background .16s;
}
a.runtime-friend-link:hover {color:var(--warm);border-color:var(--line-warm);background:rgba(232,180,100,.07);text-decoration:none}
.player.is-playing, .play.is-active {color:var(--warm)}
.pause.is-active, .player.is-playing .play {color:var(--warm)}
.mute.is-muted, .volume.is-muted {color:var(--warm)}
.progress.is-active, .timeupdate.is-active {color:var(--warm)}
.speed.is-active, .theater.is-active, .light.is-active {color:var(--warm)}
.fullscreen.is-active, .pip.is-active {color:var(--warm)}
.input.is-active, .x.is-active {color:var(--warm)}
@media (max-width:1080px){.hero-panel {grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr);gap:18px}
.recommend-grid {grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:880px){.hero-panel {grid-template-columns:minmax(0,1fr);gap:16px}
.hero-visual {flex-direction:row;align-items:flex-start;gap:12px}
.poster-frame {flex:0 0 34%;max-width:220px}
.hero-player {flex:1 1 auto}
.comments-columns {grid-template-columns:minmax(0,1fr);gap:14px}
.recommend-grid {grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:720px){.page-main {padding:14px 12px 8px;gap:16px}
.header-inner {padding:9px 12px;gap:10px}
.brand-mark {font-size:17px}
.hero-panel {padding:12px}
.section-heading {font-size:16px}
.episode-grid {grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.timeline-list {grid-template-columns:minmax(0,1fr)}
.detail-list {grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}}
@media (max-width:560px){.hero-visual {flex-direction:column}
.poster-frame {flex:0 0 auto;max-width:210px;width:100%;align-self:center}
.hero-player {width:100%}
.movie-title {font-size:24px}
.movie-tagline {font-size:13px}
.episode-grid {grid-template-columns:minmax(0,1fr)}
.recommend-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.recommend-card [data-runtime="blurb"] {display:block}
.cast-list {gap:5px}
.cast-chip {padding:3px 10px 3px 3px}
.cast-avatar {width:23px;height:23px}
.closing-slogan {font-size:14.5px;padding:16px 10px;letter-spacing:.08em}
.player-controls {gap:5px;padding:7px}
.ctrl-btn {padding:4px 8px;font-size:11.5px}
.ctrl-range[data-player-action="progress"] {flex:1 1 100%}
.ctrl-range[data-player-action="volume"] {flex:1 1 70px}}
@media (max-width:400px){.recommend-grid {grid-template-columns:minmax(0,1fr)}
.detail-list {grid-template-columns:minmax(0,1fr)}}
@media (hover:none){.recommend-card:hover, .cast-chip:hover, .episode-card:hover {transform:none}}

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}