* {margin:0;padding:0;box-sizing:border-box}
:root {
--ink:#070b12;
--storm-0:#04070d;
--storm-1:#0d1a2b;
--storm-2:#152a44;
--storm-3:#1f3d5c;
--storm-line:#2c4a6b;
--steel:#8fa6bd;
--steel-dim:#5f7893;
--mist:#c6d5e4;
--paper:#e8eef4;
--orange:#ff7a1a;
--orange-hot:#ff9a3d;
--orange-deep:#a8480d;
--orange-glow:rgba(255,122,26,.28);
--warm-panel:#1a1410;
--warm-line:#3a2a1c;
--gap:10px;
--pad:12px;
--font:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
html {-webkit-text-size-adjust:100%}
body {
background:var(--ink);
color:var(--mist);
font-family:var(--font);
font-size:14px;
line-height:1.45;
letter-spacing:.01em;
font-weight:400;
overflow-x:hidden;
}
img, video {display:block;max-width:100%}
ul, ol {list-style:none}
a {color:inherit;text-decoration:none}
button, input, select {font-family:inherit;font-size:inherit;color:inherit}
h1, h2, h3 {font-weight:800;letter-spacing:-.02em;line-height:1.15}
.site-header {
position:sticky;
top:0;
z-index:60;
background:rgba(4,7,13,.92);
border-bottom:1px solid var(--storm-line);
backdrop-filter:blur(6px);
}
.header-bar {
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:8px 14px;
max-width:1360px;
margin:0 auto;
}
a[data-contract="site-name"].site-name {
font-size:16px;
font-weight:800;
letter-spacing:.06em;
color:var(--paper);
text-decoration:none;
text-transform:uppercase;
border-left:3px solid var(--orange);
padding-left:9px;
white-space:nowrap;
}
a[data-contract="site-name"].site-name:hover {color:var(--orange-hot)}
.category-nav {
display:flex;
flex-wrap:wrap;
justify-content:flex-end;
gap:6px;
}
a.runtime-category {
display:inline-block;
white-space:nowrap;
font-size:12px;
font-weight:700;
letter-spacing:.04em;
padding:4px 10px;
color:var(--steel);
text-decoration:none;
border:1px solid var(--storm-line);
background:var(--storm-1);
clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
transition:color .15s,background .15s,border-color .15s;
}
a.runtime-category:hover {
color:var(--ink);
background:var(--orange);
border-color:var(--orange);
}
.page-main {
max-width:1360px;
margin:0 auto;
padding:0 14px 6px;
}
.storm-hero {
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);
grid-template-areas:
"visual identity"
"player player"
"cast cast"
"synopsis synopsis"
"status details";
gap:12px;
padding:14px 0 20px;
position:relative;
}
.hero-visual {
grid-area:visual;
position:relative;
align-self:start;
overflow:hidden;
border:1px solid var(--storm-line);
background:linear-gradient(180deg,var(--storm-2) 0%,var(--storm-0) 100%);
}
.hero-backdrop {
position:relative;
display:block;
}
.hero-backdrop::after {
content:"";
position:absolute;
inset:0;
background:
repeating-linear-gradient(115deg,rgba(143,166,189,.10) 0 2px,transparent 2px 26px),
linear-gradient(180deg,rgba(4,7,13,0) 45%,rgba(4,7,13,.85) 100%);
pointer-events:none;
}
.hero-backdrop img {
width:100%;
height:auto;
aspect-ratio:9 / 16;
object-fit:cover;
filter:contrast(1.12) saturate(.82) brightness(.92);
}
.hero-emergency-light {
position:absolute;
left:0;
right:0;
bottom:0;
height:34%;
background:linear-gradient(0deg,var(--orange-glow) 0%,rgba(255,122,26,.06) 55%,rgba(255,122,26,0) 100%);
border-top:2px solid var(--orange);
pointer-events:none;
mix-blend-mode:screen;
}
.hero-identity {
grid-area:identity;
align-self:start;
display:flex;
flex-direction:column;
gap:9px;
padding:14px 16px;
background:linear-gradient(150deg,var(--storm-1) 0%,var(--storm-0) 100%);
border:1px solid var(--storm-line);
border-left:3px solid var(--orange);
clip-path:polygon(0 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%);
}
.movie-title {
font-size:clamp(26px,3.4vw,44px);
letter-spacing:-.03em;
color:#fff;
text-shadow:0 0 22px rgba(255,122,26,.35),0 2px 0 rgba(0,0,0,.5);
}
.movie-tagline {
font-size:14px;
font-weight:600;
letter-spacing:.02em;
color:var(--orange-hot);
border-bottom:1px solid var(--storm-line);
padding-bottom:9px;
}
.movie-seo-description {
font-size:12.5px;
line-height:1.6;
color:var(--steel);
max-width:62ch;
}
.hero-player {
grid-area:player;
width:100%;
background:var(--storm-0);
border:1px solid var(--storm-line);
border-top:2px solid var(--orange);
}
.hero-player video {
display:block;
width:100%;
aspect-ratio:16 / 9;
background:#000;
}
.player-controls {
display:flex;
flex-wrap:wrap;
align-items:center;
gap:6px;
padding:8px 10px;
background:var(--storm-1);
border-top:1px solid var(--storm-line);
}
.player-controls button, .player-controls select {
font-size:11.5px;
font-weight:700;
letter-spacing:.03em;
padding:4px 9px;
color:var(--steel);
background:var(--storm-2);
border:1px solid var(--storm-line);
cursor:pointer;
clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px);
transition:background .12s,color .12s,border-color .12s;
}
.player-controls button:hover, .player-controls select:hover {
color:#fff;
background:var(--storm-3);
border-color:var(--steel-dim);
}
.player-controls button.is-muted {
color:var(--ink);
background:var(--orange);
border-color:var(--orange);
}
.player-controls input[type="range"] {
-webkit-appearance:none;
appearance:none;
height:4px;
background:var(--storm-3);
border:1px solid var(--storm-line);
cursor:pointer;
flex:1 1 90px;
min-width:70px;
}
.player-controls input[type="range"]::-webkit-slider-thumb {
-webkit-appearance:none;
width:12px;
height:12px;
background:var(--orange);
border:none;
cursor:pointer;
}
.player-controls input[type="range"]::-moz-range-thumb {
width:12px;
height:12px;
background:var(--orange);
border:none;
border-radius:0;
cursor:pointer;
}
.player-controls input[type="range"].progress {order:-1}
.player-controls .progress {flex:1 1 100%}
.panel-heading, .section-heading {
font-size:15px;
letter-spacing:.02em;
color:#fff;
text-transform:none;
padding-left:10px;
border-left:4px solid var(--orange);
line-height:1.1;
}
.panel-heading {margin-bottom:10px}
.section-heading {
font-size:17px;
margin-bottom:12px;
}
.panel-heading::after, .section-heading::after {
content:"";
display:block;
height:2px;
margin-top:7px;
background:linear-gradient(90deg,var(--storm-line) 0%,rgba(44,74,107,0) 100%);
}
.cast-panel {
grid-area:cast;
background:linear-gradient(160deg,var(--storm-1) 0%,var(--storm-0) 100%);
border:1px solid var(--storm-line);
padding:12px 14px 14px;
}
.cast-grid {
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:8px;
}
.cast-card {
display:flex;
flex-direction:column;
gap:2px;
padding:8px 10px;
background:var(--storm-2);
border-left:3px solid var(--steel-dim);
clip-path:polygon(0 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%);
transition:border-color .15s,background .15s;
}
.cast-card:hover {
background:var(--storm-3);
border-left-color:var(--orange);
}
.cast-name {
font-size:13.5px;
font-weight:800;
letter-spacing:-.01em;
color:var(--paper);
}
.cast-role {
font-size:11px;
letter-spacing:.03em;
color:var(--steel-dim);
}
.synopsis-panel {
grid-area:synopsis;
background:linear-gradient(160deg,var(--storm-1) 0%,var(--storm-0) 100%);
border:1px solid var(--storm-line);
padding:12px 14px 14px;
}
.synopsis-body {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
gap:10px;
}
.synopsis-paragraph {
font-size:12.5px;
line-height:1.62;
color:var(--steel);
border-top:1px solid var(--storm-line);
padding-top:8px;
}
.synopsis-paragraph:first-child {
border-top:none;
padding-top:0;
}
.episode-status-panel {
grid-area:status;
align-self:start;
background:linear-gradient(150deg,var(--warm-panel) 0%,var(--storm-0) 100%);
border:1px solid var(--warm-line);
border-left:3px solid var(--orange);
padding:12px 14px 14px;
}
.status-meta {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(88px,1fr));
gap:8px;
}
.status-item {
display:flex;
flex-direction:column;
gap:3px;
padding:7px 9px;
background:rgba(255,122,26,.07);
border:1px solid var(--warm-line);
}
.status-key {
font-size:10.5px;
letter-spacing:.08em;
color:var(--orange-hot);
text-transform:uppercase;
}
.status-value {
font-size:18px;
font-weight:800;
letter-spacing:-.02em;
color:#fff;
line-height:1.1;
}
.details-panel {
grid-area:details;
align-self:start;
background:linear-gradient(160deg,var(--storm-1) 0%,var(--storm-0) 100%);
border:1px solid var(--storm-line);
padding:12px 14px 14px;
}
.details-list {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
gap:0 14px;
}
.detail-row {
display:flex;
align-items:baseline;
justify-content:space-between;
gap:10px;
padding:5px 0;
border-bottom:1px solid rgba(44,74,107,.5);
}
.detail-key {
font-size:11.5px;
letter-spacing:.05em;
color:var(--steel-dim);
white-space:nowrap;
}
.detail-value {
font-size:12.5px;
font-weight:700;
color:var(--paper);
text-align:right;
}
.timeline-section {
padding:16px 0 20px;
border-top:1px solid var(--storm-line);
}
.timeline-rail {
position:relative;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
gap:8px 12px;
padding-left:22px;
}
.timeline-rail::before {
content:"";
position:absolute;
left:7px;
top:4px;
bottom:4px;
width:2px;
background:linear-gradient(180deg,var(--storm-line) 0%,var(--orange-deep) 55%,var(--orange) 100%);
}
.timeline-node {
position:relative;
display:flex;
flex-direction:column;
gap:2px;
padding:7px 10px 7px 12px;
background:var(--storm-1);
border:1px solid var(--storm-line);
clip-path:polygon(0 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%);
}
.timeline-node::before {
content:"";
position:absolute;
left:-20px;
top:13px;
width:10px;
height:10px;
background:var(--storm-3);
border:2px solid var(--storm-0);
outline:1px solid var(--steel-dim);
transform:rotate(45deg);
}
.timeline-node:nth-child(1)::before {background:var(--steel-dim)}
.timeline-node:nth-child(2)::before {background:var(--storm-3)}
.timeline-node:nth-child(3)::before {background:var(--storm-2)}
.timeline-node:nth-child(4)::before {background:var(--orange)}
.timeline-node:nth-child(5)::before {background:var(--orange-deep)}
.timeline-node:nth-child(6)::before {background:var(--steel-dim)}
.timeline-node:nth-child(7)::before {background:var(--orange-hot)}
.timeline-timecode {
font-size:10.5px;
font-weight:800;
letter-spacing:.1em;
color:var(--orange-hot);
}
.timeline-label {
font-size:12.5px;
line-height:1.45;
color:var(--mist);
}
.episodes-section {
padding:16px 0 20px;
border-top:1px solid var(--storm-line);
}
.episode-strip {
display:grid;
grid-auto-flow:column;
grid-auto-columns:minmax(215px,1fr);
gap:8px;
overflow-x:auto;
padding-bottom:10px;
scroll-snap-type:x proximity;
-webkit-overflow-scrolling:touch;
}
.episode-strip::-webkit-scrollbar {height:8px}
.episode-strip::-webkit-scrollbar-track {background:var(--storm-1)}
.episode-strip::-webkit-scrollbar-thumb {background:var(--storm-3)}
.episode-strip::-webkit-scrollbar-thumb:hover {background:var(--orange-deep)}
.episode-card {
display:flex;
flex-direction:column;
gap:5px;
padding:10px 11px 12px;
background:linear-gradient(165deg,var(--storm-2) 0%,var(--storm-1) 100%);
border:1px solid var(--storm-line);
border-top:3px solid var(--steel-dim);
scroll-snap-align:start;
transition:border-color .15s,background .15s;
}
.episode-card:hover {
border-top-color:var(--steel);
background:linear-gradient(165deg,var(--storm-3) 0%,var(--storm-1) 100%);
}
.episode-card-current {
background:linear-gradient(165deg,#2a1a0d 0%,var(--storm-0) 100%);
border-color:var(--orange-deep);
border-top:3px solid var(--orange);
box-shadow:inset 0 0 24px rgba(255,122,26,.14);
}
.episode-number {
font-size:10.5px;
font-weight:800;
letter-spacing:.1em;
color:var(--steel-dim);
}
.episode-card-current .episode-number {color:var(--orange-hot)}
.episode-title {
font-size:14px;
font-weight:800;
letter-spacing:-.01em;
color:#fff;
}
.episode-summary {
font-size:12px;
line-height:1.5;
color:var(--steel);
flex:1 1 auto;
}
.episode-duration {
font-size:10.5px;
font-weight:700;
letter-spacing:.06em;
color:var(--steel-dim);
border-top:1px solid rgba(44,74,107,.5);
padding-top:5px;
}
.episode-card-current .episode-duration {
color:var(--orange-hot);
border-top-color:var(--orange-deep);
}
.comments-section {
padding:16px 0 20px;
border-top:1px solid var(--storm-line);
}
.comment-wall {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:8px;
align-items:start;
}
.comment-note {
display:flex;
flex-direction:column;
gap:6px;
padding:10px 12px 11px;
background:linear-gradient(150deg,#221a12 0%,var(--storm-1) 100%);
border:1px solid var(--warm-line);
border-left:3px solid var(--orange-deep);
clip-path:polygon(0 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%);
transition:border-left-color .15s,transform .15s;
}
.comment-note:hover {
border-left-color:var(--orange);
transform:translateY(-2px);
}
.comment-text {
font-size:12.5px;
line-height:1.55;
color:var(--paper);
}
.comment-author {
font-size:11px;
font-weight:700;
letter-spacing:.06em;
color:var(--orange-hot);
align-self:flex-end;
}
.comment-author::before {content:"— "}
.recommend-section {
padding:16px 0 20px;
border-top:1px solid var(--storm-line);
}
.recommend-grid {
display:grid;
gap:8px;
align-items:start;
}
.recommend-grid-four {grid-template-columns:repeat(4,minmax(0,1fr))}
.recommend-grid-three {grid-template-columns:repeat(3,minmax(0,1fr))}
a.recommend-card {
display:flex;
flex-direction:column;
gap:6px;
padding:8px;
background:var(--storm-1);
border:1px solid var(--storm-line);
color:inherit;
text-decoration:none;
clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%);
transition:background .15s,border-color .15s,transform .15s;
}
a.recommend-card:hover {
background:var(--storm-2);
border-color:var(--orange-deep);
transform:translateY(-2px);
}
[data-runtime="recommendation"] img {
width:100%;
aspect-ratio:16 / 9;
height:auto;
object-fit:cover;
background:var(--storm-0);
filter:saturate(.9) contrast(1.06);
}
.recommend-name {
font-size:13px;
font-weight:800;
letter-spacing:-.01em;
color:#fff;
}
.recommend-blurb {
font-size:11.5px;
line-height:1.45;
color:var(--steel-dim);
}
.site-footer {
background:var(--storm-0);
border-top:1px solid var(--storm-line);
margin-top:8px;
}
.footer-inner {
max-width:1360px;
margin:0 auto;
padding:16px 14px 22px;
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,2fr);
gap:12px;
align-items:start;
}
.footer-nav {
display:flex;
flex-wrap:wrap;
gap:8px;
}
a[data-contract="footer-home"], a[data-contract="footer-sitemap"] {
font-size:12px;
font-weight:700;
letter-spacing:.04em;
padding:4px 10px;
color:var(--steel);
text-decoration:none;
border:1px solid var(--storm-line);
background:var(--storm-1);
white-space:nowrap;
clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px);
transition:color .15s,background .15s,border-color .15s;
}
a[data-contract="footer-home"]:hover, a[data-contract="footer-sitemap"]:hover {
color:var(--ink);
background:var(--orange);
border-color:var(--orange);
}
.friend-links {
grid-column:2;
display:flex;
flex-wrap:wrap;
align-items:center;
gap:6px 8px;
}
.friend-links-label {
font-size:11px;
font-weight:800;
letter-spacing:.1em;
color:var(--orange-hot);
padding-right:6px;
border-right:1px solid var(--storm-line);
white-space:nowrap;
}
a.runtime-friend-link {
font-size:11.5px;
color:var(--steel-dim);
text-decoration:none;
white-space:nowrap;
border-bottom:1px solid transparent;
transition:color .15s,border-color .15s;
}
a.runtime-friend-link:hover {
color:var(--orange-hot);
border-bottom-color:var(--orange);
}
.footer-disclaimer {
grid-column:1 / -1;
font-size:11px;
line-height:1.55;
color:var(--steel-dim);
border-top:1px solid var(--storm-line);
padding-top:10px;
}
.player-controls .play, .player-controls .mute, .player-controls .pip, .player-controls .fullscreen, .player-controls .theater, .player-controls .light, .player-controls .speed, .player-controls .volume, .player-controls .progress {
transition:background .12s,color .12s;
}
.player-controls .click {background:var(--storm-3)}
.player-controls .change {color:var(--orange-hot)}
.input, .data-player-action {cursor:pointer}
.player-controls .is-muted {
color:var(--ink);
background:var(--orange);
border-color:var(--orange);
}
body.lights-on .storm-hero::before {
content:"";
position:fixed;
inset:0;
background:rgba(2,4,8,.72);
z-index:40;
pointer-events:none;
}
body.lights-on .hero-player {
position:relative;
z-index:50;
box-shadow:0 0 60px rgba(255,122,26,.22);
}
body.theater-mode .page-main {
max-width:none;
}
body.theater-mode .hero-player {
border-left:none;
border-right:none;
}
body.theater-mode .hero-visual, body.theater-mode .hero-identity {
opacity:.45;
}
@media (max-width:1080px){.storm-hero {
grid-template-columns:minmax(0,1fr);
grid-template-areas:
"visual"
"identity"
"player"
"cast"
"synopsis"
"status"
"details";
}
.cast-grid {grid-template-columns:repeat(4,minmax(0,1fr))}
.recommend-grid-four {grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:860px){.cast-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
.recommend-grid-four {grid-template-columns:repeat(2,minmax(0,1fr))}
.recommend-grid-three {grid-template-columns:repeat(2,minmax(0,1fr))}
.synopsis-body {grid-template-columns:minmax(0,1fr)}
.footer-inner {grid-template-columns:minmax(0,1fr)}
.friend-links {grid-column:1}
.timeline-rail {grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}}
@media (max-width:620px){.page-main {padding:0 10px 6px}
.header-bar {padding:7px 10px;gap:8px}
a[data-contract="site-name"].site-name {font-size:14px}
.cast-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
.recommend-grid-four {grid-template-columns:repeat(2,minmax(0,1fr))}
.recommend-grid-three {grid-template-columns:minmax(0,1fr)}
.status-meta {grid-template-columns:repeat(2,minmax(0,1fr))}
.details-list {grid-template-columns:minmax(0,1fr)}
.timeline-rail {grid-template-columns:minmax(0,1fr);padding-left:20px}
.comment-wall {grid-template-columns:minmax(0,1fr)}
.episode-strip {grid-auto-columns:minmax(190px,1fr)}
.movie-title {font-size:26px}
.section-heading {font-size:15px}}
@media (max-width:400px){.cast-grid {grid-template-columns:minmax(0,1fr)}
.recommend-grid-four {grid-template-columns:minmax(0,1fr)}
.status-meta {grid-template-columns:minmax(0,1fr)}
.episode-strip {grid-auto-columns:minmax(170px,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}