*, *::before, *::after {box-sizing:border-box;margin:0;padding:0}
:root {
--char:#0e0f0d;
--char-2:#161713;
--char-3:#1d1f19;
--char-4:#242621;
--moss:#4a5a35;
--moss-2:#5c7042;
--moss-dim:#3a472a;
--rust:#8c3b26;
--rust-2:#a84a30;
--ash:#c8cbc0;
--ash-dim:#8f9488;
--ash-faint:#666b60;
--line:#2c2f27;

}
html {-webkit-text-size-adjust:100%}
body {
background:var(--char);
background-image:var(--noise);
background-blend-mode:overlay;
color:var(--ash);
font-family:"Helvetica Neue","Arial Narrow","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
font-stretch:condensed;
font-size:14px;
line-height:1.5;
letter-spacing:.01em;
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
img, video {display:block;max-width:100%}
a {color:var(--ash);text-decoration:none}
button {font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul, ol {list-style:none}
h1, h2, h3 {font-weight:800;line-height:1.15;letter-spacing:-.01em}
.site-header {
position:sticky;top:0;z-index:60;
display:flex;align-items:center;gap:14px;flex-wrap:wrap;
padding:9px 16px;
background:rgba(14,15,13,.94);
border-bottom:1px solid var(--line);
backdrop-filter:blur(6px);
}
a[data-contract="site-name"] {
font-size:16px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
color:var(--ash);text-decoration:none;white-space:nowrap;
border-left:3px solid var(--rust);padding-left:9px;
}
a[data-contract="site-name"]:hover {color:var(--rust-2)}
.category-bar {display:flex;flex-wrap:wrap;gap:6px;flex:1 1 auto;min-width:0}
a.runtime-category {
display:inline-block;white-space:nowrap;
font-size:11px;letter-spacing:.08em;
color:var(--moss-2);
text-decoration:none;
border:1px solid var(--moss-dim);
padding:3px 9px;
background:rgba(74,90,53,.14);
}
a.runtime-category:hover {color:var(--ash);border-color:var(--moss-2);background:rgba(74,90,53,.3)}
.header-nav {display:flex;gap:2px;flex:0 0 auto;margin-left:auto}
.header-nav a {
font-size:12px;letter-spacing:.1em;
padding:5px 11px;
color:var(--ash-dim);
text-decoration:none;
border-bottom:2px solid transparent;
}
.header-nav a:hover {color:var(--ash);border-bottom-color:var(--rust)}
a[href="#episodes"] {color:var(--ash-dim)}
a[href="#cast"] {color:var(--ash-dim)}
a[href="#comments"] {color:var(--ash-dim)}
.page-main {display:block;padding:0 0 4px}
.block-heading, .rec-heading {
font-size:13px;letter-spacing:.22em;text-transform:uppercase;
color:var(--moss-2);
padding:20px 16px 8px;
position:relative;
}
.block-heading::after {
content:"";display:block;width:34px;height:2px;background:var(--rust);margin-top:6px;
}
.hero-panel {
position:relative;
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);
gap:0;
border-bottom:1px solid var(--line);
background:linear-gradient(180deg,var(--char-2) 0%,var(--char) 100%);
overflow:hidden;
}
.hero-figure {
position:relative;
align-self:start;
}
.hero-portrait {
width:100%;
height:auto;
display:block;
object-fit:cover;
filter:grayscale(.35) contrast(1.08) brightness(.86);
}
.hero-figure::after {
content:"";position:absolute;inset:0;pointer-events:none;
background:
linear-gradient(90deg,transparent 55%,var(--char) 100%),
linear-gradient(0deg,var(--char-2) 0%,transparent 45%);
}
.hero-copy {
position:relative;
z-index:2;
display:flex;flex-direction:column;
gap:12px;
padding:26px 22px 24px;
min-width:0;
}
.hero-title {
font-size:clamp(30px,5.6vw,62px);
line-height:.98;
letter-spacing:-.03em;
color:#f2f3ee;
text-shadow:0 3px 26px rgba(0,0,0,.85);
}
.hero-tagline {
font-size:clamp(13px,1.5vw,17px);
letter-spacing:.06em;
color:var(--rust-2);
font-weight:700;
border-left:3px solid var(--rust);
padding-left:10px;
}
.hero-seo {
font-size:12.5px;
line-height:1.72;
color:var(--ash-dim);
max-width:62ch;
border-top:1px solid var(--line);
padding-top:11px;
}
.hero-player {
position:relative;
margin-top:4px;
width:100%;
background:#000;
border:1px solid var(--line);
}
.hero-player video {
width:100%;
height:auto;
display:block;
background:#000;
}
.player-controls {
display:flex;flex-wrap:wrap;gap:1px;
background:var(--char-3);
border-top:1px solid var(--line);
}
.player-controls button {
flex:1 1 auto;
font-size:11px;letter-spacing:.06em;
padding:7px 8px;
color:var(--ash-dim);
background:var(--char-2);
border-right:1px solid var(--line);
white-space:nowrap;
}
.player-controls button:hover {color:var(--ash);background:var(--moss-dim)}
.player-controls button.is-active {color:#fff;background:var(--rust)}
.hero-player.is-theater {box-shadow:0 0 0 2px var(--rust)}
body.is-theater .hero-panel {grid-template-columns:minmax(0,1fr)}
body.is-light-off {background:#000}
body.is-light-off .hero-panel, body.is-light-off .hero-copy {background:#000}
.cast-block {border-bottom:1px solid var(--line)}
.cast-list {
display:grid;
grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
gap:1px;
background:var(--line);
padding:0 16px 18px;
}
.cast-card {
display:flex;flex-direction:column;gap:2px;
background:var(--char-2);
padding:10px 12px;
border-left:3px solid var(--moss-dim);
}
.cast-card:hover {border-left-color:var(--rust);background:var(--char-3)}
.cast-name {font-size:14px;font-weight:800;color:#eef0e9;letter-spacing:.04em}
.cast-role {font-size:11px;color:var(--ash-faint);letter-spacing:.05em}
.synopsis-block {border-bottom:1px solid var(--line)}
.synopsis-block .block-heading {padding-top:22px}
.synopsis-para {
font-size:13px;line-height:1.78;color:var(--ash-dim);
padding:0 16px 12px;
max-width:92ch;
}
.synopsis-para:last-child {padding-bottom:20px}
.synopsis-para:first-of-type::first-letter {
font-size:32px;font-weight:800;color:var(--rust-2);
float:left;line-height:.9;padding:3px 7px 0 0;
}
.episode-status-block, .details-block {border-bottom:1px solid var(--line)}
.status-grid, .detail-grid {
display:grid;
gap:1px;
background:var(--line);
padding:0 16px 18px;
align-items:start;
}
.status-grid {grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.detail-grid {grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.status-item, .detail-item {
display:flex;flex-direction:column;gap:2px;
background:var(--char-2);
padding:9px 11px;
}
.status-key, .detail-key {
font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
color:var(--ash-faint);
}
.status-value, .detail-value {
font-size:13.5px;font-weight:700;color:var(--ash);
}
.episode-status-block .status-value {color:var(--moss-2)}
.timeline-block {
border-bottom:1px solid var(--line);
background:var(--char-2);
background-image:var(--noise);
background-blend-mode:overlay;
}
.timeline-track {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:1px;
background:var(--line);
padding:0 16px 18px;
align-items:start;
}
.timeline-node {
position:relative;
background:var(--char-2);
padding:13px 11px 12px 30px;
display:flex;flex-direction:column;gap:4px;
}
.timeline-node::before {
content:"";position:absolute;left:10px;top:15px;
width:9px;height:9px;
background:var(--moss-2);
clip-path:polygon(0 0,100% 18%,80% 50%,100% 82%,0 100%,20% 50%);
}
.timeline-node:hover::before {background:var(--rust-2)}
.timeline-timecode {
font-size:10.5px;letter-spacing:.14em;font-weight:800;
color:var(--rust-2);
}
.timeline-label {font-size:12px;line-height:1.55;color:var(--ash-dim)}
.episodes-block {border-bottom:1px solid var(--line)}
.episode-grid {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:1px;
background:var(--line);
padding:0 16px 18px;
align-items:start;
}
.episode-card {
display:flex;flex-direction:column;gap:5px;
background:var(--char-2);
padding:11px 12px 10px;
border-top:2px solid var(--char-4);
min-width:0;
}
.episode-card:hover {border-top-color:var(--rust);background:var(--char-3)}
.episode-title {
font-size:13.5px;letter-spacing:.02em;color:#eef0e9;
display:flex;align-items:baseline;gap:7px;
}
.episode-number {
font-size:10.5px;font-weight:800;letter-spacing:.1em;
color:var(--moss-2);
flex:0 0 auto;
}
.episode-summary {
font-size:11.5px;line-height:1.6;color:var(--ash-dim);
}
.episode-duration {
font-size:10.5px;letter-spacing:.1em;color:var(--ash-faint);
margin-top:auto;
align-self:flex-end;
}
.comments-block {border-bottom:1px solid var(--line)}
.comment-masonry {
columns:3;
column-gap:1px;
padding:0 16px 18px;
}
.comment-card {
break-inside:avoid;
display:block;
background:var(--char-2);
border-left:2px solid var(--moss-dim);
padding:9px 11px;
margin-bottom:1px;
}
.comment-card:hover {border-left-color:var(--rust);background:var(--char-3)}
.comment-nickname {
display:block;
font-size:11px;font-weight:800;letter-spacing:.06em;
color:var(--moss-2);
margin-bottom:3px;
}
.comment-text {
font-size:11.5px;line-height:1.62;color:var(--ash-dim);
}
.rec-region {border-bottom:1px solid var(--line)}
.rec-heading {
display:flex;align-items:baseline;gap:10px;
font-size:13px;letter-spacing:.18em;
color:var(--ash);
}
.rec-row {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
gap:1px;
background:var(--line);
padding:0 16px 18px;
align-items:start;
}
a.rec-card {
position:relative;
display:flex;flex-direction:column;gap:5px;
background:var(--char-2);
padding:10px 11px 12px;
border-top:2px solid var(--char-4);
color:var(--ash);text-decoration:none;
min-width:0;
}
a.rec-card:hover {border-top-color:var(--rust);background:var(--char-3)}
.rec-index {
position:absolute;left:11px;top:10px;z-index:3;
font-size:11px;font-weight:800;letter-spacing:.1em;
color:var(--rust-2);
background:rgba(14,15,13,.82);
padding:1px 5px;
}
.rec-count {
position:absolute;right:11px;top:11px;z-index:3;
font-size:10px;letter-spacing:.06em;
color:var(--ash);
background:rgba(140,59,38,.9);
padding:1px 6px;
}
[data-runtime="recommendation"] img {
display:block;
width:100%;
max-width:100%;
aspect-ratio:16 / 10;
height:auto;
object-fit:cover;
filter:grayscale(.3) brightness(.86);
background:var(--char-4);
}
.rec-name {
font-size:13px;font-weight:800;color:#eef0e9;
letter-spacing:.02em;
}
.rec-blurb {
font-size:11px;line-height:1.55;color:var(--ash-dim);
}
.site-footer {
border-top:1px solid var(--line);
background:var(--char-2);
padding:16px 16px 22px;
display:flex;flex-direction:column;gap:12px;
}
.footer-disclaimer {
font-size:11px;line-height:1.7;color:var(--ash-faint);
max-width:88ch;
}
.footer-nav {display:flex;flex-wrap:wrap;gap:14px}
a[data-contract="footer-home"], a[data-contract="footer-sitemap"] {
font-size:12px;letter-spacing:.08em;
color:var(--moss-2);text-decoration:none;
border-bottom:1px solid transparent;
}
a[data-contract="footer-home"]:hover, a[data-contract="footer-sitemap"]:hover {color:var(--ash);border-bottom-color:var(--rust)}
.friend-links {
display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;
padding-top:10px;border-top:1px solid var(--line);
}
.friend-links-label {
font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
color:var(--ash-faint);
}
a.runtime-friend-link {
font-size:11px;letter-spacing:.04em;
color:var(--ash-dim);text-decoration:none;
}
a.runtime-friend-link:hover {color:var(--rust-2);text-decoration:underline}
@media (max-width:900px){.hero-panel {grid-template-columns:minmax(0,1fr)}
.hero-figure {max-height:52vh;overflow:hidden}
.hero-portrait {width:100%}
.hero-figure::after {background:linear-gradient(0deg,var(--char) 0%,transparent 60%)}
.hero-copy {padding:18px 16px 20px}
.comment-masonry {columns:2}
.episode-grid {grid-template-columns:minmax(0,1fr)}}
@media (max-width:600px){.site-header {gap:8px;padding:8px 12px}
.header-nav {margin-left:0}
.block-heading, .rec-heading {padding:16px 12px 7px}
.cast-list, .status-grid, .detail-grid, .timeline-track, .episode-grid, .rec-row, .comment-masonry {
padding-left:12px;padding-right:12px;
}
.synopsis-para {padding-left:12px;padding-right:12px}
.comment-masonry {columns:1}
.rec-row {grid-template-columns:minmax(0,1fr)}
.hero-title {font-size:clamp(26px,9vw,40px)}
.player-controls button {flex:1 1 30%}
.timeline-track {grid-template-columns:minmax(0,1fr)}
.site-footer {padding:14px 12px 20px}}
@media (min-width:1200px){.rec-row {grid-template-columns:repeat(4,minmax(0,1fr))}
.episode-grid {grid-template-columns:repeat(2,minmax(0,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}