*, *::before, *::after {box-sizing:border-box;margin:0;padding:0}
:root {
--deep:#0b1a24;
--deep-2:#0f2530;
--deep-3:#14313d;
--rust:#8f3b2a;
--rust-2:#a94a35;
--paper:#e8e1d2;
--paper-dim:#c7bfae;
--ink:#0a151c;
--line:rgba(232,225,210,.16);
--line-strong:rgba(232,225,210,.3);
--blue:#2f6d86;
--serif:"Songti SC","Noto Serif SC",Georgia,"Times New Roman",serif;
--sans:"Helvetica Neue",Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}
html {-webkit-text-size-adjust:100%}
body {
background:var(--deep);
color:var(--paper);
font-family:var(--sans);
font-size:14px;
line-height:1.6;
letter-spacing:.01em;
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:var(--serif);font-weight:600;letter-spacing:.02em;transform:scaleY(.94);transform-origin:left center}
.site-header {
position:sticky;top:0;z-index:40;
background:linear-gradient(180deg,rgba(11,26,36,.97),rgba(11,26,36,.86));
border-bottom:1px solid var(--line);
backdrop-filter:blur(6px);
}
.header-bar {
display:flex;align-items:center;justify-content:space-between;gap:12px;
padding:9px clamp(12px,3vw,28px);
max-width:1280px;margin:0 auto;
}
a[data-contract="site-name"] {
font-family:var(--serif);font-size:17px;letter-spacing:.08em;
color:var(--paper);text-decoration:none;
padding-left:10px;border-left:3px solid var(--rust-2);
}
.category-nav {
display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;
}
a.runtime-category {
white-space:nowrap;
font-size:12px;letter-spacing:.06em;
padding:4px 10px;
color:var(--paper-dim);
text-decoration:none;
border:1px solid var(--line-strong);
background:rgba(20,49,61,.5);
clip-path:polygon(0 0,100% 0,100% 78%,96% 100%,0 100%);
}
a.runtime-category:hover {color:var(--paper);border-color:var(--rust-2);background:rgba(143,59,42,.25)}
.page-main {max-width:1280px;margin:0 auto;padding:0 clamp(12px,3vw,28px)}
.hero-banner {
position:relative;
border-bottom:1px solid var(--line);
margin-bottom:0;
}
.hero-backdrop {
position:absolute;inset:0;overflow:hidden;
background:
radial-gradient(120% 90% at 78% 24%,rgba(47,109,134,.35),transparent 60%),
linear-gradient(180deg,#08141c 0%,#0c2029 55%,#0b1a24 100%);
z-index:0;
}
.hero-backdrop::after {
content:"";position:absolute;inset:0;
background:repeating-linear-gradient(180deg,rgba(232,225,210,.028) 0 1px,transparent 1px 3px);
pointer-events:none;
}
.hero-silhouette-group {
position:absolute;right:0;bottom:0;left:0;
height:78%;
display:flex;align-items:flex-end;justify-content:flex-end;
gap:clamp(6px,2vw,26px);
padding-right:clamp(10px,6vw,90px);
}
.silhouette {
display:block;width:clamp(46px,9vw,110px);
background:linear-gradient(180deg,rgba(6,14,19,.92),rgba(6,14,19,.55));
border-radius:44% 44% 6% 6% / 26% 26% 4% 4%;
filter:blur(.4px);
}
.silhouette-one {height:74%}
.silhouette-two {height:88%;width:clamp(50px,10vw,120px)}
.silhouette-three {height:66%}
.hero-seafog {
position:absolute;inset:0;
background:
radial-gradient(90% 70% at 108% 46%,rgba(199,191,174,.4),rgba(199,191,174,.12) 42%,transparent 68%),
linear-gradient(270deg,rgba(199,191,174,.22),transparent 55%);
mix-blend-mode:screen;
pointer-events:none;
}
.hero-content {
position:relative;z-index:2;
padding:clamp(22px,5vw,54px) clamp(2px,1vw,10px) clamp(18px,3vw,30px);
max-width:min(100%,760px);
}
.movie-title {
font-size:clamp(22px,4.4vw,44px);
line-height:1.15;
letter-spacing:.01em;
color:var(--paper);
text-shadow:0 2px 18px rgba(0,0,0,.6);
}
.movie-tagline {
margin-top:8px;
font-size:clamp(12px,1.5vw,15px);
color:var(--paper-dim);
letter-spacing:.14em;
border-left:2px solid var(--rust);
padding-left:10px;
}
.hero-actions {
display:flex;align-items:center;flex-wrap:wrap;gap:10px;
margin-top:16px;
}
a.play-button {
display:inline-flex;align-items:center;gap:9px;
padding:9px 20px;
background:linear-gradient(180deg,var(--rust-2),var(--rust));
color:var(--paper);
text-decoration:none;
font-size:14px;letter-spacing:.1em;
border:1px solid rgba(232,225,210,.28);
clip-path:polygon(0 0,100% 0,100% 72%,97% 100%,0 100%);
box-shadow:0 6px 18px rgba(0,0,0,.45);
transition:filter .18s,border-color .18s;
}
a.play-button:hover {filter:brightness(1.14);border-color:var(--paper)}
.play-icon {
width:0;height:0;
border-left:11px solid var(--paper);
border-top:7px solid transparent;
border-bottom:7px solid transparent;
}
.play-label {white-space:nowrap}
.hero-score-chip {
font-size:12px;letter-spacing:.12em;
padding:5px 11px;
color:var(--paper-dim);
border:1px solid var(--line-strong);
background:rgba(15,37,48,.7);
white-space:nowrap;
}
.player-shell {
position:relative;
margin-top:18px;
background:#050d12;
border:1px solid var(--line-strong);
box-shadow:0 14px 34px rgba(0,0,0,.55);
clip-path:polygon(0 0,100% 0,100% 96%,98.5% 100%,0 100%);
}
.player-shell video {
display:block;
background:#04100f;
}
.player-controls {
display:flex;flex-wrap:wrap;align-items:center;gap:6px;
padding:7px 9px;
border-top:1px solid var(--line);
background:linear-gradient(180deg,rgba(11,26,36,.9),rgba(8,20,28,.98));
}
.pc-btn {
cursor:pointer;
font-size:11px;letter-spacing:.08em;
padding:4px 9px;
background:rgba(20,49,61,.7);
color:var(--paper-dim);
border:1px solid var(--line);
clip-path:polygon(0 0,100% 0,100% 76%,95% 100%,0 100%);
}
.pc-btn:hover {color:var(--paper);border-color:var(--rust-2);background:rgba(143,59,42,.3)}
.pc-progress {flex:1 1 140px;min-width:90px}
.pc-volume {flex:0 1 90px;min-width:64px}
.pc-progress, .pc-volume {
-webkit-appearance:none;appearance:none;
height:4px;background:rgba(232,225,210,.2);
cursor:pointer;
}
.pc-progress::-webkit-slider-thumb, .pc-volume::-webkit-slider-thumb {
-webkit-appearance:none;appearance:none;
width:11px;height:11px;background:var(--rust-2);
border:1px solid var(--paper);
}
.pc-progress::-moz-range-thumb, .pc-volume::-moz-range-thumb {
width:11px;height:11px;background:var(--rust-2);border:1px solid var(--paper);border-radius:0;
}
.player-shell.is-playing .pc-play {color:var(--paper);border-color:var(--rust-2)}
.player-shell.is-muted .pc-mute, .player-shell.is-speed .pc-speed, .player-shell.is-pip .pc-pip, .player-shell.is-fullscreen .pc-fullscreen, .player-shell.is-theater .pc-theater, .player-shell.is-lights-off .pc-light {
color:var(--paper);background:rgba(143,59,42,.5);border-color:var(--rust-2);
}
.player-shell.is-theater {
box-shadow:0 0 0 1px var(--rust-2),0 20px 60px rgba(0,0,0,.7);
}
.player-shell.is-lights-off {background:#000}
.player-shell.is-fullscreen {clip-path:none}
.pc-btn.play, .pc-btn.pause, .pc-btn.mute, .pc-btn.speed, .pc-btn.pip, .pc-btn.theater, .pc-btn.light, .pc-btn.fullscreen, .pc-btn.progress, .pc-btn.volume {cursor:pointer}
.overview-body {
position:relative;z-index:2;
display:grid;
grid-template-columns:minmax(0,265px) minmax(0,1fr);
gap:clamp(14px,2.4vw,30px);
padding:clamp(16px,3vw,30px) clamp(2px,1vw,10px) clamp(22px,4vw,40px);
border-top:1px solid var(--line);
}
.poster-panel {
display:flex;flex-direction:column;gap:12px;
align-self:start;
}
.poster-frame {
position:relative;
background:var(--deep-2);
border:1px solid var(--line-strong);
padding:7px;
clip-path:polygon(0 0,100% 0,100% 97%,97.5% 100%,0 100%);
box-shadow:0 12px 26px rgba(0,0,0,.5);
}
.poster-frame img {
width:100%;height:auto;
object-fit:cover;
filter:saturate(.86) contrast(1.06);
}
.poster-caption {
margin-top:7px;
font-size:11px;letter-spacing:.1em;
color:var(--paper-dim);
border-top:1px solid var(--line);
padding-top:5px;
}
.seo-lead {
font-size:12.5px;line-height:1.75;
color:var(--paper-dim);
border-left:2px solid var(--rust);
padding-left:9px;
}
.info-panel {
display:flex;flex-direction:column;gap:0;
background:linear-gradient(180deg,rgba(20,49,61,.34),rgba(15,37,48,.18));
border:1px solid var(--line);
padding:clamp(12px,2vw,20px);
clip-path:polygon(0 0,100% 0,100% 99%,99% 100%,0 100%);
}
.info-panel>section {padding:14px 0;border-top:1px solid var(--line)}
.info-panel>section:first-child {padding-top:0;border-top:0}
.info-panel>section:last-child {padding-bottom:0}
.status-heading, .details-heading, .cast-heading, .synopsis-heading {
font-size:14px;letter-spacing:.16em;
color:var(--rust-2);
margin-bottom:9px;
padding-bottom:5px;
border-bottom:1px solid var(--line);
}
.status-list {
display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
gap:6px 14px;
}
.status-item {
font-size:12.5px;color:var(--paper-dim);
padding-left:11px;position:relative;
}
.status-item::before {
content:"";position:absolute;left:0;top:.62em;
width:5px;height:5px;background:var(--blue);
}
.status-item:nth-child(n/**/+3)::before {background:var(--rust)}
.detail-grid {
display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
gap:2px 18px;
}
.detail-row {
display:flex;gap:8px;align-items:baseline;
font-size:12.5px;
padding:3px 0;
border-bottom:1px dotted rgba(232,225,210,.13);
min-width:0;
}
.detail-key {
flex:0 0 auto;
color:var(--paper-dim);
letter-spacing:.06em;
}
.detail-value {
flex:1 1 auto;min-width:0;
color:var(--paper);
text-align:right;
}
.cast-grid {
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
gap:10px 12px;
}
.cast-card {
display:flex;flex-direction:column;align-items:center;
gap:5px;
text-align:center;
position:relative;
}
.cast-card::after {
content:"";position:absolute;left:12%;right:12%;top:34px;
height:1px;background:linear-gradient(90deg,transparent,rgba(47,109,134,.6),transparent);
}
.cast-avatar {
display:block;
width:100%;max-width:82px;
aspect-ratio:1/1;
background:
radial-gradient(circle at 34% 30%,rgba(199,191,174,.4),transparent 60%),
linear-gradient(160deg,var(--deep-3),#0a1b24);
border:1px solid var(--line-strong);
clip-path:polygon(0 0,100% 0,100% 88%,90% 100%,0 100%);
}
.cast-name {
font-family:var(--serif);font-size:13px;letter-spacing:.06em;
color:var(--paper);
}
.cast-role {
font-size:11px;color:var(--paper-dim);letter-spacing:.04em;
}
.synopsis-para {
font-size:12.5px;line-height:1.8;
color:var(--paper-dim);
}
.synopsis-para+.synopsis-para {margin-top:8px}
.synopsis-para:first-of-type::first-letter {
font-family:var(--serif);
font-size:2.4em;line-height:.9;
float:left;
margin:4px 8px 0 0;
color:var(--rust-2);
}
.section-heading {
font-size:clamp(15px,2vw,19px);
letter-spacing:.18em;
color:var(--paper);
margin-bottom:12px;
padding-bottom:7px;
border-bottom:1px solid var(--line);
}
.section-heading::after {
content:"";display:block;
width:44px;height:2px;margin-top:7px;
background:linear-gradient(90deg,var(--blue),var(--rust));
}
.timeline-section {
padding:clamp(18px,3.4vw,34px) 0;
border-bottom:1px solid var(--line);
}
.timeline-list {
position:relative;
display:flex;flex-direction:column;
padding-left:0;
}
.timeline-node {
position:relative;
display:grid;
grid-template-columns:62px 20px minmax(0,1fr);
align-items:center;
gap:0 10px;
padding:11px 0;
}
.timeline-node::before {
content:"";position:absolute;
left:71px;top:0;bottom:0;
width:2px;
background:var(--blue);
}
.timeline-node:first-child::before {top:50%}
.timeline-node:last-child::before {bottom:50%}
.timeline-node:nth-child(1)::before {background:var(--blue)}
.timeline-node:nth-child(2)::before {background:#356f83}
.timeline-node:nth-child(3)::before {background:#4a6b78}
.timeline-node:nth-child(4)::before {background:#6a5a55}
.timeline-node:nth-child(5)::before {background:#84483a}
.timeline-node:nth-child(6)::before {background:#8f3b2a}
.timeline-node:nth-child(7)::before {background:var(--rust-2)}
.node-timecode {
font-family:var(--serif);
font-size:12.5px;letter-spacing:.08em;
color:var(--paper-dim);
text-align:right;
}
.node-marker {
position:relative;z-index:1;
justify-self:center;
width:11px;height:11px;
background:var(--deep);
border:2px solid var(--blue);
transform:rotate(45deg);
}
.timeline-node:nth-child(n/**/+4) .node-marker {border-color:#8f3b2a}
.timeline-node:nth-child(n/**/+6) .node-marker {border-color:var(--rust-2)}
.node-label {
font-size:12.5px;
color:var(--paper);
padding-left:2px;
}
.episodes-section {
padding:clamp(18px,3.4vw,34px) 0;
border-bottom:1px solid var(--line);
}
.episode-strip {
display:grid;
grid-auto-flow:column;
grid-auto-columns:minmax(196px,1fr);
gap:10px;
overflow-x:auto;
overflow-y:hidden;
padding-bottom:10px;
scroll-snap-type:x proximity;
}
.episode-card {
scroll-snap-align:start;
display:flex;flex-direction:column;gap:5px;
padding:11px 12px 12px;
background:linear-gradient(180deg,rgba(20,49,61,.55),rgba(11,26,36,.75));
border:1px solid var(--line);
border-top:2px solid var(--blue);
clip-path:polygon(0 0,100% 0,100% 94%,95% 100%,0 100%);
min-height:0;
transition:border-color .18s,background .18s;
}
.episode-card:hover {
border-top-color:var(--rust-2);
background:linear-gradient(180deg,rgba(143,59,42,.24),rgba(11,26,36,.8));
}
.episode-number {
font-size:11px;letter-spacing:.14em;color:var(--rust-2);
}
.episode-title {
font-size:15px;letter-spacing:.1em;color:var(--paper);
}
.episode-summary {
font-size:12px;line-height:1.65;color:var(--paper-dim);
flex:0 0 auto;
}
.episode-duration {
margin-top:auto;
font-size:11px;letter-spacing:.1em;color:var(--paper-dim);
padding-top:6px;
border-top:1px solid var(--line);
}
.comments-section {
padding:clamp(18px,3.4vw,34px) 0;
border-bottom:1px solid var(--line);
}
.comment-columns {
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:clamp(12px,3vw,42px);
align-items:start;
}
.comment-column {
display:flex;flex-direction:column;gap:10px;
}
.comment-column-b {margin-top:26px}
.comment-card {
padding:10px 13px 12px;
background:rgba(20,49,61,.34);
border-left:2px solid var(--rust);
clip-path:polygon(0 0,100% 0,100% 92%,97% 100%,0 100%);
}
.comment-column-a .comment-card:nth-child(2) {margin-left:18px}
.comment-column-b .comment-card:nth-child(1) {margin-right:16px}
.comment-column-b .comment-card:nth-child(3) {margin-right:28px}
.comment-nickname {
display:block;
font-family:var(--serif);
font-size:12.5px;letter-spacing:.08em;
color:var(--rust-2);
margin-bottom:4px;
}
.comment-text {
font-size:12.5px;line-height:1.7;
color:var(--paper-dim);
}
.comment-text::first-letter {
font-family:var(--serif);
font-size:1.7em;line-height:.9;
color:var(--paper);
}
.recommend-region {
padding:clamp(16px,3vw,28px) 0;
border-bottom:1px solid var(--line);
}
.recommend-heading {
font-size:12.5px;
letter-spacing:.2em;
color:var(--rust-2);
margin-bottom:10px;
}
.recommend-list {
display:grid;
grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
gap:10px 12px;
}
.recommend-item {min-width:0}
a[data-runtime="recommendation"] {
display:flex;flex-direction:column;gap:5px;
color:var(--paper-dim);
text-decoration:none;
padding:7px;
background:rgba(15,37,48,.5);
border:1px solid var(--line);
clip-path:polygon(0 0,100% 0,100% 93%,96% 100%,0 100%);
transition:border-color .18s,background .18s,color .18s;
}
a[data-runtime="recommendation"] img {
width:100%;
aspect-ratio:16/10;
height:auto;
object-fit:cover;
background:var(--deep-3);
filter:saturate(.8) contrast(1.05);
}
a[data-runtime="recommendation"] [data-runtime="name"] {
font-size:12.5px;color:var(--paper);letter-spacing:.04em;
}
a[data-runtime="recommendation"] [data-runtime="blurb"] {
font-size:11px;line-height:1.55;color:var(--paper-dim);
}
a[data-runtime="recommendation"]:hover {
color:var(--paper);
border-color:var(--rust-2);
background:rgba(143,59,42,.2);
}
a[data-runtime="recommendation"]:hover img {filter:saturate(1) contrast(1.08)}
.site-footer {
margin-top:8px;
border-top:1px solid var(--line);
background:linear-gradient(180deg,#08141c,#050d12);
padding:18px clamp(12px,3vw,28px) 26px;
max-width:1280px;margin-left:auto;margin-right:auto;
}
.footer-nav {
display:flex;flex-wrap:wrap;gap:8px 14px;
padding-bottom:10px;
border-bottom:1px solid var(--line);
}
a[data-contract="footer-home"], a[data-contract="footer-sitemap"] {
font-size:12.5px;letter-spacing:.08em;
color:var(--paper-dim);
text-decoration:underline;
text-decoration-color:var(--rust);
text-underline-offset:3px;
}
a[data-contract="footer-home"]:hover, a[data-contract="footer-sitemap"]:hover {color:var(--paper)}
.friend-links {
display:flex;flex-wrap:wrap;align-items:center;gap:7px 12px;
padding:12px 0;
border-bottom:1px solid var(--line);
}
.friend-links-label {
font-size:11.5px;letter-spacing:.18em;color:var(--rust-2);
margin-right:4px;
}
a.runtime-friend-link {
font-size:11.5px;letter-spacing:.04em;
color:var(--paper-dim);
text-decoration:none;
padding:2px 7px;
border:1px solid var(--line);
}
a.runtime-friend-link:hover {color:var(--paper);border-color:var(--rust-2)}
.footer-disclaimer {
margin-top:12px;
font-size:11.5px;line-height:1.75;
color:rgba(199,191,174,.7);
max-width:70ch;
}
@media (max-width:900px){.overview-body {grid-template-columns:minmax(0,220px) minmax(0,1fr)}
.cast-grid {grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:720px){.overview-body {grid-template-columns:minmax(0,1fr)}
.poster-panel {
display:grid;
grid-template-columns:minmax(0,150px) minmax(0,1fr);
gap:12px;
align-items:start;
}
.poster-frame {grid-row:span 2}
.seo-lead {align-self:start}
.comment-columns {grid-template-columns:minmax(0,1fr);gap:10px}
.comment-column-b {margin-top:0}
.comment-column-a .comment-card:nth-child(2), .comment-column-b .comment-card:nth-child(1), .comment-column-b .comment-card:nth-child(3) {margin-left:0;margin-right:0}
.comment-column-a .comment-card:nth-child(2) {margin-left:14px}
.comment-column-b .comment-card:nth-child(2) {margin-right:14px}
.cast-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
.episode-strip {grid-auto-columns:minmax(180px,72%)}
.timeline-node {grid-template-columns:52px 18px minmax(0,1fr);gap:0 8px}
.timeline-node::before {left:60px}
.recommend-list {grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}}
@media (max-width:480px){body {font-size:13.5px}
.header-bar {flex-wrap:wrap;gap:8px}
.category-nav {justify-content:flex-start}
.hero-content {padding-top:20px}
.hero-silhouette-group {padding-right:12px;height:62%}
.movie-tagline {letter-spacing:.08em}
.player-controls {gap:5px;padding:6px}
.pc-btn {font-size:10.5px;padding:3px 7px}
.pc-progress {flex:1 1 100%;order:9}
.poster-panel {grid-template-columns:minmax(0,1fr)}
.poster-frame {grid-row:auto;max-width:190px}
.status-list {grid-template-columns:repeat(auto-fit,minmax(110px,1fr))}
.detail-grid {grid-template-columns:minmax(0,1fr)}
.cast-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.comment-column-a .comment-card:nth-child(2), .comment-column-b .comment-card:nth-child(2) {margin-left:0;margin-right:0}
.episode-strip {grid-auto-columns:minmax(164px,80%)}
.recommend-list {grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
.timeline-node {grid-template-columns:46px 16px minmax(0,1fr);gap:0 7px;padding:9px 0}
.timeline-node::before {left:53px}
.node-timecode {font-size:11.5px}
.node-label {font-size:12px}
.footer-disclaimer {max-width:none}}
@media (min-width:1100px){.episode-strip {grid-auto-columns:minmax(0,1fr);overflow-x:visible}}
@media (prefers-reduced-motion:reduce){* {transition:none!important;animation: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}