* {margin:0;padding:0;box-sizing:border-box}
:root {
--yellow:#e8b21b;
--yellow-bright:#f5c518;
--yellow-deep:#c98f0a;
--soil:#3a2415;
--soil-deep:#241408;
--soil-mid:#5c3d22;
--soil-light:#8a6440;
--mist:#c8cfc2;
--mist-deep:#8f9a8a;
--pale-soil:#efe6d8;
--line:#d6c8b2;
--ink:#1c120a;
--font-title:"Songti SC","STSong","SimSun","Noto Serif SC",serif;
--font-body:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}
html {-webkit-text-size-adjust:100%}
body {
background:var(--soil-deep);
color:var(--ink);
font-family:var(--font-body);
font-size:14px;
line-height:1.5;
letter-spacing:.01em;
min-height:100vh;
}
img {display:block;max-width:100%}
a {color:inherit}
button {font-family:inherit;cursor:pointer}
ul, ol {list-style:none}
.site-header {
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
flex-wrap:wrap;
padding:10px 18px;
background:var(--soil);
border-bottom:3px solid var(--yellow);
position:relative;
z-index:20;
}
a[data-contract="site-name"] {
font-family:var(--font-title);
font-size:20px;
font-weight:700;
letter-spacing:.12em;
color:var(--yellow-bright);
text-decoration:none;
border-left:4px solid var(--yellow);
padding-left:10px;
}
a[data-contract="site-name"]:hover {color:#fff}
.category-nav {
display:flex;
flex-wrap:wrap;
gap:6px;
}
a.runtime-category {
display:inline-block;
white-space:nowrap;
font-size:12.5px;
padding:3px 11px;
color:var(--mist);
text-decoration:none;
border:1px solid var(--soil-light);
border-radius:3px;
background:rgba(255,255,255,.04);
transition:background .15s,color .15s,border-color .15s;
}
a.runtime-category:hover {
color:var(--soil-deep);
background:var(--yellow);
border-color:var(--yellow);
}
.page-main {
display:block;
background:var(--pale-soil);
max-width:1180px;
margin:0 auto;
padding:0 0 26px;
box-shadow:0 0 0 1px rgba(0,0,0,.15);
}
.hero-panel {
position:relative;
background:
radial-gradient(120% 100% at 30% 40%,rgba(232,178,27,.16) 0%,rgba(36,20,8,.92) 68%,#160b03 100%),
linear-gradient(160deg,#2a1a0c,#160b03);
color:#f4ead8;
padding:22px 22px 18px;
display:grid;
grid-template-columns:minmax(0,300px) minmax(0,1fr);
grid-template-areas:
"media body"
"media player";
gap:14px 22px;
align-items:start;
}
.hero-panel::after {
content:"";
position:absolute;
inset:0;
pointer-events:none;
background:radial-gradient(80% 70% at 50% 50%,transparent 40%,rgba(12,6,0,.6) 100%);
}
.hero-media {
grid-area:media;
position:relative;
z-index:2;
align-self:start;
border:2px solid var(--yellow-deep);
border-radius:4px;
overflow:hidden;
background:#0d0702;
box-shadow:0 0 0 1px rgba(0,0,0,.5),6px 6px 0 rgba(232,178,27,.18);
}
.hero-media img {
width:100%;
height:auto;
aspect-ratio:9 / 16;
object-fit:cover;
}
.hero-body {
grid-area:body;
position:relative;
z-index:2;
align-self:start;
max-width:640px;
}
.hero-title {
font-family:var(--font-title);
font-size:clamp(26px,4.2vw,42px);
line-height:1.15;
letter-spacing:.06em;
color:var(--yellow-bright);
text-shadow:0 2px 0 rgba(0,0,0,.6);
font-weight:700;
}
.hero-tagline {
display:inline-block;
margin-top:10px;
font-family:var(--font-title);
font-size:clamp(14px,1.9vw,19px);
letter-spacing:.08em;
color:#fff;
background:var(--soil-mid);
border-left:5px solid var(--yellow);
padding:5px 12px 6px;
border-radius:2px;
box-shadow:0 3px 0 rgba(0,0,0,.35);
}
.hero-seo {
margin-top:12px;
font-size:13px;
line-height:1.72;
color:#d9cdb8;
max-width:60ch;
border-top:1px dashed rgba(232,178,27,.4);
padding-top:10px;
}
.player-shell {
grid-area:player;
position:relative;
z-index:2;
width:100%;
max-width:100%;
background:#0b0602;
border:1px solid var(--soil-light);
border-radius:4px;
overflow:hidden;
align-self:start;
}
.player-shell video {
display:block;
width:100%;
aspect-ratio:16 / 9;
object-fit:contain;
background:#000;
}
.player-controls {
display:flex;
flex-wrap:wrap;
gap:5px;
padding:7px 8px;
background:linear-gradient(180deg,#2c1b0d,#1a0f05);
border-top:2px solid var(--yellow-deep);
}
.player-controls button {
font-size:12px;
line-height:1;
padding:5px 9px;
color:var(--pale-soil);
background:#3d2713;
border:1px solid #5c3d22;
border-radius:3px;
transition:background .15s,color .15s,border-color .15s;
}
.player-controls button:hover {
background:var(--yellow);
color:var(--soil-deep);
border-color:var(--yellow);
}
.player-shell.is-theater {
position:fixed;
inset:0;
z-index:99;
max-width:none;
border-radius:0;
border:none;
display:flex;
flex-direction:column;
justify-content:center;
background:#000;
}
.player-shell.is-theater video {
max-height:calc(100vh - 60px);
margin:0 auto;
}
.player-shell.is-lights-off {
box-shadow:0 0 0 9999px rgba(0,0,0,.86);
}
.player-shell.is-lights-off .player-controls {
opacity:.35;
transition:opacity .2s;
}
.player-shell.is-lights-off:hover .player-controls {opacity:1}
.section-heading, .cast-heading, .recommendation-title {
font-family:var(--font-title);
font-weight:700;
letter-spacing:.08em;
color:var(--soil);
border-left:6px solid var(--yellow);
padding-left:9px;
line-height:1.25;
}
.section-heading {font-size:19px;margin:0 0 10px}
.cast-heading {font-size:17px;margin:0 0 9px}
section {padding:16px 20px 0}
section:first-of-type {padding-top:0}
.episode-status, .cast-block, .synopsis-block, .timeline-section, .episodes-section, .comments-section, .details-block {
border-top:1px solid var(--line);
margin-top:16px;
padding-top:14px;
}
.cast-block {
background:linear-gradient(180deg,#f6efe2,#efe6d8);
}
.cast-list {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
gap:8px 14px;
align-items:start;
}
.cast-item {
display:grid;
grid-template-columns:38px minmax(0,1fr);
grid-template-areas:"avatar name" "avatar role";
column-gap:9px;
align-items:center;
padding:7px 9px;
background:#fffaf0;
border:1px solid var(--line);
border-left:3px solid var(--yellow-deep);
border-radius:3px;
}
.cast-avatar {
grid-area:avatar;
width:38px;
height:38px;
border-radius:50%;
background:
radial-gradient(circle at 34% 30%,var(--yellow-bright) 0%,var(--yellow-deep) 46%,var(--soil) 100%);
border:2px solid var(--soil-mid);
box-shadow:inset 0 0 0 2px rgba(255,255,255,.25);
align-self:center;
}
.cast-name {
grid-area:name;
font-family:var(--font-title);
font-size:14.5px;
font-weight:700;
color:var(--soil);
letter-spacing:.05em;
}
.cast-role {
grid-area:role;
font-size:11.5px;
color:var(--soil-light);
line-height:1.45;
}
.synopsis-block {background:var(--pale-soil)}
.synopsis-text {
font-size:13px;
line-height:1.78;
color:#3d2c1c;
margin-bottom:8px;
text-align:justify;
}
.synopsis-text:last-child {margin-bottom:0}
.synopsis-text:first-of-type::first-letter {
font-family:var(--font-title);
font-size:34px;
line-height:.9;
color:var(--yellow-deep);
float:left;
padding:2px 6px 0 0;
}
.episode-status {
display:flex;
flex-wrap:wrap;
gap:8px 12px;
align-items:center;
}
.status-line {
font-size:12.5px;
font-weight:700;
letter-spacing:.06em;
color:#fff;
background:var(--soil-mid);
padding:4px 12px;
border-radius:3px;
border-bottom:2px solid var(--yellow);
}
.status-line + .status-line {
background:var(--yellow);
color:var(--soil-deep);
border-bottom-color:var(--soil);
}
.details-block {background:#f6efe2}
.details-list {
display:grid;
grid-template-columns:auto minmax(0,1fr);
gap:0;
border-top:1px solid var(--line);
}
.detail-key, .detail-value {
font-size:12.5px;
padding:6px 8px;
border-bottom:1px solid var(--line);
}
.detail-key {
font-family:var(--font-title);
font-weight:700;
color:var(--soil-light);
letter-spacing:.08em;
background:rgba(232,178,27,.1);
white-space:nowrap;
}
.detail-value {color:#2e2013}
.timeline-section {background:var(--pale-soil)}
.timeline-list {
position:relative;
padding-left:22px;
display:grid;
gap:6px;
}
.timeline-list::before {
content:"";
position:absolute;
left:5px;
top:6px;
bottom:6px;
width:2px;
background:linear-gradient(180deg,var(--yellow),var(--soil-light));
}
.timeline-item {
display:grid;
grid-template-columns:76px minmax(0,1fr);
align-items:center;
gap:10px;
padding:5px 10px 5px 0;
background:rgba(255,255,255,.55);
border-radius:3px;
}
.timeline-node {
position:absolute;
left:0;
width:12px;
height:12px;
margin-top:0;
background:var(--yellow-bright);
border:2px solid var(--soil);
border-radius:50% 0 50% 50%;
transform:rotate(45deg);
box-shadow:0 0 0 2px rgba(232,178,27,.3);
}
.timeline-item {position:relative;padding-left:22px}
.timeline-item .timeline-node {position:absolute;left:-21px;top:50%;margin-top:-6px}
.timeline-time {
font-family:var(--font-title);
font-size:12.5px;
font-weight:700;
color:var(--soil-deep);
background:var(--yellow);
padding:2px 6px;
border-radius:2px;
text-align:center;
letter-spacing:.04em;
}
.timeline-label {
font-size:12.5px;
color:#3a2a19;
line-height:1.45;
}
.episodes-section {background:#f6efe2}
.episode-strip {
display:flex;
gap:10px;
overflow-x:auto;
padding:4px 2px 12px;
scroll-snap-type:x proximity;
-webkit-overflow-scrolling:touch;
scrollbar-width:thin;
scrollbar-color:var(--yellow-deep) rgba(0,0,0,.12);
}
.episode-strip::-webkit-scrollbar {height:8px}
.episode-strip::-webkit-scrollbar-track {background:rgba(92,61,34,.12)}
.episode-strip::-webkit-scrollbar-thumb {background:var(--yellow-deep);border-radius:4px}
.episode-card {
flex:0 0 196px;
scroll-snap-align:start;
display:flex;
flex-direction:column;
gap:5px;
padding:9px 10px 10px;
background:#fffaf0;
border:1px solid var(--line);
border-top:4px solid var(--soil-light);
border-radius:3px;
align-self:flex-start;
}
.episode-number {
font-family:var(--font-title);
font-size:11.5px;
font-weight:700;
letter-spacing:.1em;
color:var(--soil-light);
}
.episode-title {
font-family:var(--font-title);
font-size:15px;
color:var(--soil);
letter-spacing:.04em;
line-height:1.3;
}
.episode-summary {
font-size:12px;
line-height:1.55;
color:#4a3722;
}
.episode-meta {
margin-top:auto;
font-size:11px;
color:var(--mist-deep);
letter-spacing:.06em;
border-top:1px dashed var(--line);
padding-top:5px;
}
.episode-card-current {
background:linear-gradient(180deg,#fdeeb6,#f7d95f);
border-color:var(--yellow-deep);
border-top-color:var(--soil);
box-shadow:0 3px 0 var(--yellow-deep);
}
.episode-card-current .episode-number {color:var(--soil-deep)}
.episode-card-current .episode-summary {color:#41300f}
.episode-card-current .episode-meta {color:var(--soil-mid);border-top-color:rgba(58,36,21,.35)}
.comments-section {background:var(--pale-soil)}
.comment-columns {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:8px 16px;
align-items:start;
}
.comment-column {
display:grid;
gap:6px;
align-content:start;
}
.comment-item {
background:#e7dbc6;
border-left:3px solid var(--soil-light);
border-radius:2px;
padding:6px 9px 7px;
}
.comment-nickname {
font-family:var(--font-title);
font-size:12px;
font-weight:700;
color:var(--soil);
letter-spacing:.06em;
margin-bottom:2px;
}
.comment-text {
font-size:12px;
line-height:1.6;
color:#3d2c1c;
}
.recommendation-title {
font-size:16px;
margin-bottom:8px;
}
.recommendation-grid {
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:10px;
align-items:start;
}
a[data-runtime="recommendation"] {
display:flex;
flex-direction:column;
background:#fffaf0;
border:1px solid var(--line);
border-radius:3px;
overflow:hidden;
text-decoration:none;
color:var(--soil);
transition:transform .15s,box-shadow .15s;
}
a[data-runtime="recommendation"] img {
width:100%;
height:auto;
aspect-ratio:16 / 10;
object-fit:cover;
background:var(--soil-mid);
filter:saturate(.92) contrast(1.05);
}
a[data-runtime="recommendation"] [data-runtime="name"] {
font-family:var(--font-title);
font-size:13px;
font-weight:700;
letter-spacing:.04em;
padding:6px 8px 0;
color:var(--soil-deep);
}
a[data-runtime="recommendation"] [data-runtime="blurb"] {
font-size:11px;
line-height:1.5;
color:var(--soil-light);
padding:3px 8px 8px;
}
a[data-runtime="recommendation"]:hover {
transform:translateY(-2px);
box-shadow:0 4px 0 var(--yellow-deep);
border-color:var(--yellow-deep);
}
.site-footer {
background:var(--soil-deep);
color:#c2b49c;
padding:18px 20px 22px;
border-top:4px solid var(--yellow);
font-size:12px;
}
.footer-disclaimer {
line-height:1.7;
max-width:78ch;
color:#a8987d;
margin-bottom:12px;
border-left:3px solid var(--soil-mid);
padding-left:10px;
}
.footer-nav {
display:flex;
flex-wrap:wrap;
gap:8px 16px;
margin-bottom:12px;
}
a[data-contract="footer-home"], a[data-contract="footer-sitemap"] {
font-family:var(--font-title);
font-size:13px;
letter-spacing:.08em;
color:var(--yellow);
text-decoration:none;
border-bottom:1px solid transparent;
transition:color .15s,border-color .15s;
}
a[data-contract="footer-home"]:hover, a[data-contract="footer-sitemap"]:hover {
color:#fff;
border-bottom-color:var(--yellow);
}
.friend-links {
display:flex;
flex-wrap:wrap;
align-items:center;
gap:6px 10px;
padding-top:12px;
border-top:1px solid #3d2713;
}
.friend-links-label {
font-family:var(--font-title);
font-size:12px;
letter-spacing:.1em;
color:var(--soil-light);
margin-right:4px;
}
a.runtime-friend-link {
font-size:11.5px;
color:#a8987d;
text-decoration:none;
padding:2px 7px;
border:1px solid #3d2713;
border-radius:2px;
white-space:nowrap;
transition:color .15s,border-color .15s,background .15s;
}
a.runtime-friend-link:hover {
color:var(--soil-deep);
background:var(--yellow);
border-color:var(--yellow);
}
@media (max-width:900px){.hero-panel {
grid-template-columns:minmax(0,220px) minmax(0,1fr);
gap:12px 16px;
padding:18px 16px 14px;
}
.recommendation-grid {grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:720px){.hero-panel {
grid-template-columns:minmax(0,1fr);
grid-template-areas:
"media"
"body"
"player";
padding:16px 14px 14px;
gap:12px;
}
.hero-media {max-width:250px}
.hero-seo {max-width:none}
section {padding:14px 14px 0}
.comment-columns {grid-template-columns:minmax(0,1fr)}
.recommendation-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
.cast-list {grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}}
@media (max-width:520px){body {font-size:13.5px}
.site-header {padding:9px 12px}
a[data-contract="site-name"] {font-size:17px}
.hero-title {font-size:24px}
.hero-tagline {font-size:14px;display:block}
.hero-seo {font-size:12.5px;line-height:1.68}
.player-controls button {font-size:11.5px;padding:5px 8px}
.cast-list {grid-template-columns:minmax(0,1fr)}
.timeline-item {grid-template-columns:66px minmax(0,1fr);gap:8px}
.timeline-label {font-size:12px}
.episode-card {flex:0 0 172px}
.recommendation-grid {grid-template-columns:minmax(0,1fr)}
.detail-key, .detail-value {font-size:12px;padding:5px 6px}
.site-footer {padding:16px 14px 20px}}

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}