* {box-sizing:border-box;margin:0;padding:0}
:root {
--lamp:#f2b53c;
--lamp-deep:#d99522;
--concrete:#8c8a85;
--concrete-dark:#55534f;
--concrete-deep:#3a3835;
--ledger:#a8322a;
--ledger-deep:#7d221c;
--canvas:#5c6b47;
--canvas-soft:#7c8a63;
--ink:#221f1c;
--paper:#f4ecdb;
--paper-dim:#e6dcc6;
--gap:10px;
--pad:10px;
}
html {background:#2b2926;}
body {
font-family:"Songti SC","SimSun","Noto Serif CJK SC",serif;
color:var(--ink);
background:
repeating-linear-gradient(0deg,rgba(0,0,0,.03) 0 1px,transparent 1px 4px),
radial-gradient(circle at 20% 0%,#4a4640,#2b2926 70%);
background-attachment:fixed;
line-height:1.55;
font-size:14px;
-webkit-text-size-adjust:100%;
}
img {display:block;max-width:100%;}
a {color:inherit;}
button, input, select {font:inherit;color:inherit;}
h1, h2, h3 {font-family:"Heiti SC","SimHei","Noto Sans CJK SC",sans-serif;font-weight:800;line-height:1.25;}
.section-title {
font-family:"Heiti SC","SimHei",sans-serif;
font-weight:900;
font-size:15px;
letter-spacing:.14em;
color:var(--lamp);
background:var(--concrete-deep);
display:inline-block;
padding:4px 12px;
border-left:4px solid var(--ledger);
margin-bottom:var(--gap);
box-shadow:2px 2px 0 rgba(0,0,0,.4);
}
.site-header {
position:sticky;
top:0;
z-index:30;
background:linear-gradient(180deg,#3c3934,#2f2d29);
border-bottom:2px solid var(--lamp-deep);
box-shadow:0 2px 8px rgba(0,0,0,.5);
}
.header-shell {
max-width:1280px;
margin:0 auto;
display:flex;
flex-wrap:wrap;
align-items:center;
gap:var(--gap);
padding:6px var(--pad);
}
.site-brand {
font-family:"Heiti SC","SimHei",sans-serif;
font-weight:900;
font-size:20px;
letter-spacing:.2em;
color:var(--lamp);
text-decoration:none;
text-shadow:0 0 10px rgba(242,181,60,.5);
border-bottom:2px solid transparent;
}
.site-brand:hover {color:#ffd97a;}
.categories-bar {
display:flex;
flex-wrap:wrap;
gap:6px;
margin-left:auto;
align-items:center;
}
a.runtime-category {
white-space:nowrap;
font-family:"Heiti SC","SimHei",sans-serif;
font-size:12px;
letter-spacing:.08em;
color:var(--paper);
background:var(--concrete-dark);
border:1px solid #6e6b65;
padding:3px 10px;
text-decoration:none;
box-shadow:inset 0 -2px 0 rgba(0,0,0,.35);
}
a.runtime-category:hover {color:var(--ink);background:var(--lamp);border-color:var(--lamp-deep);}
.page-main {
max-width:1280px;
margin:0 auto;
padding:var(--gap) var(--pad) 24px;
display:flex;
flex-direction:column;
gap:16px;
}
.hero-banner {
position:relative;
overflow:hidden;
border:1px solid #1c1a17;
box-shadow:0 4px 16px rgba(0,0,0,.6);
background:#141210;
min-height:220px;
}
.hero-media {position:absolute;inset:0;}
.hero-backdrop {
width:100%;
height:100%;
object-fit:cover;
filter:brightness(.42) saturate(.85) contrast(1.1);
}
.hero-banner::after {
content:"";
position:absolute;inset:0;
background:
radial-gradient(circle at 78% 18%,rgba(242,181,60,.35),transparent 22%),
radial-gradient(circle at 62% 26%,rgba(242,181,60,.28),transparent 18%),
linear-gradient(90deg,rgba(20,18,16,.85),rgba(20,18,16,.15) 65%,rgba(20,18,16,.7));
pointer-events:none;
}
.hero-copy {
position:relative;
z-index:2;
max-width:640px;
padding:34px 18px 30px;
display:flex;
flex-direction:column;
gap:8px;
}
.hero-slogan {
font-family:"Heiti SC","SimHei",sans-serif;
font-weight:900;
font-size:22px;
letter-spacing:.08em;
color:var(--lamp);
text-shadow:0 2px 0 #000,0 0 16px rgba(242,181,60,.55);
border-left:5px solid var(--ledger);
padding-left:10px;
}
.hero-sub {
font-size:13px;
color:#e4dccb;
max-width:52ch;
text-shadow:0 1px 3px #000;
}
.hero-slogan, .hero-sub {margin:0;}
.movie-overview {
background:
repeating-linear-gradient(90deg,rgba(0,0,0,.025) 0 2px,transparent 2px 6px),
var(--paper);
border:1px solid #b9ad91;
box-shadow:0 3px 10px rgba(0,0,0,.45);
padding:12px;
}
.overview-layout {
display:grid;
grid-template-columns:minmax(0,190px) minmax(0,1fr);
gap:14px;
align-items:start;
}
.poster-panel {position:sticky;top:56px;}
.poster-frame {
border:3px solid var(--concrete-deep);
box-shadow:4px 4px 0 rgba(0,0,0,.35);
background:#000;
}
.poster-frame img {
width:100%;
height:auto;
display:block;
object-fit:cover;
}
.overview-body {
display:flex;
flex-direction:column;
gap:12px;
min-width:0;
}
.overview-head {
border-bottom:2px dashed #b3a68a;
padding-bottom:8px;
display:flex;
flex-direction:column;
gap:4px;
}
.movie-title {
font-size:26px;
letter-spacing:.06em;
color:var(--ledger-deep);
}
.movie-tagline {
font-size:13px;
color:var(--concrete-dark);
letter-spacing:.05em;
}
.movie-tagline::before {content:"「";color:var(--ledger);}
.movie-tagline::after {content:"」";color:var(--ledger);}
.episode-status {
display:flex;
flex-wrap:wrap;
align-items:center;
gap:var(--gap);
background:var(--paper-dim);
border:1px solid #c6b795;
border-left:4px solid var(--lamp-deep);
padding:6px 10px;
}
.status-line {
font-family:"Heiti SC","SimHei",sans-serif;
font-weight:800;
font-size:15px;
color:var(--ledger-deep);
}
.status-meta {
font-size:12px;
color:var(--concrete-dark);
border-left:1px solid #b3a68a;
padding-left:var(--gap);
}
.status-actions {
display:flex;
flex-wrap:wrap;
gap:6px;
margin-left:auto;
}
.btn-play, .btn-theater, .btn-light {
font-family:"Heiti SC","SimHei",sans-serif;
font-size:12px;
letter-spacing:.06em;
cursor:pointer;
padding:5px 12px;
border:1px solid var(--concrete-deep);
background:linear-gradient(180deg,#f6f0e0,#ddd2b8);
color:var(--ink);
box-shadow:2px 2px 0 rgba(0,0,0,.3);
}
.btn-play {background:linear-gradient(180deg,var(--lamp),var(--lamp-deep));color:#2b2113;font-weight:800;}
.btn-theater {background:linear-gradient(180deg,var(--canvas-soft),var(--canvas));color:#f2ecdd;}
.btn-light {background:linear-gradient(180deg,#e8e2d2,#c9bfa6);}
.btn-play:hover, .btn-theater:hover, .btn-light:hover {filter:brightness(1.08);}
.btn-play:active, .btn-theater:active, .btn-light:active {transform:translate(1px,1px);box-shadow:1px 1px 0 rgba(0,0,0,.3);}
.btn-play.is-active, .btn-theater.is-active, .btn-light.is-active {outline:3px solid var(--ledger);outline-offset:1px;}
.player-shell {
position:relative;
background:#0e0d0c;
border:2px solid var(--concrete-deep);
box-shadow:0 4px 14px rgba(0,0,0,.55);
max-width:100%;
}
.player-shell video {
display:block;
width:100%;
height:auto;
background:#000;
}
.player-controls {
display:flex;
flex-wrap:wrap;
align-items:center;
gap:6px;
padding:6px 8px;
background:linear-gradient(180deg,#33312d,#242220);
border-top:1px solid #4d4a44;
}
.ctrl {
font-family:"Heiti SC","SimHei",sans-serif;
font-size:11px;
cursor:pointer;
padding:3px 8px;
background:#3f3c37;
color:var(--paper);
border:1px solid #5b5751;
}
.ctrl:hover {background:var(--lamp);color:#2b2113;border-color:var(--lamp-deep);}
.ctrl.is-muted {background:var(--ledger);color:#ffe;}
.ctrl.is-active {background:var(--lamp);color:#2b2113;}
.ctrl-progress {
flex:1 1 140px;
min-width:110px;
height:8px;
accent-color:var(--lamp);
background:#1b1917;
cursor:pointer;
}
.ctrl-volume {
flex:0 1 90px;
min-width:70px;
height:8px;
accent-color:var(--canvas-soft);
cursor:pointer;
}
.ctrl-speed {
font-size:11px;
background:#3f3c37;
color:var(--paper);
border:1px solid #5b5751;
padding:3px 4px;
cursor:pointer;
}
.player-shell.is-theater {
box-shadow:0 0 0 2px var(--lamp),0 6px 24px rgba(0,0,0,.7);
}
.player-shell.is-lights-off {filter:brightness(.28);}
.player-shell.is-fullscreen video {height:100%;}
.player-shell.is-fullscreen {
background:#000;
display:flex;
flex-direction:column;
}
.cast-strip {margin-top:2px;}
.cast-track {
display:flex;
gap:8px;
overflow-x:auto;
padding:2px 2px 8px;
scrollbar-color:var(--concrete) var(--paper-dim);
scrollbar-width:thin;
}
.cast-card {
flex:0 0 auto;
width:88px;
display:flex;
flex-direction:column;
align-items:center;
gap:3px;
background:var(--paper-dim);
border:1px solid #c0b291;
padding:4px;
box-shadow:2px 2px 0 rgba(0,0,0,.22);
}
.cast-portrait {
width:100%;
aspect-ratio:1/1;
overflow:hidden;
border:2px solid var(--concrete-dark);
background:var(--concrete-deep);
}
.cast-portrait img {
width:100%;
height:100%;
object-fit:cover;
filter:sepia(.35) contrast(1.05);
}
.cast-name {
font-family:"Heiti SC","SimHei",sans-serif;
font-size:12px;
font-weight:800;
text-align:center;
color:var(--ink);
}
.cast-role {
writing-mode:vertical-rl;
text-orientation:upright;
font-size:10px;
color:var(--ledger-deep);
letter-spacing:.08em;
margin:0 auto;
max-height:64px;
overflow:hidden;
}
.synopsis-block .section-title {margin-bottom:var(--gap);}
.synopsis-columns {
display:grid;
grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);
gap:var(--gap);
align-items:start;
}
.synopsis-text {
column-count:2;
column-gap:14px;
column-rule:1px solid #b9ad91;
font-size:13px;
text-align:justify;
}
.synopsis-text p {
margin-bottom:7px;
text-indent:2em;
break-inside:avoid;
}
.synopsis-text p:last-child {margin-bottom:0;}
.synopsis-media {
border:3px solid var(--concrete-deep);
box-shadow:3px 3px 0 rgba(0,0,0,.3);
overflow:hidden;
background:#000;
align-self:start;
}
.synopsis-media img {
width:100%;
height:auto;
object-fit:cover;
filter:sepia(.4) brightness(.92);
}
.details-list {
display:grid;
grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
gap:6px;
}
.detail-item {
display:flex;
gap:8px;
border:1px solid #c6b795;
background:var(--paper-dim);
padding:4px 8px;
align-items:baseline;
}
.detail-item dt {
font-family:"Heiti SC","SimHei",sans-serif;
font-size:11px;
font-weight:800;
color:var(--canvas);
flex:0 0 4.6em;
letter-spacing:.06em;
}
.detail-item dd {
font-size:12.5px;
color:var(--ink);
min-width:0;
}
.timeline-section {background:rgba(0,0,0,.18);padding:12px;border:1px solid #46433d;}
.timeline-track {
display:flex;
gap:8px;
overflow-x:auto;
padding:2px 2px 10px;
scrollbar-color:var(--lamp-deep) #302e2a;
scrollbar-width:thin;
}
.timeline-node {
flex:0 0 auto;
width:150px;
background:linear-gradient(180deg,#e9e1cd,#d3c8ae);
border:2px solid var(--concrete-dark);
border-top:5px solid var(--ledger);
padding:7px 8px;
box-shadow:3px 3px 0 rgba(0,0,0,.4);
display:flex;
flex-direction:column;
gap:4px;
}
.node-timecode {
font-family:"Heiti SC","SimHei",sans-serif;
font-weight:900;
font-size:14px;
color:var(--ledger-deep);
letter-spacing:.06em;
}
.node-label {
font-size:11.5px;
line-height:1.5;
color:#3a352c;
}
.episode-grid {
display:grid;
grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
gap:var(--gap);
}
.episode-card {
position:relative;
background:var(--paper);
border:1px solid #b9ad91;
border-left:4px solid var(--concrete-dark);
padding:10px 10px 8px 46px;
box-shadow:2px 2px 0 rgba(0,0,0,.3);
display:flex;
flex-direction:column;
gap:4px;
}
.episode-stall {
position:absolute;
left:6px;
top:8px;
width:32px;
height:32px;
display:flex;
align-items:center;
justify-content:center;
font-family:"Heiti SC","SimHei",sans-serif;
font-weight:900;
font-size:15px;
color:#f6efdc;
background:var(--ledger);
border:2px solid var(--ledger-deep);
box-shadow:2px 2px 0 rgba(0,0,0,.35);
}
.episode-title {
font-size:14px;
color:var(--ink);
}
.episode-summary {
font-size:12px;
line-height:1.55;
color:#46413a;
}
.episode-duration {
font-size:11px;
color:var(--canvas);
font-family:"Heiti SC","SimHei",sans-serif;
letter-spacing:.08em;
margin-top:auto;
border-top:1px dashed #c0b291;
padding-top:4px;
}
.comments-section {
background:
repeating-linear-gradient(0deg,rgba(120,90,40,.07) 0 1px,transparent 1px 22px),
repeating-linear-gradient(90deg,rgba(120,90,40,.05) 0 1px,transparent 1px 26px),
rgba(244,236,219,.86);
border:1px solid #b9ad91;
padding:12px;
box-shadow:0 3px 10px rgba(0,0,0,.4);
}
.comments-columns {
columns:2;
column-gap:12px;
}
.comment-card {
break-inside:avoid;
background:rgba(255,252,244,.72);
border:1px solid #c6b795;
border-left:3px solid var(--canvas);
padding:7px 9px;
margin-bottom:8px;
display:block;
}
.comment-nick {
font-family:"Heiti SC","SimHei",sans-serif;
font-size:12px;
font-weight:800;
color:var(--ledger-deep);
letter-spacing:.05em;
margin-bottom:3px;
}
.comment-nick::before {content:"●";color:var(--lamp-deep);font-size:9px;margin-right:4px;vertical-align:2px;}
.comment-text {
font-size:12px;
line-height:1.6;
color:#3d3830;
}
.recommend-region {
background:rgba(0,0,0,.16);
border:1px solid #46433d;
padding:10px;
}
.region-title {
font-family:"Heiti SC","SimHei",sans-serif;
font-weight:900;
font-size:13px;
letter-spacing:.1em;
color:#fff2dc;
display:inline-block;
background:var(--ledger-deep);
border:2px solid #c14a3f;
padding:3px 10px;
margin-bottom:8px;
box-shadow:2px 2px 0 rgba(0,0,0,.45);
}
.region-track {
display:flex;
gap:8px;
overflow-x:auto;
padding:2px 2px 10px;
scrollbar-color:var(--lamp-deep) #302e2a;
scrollbar-width:thin;
}
a.recommend-card {
flex:0 0 auto;
width:150px;
display:flex;
flex-direction:column;
gap:4px;
background:var(--paper);
border:1px solid #b9ad91;
padding:5px;
text-decoration:none;
color:var(--ink);
box-shadow:2px 2px 0 rgba(0,0,0,.35);
}
a.recommend-card:hover {background:#fff8e8;border-color:var(--lamp-deep);}
[data-runtime="recommendation"] img {
width:100%;
height:auto;
aspect-ratio:3/4;
object-fit:cover;
border:2px solid var(--concrete-dark);
filter:sepia(.28) contrast(1.03);
}
[data-runtime="recommendation"] [data-runtime="name"] {
font-family:"Heiti SC","SimHei",sans-serif;
font-weight:800;
font-size:12.5px;
line-height:1.3;
}
[data-runtime="recommendation"] [data-runtime="blurb"] {
font-size:11px;
line-height:1.45;
color:#5a5348;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}
.site-footer {
background:linear-gradient(180deg,#33312d,#1f1d1a);
border-top:3px solid var(--lamp-deep);
color:#d8d0bd;
margin-top:6px;
}
.footer-shell {
max-width:1280px;
margin:0 auto;
padding:14px var(--pad) 20px;
display:flex;
flex-direction:column;
gap:8px;
}
.footer-nav {
display:flex;
flex-wrap:wrap;
gap:10px;
}
a[data-contract="footer-home"], a[data-contract="footer-sitemap"] {
font-family:"Heiti SC","SimHei",sans-serif;
font-size:12.5px;
letter-spacing:.08em;
color:var(--lamp);
text-decoration:none;
border-bottom:1px solid var(--lamp-deep);
padding-bottom:1px;
}
a[data-contract="footer-home"]:hover, a[data-contract="footer-sitemap"]:hover {color:#ffd97a;border-bottom-color:#ffd97a;}
.friend-links {
display:flex;
flex-wrap:wrap;
align-items:center;
gap:8px;
border-top:1px dashed #55524b;
padding-top:8px;
}
.friend-links-label {
font-family:"Heiti SC","SimHei",sans-serif;
font-size:11.5px;
font-weight:800;
color:var(--canvas-soft);
letter-spacing:.1em;
}
a.runtime-friend-link {
font-size:11.5px;
color:#bdb5a2;
text-decoration:none;
border-bottom:1px dotted #6a665e;
white-space:nowrap;
}
a.runtime-friend-link:hover {color:var(--lamp);border-bottom-color:var(--lamp);}
.footer-disclaimer {
font-size:11px;
line-height:1.6;
color:#8d8676;
border-top:1px dashed #55524b;
padding-top:8px;
}
.click, .input {cursor:pointer;}
.player {position:relative;}
.change {transition:filter .2s ease;}
.play.is-active, .mute.is-muted, .pip.is-active, .fullscreen.is-active, .theater.is-active, .light.is-active {background:var(--lamp);color:#2b2113;}
.progress {-webkit-appearance:none;appearance:none;background:#1b1917;border:1px solid #4d4a44;}
.progress::-webkit-slider-thumb {-webkit-appearance:none;width:12px;height:12px;background:var(--lamp);border:1px solid var(--lamp-deep);}
.progress::-moz-range-thumb {width:12px;height:12px;background:var(--lamp);border:1px solid var(--lamp-deep);}
.volume, .speed {accent-color:var(--lamp);}
.timeupdate {transition:width .1s linear;}
@media (max-width:900px){.overview-layout {grid-template-columns:minmax(0,160px) minmax(0,1fr);}
.synopsis-columns {grid-template-columns:minmax(0,1fr);}
.synopsis-text {column-count:1;}
.hero-slogan {font-size:19px;}}
@media (max-width:680px){.page-main {padding:8px 8px 18px;gap:12px;}
.header-shell {padding:6px 8px;}
.site-brand {font-size:17px;}
.overview-layout {grid-template-columns:minmax(0,1fr);}
.poster-panel {position:static;max-width:220px;}
.movie-title {font-size:21px;}
.episode-status {gap:6px;}
.status-meta {border-left:0;padding-left:0;flex-basis:100%;}
.status-actions {margin-left:0;}
.hero-copy {padding:24px 12px 22px;}
.hero-slogan {font-size:17px;}
.hero-sub {font-size:12px;}
.episode-grid {grid-template-columns:repeat(auto-fill,minmax(160px,1fr));}
.comments-columns {columns:1;}
.cast-card {width:78px;}
.timeline-node {width:132px;}
a.recommend-card {width:132px;}
.footer-shell {padding:12px 8px 18px;}}
@media (max-width:420px){.episode-grid {grid-template-columns:minmax(0,1fr);}
.episode-card {padding-left:44px;}
.details-list {grid-template-columns:minmax(0,1fr);}
.hero-banner {min-height:190px;}}

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}