* {margin:0;padding:0;box-sizing:border-box}
html {scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body {
font-family:Georgia,"Songti SC","Times New Roman",serif;
background:#0e0c0b;
color:#c8bfb4;
line-height:1.5;
font-size:15px;
letter-spacing:.01em;
background-image:
radial-gradient(ellipse 80% 50% at 50% -10%,rgba(198,138,54,.10),transparent 70%),
radial-gradient(ellipse 60% 40% at 100% 100%,rgba(72,110,140,.05),transparent 70%);
background-attachment:fixed;
}
img, video {display:block;max-width:100%}
button, input, select {font:inherit;color:inherit}
a {color:inherit;text-decoration:none}
ol, ul {list-style:none}
::selection {background:rgba(198,138,54,.35);color:#fff}
.site-header {
position:sticky;top:0;z-index:60;
background:rgba(11,9,8,.86);
backdrop-filter:blur(9px);
border-bottom:1px solid rgba(198,138,54,.18);
}
.header-inner {
max-width:1280px;margin:0 auto;
display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;
padding:9px 18px;
}
.brand-name {
font-size:17px;text-transform:uppercase;letter-spacing:.34em;
color:#e3b877;font-weight:700;
text-shadow:0 0 18px rgba(198,138,54,.28);
padding-right:14px;
border-right:1px solid rgba(198,138,54,.22);
}
a[data-contract="site-name"] {color:#e3b877;text-decoration:none;transition:color .25s}
a[data-contract="site-name"]:hover {color:#f6d9a4}
.category-bar {
display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center;
max-width:100%;
}
a.runtime-category {
white-space:nowrap;
font-size:12px;letter-spacing:.14em;
color:#9c9186;text-decoration:none;
padding:3px 10px;
border:1px solid rgba(156,145,134,.22);
border-radius:2px;
transition:color .2s,border-color .2s,background .2s;
}
a.runtime-category:hover {color:#e3b877;border-color:rgba(198,138,54,.5);background:rgba(198,138,54,.07)}
.page-main {
max-width:1280px;margin:0 auto;
padding:26px 18px 40px;
display:flex;flex-direction:column;gap:26px;
}
.hero-section {
display:flex;flex-direction:column;gap:18px;
}
.hero-backdrop {
position:relative;
display:grid;
grid-template-columns:minmax(0,.85fr) minmax(0,1.4fr);
gap:0;
min-height:340px;
background:
linear-gradient(115deg,rgba(10,8,7,.96) 0%,rgba(20,15,12,.7) 42%,rgba(14,12,11,.96) 100%),
repeating-linear-gradient(90deg,rgba(120,110,100,.06) 0 1px,transparent 1px 34px),
linear-gradient(180deg,#161311,#0b0a09);
border:1px solid rgba(198,138,54,.16);
border-radius:3px;
overflow:hidden;
}
.hero-backdrop::before {
content:"";position:absolute;inset:0;
background:
radial-gradient(circle at 18% 42%,rgba(198,138,54,.16),transparent 46%),
linear-gradient(200deg,rgba(60,90,120,.12),transparent 55%);
pointer-events:none;
}
.hero-backdrop::after {
content:"";position:absolute;inset:0;
background-image:
repeating-linear-gradient(0deg,rgba(150,140,128,.055) 0 1px,transparent 1px 26px),
repeating-linear-gradient(90deg,rgba(150,140,128,.055) 0 1px,transparent 1px 26px);
mask-image:linear-gradient(90deg,transparent,black 40%,black 60%,transparent);
pointer-events:none;
}
.hero-portrait-half {
position:relative;z-index:2;
align-self:start;
display:flex;justify-content:center;
padding:0;
}
.poster-image {
width:100%;max-width:230px;
height:auto;
object-fit:cover;
aspect-ratio:9 / 16;
filter:contrast(1.12) saturate(.72) brightness(.86) sepia(.12);
box-shadow:0 12px 40px rgba(0,0,0,.72);
}
.hero-portrait-half::after {
content:"";position:absolute;inset:0;
background:linear-gradient(180deg,transparent 34%,rgba(10,8,7,.92) 100%);
pointer-events:none;
}
.hero-overlay-text {
position:relative;z-index:3;
align-self:end;
padding:26px 30px 30px 6px;
display:flex;flex-direction:column;gap:12px;
}
.hero-title {
font-size:clamp(28px,5.2vw,54px);
line-height:1.02;
text-transform:uppercase;
letter-spacing:.16em;
color:#f0dcb8;
font-weight:700;
text-shadow:0 2px 30px rgba(0,0,0,.9),0 0 40px rgba(198,138,54,.22);
}
.hero-tagline {
font-size:clamp(13px,1.5vw,16px);
letter-spacing:.14em;
color:#b09263;
max-width:32ch;
border-left:2px solid rgba(198,138,54,.55);
padding-left:12px;
}
.hero-player-zone {width:100%}
.player-shell {
position:relative;
width:100%;
display:flex;flex-direction:column;
background:#080706;
border:1px solid rgba(198,138,54,.2);
border-radius:3px;
overflow:hidden;
box-shadow:0 10px 34px rgba(0,0,0,.6);
transition:box-shadow .3s,border-color .3s;
}
.player-shell.is-theater {
border-color:rgba(198,138,54,.55);
box-shadow:0 0 0 1px rgba(198,138,54,.3),0 18px 60px rgba(0,0,0,.85);
}
.player-shell.is-lights-dim {filter:brightness(.62) saturate(.8)}
.player-shell.is-lights-dim .player-controls {filter:brightness(1.6)}
.player-video {
width:100%;
aspect-ratio:16 / 9;
object-fit:cover;
background:#000;
}
.player-controls {
display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;
padding:8px 10px;
background:linear-gradient(180deg,rgba(24,19,15,.95),rgba(12,10,9,.95));
border-top:1px solid rgba(198,138,54,.16);
}
.ctrl-btn {
font-size:11px;letter-spacing:.1em;
background:rgba(198,138,54,.08);
color:#c9a86f;
border:1px solid rgba(198,138,54,.28);
border-radius:2px;
padding:4px 9px;
cursor:pointer;
white-space:nowrap;
transition:background .2s,color .2s,border-color .2s;
}
.ctrl-btn:hover {background:rgba(198,138,54,.2);color:#f4dcae;border-color:rgba(198,138,54,.6)}
.player-shell.is-playing .ctrl-btn[data-player-action="play"] {background:rgba(198,138,54,.24);color:#f4dcae}
.player-shell.is-muted .ctrl-btn[data-player-action="mute"] {background:rgba(70,110,145,.28);color:#a9cbe4;border-color:rgba(80,130,170,.6)}
.ctrl-progress {
flex:1 1 140px;min-width:90px;
height:3px;
appearance:none;-webkit-appearance:none;
background:rgba(198,138,54,.2);
border-radius:2px;
cursor:pointer;
}
.ctrl-progress::-webkit-slider-thumb {
appearance:none;-webkit-appearance:none;
width:11px;height:11px;border-radius:50%;
background:#e3b877;border:none;
box-shadow:0 0 8px rgba(198,138,54,.8);
}
.ctrl-progress::-moz-range-thumb {width:11px;height:11px;border-radius:50%;background:#e3b877;border:none}
.ctrl-volume {
width:74px;height:3px;
appearance:none;-webkit-appearance:none;
background:rgba(198,138,54,.2);
border-radius:2px;cursor:pointer;
}
.ctrl-volume::-webkit-slider-thumb {
appearance:none;-webkit-appearance:none;
width:10px;height:10px;border-radius:50%;
background:#b09263;border:none;
}
.ctrl-volume::-moz-range-thumb {width:10px;height:10px;border-radius:50%;background:#b09263;border:none}
.ctrl-speed {
font-size:11px;letter-spacing:.08em;
background:rgba(198,138,54,.08);
color:#c9a86f;
border:1px solid rgba(198,138,54,.28);
border-radius:2px;
padding:3px 6px;
cursor:pointer;
}
.ctrl-speed option {background:#161311;color:#c9a86f}
.overview-meta-group {
display:grid;
grid-template-columns:minmax(0,1.1fr) minmax(0,.7fr) minmax(0,1.5fr);
gap:14px;
align-items:start;
}
.details-panel, .episode-status-panel, .cast-panel, .synopsis-panel {
background:linear-gradient(180deg,rgba(26,21,17,.72),rgba(15,12,10,.72));
border:1px solid rgba(198,138,54,.15);
border-radius:3px;
padding:14px 15px 16px;
align-self:start;
}
.section-heading {
font-size:13px;
text-transform:uppercase;
letter-spacing:.26em;
color:#c9985a;
font-weight:700;
margin-bottom:10px;
padding-bottom:7px;
border-bottom:1px solid rgba(198,138,54,.2);
}
.details-list {display:flex;flex-direction:column;gap:0}
.detail-row {
display:grid;
grid-template-columns:minmax(56px,auto) minmax(0,1fr);
gap:10px;
padding:4px 0;
border-bottom:1px dashed rgba(150,140,128,.14);
font-size:13px;
}
.detail-row:last-child {border-bottom:none}
.detail-row dt {
color:#8a7f74;
letter-spacing:.1em;
font-size:11.5px;
text-transform:uppercase;
padding-top:2px;
}
.detail-row dd {color:#d6cdc2}
.status-line {
display:flex;align-items:baseline;justify-content:space-between;gap:10px;
padding:6px 0;
border-bottom:1px dashed rgba(150,140,128,.14);
}
.status-line:last-child {border-bottom:none}
.status-label {font-size:11.5px;letter-spacing:.12em;color:#8a7f74;text-transform:uppercase}
.status-value {
font-size:22px;color:#e3b877;font-weight:700;
letter-spacing:.04em;
text-shadow:0 0 16px rgba(198,138,54,.35);
}
.cast-strip {
display:flex;flex-wrap:wrap;gap:10px 14px;
}
.cast-card {
display:flex;flex-direction:column;align-items:center;
gap:5px;
width:96px;
text-align:center;
}
.cast-avatar {
width:56px;height:56px;border-radius:50%;
background:
radial-gradient(circle at 34% 28%,rgba(198,138,54,.55),rgba(40,30,22,.9) 68%),
linear-gradient(160deg,#3a2d22,#14100d);
border:1px solid rgba(198,138,54,.35);
box-shadow:0 0 0 3px rgba(10,8,7,.9),0 0 18px rgba(198,138,54,.18);
filter:grayscale(.4);
}
.cast-name {font-size:12.5px;color:#ddd3c6;line-height:1.3}
.cast-role {font-size:11px;color:#9a8b6e;letter-spacing:.06em}
.synopsis-panel {grid-column:auto}
.synopsis-para {
font-size:13.5px;
line-height:1.72;
color:#b8ada1;
margin-bottom:9px;
}
.synopsis-para:last-child {margin-bottom:0}
.synopsis-para:first-child::first-letter {
font-size:2.5em;
float:left;
line-height:.9;
padding:2px 8px 0 0;
color:#c9985a;
}
.timeline-section {
background:linear-gradient(180deg,rgba(20,16,13,.7),rgba(11,9,8,.7));
border:1px solid rgba(198,138,54,.15);
border-radius:3px;
padding:14px 15px 16px;
}
.timeline-scroll {
display:flex;
gap:0;
overflow-x:auto;
padding:26px 4px 8px;
scrollbar-width:thin;
scrollbar-color:rgba(198,138,54,.45) transparent;
position:relative;
}
.timeline-scroll::-webkit-scrollbar {height:6px}
.timeline-scroll::-webkit-scrollbar-thumb {background:rgba(198,138,54,.4);border-radius:3px}
.timeline-scroll::-webkit-scrollbar-track {background:rgba(150,140,128,.08)}
.timeline-node {
position:relative;
flex:0 0 auto;
width:196px;
padding:22px 14px 4px 0;
}
.timeline-node::before {
content:"";
position:absolute;left:0;right:-0;top:6px;
height:1px;
background:linear-gradient(90deg,rgba(198,138,54,.55),rgba(198,138,54,.12));
}
.timeline-node::after {
content:"";
position:absolute;left:9px;top:1px;
width:11px;height:11px;border-radius:50%;
background:#0e0c0b;
border:2px solid rgba(198,138,54,.7);
box-shadow:0 0 12px rgba(198,138,54,.5);
}
.timeline-node:first-child::after {
background:#e3b877;
border-color:#f0d19a;
box-shadow:0 0 0 4px rgba(198,138,54,.16),0 0 18px rgba(198,138,54,.85);
}
.timeline-timecode {
display:block;
font-size:11px;
letter-spacing:.2em;
color:#c9985a;
margin-bottom:5px;
padding-left:24px;
font-variant-numeric:tabular-nums;
}
.timeline-label {
display:block;
font-size:12.5px;
line-height:1.5;
color:#a89c8f;
padding-left:24px;
max-width:23ch;
}
.timeline-node:first-child .timeline-label {color:#e0d3bd}
.episodes-section {
background:linear-gradient(180deg,rgba(20,16,13,.7),rgba(11,9,8,.7));
border:1px solid rgba(198,138,54,.15);
border-radius:3px;
padding:14px 15px 16px;
}
.episode-list {
display:grid;
grid-template-columns:repeat(auto-fill,minmax(268px,1fr));
gap:8px;
align-items:start;
}
.episode-item {
background:rgba(28,22,17,.55);
border:1px solid rgba(198,138,54,.13);
border-left:2px solid rgba(198,138,54,.35);
border-radius:2px;
transition:border-color .25s,background .25s;
}
.episode-item:hover {border-left-color:#e3b877;background:rgba(38,29,21,.7)}
.episode-item details {width:100%}
.episode-summary {
display:grid;
grid-template-columns:auto minmax(0,1fr) auto;
align-items:center;
gap:9px;
padding:8px 10px;
cursor:pointer;
list-style:none;
}
.episode-summary::-webkit-details-marker {display:none}
.episode-badge {
display:inline-flex;align-items:center;justify-content:center;
width:24px;height:24px;
font-size:12px;font-weight:700;
color:#0e0c0b;
background:linear-gradient(150deg,#e3b877,#a97a3a);
border-radius:2px;
box-shadow:0 0 0 1px rgba(198,138,54,.5),0 0 12px rgba(198,138,54,.25);
flex:0 0 auto;
}
.episode-title {
font-size:13.5px;color:#d9cec0;
letter-spacing:.04em;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.episode-duration {
font-size:11px;color:#8a7f74;
letter-spacing:.08em;
font-variant-numeric:tabular-nums;
white-space:nowrap;
}
.episode-desc {
font-size:12.5px;
line-height:1.66;
color:#a2978b;
padding:0 12px 11px 43px;
border-top:1px dashed rgba(150,140,128,.16);
margin-top:2px;
padding-top:9px;
}
details[open]>.episode-summary {border-bottom:none}
details[open]>.episode-summary .episode-title {color:#f0dcb8}
.comments-section {
background:linear-gradient(180deg,rgba(20,16,13,.7),rgba(11,9,8,.7));
border:1px solid rgba(198,138,54,.15);
border-radius:3px;
padding:14px 15px 16px;
}
.comments-masonry {
column-count:3;
column-gap:10px;
}
.comment-card {
break-inside:avoid;
margin-bottom:10px;
padding:10px 12px;
background:
repeating-linear-gradient(0deg,rgba(180,165,145,.035) 0 1px,transparent 1px 4px),
linear-gradient(160deg,rgba(48,38,29,.85),rgba(26,21,16,.9));
border:1px solid rgba(198,138,54,.16);
border-radius:2px;
box-shadow:0 3px 14px rgba(0,0,0,.35);
}
.comment-nickname {
display:block;
font-size:12px;
letter-spacing:.12em;
color:#d3a55f;
margin-bottom:5px;
}
.comment-nickname::before {
content:"— ";
color:rgba(198,138,54,.5);
}
.comment-text {
font-size:12.5px;
line-height:1.64;
color:#b3a89b;
}
.recommendation-region {
background:linear-gradient(180deg,rgba(20,16,13,.7),rgba(11,9,8,.7));
border:1px solid rgba(198,138,54,.15);
border-radius:3px;
padding:13px 15px 15px;
}
.recommendation-grid {
display:grid;
gap:9px;
align-items:start;
}
.recommendation-grid-4 {grid-template-columns:repeat(4,minmax(0,1fr))}
.recommendation-grid-3 {grid-template-columns:repeat(3,minmax(0,1fr))}
.recommendation-grid-5 {grid-template-columns:repeat(5,minmax(0,1fr))}
a.recommendation-item {
display:flex;flex-direction:column;
gap:5px;
color:#c1b6a8;
text-decoration:none;
background:rgba(30,24,18,.5);
border:1px solid rgba(198,138,54,.12);
border-radius:2px;
padding:6px 6px 8px;
transition:border-color .22s,transform .22s,background .22s;
}
a.recommendation-item:hover {
border-color:rgba(198,138,54,.55);
background:rgba(42,32,23,.7);
transform:translateY(-2px);
}
[data-runtime="recommendation"] img {
width:100%;
aspect-ratio:16 / 10;
object-fit:cover;
border-radius:1px;
filter:grayscale(.28) brightness(.9);
transition:filter .25s;
}
[data-runtime="recommendation"]:hover img {filter:grayscale(0) brightness(1)}
[data-runtime="recommendation"] [data-runtime="name"] {
font-size:12.5px;
color:#ddd3c6;
letter-spacing:.03em;
line-height:1.35;
}
[data-runtime="recommendation"]:hover [data-runtime="name"] {color:#f0dcb8}
[data-runtime="recommendation"] [data-runtime="blurb"] {
font-size:11px;
line-height:1.5;
color:#8e8377;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}
.site-footer {
max-width:1280px;margin:0 auto;
padding:18px 18px 34px;
display:flex;flex-direction:column;gap:10px;
border-top:1px solid rgba(198,138,54,.16);
}
.footer-disclaimer {
font-size:11.5px;
line-height:1.7;
color:#7d7368;
letter-spacing:.03em;
max-width:80ch;
}
.footer-links {
display:flex;flex-wrap:wrap;gap:6px 14px;
}
.footer-link {
font-size:12px;
letter-spacing:.14em;
color:#b09263;
text-decoration:none;
padding:2px 0;
border-bottom:1px solid transparent;
transition:color .2s,border-color .2s;
}
a[data-contract="footer-home"] {color:#b09263;text-decoration:none}
a[data-contract="footer-home"]:hover {color:#f0dcb8;border-bottom-color:rgba(198,138,54,.6)}
a[data-contract="footer-sitemap"] {color:#9a8b6e;text-decoration:none}
a[data-contract="footer-sitemap"]:hover {color:#f0dcb8;border-bottom-color:rgba(198,138,54,.6)}
.friend-links {
display:flex;flex-wrap:wrap;align-items:center;gap:5px 10px;
padding-top:8px;
border-top:1px dashed rgba(150,140,128,.14);
}
.friend-links-label {
font-size:11px;letter-spacing:.2em;color:#8a7f74;
text-transform:uppercase;
padding-right:6px;
}
a.runtime-friend-link {
font-size:11.5px;
color:#8e8377;
text-decoration:none;
padding:2px 7px;
border:1px solid rgba(150,140,128,.16);
border-radius:2px;
white-space:nowrap;
transition:color .2s,border-color .2s,background .2s;
}
a.runtime-friend-link:hover {color:#e3b877;border-color:rgba(198,138,54,.5);background:rgba(198,138,54,.06)}
.player-shell.is-playing {border-color:rgba(198,138,54,.4)}
.player-shell.is-theater .player-video {border-radius:0}
.player-shell.is-theater {position:relative;z-index:40}
.ctrl-btn:focus-visible, .ctrl-progress:focus-visible, .ctrl-volume:focus-visible, .ctrl-speed:focus-visible, .episode-summary:focus-visible, a:focus-visible {
outline:1px solid rgba(198,138,54,.8);
outline-offset:2px;
}
@media(max-width:1080px){.overview-meta-group {grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.synopsis-panel {grid-column:1 / -1}
.comments-masonry {column-count:2}
.recommendation-grid-5 {grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:860px){.hero-backdrop {grid-template-columns:minmax(0,1fr)}
.hero-portrait-half {padding:16px 16px 0}
.poster-image {max-width:180px}
.hero-overlay-text {padding:6px 20px 24px}
.overview-meta-group {grid-template-columns:minmax(0,1fr)}
.recommendation-grid-4 {grid-template-columns:repeat(3,minmax(0,1fr))}
.recommendation-grid-3 {grid-template-columns:repeat(2,minmax(0,1fr))}
.recommendation-grid-5 {grid-template-columns:repeat(3,minmax(0,1fr))}
.episode-list {grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}}
@media(max-width:640px){.page-main {padding:18px 12px 30px;gap:20px}
.header-inner {padding:8px 12px;gap:6px 10px}
.brand-name {font-size:15px;letter-spacing:.24em;padding-right:10px}
.comments-masonry {column-count:1}
.recommendation-grid-4, .recommendation-grid-3, .recommendation-grid-5 {grid-template-columns:repeat(2,minmax(0,1fr))}
.episode-list {grid-template-columns:minmax(0,1fr)}
.episode-title {white-space:normal}
.player-controls {gap:5px 6px;padding:7px 8px}
.ctrl-progress {flex:1 1 100%}
.site-footer {padding:16px 12px 28px}
.timeline-node {width:170px}}
@media(max-width:420px){.recommendation-grid-4, .recommendation-grid-3, .recommendation-grid-5 {grid-template-columns:minmax(0,1fr)}
.hero-title {letter-spacing:.1em}
.cast-card {width:82px}
.cast-avatar {width:48px;height:48px}}

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}