:root {
  --bg:#11161d;
  --bg-2:#151c25;
  --panel:#1a222d;
  --panel-2:#1e2733;
  --line:#2b3644;
  --line-soft:#232d3a;
  --ink:#e6ebf1;
  --ink-2:#a9b6c6;
  --ink-3:#7d8b9d;
  --amber:#e0a24b;
  --amber-soft:#c98f3f;
  --rust:#b05a3c;
  --cold:#4f7fa8;
  --warm:#d08a55;
}
*, *::before, *::after { box-sizing:border-box; }
html, body { margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; }
body {
  background:
    radial-gradient(1200px 700px at 78% -8%, #1c2733 0%, rgba(28,39,51,0) 62%),
    radial-gradient(900px 620px at 8% 22%, #171f29 0%, rgba(23,31,41,0) 60%),
    var(--bg);
  color:var(--ink);
  font-family:"Helvetica Neue","Hiragino Sans GB","Microsoft YaHei","PingFang SC",Arial,sans-serif;
  font-size:15px;
  line-height:1.45;
  letter-spacing:.01em;
  font-stretch:condensed;
  -webkit-font-smoothing:antialiased;
}
h2, h3, p, ol, ul, dl, dd, dt, figure, figcaption { margin:0; padding:0; }
ol, ul { list-style:none; }
img, video { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
button, input { font:inherit; color:inherit; }
.site-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:10px 18px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#151c25 0%,#121821 100%);
  position:sticky;
  top:0;
  z-index:40;
}
.site-head__brand { display:flex; align-items:center; min-width:0; }
a[data-contract="site-name"].site-head__logo {
  font-size:16px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--amber);
  text-decoration:none;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  padding:2px 0;
  border-bottom:1px solid transparent;
  transition:color .18s ease,border-color .18s ease;
}
a[data-contract="site-name"].site-head__logo:hover {
  color:#f0be74;
  border-bottom-color:#f0be74;
}
.site-head__cats {
  display:flex;
  flex-wrap:wrap;
  gap:6px 8px;
  justify-content:flex-end;
  min-width:0;
}
a.runtime-category {
  display:inline-block;
  white-space:nowrap;
  font-size:12px;
  line-height:1;
  padding:5px 9px;
  border:1px solid var(--line);
  color:var(--ink-2);
  text-decoration:none;
  letter-spacing:.06em;
  background:#1a222d;
  transition:color .16s ease,border-color .16s ease,background .16s ease;
}
a.runtime-category:hover {
  color:var(--amber);
  border-color:var(--amber-soft);
  background:#222c39;
}
.page {
  display:block;
  padding:0 18px 4px;
  max-width:100%;
}
.hero {
  position:relative;
  margin:14px 0 18px;
  padding:0;
}
.hero__body {
  position:relative;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:16px;
  background:
    radial-gradient(120% 90% at 82% 6%, rgba(224,162,75,.14) 0%, rgba(224,162,75,0) 56%),
    linear-gradient(160deg,#18202b 0%,#141a23 52%,#101620 100%);
  border:1px solid var(--line);
  overflow:hidden;
}
.hero__body::after {
  content:"";
  position:absolute;
  inset:auto -10% -30% 42%;
  height:180px;
  background:radial-gradient(closest-side,rgba(224,162,75,.16),rgba(224,162,75,0));
  pointer-events:none;
}
.hero__eyebrow {
  position:relative;
  z-index:1;
  font-size:11px;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--amber);
  font-weight:600;
}
.hero__player-wrap {
  position:relative;
  z-index:1;
  width:100%;
  background:#0c1117;
  border:1px solid var(--line);
  overflow:hidden;
}
.hero__player {
  display:block;
  width:100%;
  background:#0a0e14;
}
.hero__player-wrap.is-theater {
  box-shadow:0 0 0 1px var(--amber-soft), 0 18px 40px rgba(0,0,0,.55);
}
.hero__player-wrap.is-lights-off {
  border-color:#000;
  background:#000;
}
.hero__player-wrap.is-lights-off .hero__player {
  filter:brightness(.86) contrast(1.05);
}
.player-bar {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  padding:8px 9px;
  border-top:1px solid var(--line);
  background:linear-gradient(180deg,#1b242f 0%,#161d26 100%);
}
.player-bar__btn {
  flex:0 0 auto;
  font-size:11.5px;
  line-height:1;
  letter-spacing:.04em;
  padding:6px 9px;
  color:var(--ink-2);
  background:#202a36;
  border:1px solid var(--line);
  cursor:pointer;
  transition:color .15s ease,border-color .15s ease,background .15s ease;
}
.player-bar__btn:hover {
  color:var(--amber);
  border-color:var(--amber-soft);
  background:#26313e;
}
.player-bar__btn:active { transform:translateY(1px); }
.player-bar__range {
  flex:1 1 96px;
  min-width:72px;
  height:4px;
  -webkit-appearance:none;
  appearance:none;
  background:#2b3644;
  border-radius:2px;
  cursor:pointer;
}
.player-bar__range::-webkit-slider-thumb {
  -webkit-appearance:none;
  appearance:none;
  width:11px;
  height:11px;
  border-radius:50%;
  background:var(--amber);
  border:none;
}
.player-bar__range::-moz-range-thumb {
  width:11px;
  height:11px;
  border:none;
  border-radius:50%;
  background:var(--amber);
}
.hero__player-wrap.is-playing .player-bar__btn[data-player-action="play"] {
  color:var(--amber);
  border-color:var(--amber-soft);
}
.hero__player-wrap.is-muted .player-bar__btn[data-player-action="mute"] {
  color:var(--rust);
  border-color:var(--rust);
}
.hero__player-wrap.is-pip .player-bar__btn[data-player-action="pip"], .hero__player-wrap.is-fullscreen .player-bar__btn[data-player-action="fullscreen"], .hero__player-wrap.is-theater .player-bar__btn[data-player-action="theater"], .hero__player-wrap.is-lights-off .player-bar__btn[data-player-action="light"] {
  color:#0f141b;
  background:var(--amber);
  border-color:var(--amber);
}
.ledger {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:14px;
  align-items:start;
  margin-bottom:18px;
}
.overview {
  display:block;
  background:var(--panel);
  border:1px solid var(--line);
  padding:14px;
}
.overview__heading, .timeline__heading, .episodes__heading, .cast__heading, .comments__heading, .recommend__heading {
  font-size:11px;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--amber);
  padding-bottom:7px;
  margin-bottom:10px;
  border-bottom:1px solid var(--line);
}
.overview__title {
  font-size:19px;
  font-weight:600;
  letter-spacing:.01em;
  line-height:1.25;
  color:var(--ink);
  margin-bottom:5px;
}
.overview__tagline {
  font-size:12.5px;
  color:var(--ink-3);
  line-height:1.5;
  margin-bottom:12px;
}
.overview__poster {
  margin-bottom:12px;
  background:#0d1218;
  border:1px solid var(--line-soft);
  overflow:hidden;
}
.overview__poster-img {
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
}
.status {
  padding:10px 0 12px;
  border-top:1px solid var(--line-soft);
  margin-bottom:12px;
}
.status__heading, .details__heading, .synopsis__heading {
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.14em;
  color:var(--ink-2);
  margin-bottom:7px;
}
.status__line {
  font-size:12.5px;
  color:var(--ink-2);
  margin-bottom:8px;
}
.status__num {
  color:var(--amber);
  font-weight:600;
  font-variant-numeric:tabular-nums;
}
.status__bar {
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:3px;
}
.status__seg {
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:10px;
  line-height:1;
  padding:6px 0;
  color:var(--ink-3);
  background:#1c2531;
  border:1px solid var(--line-soft);
  font-variant-numeric:tabular-nums;
}
.status__seg--seen {
  color:#0f141b;
  background:#3d536b;
  border-color:#3d536b;
}
.status__seg--current {
  color:#0f141b;
  background:var(--amber);
  border-color:var(--amber);
  font-weight:700;
}
.details {
  padding:10px 0 12px;
  border-top:1px solid var(--line-soft);
  margin-bottom:12px;
}
.details__list {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:2px 14px;
}
.details__row {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;
  padding:3px 0;
  border-bottom:1px dotted #26303d;
  min-width:0;
}
.details__key {
  flex:0 0 auto;
  font-size:11.5px;
  color:var(--ink-3);
  letter-spacing:.04em;
  white-space:nowrap;
}
.details__val {
  flex:1 1 auto;
  min-width:0;
  font-size:11.5px;
  color:var(--ink);
  text-align:right;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.synopsis {
  padding:10px 0 2px;
  border-top:1px solid var(--line-soft);
}
.synopsis__para {
  font-size:12.5px;
  line-height:1.62;
  color:var(--ink-2);
  padding-left:9px;
  border-left:2px solid var(--line);
  margin-bottom:8px;
}
.synopsis__para:last-child { margin-bottom:0; }
.cast {
  padding:12px 0 0;
  border-top:1px solid var(--line-soft);
  margin-top:12px;
}
.cast__rail {
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding-bottom:6px;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
}
.cast__rail::-webkit-scrollbar { height:6px; }
.cast__rail::-webkit-scrollbar-track { background:#161d26; }
.cast__rail::-webkit-scrollbar-thumb { background:#33404f; }
.cast__card {
  flex:0 0 104px;
  scroll-snap-align:start;
}
.cast__media {
  position:relative;
  display:block;
  background:#0d1218;
  border:1px solid var(--line-soft);
  overflow:hidden;
}
.cast__img {
  display:block;
  width:100%;
  aspect-ratio:3 / 4;
  object-fit:cover;
  filter:saturate(.72) contrast(1.04);
  transition:filter .2s ease,transform .3s ease;
}
.cast__card:hover .cast__img {
  filter:saturate(1) contrast(1.06);
  transform:scale(1.03);
}
.cast__name {
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  padding:14px 6px 5px;
  font-size:11.5px;
  letter-spacing:.06em;
  color:#f2f5f8;
  background:linear-gradient(180deg,rgba(9,13,18,0) 0%,rgba(9,13,18,.86) 62%,rgba(9,13,18,.96) 100%);
}
.timeline {
  background:var(--panel);
  border:1px solid var(--line);
  padding:14px;
}
.timeline__list {
  position:relative;
  padding-left:16px;
}
.timeline__list::before {
  content:"";
  position:absolute;
  left:4px;
  top:4px;
  bottom:4px;
  width:1px;
  background:linear-gradient(180deg,var(--amber-soft) 0%,#2c3846 42%,#2c3846 100%);
}
.timeline__item {
  position:relative;
  padding:0 0 10px 0;
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.timeline__item:last-child { padding-bottom:0; }
.timeline__item::before {
  content:"";
  position:absolute;
  left:-16px;
  top:5px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#39465a;
  box-shadow:0 0 0 2px #1a222d;
}
.timeline__item--seen::before {
  background:var(--amber);
  box-shadow:0 0 0 2px #1a222d, 0 0 8px rgba(224,162,75,.5);
}
.timeline__tc {
  font-size:11px;
  letter-spacing:.14em;
  color:var(--ink-3);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.timeline__item--seen .timeline__tc {
  color:var(--amber);
}
.timeline__label {
  font-size:12.5px;
  line-height:1.5;
  color:var(--ink-2);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  min-width:0;
}
.timeline__item--seen .timeline__label {
  color:var(--ink);
}
.timeline__item:not(.timeline__item--seen) {
  opacity:.66;
}
.episodes {
  margin-bottom:18px;
}
.episodes__grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;
  background:var(--line-soft);
  border:1px solid var(--line);
}
.episode__card {
  position:relative;
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:10px 11px 11px;
  background:var(--panel);
  min-width:0;
  transition:background .18s ease;
}
.episode__card:hover {
  background:var(--panel-2);
}
.episode__no {
  font-size:10.5px;
  letter-spacing:.2em;
  color:var(--ink-3);
  font-variant-numeric:tabular-nums;
  text-transform:uppercase;
}
.episode__title {
  font-size:13.5px;
  font-weight:600;
  line-height:1.3;
  color:var(--ink);
  letter-spacing:.01em;
}
.episode__summary {
  font-size:11.5px;
  line-height:1.5;
  color:var(--ink-3);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.episode__duration {
  margin-top:2px;
  font-size:10.5px;
  letter-spacing:.1em;
  color:var(--amber);
  font-variant-numeric:tabular-nums;
  max-height:0;
  opacity:0;
  overflow:hidden;
  transition:max-height .22s ease,opacity .22s ease;
}
.episode__card:hover .episode__duration, .episode__card:focus-within .episode__duration {
  max-height:22px;
  opacity:1;
}
.episode__card--current {
  background:linear-gradient(180deg,#232c38 0%,#1c2531 100%);
  box-shadow:inset 2px 0 0 var(--amber);
}
.episode__card--current .episode__no { color:var(--amber); }
.episode__card--current .episode__title { color:#fdf3e3; }
.episode__card--current .episode__summary { color:var(--ink-2); }
.episode__card--current .episode__duration { max-height:22px; opacity:1; }
.recommend {
  margin-bottom:16px;
  padding:12px;
  background:var(--panel);
  border:1px solid var(--line);
}
.recommend__heading {
  font-size:10.5px;
  letter-spacing:.18em;
  margin-bottom:9px;
}
.recommend__list {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.recommend__item { min-width:0; }
a[data-runtime="recommendation"] {
  display:flex;
  flex-direction:column;
  gap:5px;
  height:100%;
  padding:6px;
  background:#1c2531;
  border:1px solid var(--line-soft);
  color:var(--ink-2);
  text-decoration:none;
  transition:border-color .18s ease,background .18s ease,transform .18s ease;
}
a[data-runtime="recommendation"]:hover {
  background:#222c39;
  border-color:var(--amber-soft);
  transform:translateY(-1px);
}
a[data-runtime="recommendation"] img {
  width:100%;
  aspect-ratio:16 / 10;
  height:auto;
  object-fit:cover;
  background:#0d1218;
  filter:saturate(.78);
  transition:filter .2s ease;
}
a[data-runtime="recommendation"]:hover img {
  filter:saturate(1);
}
a[data-runtime="recommendation"] [data-runtime="name"] {
  display:block;
  font-size:12.5px;
  font-weight:600;
  line-height:1.3;
  color:var(--ink);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
a[data-runtime="recommendation"] [data-runtime="blurb"] {
  display:-webkit-box;
  font-size:11px;
  line-height:1.45;
  color:var(--ink-3);
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.comments {
  margin-bottom:18px;
}
.comments__list {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  align-items:start;
}
.comment__item {
  position:relative;
  padding:9px 11px 10px 14px;
  background:var(--panel);
  border:1px solid var(--line-soft);
  min-width:0;
}
.comment__item::before {
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:3px;
  background:var(--line);
}
.comment__item--warm::before { background:var(--warm); }
.comment__item--cold::before { background:var(--cold); }
.comment__item--rust::before { background:var(--rust); }
.comment__nick {
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.05em;
  color:var(--ink);
  margin-bottom:4px;
}
.comment__item--warm .comment__nick { color:#e0a06a; }
.comment__item--cold .comment__nick { color:#8fb3d1; }
.comment__item--rust .comment__nick { color:#d07d59; }
.comment__text {
  font-size:12px;
  line-height:1.55;
  color:var(--ink-2);
}
.site-foot {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:10px;
  padding:14px 18px 20px;
  border-top:1px solid var(--line);
  background:#101620;
}
.site-foot__disclaimer {
  font-size:11px;
  line-height:1.6;
  color:var(--ink-3);
  max-width:78ch;
}
.site-foot__links {
  display:flex;
  flex-wrap:wrap;
  gap:6px 14px;
}
a[data-contract="footer-home"], a[data-contract="footer-sitemap"] {
  font-size:11.5px;
  letter-spacing:.08em;
  color:var(--ink-2);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .16s ease,border-color .16s ease;
}
a[data-contract="footer-home"]:hover, a[data-contract="footer-sitemap"]:hover {
  color:var(--amber);
  border-bottom-color:var(--amber);
}
.site-foot__friends {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:5px 10px;
  padding-top:8px;
  border-top:1px solid var(--line-soft);
}
.site-foot__friends-label {
  font-size:10.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin-right:2px;
}
a.runtime-friend-link {
  font-size:11px;
  letter-spacing:.04em;
  color:var(--ink-2);
  text-decoration:none;
  padding:2px 6px;
  border:1px solid var(--line-soft);
  background:#1a222d;
  white-space:nowrap;
  transition:color .16s ease,border-color .16s ease;
}
a.runtime-friend-link:hover {
  color:var(--rust);
  border-color:var(--rust);
}
@media (min-width:620px){.details__list { grid-template-columns:repeat(3,minmax(0,1fr)); }
.recommend__list { grid-template-columns:repeat(3,minmax(0,1fr)); }
.comments__list { grid-template-columns:repeat(2,minmax(0,1fr)); }
.cast__card { flex-basis:118px; }}
@media (min-width:900px){.page { padding:0 26px 4px; }
.site-head { padding:10px 26px; }
.site-foot { padding:14px 26px 22px; }
.ledger {
    grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);
    gap:16px;
  }
.hero { margin:18px 0 20px; }
.hero__body { padding:20px 22px 18px; }
.overview {
    display:grid;
    grid-template-columns:minmax(0,190px) minmax(0,1fr);
    grid-template-areas:
      "head head"
      "poster title"
      "poster tagline"
      "poster status"
      "poster details"
      "poster synopsis"
      "cast cast";
    column-gap:18px;
    row-gap:0;
    align-items:start;
  }
.overview__heading { grid-area:head; margin-bottom:12px; }
.overview__poster { grid-area:poster; margin-bottom:0; position:sticky; top:64px; }
.overview__title { grid-area:title; }
.overview__tagline { grid-area:tagline; border-bottom:1px solid var(--line-soft); padding-bottom:10px; margin-bottom:0; }
.status { grid-area:status; padding:10px 0; margin-bottom:0; border-top:none; }
.details { grid-area:details; padding:10px 0; margin-bottom:0; }
.synopsis { grid-area:synopsis; border-top:1px solid var(--line-soft); padding-top:10px; }
.cast { grid-area:cast; margin-top:14px; }
.details__list { grid-template-columns:repeat(2,minmax(0,1fr)); }
.timeline__label { font-size:12px; }
.episodes__grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.recommend {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,2.4fr);
    gap:14px;
    align-items:start;
  }
.recommend__heading {
    margin-bottom:0;
    border-bottom:none;
    padding-bottom:0;
    border-right:1px solid var(--line-soft);
    padding-right:12px;
    position:sticky;
    top:64px;
  }
.recommend__list { grid-template-columns:repeat(3,minmax(0,1fr)); }
.comments__list { grid-template-columns:repeat(3,minmax(0,1fr)); }}
@media (min-width:1180px){.page { padding:0 34px 4px; }
.site-head { padding:11px 34px; }
.site-foot { padding:16px 34px 24px; }
.ledger { grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); }
.episodes__grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.recommend__list { grid-template-columns:repeat(4,minmax(0,1fr)); }
.recommend--two .recommend__list { grid-template-columns:repeat(4,minmax(0,1fr)); }
.recommend--three .recommend__list { grid-template-columns:repeat(3,minmax(0,1fr)); }
.comments__list { gap:9px; }}
@media (max-width:640px){body { font-size:14px; }
.page { padding:0 12px 4px; }
.site-head { padding:9px 12px; }
.site-foot { padding:12px 12px 18px; }
.hero__body { padding:12px; }
.hero__eyebrow { font-size:10px; letter-spacing:.2em; }
.player-bar { gap:5px; padding:7px; }
.player-bar__btn { font-size:11px; padding:5px 7px; }
.player-bar__range { flex:1 1 100%; }
.overview { padding:11px; }
.overview__title { font-size:17px; }
.details__list { grid-template-columns:repeat(1,minmax(0,1fr)); }
.status__bar { grid-template-columns:repeat(6,minmax(0,1fr)); }
.episodes__grid { grid-template-columns:repeat(1,minmax(0,1fr)); }
.episode__summary { -webkit-line-clamp:3; }
.recommend__list { grid-template-columns:repeat(1,minmax(0,1fr)); }
.comments__list { grid-template-columns:repeat(1,minmax(0,1fr)); }
.cast__card { flex-basis:92px; }
.timeline__label { white-space:normal; }}
@media (min-width:641px) and (max-width:899px){.episodes__grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.recommend__list { grid-template-columns:repeat(2,minmax(0,1fr)); }
.comments__list { 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}
