* {margin:0;padding:0;box-sizing:border-box}
:root {
--ink:#0e1311;
--ink-2:#141b18;
--panel:#161e1a;
--panel-2:#1b241f;
--line:#2a352e;
--line-hot:#3d4a3f;
--green:#2f3d33;
--rust:#a8442a;
--rust-hot:#c8552f;
--paper:#cbb98a;
--paper-dim:#9d8f68;
--bone:#e2ddcd;
--bone-dim:#a8a596;
--shadow:0 1px 0 rgba(0,0,0,.6);
}
html {-webkit-text-size-adjust:100%}
body {
background:
radial-gradient(1200px 600px at 18% -8%,rgba(168,68,42,.14),transparent 60%),
radial-gradient(900px 500px at 88% 4%,rgba(203,185,138,.07),transparent 55%),
linear-gradient(180deg,#0c110f 0%,#0e1311 40%,#101613 100%);
background-attachment:fixed;
color:var(--bone);
font-family:"Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,"Helvetica Neue",Arial,sans-serif;
font-size:15px;
line-height:1.55;
font-stretch:condensed;
letter-spacing:.01em;
min-height:100%;
}
img, video {display:block;max-width:100%}
a {color:inherit;text-decoration:none}
h1, h2, h3 {font-weight:800;line-height:1.2;letter-spacing:.02em}
ol {list-style:none}
button {font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection {background:var(--rust);color:#fff}
.site-header {
position:sticky;top:0;z-index:60;
background:linear-gradient(180deg,rgba(12,17,15,.97),rgba(12,17,15,.9));
border-bottom:1px solid var(--line);
backdrop-filter:blur(6px);
}
.topbar {
display:flex;align-items:center;justify-content:space-between;gap:14px;
padding:9px clamp(10px,2.4vw,26px);
flex-wrap:wrap;
}
a[data-contract="site-name"].brand {
font-size:19px;font-weight:900;letter-spacing:.14em;
color:var(--paper);
text-transform:uppercase;
text-shadow:0 0 12px rgba(203,185,138,.25);
padding-left:12px;
position:relative;
}
a[data-contract="site-name"].brand::before {
content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
width:4px;height:18px;background:var(--rust);
}
a[data-contract="site-name"].brand:hover {color:#fff}
.header-nav {display:flex;flex-wrap:wrap;gap:4px}
a.nav-link {
display:inline-block;
padding:5px 11px;
font-size:13px;
color:var(--bone-dim);
border:1px solid transparent;
white-space:nowrap;
letter-spacing:.06em;
}
a.nav-link:hover {
color:var(--paper);
border-color:var(--line-hot);
background:rgba(203,185,138,.05);
}
.category-strip {
display:flex;flex-wrap:wrap;gap:5px;
padding:0 clamp(10px,2.4vw,26px) 9px;
}
a.runtime-category {
display:inline-block;
white-space:nowrap;
font-size:12px;
padding:3px 10px;
color:var(--paper-dim);
border:1px solid var(--line);
background:rgba(47,61,51,.35);
letter-spacing:.08em;
}
a.runtime-category:hover {color:var(--paper);border-color:var(--rust);background:rgba(168,68,42,.18)}
.page-main {
width:100%;
padding:clamp(12px,2vw,22px) clamp(10px,2.4vw,26px) 26px;
display:flex;flex-direction:column;
gap:clamp(14px,1.9vw,22px);
}
.hero {
position:relative;
display:grid;
grid-template-columns:minmax(0,300px) minmax(0,1fr);
gap:clamp(14px,2.2vw,28px);
align-items:start;
padding:clamp(14px,2vw,24px);
border:1px solid var(--line);
background:
linear-gradient(160deg,rgba(22,30,26,.96),rgba(14,19,17,.98)),
repeating-linear-gradient(0deg,rgba(255,255,255,.012) 0 1px,transparent 1px 3px);
box-shadow:0 18px 40px -28px #000,inset 0 1px 0 rgba(255,255,255,.03);
overflow:hidden;
}
.hero::after {
content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(600px 340px at 12% 88%,rgba(168,68,42,.13),transparent 62%);
}
.hero-media {
position:relative;
isolation:isolate;
width:100%;
}
img.poster-img {
width:100%;
height:auto;
object-fit:cover;
display:block;
filter:saturate(.72) contrast(1.08) brightness(.86);
border:1px solid var(--line-hot);
box-shadow:0 22px 46px -26px #000;
}
.hero-contour {
position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:.5;
background:
repeating-radial-gradient(circle at 40% 26%,transparent 0 16px,rgba(203,185,138,.16) 16px 17px),
repeating-radial-gradient(circle at 78% 74%,transparent 0 22px,rgba(203,185,138,.12) 22px 23px);
}
.hero-tunnel {
position:absolute;left:0;right:0;bottom:0;height:42%;pointer-events:none;opacity:.55;
background:
linear-gradient(90deg,transparent 0 6%,rgba(15,20,18,.9) 6% 8%,transparent 8% 14%,rgba(15,20,18,.85) 14% 17%,transparent 17% 26%,rgba(15,20,18,.8) 26% 30%,transparent 30% 100%),
linear-gradient(180deg,transparent,rgba(10,14,12,.92));
border-bottom:1px solid rgba(168,68,42,.35);
}
.hero-info {position:relative;z-index:2;display:flex;flex-direction:column;gap:10px;min-width:0}
.hero-title {
font-size:clamp(26px,4.6vw,48px);
font-weight:900;
letter-spacing:.04em;
color:#f0ead9;
text-shadow:0 2px 0 #000,0 0 30px rgba(203,185,138,.18);
}
.hero-tagline {
position:relative;
font-size:clamp(14px,1.7vw,19px);
font-weight:800;
letter-spacing:.05em;
color:var(--bone);
background:linear-gradient(90deg,rgba(168,68,42,.9),rgba(168,68,42,.35) 62%,transparent);
padding:6px 12px 6px 12px;
border-left:3px solid var(--rust-hot);
max-width:100%;
}
.hero-seo {
font-size:13px;
color:var(--bone-dim);
line-height:1.7;
max-width:70ch;
}
.hero-actions {display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.btn-play, .btn-theater, .btn-light {
font-size:13px;font-weight:700;letter-spacing:.1em;
padding:8px 18px;
border:1px solid var(--line-hot);
color:var(--paper);
background:rgba(47,61,51,.4);
transition:background .18s,color .18s,border-color .18s;
white-space:nowrap;
}
.btn-play {
color:#f6efe0;background:linear-gradient(180deg,var(--rust-hot),#8f3722);
border-color:#d4613a;
box-shadow:0 0 0 1px rgba(0,0,0,.5),0 6px 18px -12px var(--rust-hot);
}
.btn-play:hover {filter:brightness(1.12)}
.btn-theater:hover, .btn-light:hover {background:rgba(203,185,138,.14);color:#fff;border-color:var(--paper-dim)}
.btn-play.is-active, .btn-theater.is-active, .btn-light.is-active, .btn-theater.is-active, .btn-light.is-active {
background:var(--paper);color:#151b18;border-color:var(--paper);
}
.episode-status {
display:flex;flex-wrap:wrap;gap:6px;
margin-top:2px;
}
.status-item {
font-size:12px;letter-spacing:.06em;
padding:3px 9px;
color:var(--paper-dim);
border:1px dashed var(--line-hot);
background:rgba(0,0,0,.25);
white-space:nowrap;
}
.section-heading {
display:flex;align-items:center;gap:10px;
font-size:15px;font-weight:800;letter-spacing:.2em;
color:var(--paper);
margin:6px 0 8px;
text-transform:uppercase;
}
.section-heading::before {
content:"";width:10px;height:10px;background:var(--rust);flex:none;
transform:rotate(45deg);
}
.section-heading::after {
content:"";flex:1;height:1px;
background:linear-gradient(90deg,var(--line-hot),transparent);
}
.cast-row {
display:grid;
grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
gap:8px;
align-items:start;
}
.cast-card {
position:relative;
padding:9px 11px 10px;
border:1px solid var(--line);
border-left:3px solid var(--rust);
background:linear-gradient(180deg,rgba(27,36,31,.9),rgba(18,24,21,.9));
}
.cast-card::after {
content:"";position:absolute;right:8px;top:8px;width:6px;height:6px;
border:1px solid var(--line-hot);
}
.cast-name {font-size:15px;letter-spacing:.08em;color:#f0ead9}
.cast-role {
font-size:11px;letter-spacing:.16em;color:var(--rust-hot);
margin:2px 0 5px;font-weight:700;
}
.cast-verdict {font-size:12px;line-height:1.6;color:var(--bone-dim)}
.synopsis-body {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:8px 18px;
align-items:start;
}
.synopsis-para {
font-size:13px;line-height:1.75;color:var(--bone-dim);
padding-left:10px;border-left:2px solid var(--line);
}
.synopsis-para:first-child {color:var(--bone)}
.synopsis-para:first-child::first-letter {
font-size:30px;font-weight:900;color:var(--rust-hot);
float:left;line-height:.9;padding:2px 6px 0 0;
}
.details-list {
display:grid;
grid-template-columns:repeat(auto-fill,minmax(170px,1fr));
gap:1px;
background:var(--line);
border:1px solid var(--line);
}
.detail-item {
display:flex;gap:8px;align-items:baseline;
padding:6px 10px;
background:rgba(18,24,21,.96);
}
.detail-key {font-size:12px;letter-spacing:.1em;color:var(--paper-dim);flex:none;min-width:52px}
.detail-value {font-size:12px;color:var(--bone);font-weight:600}
.player-block {
position:relative;
border:1px solid var(--line);
background:#0a0e0c;
padding:clamp(8px,1.4vw,14px);
}
.player-wrapper {
width:100%;
max-width:100%;
background:#050806;
border:1px solid #000;
box-shadow:inset 0 0 60px rgba(0,0,0,.9);
}
.player-video {display:block;width:100%;background:#000}
.player-controls {
display:flex;flex-wrap:wrap;gap:6px;
margin-top:9px;
}
.ctrl-btn {
font-size:12px;letter-spacing:.08em;
padding:5px 13px;
color:var(--paper-dim);
border:1px solid var(--line);
background:rgba(47,61,51,.32);
white-space:nowrap;
}
.ctrl-btn:hover {color:var(--paper);border-color:var(--rust);background:rgba(168,68,42,.2)}
.player-block.is-fullscreen {position:fixed;inset:0;z-index:999;background:#000;padding:8px}
.player-block.is-theater {
background:#050806;
border-color:var(--rust);
box-shadow:0 0 0 1px rgba(168,68,42,.4),0 30px 60px -30px #000;
}
body.is-lights-off .hero, body.is-lights-off .timeline-section, body.is-lights-off .episodes-section, body.is-lights-off .comments-section, body.is-lights-off .rec-region {opacity:.35;transition:opacity .3s}
body.is-playing .btn-play {background:linear-gradient(180deg,#8f3722,#6e2a19)}
.timeline-section {position:relative}
.timeline-rail {
position:relative;
padding:6px 0 4px;
display:flex;flex-direction:column;gap:9px;
}
.timeline-rail::before {
content:"";position:absolute;left:50%;top:0;bottom:0;width:3px;
transform:translateX(-50%);
background:
repeating-linear-gradient(180deg,var(--line-hot) 0 10px,rgba(61,74,63,.15) 10px 18px),
linear-gradient(180deg,rgba(168,68,42,.5),rgba(47,61,51,.3));
}
.timeline-node {
position:relative;
display:grid;
grid-template-columns:1fr 1fr;
align-items:center;
gap:0 26px;
}
.timeline-node .bullet {
position:absolute;left:50%;top:50%;
width:13px;height:13px;margin:-6.5px 0 0 -6.5px;
background:linear-gradient(180deg,var(--paper),#7d7048);
border:2px solid #0e1311;
border-radius:50%;
box-shadow:0 0 0 2px rgba(168,68,42,.55),0 0 14px rgba(203,185,138,.4);
z-index:2;
}
.timeline-chip {
display:flex;flex-direction:column;gap:2px;
padding:7px 11px;
border:1px solid var(--line);
background:linear-gradient(180deg,rgba(27,36,31,.94),rgba(17,23,20,.94));
}
.timeline-left .timeline-chip {grid-column:1;border-right:2px solid var(--rust)}
.timeline-right .timeline-chip {grid-column:2;border-left:2px solid var(--rust)}
.timeline-timecode {
font-size:11px;font-weight:800;letter-spacing:.18em;color:var(--rust-hot);
}
.timeline-label {font-size:12.5px;line-height:1.55;color:var(--bone)}
.episode-grid {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:8px;
align-items:start;
}
.episode-card {
position:relative;
display:flex;flex-direction:column;gap:3px;
padding:9px 11px 10px;
border:1px solid var(--line);
background:
linear-gradient(180deg,rgba(24,32,27,.94),rgba(16,22,19,.94));
overflow:hidden;
transition:background .2s,transform .2s,border-color .2s;
}
.episode-card::before {
content:"";position:absolute;inset:0;opacity:0;transition:opacity .25s;
background:
repeating-linear-gradient(135deg,rgba(168,68,42,.16) 0 12px,transparent 12px 24px),
radial-gradient(200px 120px at 100% 0,rgba(203,185,138,.14),transparent 70%);
pointer-events:none;
}
.episode-card:hover {border-color:var(--rust);transform:translateY(-2px)}
.episode-card:hover::before {opacity:1}
.episode-num {
font-size:11px;font-weight:800;letter-spacing:.16em;color:var(--paper-dim);
}
.episode-title {font-size:14px;color:#efe8d7;letter-spacing:.04em}
.episode-summary {font-size:12px;line-height:1.6;color:var(--bone-dim)}
.episode-duration {
margin-top:auto;padding-top:5px;
font-size:11px;letter-spacing:.1em;color:var(--rust-hot);
border-top:1px dashed var(--line);
}
.comment-wall {
display:grid;
grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
gap:10px;
align-items:start;
}
.comment-card {
position:relative;
display:flex;gap:9px;
padding:9px 11px;
border:1px solid var(--line);
background:linear-gradient(180deg,rgba(26,34,29,.95),rgba(16,22,19,.95));
}
.comment-odd {transform:rotate(-.5deg)}
.comment-even {transform:rotate(.6deg);border-color:var(--line-hot)}
.comment-avatar {
flex:none;
width:30px;height:30px;
display:flex;align-items:center;justify-content:center;
font-size:12px;font-weight:800;color:#f3ecdb;
background:radial-gradient(circle at 32% 30%,var(--rust-hot),#6d2917);
border:1px solid #d4613a;
border-radius:50%;
box-shadow:0 0 0 2px rgba(0,0,0,.5);
}
.comment-body {min-width:0;display:flex;flex-direction:column;gap:3px}
.comment-nick {
font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--paper);
}
.comment-text {font-size:12.5px;line-height:1.65;color:var(--bone-dim)}
.rec-region {
border:1px solid var(--line);
background:linear-gradient(180deg,rgba(20,27,23,.9),rgba(13,18,16,.9));
padding:10px 12px 12px;
}
.rec-title {
display:inline-block;
font-size:13px;font-weight:800;letter-spacing:.16em;
color:#f6efe0;
padding:4px 12px 4px 10px;
background:
linear-gradient(180deg,rgba(200,85,47,.95),rgba(143,55,34,.95));
border:1px solid #d4613a;
box-shadow:inset 0 0 0 1px rgba(0,0,0,.4);
transform:rotate(-1.4deg);
margin-bottom:10px;
text-shadow:0 1px 0 rgba(0,0,0,.5);
}
.rec-title::before {content:"〔 "}
.rec-title::after {content:" 〕"}
.rec-row {
display:grid;
grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
gap:8px;
align-items:start;
}
a.rec-item {
display:flex;flex-direction:column;gap:4px;
padding:6px;
border:1px solid var(--line);
background:rgba(12,17,15,.85);
color:var(--bone);
transition:border-color .18s,background .18s,transform .18s;
}
a.rec-item:hover {border-color:var(--rust);background:rgba(168,68,42,.14);transform:translateY(-2px)}
[data-runtime="recommendation"] img.rec-pic {
width:100%;
height:auto;
aspect-ratio:16 / 9;
object-fit:cover;
display:block;
filter:saturate(.7) contrast(1.06) brightness(.85);
border:1px solid #000;
}
a.rec-item:hover img.rec-pic {filter:saturate(.95) contrast(1.08) brightness(.98)}
.rec-name {
font-size:12.5px;font-weight:700;letter-spacing:.04em;color:#efe8d7;
display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
}
.rec-blurb {
font-size:11.5px;line-height:1.55;color:var(--bone-dim);
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.site-footer {
margin-top:6px;
padding:14px clamp(10px,2.4vw,26px) 22px;
border-top:1px solid var(--line);
background:linear-gradient(180deg,rgba(10,14,12,.6),rgba(8,11,10,.95));
display:flex;flex-direction:column;gap:9px;
}
.disclaimer {
font-size:11.5px;line-height:1.7;color:#6f7264;
max-width:88ch;
}
.footer-nav {display:flex;flex-wrap:wrap;gap:8px}
a[data-contract="footer-home"], a[data-contract="footer-sitemap"] {
font-size:12px;letter-spacing:.1em;
color:var(--paper-dim);
padding:3px 10px;
border:1px solid var(--line);
}
a[data-contract="footer-home"]:hover, a[data-contract="footer-sitemap"]:hover {
color:var(--paper);border-color:var(--rust);
}
.friend-links {
display:flex;flex-wrap:wrap;align-items:center;gap:6px;
}
.friend-label {
font-size:11px;letter-spacing:.18em;color:var(--rust-hot);font-weight:800;
margin-right:2px;
}
a.runtime-friend-link {
font-size:11.5px;
color:#7f8577;
padding:2px 8px;
border:1px dashed var(--line);
white-space:nowrap;
}
a.runtime-friend-link:hover {color:var(--paper);border-color:var(--paper-dim);border-style:solid}
@media (max-width:1024px){.hero {grid-template-columns:minmax(0,240px) minmax(0,1fr)}
.episode-grid {grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){.hero {grid-template-columns:1fr;padding:14px}
.hero-media {max-width:340px}
.hero-title {font-size:clamp(24px,7vw,36px)}
.synopsis-body {grid-template-columns:1fr}}
@media (max-width:680px){.topbar {gap:8px}
.header-nav {width:100%}
a.nav-link {padding:4px 9px;font-size:12.5px}
.timeline-rail::before {left:14px;transform:none}
.timeline-node {grid-template-columns:1fr;padding-left:34px}
.timeline-node .bullet {left:14px;top:50%}
.timeline-left .timeline-chip, .timeline-right .timeline-chip {grid-column:1}
.timeline-left .timeline-chip {border-right:1px solid var(--line);border-left:2px solid var(--rust)}
.timeline-right .timeline-chip {border-left:2px solid var(--rust)}
.episode-grid {grid-template-columns:1fr}
.cast-row {grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.comment-wall {grid-template-columns:1fr}
.comment-odd, .comment-even {transform:none}
.rec-row {grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
.hero-actions .btn-play, .hero-actions .btn-theater, .hero-actions .btn-light {flex:1 1 auto;text-align:center}}
@media (max-width:420px){.rec-row {grid-template-columns:repeat(2,minmax(0,1fr))}
.detail-item {flex-direction:column;gap:0}
.detail-key {min-width:0}
.player-controls .ctrl-btn {flex:1 1 auto;text-align:center}}

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}