* {margin:0;padding:0;box-sizing:border-box}
:root {
--warm:#f2b544;
--warm-deep:#d98a1f;
--blue:#2b3a4a;
--blue-soft:#3d5164;
--blue-deep:#1a242f;
--orange:#e8562a;
--orange-soft:#ff7040;
--paper:#e8e2d4;
--ink:#12181f;
--gray:#8a97a5;
--line:rgba(232,226,212,.14);
--shadow:0 1px 3px rgba(0,0,0,.35);
}
html {-webkit-text-size-adjust:100%}
body {
font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
background:var(--blue-deep);
color:var(--paper);
line-height:1.4;
font-size:14px;
font-weight:300;
overflow-x:hidden;
}
img {display:block;max-width:100%}
ul {list-style:none}
a {color:inherit;text-decoration:none}
button, input, select {font:inherit;color:inherit}
h1, h2, h3 {font-weight:800;line-height:1.25}
body.lights-off .page-main {filter:brightness(.72)}
.site-header {
position:sticky;top:0;z-index:40;
background:linear-gradient(180deg,rgba(18,24,31,.96),rgba(18,24,31,.86));
border-bottom:1px solid var(--line);
backdrop-filter:blur(6px);
}
.header-inner {
display:flex;align-items:center;gap:10px;flex-wrap:wrap;
padding:8px 14px;
max-width:1280px;margin:0 auto;
}
a[data-contract="site-name"].brand {
font-size:17px;font-weight:900;letter-spacing:.5px;
color:var(--warm);
text-decoration:none;
text-shadow:0 0 14px rgba(242,181,68,.35);
white-space:nowrap;
}
a[data-contract="site-name"].brand:hover {color:var(--orange-soft)}
.category-bar {
display:flex;flex-wrap:wrap;gap:4px;
margin-left:auto;
}
a.runtime-category {
display:inline-block;
white-space:nowrap;
padding:3px 9px;
font-size:12px;
font-weight:600;
color:var(--paper);
text-decoration:none;
background:rgba(61,81,100,.45);
border:1px solid var(--line);
border-radius:2px;
transition:background .15s,color .15s;
}
a.runtime-category:hover {background:var(--warm);color:var(--ink)}
.page-main {
max-width:1280px;
margin:0 auto;
padding:0 14px 28px;
display:flex;flex-direction:column;gap:14px;
}
.section-heading {
font-size:15px;font-weight:900;
color:var(--warm);
letter-spacing:.5px;
padding-left:9px;
border-left:4px solid var(--orange);
margin-bottom:9px;
}
.page-main>section {scroll-margin-top:52px}
.hero {
position:relative;
padding:18px 0 8px;
border-bottom:1px solid var(--line);
}
.hero::before {
content:"";
position:absolute;top:0;left:-14px;right:-14px;bottom:0;
background:
radial-gradient(ellipse 60% 50% at 78% 8%,rgba(242,181,68,.22),transparent 70%),
radial-gradient(ellipse 45% 40% at 12% 82%,rgba(232,86,42,.13),transparent 70%),
linear-gradient(160deg,rgba(61,81,100,.5),transparent 55%);
pointer-events:none;z-index:0;
}
.hero-shell {
position:relative;z-index:1;
display:grid;
grid-template-columns:minmax(0,230px) minmax(0,1fr);
gap:16px;
align-items:start;
}
.poster-wrap {
position:relative;
margin:0;
align-self:start;
}
.poster-wrap img {
width:100%;
height:auto;
aspect-ratio:9 / 16;
object-fit:cover;
border:1px solid rgba(242,181,68,.4);
box-shadow:6px 6px 0 rgba(0,0,0,.4),0 0 30px rgba(242,181,68,.12);
transform:rotate(-1.4deg);
}
.poster-caption {
margin-top:8px;
font-size:11px;
line-height:1.5;
font-weight:300;
color:var(--gray);
letter-spacing:.3px;
}
.hero-body {
min-width:0;
display:flex;flex-direction:column;gap:10px;
}
.movie-title {
font-size:clamp(24px,4.4vw,42px);
font-weight:900;
letter-spacing:1px;
color:var(--paper);
text-shadow:0 2px 0 rgba(0,0,0,.45),0 0 26px rgba(242,181,68,.25);
}
.movie-tagline {
font-size:15px;font-weight:700;
color:var(--warm);
letter-spacing:.6px;
}
.movie-seo {
font-size:12.5px;font-weight:300;
line-height:1.55;
color:#b9c4cf;
max-width:62ch;
}
.player-panel {
position:relative;
background:#0b1016;
border:1px solid rgba(242,181,68,.22);
box-shadow:var(--shadow);
margin-top:2px;
}
.player-panel.is-theater {
box-shadow:0 0 0 2px var(--warm),0 0 44px rgba(242,181,68,.3);
}
.player-video {
display:block;
width:100%;
background:#000;
}
.player-controls {
display:flex;flex-wrap:wrap;align-items:center;gap:6px;
padding:7px 8px;
background:linear-gradient(180deg,rgba(26,36,47,.9),rgba(11,16,22,.96));
border-top:1px solid var(--line);
}
.ctrl {
font-size:11.5px;font-weight:600;
letter-spacing:.2px;
padding:4px 9px;
background:rgba(61,81,100,.55);
color:var(--paper);
border:1px solid var(--line);
border-radius:2px;
cursor:pointer;
white-space:nowrap;
transition:background .15s,color .15s,border-color .15s;
}
.ctrl:hover {background:var(--warm);color:var(--ink);border-color:var(--warm)}
.ctrl.is-active, .ctrl.is-playing, .ctrl.is-muted, .ctrl.is-fullscreen {
background:var(--orange);color:#fff;border-color:var(--orange-soft);
}
input.ctrl-progress, input.ctrl-volume {
-webkit-appearance:none;appearance:none;
height:5px;
padding:0;
background:rgba(232,226,212,.22);
border:1px solid transparent;
border-radius:3px;
cursor:pointer;
}
input.ctrl-progress {flex:1 1 130px;min-width:90px}
input.ctrl-volume {flex:0 1 78px;min-width:60px}
input.ctrl-progress::-webkit-slider-thumb, input.ctrl-volume::-webkit-slider-thumb {
-webkit-appearance:none;appearance:none;
width:12px;height:12px;border-radius:50%;
background:var(--warm);border:2px solid var(--blue-deep);
box-shadow:0 0 6px rgba(242,181,68,.7);
}
input.ctrl-progress::-moz-range-thumb, input.ctrl-volume::-moz-range-thumb {
width:12px;height:12px;border-radius:50%;
background:var(--warm);border:2px solid var(--blue-deep);
}
select.ctrl-speed {padding:4px 6px}
select.ctrl-speed option {background:var(--blue-deep);color:var(--paper)}
.episode-status {
display:flex;flex-wrap:wrap;gap:6px;
margin-top:2px;
}
.status-chip {
font-size:11.5px;font-weight:700;
padding:3px 9px;
letter-spacing:.3px;
background:rgba(61,81,100,.5);
border:1px solid var(--line);
color:#c7d1db;
}
.status-total {border-color:rgba(138,151,165,.5)}
.status-current {
background:var(--orange);color:#fff;border-color:var(--orange-soft);
box-shadow:0 0 12px rgba(232,86,42,.4);
}
.status-score {
background:rgba(242,181,68,.16);color:var(--warm);border-color:rgba(242,181,68,.5);
}
.cast-strip {margin-top:4px}
.strip-heading {
font-size:13px;font-weight:900;
color:var(--warm);
margin-bottom:7px;
letter-spacing:1px;
}
.cast-list {
display:flex;gap:8px;
overflow-x:auto;
padding-bottom:8px;
scrollbar-width:thin;
scrollbar-color:var(--blue-soft) transparent;
}
.cast-list::-webkit-scrollbar {height:6px}
.cast-list::-webkit-scrollbar-thumb {background:var(--blue-soft);border-radius:3px}
.cast-card {
flex:0 0 132px;
width:132px;
background:linear-gradient(180deg,rgba(61,81,100,.55),rgba(26,36,47,.75));
border:1px solid var(--line);
border-radius:8px;
padding:7px;
box-shadow:var(--shadow);
display:flex;flex-direction:column;gap:4px;
transition:transform .15s,border-color .15s;
}
.cast-card:hover {transform:translateY(-3px);border-color:rgba(242,181,68,.55)}
.cast-photo {
width:100%;
aspect-ratio:1 / 1;
border-radius:5px;
background:
radial-gradient(circle at 50% 34%,rgba(242,181,68,.5),transparent 58%),
linear-gradient(150deg,var(--blue-soft),var(--blue-deep));
border:1px solid rgba(242,181,68,.18);
}
.cast-name {
font-size:12.5px;font-weight:800;
color:var(--paper);
letter-spacing:.4px;
}
.cast-note {
font-size:10.5px;font-weight:300;
line-height:1.4;
color:var(--gray);
}
.synopsis {
background:linear-gradient(180deg,rgba(61,81,100,.28),rgba(26,36,47,.2));
border-left:3px solid var(--orange);
padding:10px 12px;
}
.synopsis-paragraph {
font-size:12.5px;font-weight:300;
line-height:1.58;
color:#c3ccd6;
margin-bottom:6px;
}
.synopsis-paragraph:last-child {margin-bottom:0;color:#dde4ea}
.details {
background:linear-gradient(180deg,rgba(61,81,100,.22),rgba(26,36,47,.16));
padding:10px 12px;
border:1px solid var(--line);
}
.detail-list {
display:grid;
grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
gap:2px 12px;
}
.detail-row {
display:flex;align-items:baseline;gap:6px;
padding:3px 0;
border-bottom:1px dashed rgba(232,226,212,.1);
}
.detail-key {
font-size:11px;font-weight:700;
color:var(--warm);
white-space:nowrap;
flex:0 0 auto;
}
.detail-value {
font-size:11.5px;font-weight:300;
color:#c3ccd6;
}
.timeline-section {margin-top:2px}
.timeline-rail {
position:relative;
display:flex;flex-direction:column;gap:7px;
padding-left:16px;
}
.timeline-rail::before {
content:"";
position:absolute;left:3px;top:6px;bottom:6px;
width:3px;
background:repeating-linear-gradient(180deg,var(--warm) 0 8px,rgba(242,181,68,.2) 8px 14px);
}
.timeline-node {
position:relative;
padding:7px 11px;
background:rgba(61,81,100,.32);
border:1px solid var(--line);
clip-path:polygon(0 0,100% 2%,99% 100%,1% 97%,0 62%,2% 34%);
transition:background .15s,transform .15s;
}
.timeline-node:nth-child(even) {margin-left:16px}
.timeline-node:nth-child(3n) {margin-left:7px}
.timeline-node::before {
content:"";
position:absolute;left:-17px;top:12px;
width:9px;height:9px;
background:var(--blue-deep);
border:2px solid var(--warm);
transform:rotate(45deg);
}
.timeline-node:hover {background:rgba(242,181,68,.14)}
.timeline-node.is-active {
background:var(--paper);
border-color:var(--paper);
transform:translateX(4px);
box-shadow:5px 5px 0 rgba(232,86,42,.55);
}
.timeline-node.is-active::before {background:var(--orange);border-color:var(--orange)}
.node-timecode {
display:block;
font-size:10.5px;font-weight:800;
letter-spacing:1px;
color:var(--orange-soft);
margin-bottom:2px;
}
.timeline-node.is-active .node-timecode {color:var(--orange)}
.node-label {
font-size:13px;font-weight:700;
color:var(--paper);
line-height:1.35;
}
.timeline-node.is-active .node-label {color:var(--ink);font-weight:900}
.episodes-section {margin-top:2px}
.episode-columns {
column-count:2;
column-gap:10px;
}
.episode-item {
break-inside:avoid;
display:block;
margin-bottom:6px;
background:rgba(61,81,100,.24);
border:1px solid var(--line);
border-left:3px solid rgba(138,151,165,.4);
}
.episode-item.is-active {
background:rgba(232,86,42,.1);
border-left-color:var(--orange);
}
.episode-summary {
display:flex;align-items:center;gap:6px;
padding:6px 9px;
cursor:pointer;
list-style:none;
font-size:12px;
}
.episode-summary::-webkit-details-marker {display:none}
.episode-dot {
flex:0 0 auto;
width:6px;height:6px;border-radius:50%;
background:var(--gray);
box-shadow:0 0 0 2px rgba(138,151,165,.18);
}
.episode-dot-active {
background:var(--orange);
box-shadow:0 0 8px var(--orange);
}
.episode-number {
flex:0 0 auto;
font-size:11px;font-weight:800;
color:var(--warm);
letter-spacing:.4px;
}
.episode-item.is-active .episode-number {color:var(--orange-soft)}
.episode-title {
flex:1 1 auto;
min-width:0;
font-size:12px;font-weight:600;
color:#d4dce4;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.episode-duration {
flex:0 0 auto;
font-size:10px;font-weight:300;
color:var(--gray);
}
.episode-text {
padding:2px 9px 8px 21px;
font-size:11.5px;font-weight:300;
line-height:1.5;
color:#aeb9c4;
}
.comments-section {margin-top:2px}
.comment-stream {
column-count:3;
column-gap:9px;
}
.comment-card {
break-inside:avoid;
margin-bottom:9px;
padding:8px 9px;
background:linear-gradient(180deg,rgba(61,81,100,.38),rgba(26,36,47,.3));
border:1px solid var(--line);
border-top:2px solid rgba(242,181,68,.35);
}
.comment-head {display:flex;align-items:center;gap:5px;margin-bottom:4px}
.comment-nickname {
font-size:11px;font-weight:800;
color:var(--warm);
letter-spacing:.3px;
}
.comment-nickname::before {
content:"";
display:inline-block;
width:5px;height:5px;margin-right:4px;
background:var(--orange);
transform:rotate(45deg);
vertical-align:1px;
}
.comment-text {
font-size:11.5px;font-weight:300;
line-height:1.55;
color:#c6cfd9;
}
.comment-foot {display:flex;justify-content:flex-end;margin-top:5px}
.comment-like {
font-size:10.5px;font-weight:600;
color:rgba(138,151,165,.85);
padding:1px 7px;
border:1px solid rgba(138,151,165,.3);
border-radius:9px;
}
.comment-like::before {content:"♡ ";font-size:11px}
.recommend-region {margin-top:2px}
.recommend-grid {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:9px;
}
.recommend-card {
position:relative;
display:flex;flex-direction:column;gap:4px;
padding:0 0 8px;
background:rgba(26,36,47,.6);
border:1px solid var(--line);
border-radius:0;
overflow:hidden;
transition:border-color .15s,transform .15s;
}
.recommend-card:hover {border-color:var(--warm);transform:translateY(-3px)}
[data-runtime="recommendation"] img.recommend-pic {
width:100%;
aspect-ratio:16 / 10;
height:auto;
object-fit:cover;
background:linear-gradient(150deg,var(--blue-soft),var(--blue-deep));
border-bottom:1px solid rgba(242,181,68,.25);
}
.recommend-name {
font-size:12.5px;font-weight:800;
color:var(--paper);
padding:0 8px;
letter-spacing:.3px;
}
.recommend-blurb {
font-size:10.5px;font-weight:300;
line-height:1.45;
color:var(--gray);
padding:0 8px;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}
.recommend-index {
position:absolute;top:0;right:0;
font-size:11px;font-weight:900;
letter-spacing:.5px;
padding:2px 7px;
background:var(--orange);
color:#fff;
}
.site-footer {
margin-top:18px;
background:linear-gradient(180deg,rgba(18,24,31,.9),#0b1016);
border-top:2px solid rgba(242,181,68,.35);
}
.footer-inner {
max-width:1280px;
margin:0 auto;
padding:14px;
display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;
}
a.footer-link {
font-size:12px;font-weight:700;
color:var(--warm);
text-decoration:none;
padding:2px 7px;
border:1px solid rgba(242,181,68,.4);
}
a.footer-link:hover {background:var(--warm);color:var(--ink)}
.friend-links {
display:flex;flex-wrap:wrap;align-items:center;gap:5px 9px;
flex:1 1 320px;
}
.friend-links-label {
font-size:11px;font-weight:800;
color:var(--gray);
letter-spacing:.5px;
}
a.runtime-friend-link {
font-size:11px;font-weight:300;
color:#9dabba;
text-decoration:none;
white-space:nowrap;
}
a.runtime-friend-link:hover {color:var(--warm);text-decoration:underline}
.footer-disclaimer {
flex:1 1 100%;
font-size:10.5px;font-weight:300;
line-height:1.5;
color:rgba(138,151,165,.8);
border-top:1px dashed rgba(138,151,165,.25);
padding-top:8px;
}
.player-video.is-playing {outline:none}
.ctrl.play, .ctrl.mute, .ctrl.pip, .ctrl.speed, .ctrl.theater, .ctrl.light, .ctrl.fullscreen {letter-spacing:.2px}
.player-panel.is-fullscreen {position:fixed;inset:0;z-index:99}
.player-panel.is-fullscreen .player-video {height:100%;object-fit:contain}
@media (max-width:960px){.hero-shell {grid-template-columns:minmax(0,190px) minmax(0,1fr)}
.comment-stream {column-count:2}
.cast-card {flex:0 0 118px;width:118px}}
@media (max-width:720px){.page-main {padding:0 10px 22px;gap:12px}
.hero-shell {grid-template-columns:1fr}
.poster-wrap {max-width:230px;margin:0 auto;width:100%}
.poster-wrap img {transform:rotate(-1deg)}
.movie-title {font-size:clamp(22px,7vw,30px)}
.player-controls {gap:5px;padding:6px}
.ctrl {font-size:11px;padding:4px 7px}
input.ctrl-progress {flex:1 1 100%;order:-1}
.episode-columns {column-count:1}
.comment-stream {column-count:2}
.recommend-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
.detail-list {grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
.timeline-node:nth-child(even), .timeline-node:nth-child(3n) {margin-left:8px}}
@media (max-width:460px){.comment-stream {column-count:1}
.recommend-grid {grid-template-columns:1fr}
.cast-card {flex:0 0 108px;width:108px}
.footer-inner {padding:12px 10px}
.episode-title {white-space:normal}}

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}