*, *::before, *::after {box-sizing:border-box}
html {-webkit-text-size-adjust:100%}
body, h1, h2, p, dl, dd, dt, ol, ul {margin:0;padding:0}
ol, ul {list-style:none}
img {display:block;max-width:100%}
a {color:inherit;text-decoration:none}
button, input, select {font:inherit;color:inherit}
:root {
--pine:#0e2a24;
--pine-deep:#071713;
--pine-mid:#143a31;
--ice:#8fc3d1;
--ice-bright:#cde9f0;
--ice-dim:#5b8b98;
--ember:#e8743a;
--ember-soft:#f0a06a;
--snow:#e6efe9;
--frost:#a9c4bb;
--ink:#05110e;
--serif:"Songti SC","STSong","Noto Serif SC",Georgia,"Times New Roman",serif;
--sans:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",sans-serif;
--gap:14px;
}
html, body {background:var(--pine-deep)}
body {
font-family:var(--sans);
color:var(--snow);
line-height:1.5;
font-size:15px;
letter-spacing:.01em;
background-image:
radial-gradient(120% 60% at 50% -10%,rgba(143,195,209,.16),transparent 60%),
linear-gradient(180deg,var(--ink) 0%,var(--pine-deep) 32%,#06120f 100%);
background-repeat:no-repeat;
min-height:100vh;
overflow-x:hidden;
}
a[data-contract="site-name"] {color:var(--ice-bright);text-decoration:none;letter-spacing:.06em}
a.runtime-category {color:var(--frost);text-decoration:none}
a.recommend-card.recommend-card-strip {color:var(--snow);text-decoration:none}
a.recommend-card.recommend-card-list {color:var(--snow);text-decoration:none}
a.recommend-card.recommend-card-tile {color:var(--snow);text-decoration:none}
a[data-contract="footer-home"] {color:var(--ice);text-decoration:none}
a[data-contract="footer-sitemap"] {color:var(--ice);text-decoration:none}
a.runtime-friend-link {color:var(--ice-dim);text-decoration:none}
a[data-contract="site-name"]:hover, a.runtime-category:hover, a[data-contract="footer-home"]:hover, a[data-contract="footer-sitemap"]:hover, a.runtime-friend-link:hover {color:var(--ember-soft)}
.site-header {
position:sticky;top:0;z-index:40;
display:flex;align-items:center;gap:18px;flex-wrap:wrap;
padding:9px 18px;
background:linear-gradient(180deg,rgba(5,17,14,.94),rgba(7,23,19,.86));
border-bottom:1px solid rgba(143,195,209,.14);
backdrop-filter:blur(6px);
}
.brand {
font-family:var(--serif);
font-size:19px;
font-weight:600;
letter-spacing:.08em;
}
.category-bar {
display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center;
max-width:100%;
}
.runtime-category {
white-space:nowrap;
display:inline-block;
font-size:13px;
line-height:1;
padding:6px 10px;
border:1px solid rgba(143,195,209,.22);
border-radius:999px;
background:rgba(143,195,209,.05);
}
.page-main {
max-width:1180px;
margin:0 auto;
padding:22px 18px 8px;
display:flex;flex-direction:column;
gap:34px;
}
.movie-overview {display:flex;flex-direction:column;gap:22px}
.hero-shell {
position:relative;
display:grid;
grid-template-columns:minmax(0,300px) minmax(0,1fr);
gap:26px;
align-items:start;
padding:20px 20px 30px;
border-radius:16px;
background:
radial-gradient(80% 90% at 12% 0%,rgba(143,195,209,.14),transparent 62%),
linear-gradient(160deg,var(--pine-mid) 0%,#0b2620 52%,#06120f 100%);
border:1px solid rgba(169,196,187,.14);
box-shadow:0 22px 50px -30px rgba(0,0,0,.9) inset,0 0 0 1px rgba(5,17,14,.5);
overflow:hidden;
}
.hero-shell::after {
content:"";
position:absolute;left:0;right:0;bottom:0;height:64px;
background:linear-gradient(180deg,transparent,rgba(5,17,14,.75));
pointer-events:none;
}
.poster-frame {
position:relative;
width:100%;
aspect-ratio:2/3;
border-radius:12px;
overflow:hidden;
background:#04100d;
border:1px solid rgba(143,195,209,.2);
box-shadow:0 18px 40px -22px rgba(0,0,0,.95);
}
.poster-image {
width:100%;height:100%;
object-fit:cover;
filter:saturate(.86) brightness(.86) contrast(1.06);
}
.poster-frame::after {
content:"";
position:absolute;inset:0;
background:linear-gradient(200deg,rgba(5,17,14,.06) 40%,rgba(5,17,14,.72) 100%);
pointer-events:none;
}
.hero-copy {
display:flex;flex-direction:column;gap:12px;
position:relative;z-index:2;
max-width:640px;
}
.movie-title {
font-family:var(--serif);
font-size:clamp(24px,3.4vw,40px);
font-weight:600;
line-height:1.14;
letter-spacing:.02em;
color:var(--snow);
text-shadow:0 2px 22px rgba(0,0,0,.7);
}
.movie-tagline {
font-family:var(--serif);
font-size:15px;
line-height:1.5;
color:var(--ember-soft);
padding-left:12px;
border-left:2px solid var(--ember);
}
.movie-seo {
font-size:13px;
line-height:1.68;
color:var(--frost);
max-width:60ch;
}
.player-zone {
display:flex;flex-direction:column;gap:8px;
width:100%;
min-width:0;
padding:10px;
border-radius:14px;
background:linear-gradient(180deg,#04100d,#071a15);
border:1px solid rgba(143,195,209,.16);
box-shadow:0 24px 50px -34px rgba(0,0,0,1);
}
.player-video {
display:block;
width:100%;
background:#000;
border-radius:9px;
max-height:78vh;
object-fit:contain;
}
.player-controls {
display:flex;flex-wrap:wrap;align-items:center;gap:6px;
padding:2px 2px 0;
}
.ctrl {
font-size:12px;
line-height:1;
padding:7px 10px;
border-radius:7px;
border:1px solid rgba(143,195,209,.24);
background:rgba(143,195,209,.07);
color:var(--frost);
cursor:pointer;
transition:background .18s,color .18s,border-color .18s;
}
.ctrl:hover {border-color:var(--ember);color:var(--ember-soft);background:rgba(232,116,58,.12)}
.ctrl.is-active, .ctrl.is-playing {border-color:var(--ice);color:var(--ink);background:var(--ice-bright)}
.ctrl.is-muted {border-color:var(--ember);color:var(--ember-soft)}
.ctrl-progress-shell {
flex:1 1 160px;
min-width:120px;
display:flex;align-items:center;
padding:0 4px;
}
.ctrl-progress {
-webkit-appearance:none;appearance:none;
width:100%;height:4px;border-radius:999px;
background:linear-gradient(90deg,var(--ice-dim),rgba(143,195,209,.2));
outline:none;cursor:pointer;
}
.ctrl-progress::-webkit-slider-thumb {
-webkit-appearance:none;
width:12px;height:12px;border-radius:50%;
background:var(--ice-bright);
border:2px solid var(--pine-deep);
box-shadow:0 0 8px rgba(143,195,209,.8);
}
.ctrl-progress::-moz-range-thumb {
width:12px;height:12px;border:2px solid var(--pine-deep);border-radius:50%;
background:var(--ice-bright);
}
.ctrl-volume {
-webkit-appearance:none;appearance:none;
width:78px;height:4px;border-radius:999px;
background:rgba(143,195,209,.24);
cursor:pointer;
}
.ctrl-volume::-webkit-slider-thumb {
-webkit-appearance:none;
width:10px;height:10px;border-radius:50%;
background:var(--frost);
}
.ctrl-volume::-moz-range-thumb {width:10px;height:10px;border:0;border-radius:50%;background:var(--frost)}
.ctrl-speed {
font-size:12px;
padding:6px 6px;
border-radius:7px;
background:rgba(143,195,209,.07);
border:1px solid rgba(143,195,209,.24);
color:var(--frost);
cursor:pointer;
}
.player-zone.is-theater {
position:relative;
border-color:var(--ember);
box-shadow:0 0 0 1px rgba(232,116,58,.4),0 30px 60px -30px rgba(0,0,0,1);
}
.player-zone.is-theater .player-video {max-height:none}
.player-zone.is-playing {border-color:rgba(143,195,209,.4)}
body.lights-dim {background-image:radial-gradient(120% 60% at 50% 0%,rgba(143,195,209,.06),transparent 60%)}
body.lights-dim .page-main {opacity:.94}
body.lights-dim .player-zone {box-shadow:0 0 0 1px rgba(232,116,58,.55),0 40px 90px -40px rgba(0,0,0,1)}
.cast-section {display:flex;flex-direction:column;gap:9px}
.cast-heading, .synopsis-heading, .details-heading, .timeline-heading, .episodes-heading, .comments-heading, .recommend-heading {
font-family:var(--serif);
font-size:14px;
font-weight:600;
letter-spacing:.16em;
color:var(--ice);
display:flex;align-items:center;gap:10px;
}
.cast-heading::after, .synopsis-heading::after, .details-heading::after, .timeline-heading::after, .episodes-heading::after, .comments-heading::after, .recommend-heading::after {
content:"";
flex:1;
height:1px;
background:linear-gradient(90deg,rgba(143,195,209,.36),transparent);
}
.cast-rail {
display:flex;gap:10px;
overflow-x:auto;
padding-bottom:6px;
scroll-snap-type:x proximity;
-webkit-overflow-scrolling:touch;
}
.cast-card {
flex:0 0 auto;
display:flex;flex-direction:column;align-items:center;gap:4px;
width:92px;
padding:9px 6px;
border-radius:10px;
background:rgba(143,195,209,.05);
border:1px solid rgba(143,195,209,.13);
scroll-snap-align:start;
text-align:center;
}
.cast-avatar {
width:44px;height:44px;border-radius:50%;
background:
radial-gradient(circle at 34% 30%,var(--ice-bright),var(--ice-dim) 62%,#204b52 100%);
border:1px solid rgba(230,239,233,.45);
box-shadow:0 0 0 3px rgba(143,195,209,.09);
}
.cast-name {
font-size:12.5px;
line-height:1.25;
color:var(--snow);
white-space:nowrap;
}
.cast-role {
font-size:11px;
line-height:1.2;
color:var(--ember-soft);
white-space:nowrap;
}
.synopsis-section {
display:flex;flex-direction:column;gap:9px;
padding:16px 18px;
border-radius:12px;
background:linear-gradient(180deg,rgba(143,195,209,.055),rgba(5,17,14,.2));
border:1px solid rgba(143,195,209,.12);
border-left:2px solid var(--ice-dim);
}
.synopsis-line {
font-size:13.5px;
line-height:1.72;
color:var(--frost);
max-width:88ch;
}
.episode-status {
display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;
padding:10px 2px 2px;
border-top:1px solid rgba(143,195,209,.18);
}
.status-current {
font-family:var(--serif);
font-size:16px;
color:var(--ember-soft);
letter-spacing:.04em;
}
.status-total {font-size:12.5px;color:var(--ice-dim);letter-spacing:.06em}
.details-section {
display:flex;flex-direction:column;gap:10px;
padding:14px 2px 4px;
border-top:1px solid rgba(143,195,209,.18);
}
.details-list {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
gap:0 26px;
}
.details-key {
font-size:11.5px;
letter-spacing:.14em;
color:var(--ice-dim);
padding-top:7px;
border-top:1px dashed rgba(143,195,209,.14);
}
.details-value {
font-size:13px;
color:var(--snow);
padding-bottom:7px;
border-bottom:1px solid rgba(143,195,209,.09);
}
.timeline-section {display:flex;flex-direction:column;gap:12px}
.timeline-rail {
position:relative;
padding-left:26px;
}
.timeline-rail::before {
content:"";
position:absolute;left:6px;top:6px;bottom:6px;width:2px;
background:linear-gradient(180deg,rgba(143,195,209,.6),rgba(143,195,209,.12) 70%,transparent);
}
.timeline-node {
position:relative;
display:grid;
grid-template-columns:64px minmax(0,1fr);
gap:4px 10px;
align-items:baseline;
padding:7px 0 7px 4px;
border-bottom:1px solid rgba(143,195,209,.08);
}
.node-dot {
position:absolute;left:-24px;top:13px;
width:9px;height:9px;border-radius:50%;
background:var(--snow);
box-shadow:0 0 0 3px rgba(230,239,233,.12),0 0 12px rgba(205,233,240,.55);
}
.node-timecode {
font-family:var(--serif);
font-size:12.5px;
letter-spacing:.06em;
color:var(--ice);
}
.node-label {
font-size:13px;
line-height:1.5;
color:var(--snow);
}
.episodes-section {display:flex;flex-direction:column;gap:12px}
.episode-grid {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:10px;
}
.episode-card {
display:grid;
grid-template-columns:auto minmax(0,1fr);
grid-template-areas:"num head" "sum sum";
align-items:baseline;
gap:2px 10px;
padding:11px 13px 12px;
border-radius:10px;
background:linear-gradient(180deg,rgba(20,58,49,.55),rgba(5,17,14,.55));
border:1px solid rgba(143,195,209,.13);
transition:border-color .18s,transform .18s;
}
.episode-card:hover {border-color:rgba(232,116,58,.45);transform:translateY(-2px)}
.episode-number {
grid-area:num;
font-family:var(--serif);
font-size:30px;
line-height:.9;
color:var(--ice-bright);
opacity:.85;
}
.episode-title {
grid-area:head;
font-size:13px;
color:var(--snow);
align-self:end;
}
.episode-duration {
grid-area:head;
font-size:11.5px;
color:var(--ember-soft);
justify-self:end;
align-self:end;
white-space:nowrap;
}
.episode-summary {
grid-area:sum;
margin-top:7px;
font-size:12px;
line-height:1.6;
color:var(--frost);
border-top:1px solid rgba(143,195,209,.1);
padding-top:7px;
}
.comments-section {display:flex;flex-direction:column;gap:12px}
.comments-stack {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px 18px;
align-items:start;
}
.comment-card {
display:flex;flex-direction:column;gap:5px;
padding:11px 13px;
border-radius:10px;
background:rgba(143,195,209,.055);
border:1px solid rgba(143,195,209,.12);
border-left:2px solid rgba(143,195,209,.34);
}
.comment-offset-a {transform:translateX(0)}
.comment-offset-b {transform:translateX(16px)}
.comment-nickname {
font-family:var(--serif);
font-size:12.5px;
letter-spacing:.05em;
color:var(--ice);
}
.comment-text {
font-size:12.5px;
line-height:1.62;
color:var(--frost);
}
.recommend-region {display:flex;flex-direction:column;gap:11px}
.recommend-card {
display:block;
border-radius:10px;
overflow:hidden;
background:rgba(143,195,209,.05);
border:1px solid rgba(143,195,209,.13);
transition:border-color .18s,transform .18s;
}
.recommend-card:hover {border-color:rgba(232,116,58,.5);transform:translateY(-2px)}
[data-runtime="recommendation"] img {
width:100%;
height:100%;
object-fit:cover;
display:block;
filter:saturate(.85) brightness(.88);
}
.recommend-strip {
display:flex;gap:10px;
overflow-x:auto;
padding-bottom:6px;
}
.recommend-card-strip {
flex:1 1 0;
min-width:170px;
display:flex;flex-direction:column;gap:0;
}
.recommend-card-strip img {aspect-ratio:16/9;height:auto}
.recommend-card-strip span {padding:5px 10px 0;font-size:12.5px;line-height:1.3}
.recommend-card-strip span[data-runtime="name"] {color:var(--snow)}
.recommend-card-strip span[data-runtime="blurb"] {
padding-bottom:9px;
font-size:11.5px;
color:var(--ice-dim);
line-height:1.45;
}
.recommend-list {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:10px;
}
.recommend-list-item {min-width:0}
.recommend-card-list {
display:grid;
grid-template-columns:76px minmax(0,1fr);
grid-template-rows:auto auto;
align-items:center;
gap:0 10px;
padding:8px;
}
.recommend-card-list img {
grid-row:1/3;
width:76px;height:52px;
border-radius:7px;
}
.recommend-card-list span[data-runtime="name"] {
font-size:12.5px;color:var(--snow);
align-self:end;
}
.recommend-card-list span[data-runtime="blurb"] {
font-size:11px;color:var(--ice-dim);line-height:1.4;
align-self:start;
overflow:hidden;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
}
.recommend-grid {
display:grid;
grid-template-columns:repeat(5,minmax(0,1fr));
gap:10px;
}
.recommend-card-tile {position:relative;aspect-ratio:2/3}
.recommend-card-tile img {position:absolute;inset:0}
.recommend-card-tile::after {
content:"";
position:absolute;inset:0;
background:linear-gradient(180deg,transparent 38%,rgba(5,17,14,.88));
pointer-events:none;
}
.recommend-card-tile span {
position:absolute;left:0;right:0;z-index:2;
padding:0 8px;
}
.recommend-card-tile span[data-runtime="name"] {
bottom:24px;
font-size:12px;line-height:1.25;color:var(--snow);
}
.recommend-card-tile span[data-runtime="blurb"] {
bottom:7px;
font-size:10.5px;line-height:1.2;color:var(--ice-dim);
overflow:hidden;
display:-webkit-box;
-webkit-line-clamp:1;
-webkit-box-orient:vertical;
}
.site-footer {
margin-top:30px;
padding:22px 18px 30px;
border-top:1px solid rgba(143,195,209,.14);
background:linear-gradient(180deg,rgba(5,17,14,.4),rgba(5,17,14,.9));
display:flex;flex-direction:column;gap:12px;
}
.footer-nav {display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px}
.friend-links {
display:flex;flex-wrap:wrap;align-items:center;gap:5px 12px;
font-size:12px;
}
.friend-links-label {
color:var(--ember-soft);
letter-spacing:.08em;
white-space:nowrap;
}
.footer-disclaimer {
font-size:11.5px;
line-height:1.6;
color:var(--ice-dim);
max-width:92ch;
}
@media (max-width:1000px){.hero-shell {grid-template-columns:minmax(0,232px) minmax(0,1fr)}
.episode-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
.recommend-grid {grid-template-columns:repeat(4,minmax(0,1fr))}
.recommend-list {grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.page-main {padding:16px 13px 6px;gap:26px}
.hero-shell {grid-template-columns:minmax(0,1fr);gap:16px;padding:15px 15px 22px}
.poster-frame {max-width:230px}
.hero-copy {max-width:none}
.episode-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
.recommend-grid {grid-template-columns:repeat(3,minmax(0,1fr))}
.recommend-list {grid-template-columns:minmax(0,1fr)}
.recommend-card-strip {flex:0 0 200px}
.comment-offset-b {transform:translateX(8px)}}
@media (max-width:540px){.site-header {padding:8px 13px;gap:10px}
.page-main {padding:14px 11px 4px;gap:22px}
.hero-shell {padding:13px 13px 18px}
.poster-frame {max-width:190px}
.movie-title {font-size:23px}
.movie-seo {font-size:12.5px}
.player-zone {padding:8px}
.ctrl {padding:6px 8px;font-size:11.5px}
.ctrl-volume {width:100%}
.episode-grid {grid-template-columns:minmax(0,1fr)}
.comments-stack {grid-template-columns:minmax(0,1fr)}
.comment-offset-a, .comment-offset-b {transform:none}
.recommend-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
.timeline-node {grid-template-columns:minmax(0,1fr);gap:1px}
.node-timecode {font-size:11.5px}
.site-footer {padding:18px 13px 26px}}
@media (min-width:1180px){.recommend-grid {grid-template-columns:repeat(5,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}