*, *::before, *::after {box-sizing:border-box;margin:0;padding:0}
html {-webkit-text-size-adjust:100%;text-size-adjust:100%}
body {
  background:#0b0c0e;
  color:#c9ced4;
  font-family:"Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  font-size:14px;
  line-height:1.55;
  letter-spacing:-0.01em;
  font-stretch:condensed;
  min-height:100vh;
  overflow-x:hidden;
}
img, video {display:block;max-width:100%}
ul, ol {list-style:none}
a {color:inherit;text-decoration:none}
button, input, select {font:inherit;color:inherit;letter-spacing:inherit}
h1, h2, h3 {font-weight:600;letter-spacing:-0.02em;line-height:1.2}
.site-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  padding:10px clamp(12px,3vw,30px);
  background:#0d0e11;
  border-bottom:1px solid #1c1f24;
  position:sticky;
  top:0;
  z-index:40;
}
.header-brand {display:flex;align-items:center}
a[data-contract="site-name"].brand-link {
  color:#e9edf1;
  text-decoration:none;
  font-size:15px;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  padding:4px 10px;
  border:1px solid #2a2e35;
  border-left:3px solid #8d1220;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%);
}
a[data-contract="site-name"].brand-link:hover {color:#fff;border-left-color:#c8182b}
.category-nav {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
}
a.runtime-category {
  display:inline-block;
  color:#9aa3ad;
  text-decoration:none;
  white-space:nowrap;
  font-size:12px;
  letter-spacing:0.04em;
  padding:3px 9px;
  border:1px solid #23272e;
  background:#101216;
  transition:color .15s,border-color .15s,background .15s;
}
a.runtime-category:hover {
  color:#f2f5f8;
  border-color:#8d1220;
  background:#17191e;
}
.page-main {
  width:100%;
  padding:0 clamp(10px,2.6vw,28px) 26px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.hero-section {
  position:relative;
  margin:0 calc(-1 * clamp(10px,2.6vw,28px));
  padding:clamp(26px,6vw,60px) clamp(14px,4vw,44px) clamp(20px,4vw,34px);
  background:
    radial-gradient(120% 90% at 78% 12%,rgba(141,18,32,.30) 0%,rgba(141,18,32,0) 55%),
    radial-gradient(90% 70% at 18% 88%,rgba(40,120,150,.20) 0%,rgba(40,120,150,0) 60%),
    repeating-linear-gradient(102deg,rgba(255,255,255,.028) 0 1px,rgba(255,255,255,0) 1px 42px),
    linear-gradient(180deg,#050607 0%,#0c0e11 62%,#08090b 100%);
  border-bottom:1px solid #1a1d22;
  overflow:hidden;
}
.hero-section::before {
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:46%;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.045) 0 1px,rgba(255,255,255,0) 1px 88px),
    linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0) 70%);
  transform:perspective(340px) rotateX(66deg);
  transform-origin:bottom center;
  pointer-events:none;
  opacity:.7;
}
.hero-silhouette {
  position:relative;
  z-index:2;
  max-width:640px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.hero-silhouette::before, .hero-silhouette::after {
  content:"";
  position:absolute;
  top:50%;
  width:clamp(90px,17vw,210px);
  height:clamp(130px,26vw,300px);
  background:linear-gradient(180deg,rgba(20,22,26,.96),rgba(6,7,9,.98));
  border:1px solid rgba(255,255,255,.06);
  z-index:-1;
  pointer-events:none;
}
.hero-silhouette::before {
  right:calc(100% + 14px);
  transform:translateY(-50%);
  clip-path:polygon(100% 0,72% 0,58% 16%,54% 34%,58% 52%,70% 74%,100% 100%);
}
.hero-silhouette::after {
  left:calc(100% + 14px);
  transform:translateY(-50%) scaleX(-1);
  clip-path:polygon(100% 0,72% 0,58% 16%,54% 34%,58% 52%,70% 74%,100% 100%);
}
.hero-title {
  font-size:clamp(21px,4.6vw,40px);
  color:#f4f7fa;
  letter-spacing:-0.03em;
  text-shadow:0 0 26px rgba(141,18,32,.55);
}
.hero-tagline {
  font-size:clamp(12px,1.6vw,15px);
  color:#c8182b;
  letter-spacing:0.14em;
  padding-left:12px;
  border-left:2px solid #8d1220;
}
.hero-seo-desc {
  position:relative;
  z-index:2;
  margin-top:16px;
  max-width:760px;
  font-size:12.5px;
  line-height:1.75;
  color:#7c848e;
  border-top:1px solid #1c1f24;
  padding-top:12px;
}
.player-section {
  display:flex;
  flex-direction:column;
  gap:8px;
  background:#0e1013;
  border:1px solid #1d2026;
  padding:10px;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%);
}
.player-wrapper {
  position:relative;
  width:100%;
  background:#000;
  border:1px solid #23272e;
  overflow:hidden;
}
.player-wrapper video {width:100%;display:block;background:#000}
.player-controls {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
}
.ctrl-btn {
  background:#14171c;
  border:1px solid #262b32;
  color:#b7c0c9;
  font-size:12px;
  letter-spacing:0.04em;
  padding:5px 11px;
  cursor:pointer;
  transition:background .15s,color .15s,border-color .15s;
}
.ctrl-btn:hover {background:#1b1f25;color:#f2f5f8;border-color:#3a4048}
.ctrl-btn.is-active {background:#8d1220;border-color:#c8182b;color:#fff}
.ctrl-btn.is-playing {background:#8d1220;border-color:#c8182b;color:#fff}
.ctrl-btn.is-muted {background:#1b1f25;border-color:#8d1220;color:#e05a6a}
.ctrl-btn.is-fullscreen {background:#8d1220;border-color:#c8182b;color:#fff}
.ctrl-progress {
  flex:1 1 160px;
  min-width:120px;
  height:4px;
  -webkit-appearance:none;
  appearance:none;
  background:#23272e;
  cursor:pointer;
  border:none;
}
.ctrl-progress::-webkit-slider-thumb {
  -webkit-appearance:none;
  appearance:none;
  width:12px;
  height:12px;
  background:#c8182b;
  border-radius:0;
  border:1px solid #f0f3f6;
}
.ctrl-progress::-moz-range-thumb {
  width:12px;height:12px;background:#c8182b;border:1px solid #f0f3f6;border-radius:0;
}
.ctrl-volume {
  flex:0 1 90px;
  min-width:70px;
  height:4px;
  -webkit-appearance:none;
  appearance:none;
  background:#23272e;
  cursor:pointer;
  border:none;
}
.ctrl-volume::-webkit-slider-thumb {
  -webkit-appearance:none;appearance:none;width:10px;height:10px;background:#5f6a76;border-radius:0;
}
.ctrl-volume::-moz-range-thumb {width:10px;height:10px;background:#5f6a76;border-radius:0;border:none}
.ctrl-speed {
  background:#14171c;
  border:1px solid #262b32;
  color:#b7c0c9;
  font-size:12px;
  padding:5px 6px;
  cursor:pointer;
}
body.is-lights-off {background:#000}
body.is-lights-off .page-main {background:#000}
body.is-lights-off .hero-section {filter:brightness(.35)}
.player-wrapper.is-theater {
  box-shadow:0 0 0 1px #8d1220,0 0 40px rgba(141,18,32,.35);
}
.movie-overview {
  display:grid;
  grid-template-columns:minmax(0,230px) minmax(0,1fr);
  gap:18px;
  align-items:start;
  background:#0e1013;
  border:1px solid #1d2026;
  padding:14px;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%);
}
.overview-poster-col {
  align-self:start;
  width:100%;
}
.poster-img {
  width:100%;
  height:auto;
  object-fit:cover;
  border:1px solid #262b32;
  filter:grayscale(.35) contrast(1.08);
}
.overview-info-col {
  display:flex;
  flex-direction:column;
  gap:12px;
  min-width:0;
}
.overview-title {
  font-size:clamp(16px,2.2vw,22px);
  color:#f2f5f8;
  letter-spacing:-0.02em;
  padding-bottom:8px;
  border-bottom:1px solid #1d2026;
}
.overview-tagline {
  font-size:12.5px;
  color:#8d949d;
  letter-spacing:0.06em;
  margin-top:-4px;
}
.cast-section {display:flex;flex-direction:column;gap:8px}
.cast-heading, .synopsis-heading, .status-heading, .details-heading {
  font-size:12px;
  color:#e9edf1;
  letter-spacing:0.16em;
  text-transform:uppercase;
  padding:3px 8px;
  border:1px solid #262b32;
  border-left:2px solid #8d1220;
  align-self:flex-start;
  font-weight:600;
}
.cast-list {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.cast-card {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  width:72px;
}
.cast-avatar {
  width:56px;
  height:56px;
  background:#15181d;
  border:1px solid #262b32;
  filter:grayscale(1) contrast(1.1);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%);
}
.av-1 {background:linear-gradient(150deg,#3a4048,#101216)}
.av-2 {background:linear-gradient(150deg,#4a3238,#14171c)}
.av-3 {background:linear-gradient(150deg,#2f3a42,#0f1114)}
.av-4 {background:linear-gradient(150deg,#3d3a33,#111316)}
.av-5 {background:linear-gradient(150deg,#353b46,#0d0f12)}
.cast-name {
  font-size:11.5px;
  color:#aab2bb;
  letter-spacing:0.02em;
  text-align:center;
  white-space:nowrap;
}
.synopsis-section {display:flex;flex-direction:column;gap:8px}
.synopsis-body {
  display:flex;
  flex-direction:column;
  gap:6px;
  padding-left:4px;
  border-left:1px solid #1d2026;
}
.synopsis-para {
  font-size:12.5px;
  line-height:1.7;
  color:#8b939d;
  padding:0 10px;
}
.synopsis-para:first-child {color:#b9c1ca}
.episode-status {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  padding:8px 0;
  border-top:1px solid #1d2026;
  border-bottom:1px solid #1d2026;
}
.status-heading {margin-right:4px}
.status-current {
  font-size:13px;
  font-weight:700;
  color:#fff;
  letter-spacing:0.04em;
  padding:2px 10px;
  background:#8d1220;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%);
}
.status-total {font-size:12px;color:#7c848e;letter-spacing:0.04em}
.details-section {display:flex;flex-direction:column;gap:8px}
.details-list {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:0 14px;
}
.detail-row {
  display:flex;
  align-items:baseline;
  gap:8px;
  padding:5px 0;
  border-bottom:1px solid #16191d;
  min-width:0;
}
.detail-key {
  flex:0 0 auto;
  font-size:11.5px;
  color:#666e78;
  letter-spacing:0.06em;
  white-space:nowrap;
}
.detail-val {
  flex:1 1 auto;
  min-width:0;
  font-size:12.5px;
  color:#c2cad3;
  text-align:right;
}
.timeline-section {
  display:flex;
  flex-direction:column;
  gap:10px;
  background:#0e1013;
  border:1px solid #1d2026;
  padding:14px;
}
.timeline-heading, .episodes-heading, .comments-heading, .region-heading {
  font-size:13px;
  color:#eef2f6;
  letter-spacing:0.14em;
  text-transform:uppercase;
  padding:4px 12px;
  border:1px solid #2a2e35;
  align-self:flex-start;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%);
}
.timeline-list {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:0 22px;
}
.timeline-item {
  position:relative;
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:7px 0 7px 18px;
  border-left:1px solid #23272e;
}
.timeline-item::before {
  content:"";
  position:absolute;
  left:-2.5px;
  top:14px;
  width:5px;
  height:5px;
  background:#c8182b;
  box-shadow:0 0 8px rgba(200,24,43,.9);
  transform:rotate(45deg);
}
.timeline-timecode {
  font-size:11px;
  letter-spacing:0.1em;
  color:#c8182b;
  font-weight:700;
}
.timeline-label {
  font-size:12.5px;
  color:#a7afb8;
  line-height:1.5;
}
.episodes-section {
  display:flex;
  flex-direction:column;
  gap:10px;
  background:#0e1013;
  border:1px solid #1d2026;
  padding:14px;
}
.episodes-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  align-items:start;
}
.episode-card {
  display:flex;
  flex-direction:column;
  gap:5px;
  background:#111418;
  border:1px solid #1f2429;
  border-top:2px solid #2a2e35;
  padding:10px 11px;
  transition:border-color .15s,background .15s;
}
.episode-card:hover {border-color:#3a4048;background:#14181d}
.episode-number {
  font-size:10.5px;
  letter-spacing:0.14em;
  color:#6f7883;
}
.episode-title {
  font-size:14px;
  color:#eef2f6;
  letter-spacing:0.02em;
}
.episode-summary {
  font-size:12px;
  line-height:1.6;
  color:#868e98;
}
.episode-duration {
  font-size:11px;
  color:#5f6873;
  letter-spacing:0.06em;
  margin-top:2px;
  padding-top:5px;
  border-top:1px solid #1a1e23;
}
.episode-card--current {
  background:#15181d;
  border-color:#8d1220;
  border-top-color:#c8182b;
  box-shadow:0 0 0 1px rgba(141,18,32,.35),0 0 22px rgba(141,18,32,.18);
}
.episode-card--current .episode-number {color:#c8182b}
.episode-card--current .episode-title {color:#fff}
.episode-card--current .episode-summary {color:#b8c0c9}
.recommend-region {
  display:flex;
  flex-direction:column;
  gap:9px;
  background:#0e1013;
  border:1px solid #1d2026;
  padding:13px;
}
.recommend-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:8px;
  align-items:start;
}
a.rec-card {
  position:relative;
  display:flex;
  flex-direction:column;
  gap:5px;
  background:#111418;
  border:1px solid #1f2429;
  border-left:3px solid #2a2e35;
  padding:7px;
  color:#a7afb8;
  text-decoration:none;
  transition:transform .15s,border-color .15s,background .15s;
}
a.rec-card:hover {
  transform:translateY(-2px);
  background:#14181d;
  border-color:#3a4048;
}
a.rec-card [data-runtime="name"] {
  font-size:12.5px;
  color:#e9edf1;
  letter-spacing:0.01em;
  line-height:1.3;
}
a.rec-card [data-runtime="blurb"] {
  font-size:11px;
  line-height:1.5;
  color:#7c848e;
}
[data-runtime="recommendation"] img {
  width:100%;
  height:auto;
  aspect-ratio:16 / 10;
  object-fit:cover;
  background:#15181d;
  filter:grayscale(.5) contrast(1.06);
}
.region-1 a.rec-card {border-left-color:#8d1220}
.region-1 a.rec-card:hover {border-left-color:#c8182b}
.region-2 a.rec-card {border-left-color:#2c5f74}
.region-2 a.rec-card:hover {border-left-color:#3f8aa8}
.region-3 a.rec-card {border-left-color:#6b5a2e}
.region-3 a.rec-card:hover {border-left-color:#a8894a}
.region-1 .region-heading {border-left:2px solid #8d1220}
.region-2 .region-heading {border-left:2px solid #2c5f74}
.region-3 .region-heading {border-left:2px solid #6b5a2e}
.comments-section {
  display:flex;
  flex-direction:column;
  gap:10px;
  background:#0e1013;
  border:1px solid #1d2026;
  padding:14px;
}
.comment-list {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:8px;
  align-items:start;
}
.comment-item {
  display:flex;
  flex-direction:column;
  gap:5px;
  border:1px solid #1f2429;
  padding:9px 11px;
  background:#101317;
}
.comment-nickname {
  font-size:11.5px;
  color:#c8182b;
  letter-spacing:0.06em;
  font-weight:700;
}
.comment-text {
  font-size:12.5px;
  line-height:1.65;
  color:#8f97a1;
}
.site-footer {
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:18px clamp(12px,3vw,30px) 26px;
  background:#0a0b0d;
  border-top:1px solid #1c1f24;
}
.footer-nav {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
a[data-contract="footer-home"].footer-link, a[data-contract="footer-sitemap"].footer-link {
  color:#9aa3ad;
  text-decoration:none;
  font-size:12px;
  letter-spacing:0.06em;
  padding:4px 12px;
  border:1px solid #23272e;
  transition:color .15s,border-color .15s;
}
a[data-contract="footer-home"].footer-link:hover, a[data-contract="footer-sitemap"].footer-link:hover {
  color:#fff;
  border-color:#8d1220;
}
.friend-links {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:7px;
}
.friend-links-label {
  font-size:11px;
  color:#5f6873;
  letter-spacing:0.14em;
  text-transform:uppercase;
  margin-right:2px;
}
a.runtime-friend-link {
  color:#7c848e;
  text-decoration:none;
  font-size:11.5px;
  letter-spacing:0.02em;
  padding:2px 8px;
  border:1px solid #1d2026;
  background:#101216;
  transition:color .15s,border-color .15s;
}
a.runtime-friend-link:hover {color:#c8182b;border-color:#3a2026}
.footer-disclaimer {
  font-size:11px;
  line-height:1.7;
  color:#565e68;
  max-width:820px;
  border-top:1px solid #16191d;
  padding-top:10px;
}
@media (max-width:900px){.movie-overview {
    grid-template-columns:minmax(0,180px) minmax(0,1fr);
    gap:14px;
  }
.episodes-grid {grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:680px){body {font-size:13.5px}
.site-header {padding:9px 12px;gap:8px}
.movie-overview {
    grid-template-columns:minmax(0,1fr);
    gap:12px;
    padding:12px;
  }
.overview-poster-col {
    max-width:210px;
  }
.episodes-grid {grid-template-columns:minmax(0,1fr)}
.timeline-list {grid-template-columns:minmax(0,1fr)}
.comment-list {grid-template-columns:minmax(0,1fr)}
.recommend-grid {grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
.page-main {padding:0 12px 20px;gap:12px}
.hero-section {margin:0 -12px;padding:22px 12px 18px}
.hero-silhouette::before, .hero-silhouette::after {display:none}
.player-controls {gap:5px}
.ctrl-btn {padding:5px 9px;font-size:11.5px}
.ctrl-progress {flex:1 1 100%;min-width:0}}
@media (max-width:400px){.recommend-grid {grid-template-columns:repeat(auto-fill,minmax(118px,1fr))}
.cast-card {width:62px}
.cast-avatar {width:48px;height:48px}}
@media (min-width:1100px){.recommend-region.region-1 {
    margin-right:clamp(0px,4vw,60px);
  }
.recommend-region.region-2 {
    margin-left:clamp(0px,6vw,90px);
    margin-right:clamp(0px,2vw,30px);
  }
.recommend-region.region-3 {
    margin-left:clamp(0px,2vw,30px);
    margin-right:clamp(0px,7vw,110px);
  }
.comments-section {
    margin-left:clamp(0px,2vw,34px);
  }}

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}
